/*
 * GuitarVivo Academy — Content Grid (course / lesson library) re-skin.
 * The PARENT page-grid.php keeps running, so every Grid Option (content type,
 * categories, columns, ordering, MixItUp filtering, pagination, protection)
 * still works — this file only restyles its output to the new design.
 * Dark by default · light via html[data-theme="light"] · matches device when unset.
 */

:root{
  --bg:#0a1120; --bg-2:#0d1626; --panel:#111b2e; --panel-2:#16223a;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --ink:#f1f5f9; --text:#c7d2e0; --muted:#93a3b8; --faint:#6b7c92;
  --cyan:#72d5ff; --cyan-bright:#a5e6ff; --cyan-deep:#26b4ef; --cyan-ink:#72d5ff;
  --blue:#1a4e8a; --ok:#36d399; --track:rgba(255,255,255,.08);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#e9eef4; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3f6fb;
    --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.15);
    --ink:#0f172a; --text:#3a4a61; --muted:#647387; --faint:#94a1b3;
    --cyan-deep:#1295d6; --cyan-ink:#0e84c4; --ok:#12a05c; --track:rgba(15,23,42,.09);
  }
}
html[data-theme="light"]{
  --bg:#e9eef4; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3f6fb;
  --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.15);
  --ink:#0f172a; --text:#3a4a61; --muted:#647387; --faint:#94a1b3;
  --cyan-deep:#1295d6; --cyan-ink:#0e84c4; --ok:#12a05c; --track:rgba(15,23,42,.09);
}

/* base */
body.gva-grid *{box-sizing:border-box}
body.gva-grid{background:var(--bg);color:var(--text);font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease;margin:0}
body.gva-grid a{text-decoration:none;color:inherit}
body.gva-grid img{max-width:100%;height:auto}
body.gva-grid .oh{overflow:hidden}

/* page title / hero */
.gva-grid header.page_title{padding:34px 0 6px}
.gva-grid header.page_title .inner,
.gva-grid .content-grid.inner,
.gva-grid #content>.inner{max-width:1340px;margin:0 auto;padding:0 36px}
.gva-grid header.page_title h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(28px,4vw,46px);line-height:1.05;color:var(--ink);margin:0}
.gva-grid header.page_title .course_byline,
.gva-grid header.page_title p{color:var(--muted);font-size:15px;margin-top:10px;max-width:60ch}
.gva-grid .memberoni_breadcrumbs{font-size:12.5px;color:var(--muted)}
.gva-grid .memberoni_breadcrumbs a:hover{color:var(--cyan-ink)}

/* any Elementor / authored intro the page renders keeps readable colours */
.gva-grid #content{color:var(--text)}

/* ===== filter bar (MixItUp controls) ===== */
.gva-grid .mixitup-page-list,
.gva-grid .library-nav-links,
.gva-grid .grid-filters{max-width:1340px;margin:18px auto 6px;padding:0 36px;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.gva-grid .mixitup-page-list a,
.gva-grid .mixitup-page-list button,
.gva-grid .mixitup-page-list li>*,
.gva-grid .library-nav-links a,
.gva-grid [data-filter]{display:inline-flex;align-items:center;gap:7px;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.6px;text-transform:uppercase;font-weight:500;color:var(--text);background:var(--panel);border:1px solid var(--line-2);border-radius:30px;padding:8px 16px;cursor:pointer;transition:.15s}
.gva-grid .mixitup-page-list a:hover,
.gva-grid .library-nav-links a:hover,
.gva-grid [data-filter]:hover{border-color:var(--cyan-ink);color:var(--ink)}
.gva-grid .mixitup-page-list .mixitup-control-active,
.gva-grid .mixitup-page-list .active,
.gva-grid [data-filter].mixitup-control-active,
.gva-grid [data-filter].active{background:var(--cyan);color:#04141b;border-color:transparent}

/* ===== grid ===== */
.gva-grid .content-grid{padding-top:22px;padding-bottom:80px}
.gva-grid .grid_wrap{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gva-grid .grid_wrap.grid_items_2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gva-grid .grid_wrap.grid_items_3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gva-grid .grid_wrap.grid_items_4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gva-grid .grid_wrap.grid_items_5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gva-grid .grid_wrap.grid_items_6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1040px){.gva-grid .grid_wrap[class*=grid_items_]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gva-grid .grid_wrap,.gva-grid .grid_wrap[class*=grid_items_]{grid-template-columns:minmax(0,1fr)}}
.gva-grid .grid_wrap::after{content:none}     /* drop legacy clearfix artefacts */

/* ===== card ===== */
.gva-grid .course-listing{margin:0;float:none;width:auto;list-style:none}
.gva-grid .course-wrap{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.gva-grid .course-wrap:hover{transform:translateY(-3px);border-color:rgba(114,213,255,.45);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.gva-grid .course-thumb{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--panel-2)}
.gva-grid .course-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,28,0) 45%,rgba(8,16,28,.55))}
.gva-grid .course-link{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden;white-space:nowrap}
.gva-grid .course_completion{position:absolute;left:12px;bottom:12px;z-index:3;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;letter-spacing:.4px;color:#04141b;background:var(--cyan);border-radius:30px;padding:4px 11px}
.gva-grid .course-content{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}
.gva-grid .course-content h4{font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;line-height:1.2;color:var(--ink);margin:0}
.gva-grid .course-content h4 a:hover{color:var(--cyan-ink)}
.gva-grid .course-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:12.5px;font-style:normal;margin:0}
.gva-grid .course-meta span{display:inline-flex;align-items:center;gap:6px}
.gva-grid .course-meta i,.gva-grid .course-meta .fa{color:var(--cyan-ink)}
.gva-grid .course-excerpt,.gva-grid .course-content p{color:var(--text);font-size:14px;margin:0}
.gva-grid .course-content .button{margin-top:auto;align-self:flex-start;width:auto;display:inline-flex;align-items:center;gap:8px;font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:13px;padding:11px 18px;border-radius:10px;background:var(--cyan);color:#04141b;border:1px solid transparent;transition:.15s}
.gva-grid .course-content .button:hover{background:var(--cyan-bright);transform:translateY(-1px)}
.gva-grid .course-content .button.w-onethird,.gva-grid .course-content .button.w-half,.gva-grid .course-content .button.w-full{width:auto}
/* a "soon"/locked card variant if the parent adds it */
.gva-grid .course-listing.coming-soon .course-wrap,.gva-grid .course-listing.locked .course-wrap{opacity:.72}
.gva-grid .course-soon,.gva-grid .coming-soon-text{position:absolute;right:12px;top:12px;z-index:3;font-family:'Oswald';font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink);background:rgba(8,16,28,.6);border:1px solid var(--line-2);border-radius:30px;padding:4px 10px}

/* ===== category sections (if a page groups by category) ===== */
.gva-grid .course-category-title,.gva-grid .cat-row-title,.gva-grid .category-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;color:var(--ink);max-width:1340px;margin:30px auto 14px;padding:0 36px}
.gva-grid .cat-row,.gva-grid .category-section{max-width:1340px;margin:0 auto;padding:0 36px}

/* ===== category sidebar layout (col-quarter) if enabled ===== */
@media(min-width:1041px){
  .gva-grid .content-grid:has(.grid-sidebar){display:grid;grid-template-columns:1fr 280px;gap:32px}
  .gva-grid .col-threequarter{width:auto;float:none}
  .gva-grid .col-quarter,.gva-grid .grid-sidebar{width:auto;float:none}
}
.gva-grid .grid-sidebar{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.gva-grid .grid-sidebar a{display:block;padding:8px 6px;color:var(--text);border-radius:8px}
.gva-grid .grid-sidebar a:hover{color:var(--ink);background:var(--panel-2)}

/* ===== pagination ===== */
.gva-grid .pagination,.gva-grid .grid-pagination,.gva-grid .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;max-width:1340px;margin:34px auto 0;padding:0 36px}
.gva-grid .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;color:var(--text);font-family:'Oswald';font-weight:500}
.gva-grid .page-numbers:hover{border-color:var(--cyan-ink);color:var(--ink)}
.gva-grid .page-numbers.current{background:var(--cyan);color:#04141b;border-color:transparent}

/* ===== states ===== */
.gva-grid .lib-empty,.gva-grid .no-results,.gva-grid .grid-empty{max-width:1340px;margin:30px auto;padding:40px 36px;text-align:center;color:var(--muted)}
.gva-grid .unauthorized-message,.gva-grid .protected-message{max-width:760px;margin:24px auto;padding:18px 22px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);color:var(--text)}
.gva-grid .unauthorized-message a,.gva-grid .protected-message a{color:var(--cyan-ink);font-weight:600}