/* ===================================================================
   G-SONIQUE V2 — video index (/video-tutorials)

   ONLY what css/v2-catalog.css does not already provide. The facade
   itself — .video-wrap, .video-facade, .video-play and their hover and
   focus states — is defined there and reused as-is, so a change to the
   play button on the product pages changes it here too. Loaded AFTER
   v2-catalog.css, which is where the tokens come from.
   =================================================================== */

/* ---------- grid ----------
   v2-catalog.css has .video-grid, but it is hard-wired to two columns
   for the product pages. An index of 55 videos wants three, and wants
   to collapse by available width rather than at one breakpoint. */
.vt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2.6rem;
}

/* ---------- card ---------- */
.vcard {
    display: flex;
    flex-direction: column;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: .75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vcard:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--gs-accent-rgb), .4);
    box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--gs-accent-rgb), .12);
}

/* The facade sits at the top of a card, so its corners are square at the
   bottom and it carries the divider to the body. */
.vcard .vthumb {
    border-radius: .75rem .75rem 0 0;
    border: 0;
    border-bottom: 1px solid var(--gs-border);
}
.vcard .vthumb img { transition: transform .35s ease; }
.vcard:hover .vthumb img { transform: scale(1.03); }

/* 62px is right on a half-width product-page embed and too big on a
   three-up card. */
.vcard .video-play { width: 48px; height: 48px; font-size: 1.45rem; }

/* Duration badge. The second-most useful thing on a card after the
   title — a 93-minute workshop and a 4-minute demo are different
   offers, and the bottom-right corner is where people already look. */
.vdur {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    background: rgba(0,0,0,.82);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    padding: .18rem .4rem;
    border-radius: .25rem;
    pointer-events: none;
}

.vbody {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .5rem;
    padding: .9rem 1rem 1rem;
}
.vtitle {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The outside producers are the social proof, so the byline gets the
   accent; G-Sonique's own videos simply have no byline. */
.vby { font-size: .78rem; font-weight: 600; color: var(--gs-accent); }
.vtags { display: flex; flex-wrap: wrap; gap: .3rem; }
.vtag {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gs-muted);
    border: 1px solid var(--gs-border);
    border-radius: .3rem;
    padding: .2rem .42rem;
}
.vplug {
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid var(--gs-border);
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gs-accent);
}
.vplug .bi { font-size: .9em; }

/* ---------- featured ---------- */
.vt-featured {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 1.75rem;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: .9rem;
    padding: 1.25rem;
    margin-bottom: 2.6rem;
}
.vt-featured .video-wrap { border-radius: .5rem; }
.vt-fmeta { display: flex; flex-direction: column; justify-content: center; }
.vt-flabel {
    color: var(--gs-accent);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: .7rem;
}
.vt-fmeta h2 {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.22;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .7rem;
}
.vt-fmeta p { color: var(--gs-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 1.1rem; }
.vt-fmeta .btn-gs { align-self: flex-start; }
@media (max-width: 767.98px) {
    .vt-featured { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ---------- filter bar ----------
   Sticky under the fixed navbar. The section pills reuse .pill-nav from
   v2-catalog.css; only the genre chips and the bar itself are new. */
/* A panel with its own padding, not a full-width band. The band version
   put the first pill exactly on the panel's left edge — the panel and the
   content grid both start at the container edge — which read as cramped
   against every other block on the page. Padding the panel instead lines
   the CARD up with the grid and insets its contents, which is how
   .product-card and .info-card already behave. */
.vt-filter {
    position: sticky;
    top: 56px;
    z-index: 5;
    background: rgba(26,30,34,.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--gs-border);
    border-radius: .6rem;
    padding: .85rem 1.1rem;
    margin-bottom: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.vt-filter .pill-nav { margin-bottom: 0; justify-content: flex-start; }
.vt-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.vt-chips-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255,255,255,.32);
    font-weight: 700;
    margin-right: .3rem;
}
.vt-chip {
    border: 1px solid var(--gs-border);
    background: transparent;
    color: var(--gs-muted);
    border-radius: 2rem;
    padding: .26rem .7rem;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.vt-chip:hover { color: var(--gs-accent); border-color: rgba(var(--gs-accent-rgb), .45); }
.vt-chip.is-active {
    background: rgba(var(--gs-accent-rgb), .14);
    border-color: rgba(var(--gs-accent-rgb), .5);
    color: var(--gs-accent);
}
.vt-chip:focus-visible,
.pill-nav button:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }

/* The section pills are <button>s here, not links — they filter rather
   than navigate — so they need .pill-nav a's look without the anchor. */
.pill-nav button {
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-border);
    color: var(--gs-text);
    border-radius: 2rem;
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.pill-nav button:hover {
    color: #0b0d10;
    background: var(--gs-accent);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 0 16px var(--gs-glow);
}
.pill-nav button.is-active { background: var(--gs-accent); border-color: transparent; color: #0b0d10; }

/* On a phone the two rows would wrap into a wall of chips, so they
   scroll sideways instead and every target keeps a 44px height. */
@media (max-width: 767.98px) {
    /* Full-bleed band here on purpose: a scrolling row has to run to the
       screen edge, or it does not read as scrollable. The 12px negative
       margin is exactly the .container padding, so it fills the gutter and
       can never cause a horizontal scrollbar. */
    .vt-filter {
        top: 0;
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .vt-filter .pill-nav,
    .vt-filter .vt-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 12px .15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .vt-filter .pill-nav::-webkit-scrollbar,
    .vt-filter .vt-chips::-webkit-scrollbar { display: none; }
    .vt-filter .pill-nav button,
    .vt-filter .vt-chip { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
    .vt-chips-label { display: none; }
}

/* ---------- filtering ---------- */
.is-hidden { display: none !important; }
.vt-empty {
    text-align: center;
    color: var(--gs-muted);
    padding: 2.5rem 0 3rem;
    font-size: .95rem;
}

/* ---------- section blocks ---------- */
.vt-sec { margin-top: 2.6rem; }
.vt-sec > p {
    color: var(--gs-muted);
    line-height: 1.7;
    font-size: .93rem;
    max-width: 70ch;
    margin: -.6rem 0 1.3rem;
}
.section-heading .vt-count {
    margin-left: auto;
    letter-spacing: .08em;
    font-size: .74rem;
    color: rgba(255,255,255,.3);
    font-weight: 500;
    text-transform: none;
}

/* ---------- CTA band with a primary + a secondary action ---------- */
.cta-actions {
    position: relative;      /* .cta-band::before is a glow overlay — stay above it */
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    align-items: center;
}
/* Outline twin of .btn-gs, same box so the two line up on the baseline. */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid rgba(var(--gs-accent-rgb), .45);
    color: var(--gs-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .85rem;
    /* .btn-gs has no border, so subtract it here or this button stands 2px
       taller and the pair no longer shares a baseline. */
    padding: calc(.7rem - 1px) calc(1.5rem - 1px);
    border-radius: .4rem;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn-ghost:hover {
    background: rgba(var(--gs-accent-rgb), .12);
    border-color: var(--gs-accent);
    color: #fff;
    transform: translateY(-1px);
}
.btn-ghost:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
/* 1em, not larger: a taller glyph grows the line box and the button ends up a
   pixel taller than the .btn-gs beside it. */
.btn-ghost .bi { font-size: 1em; }

/* ---------- the link back from a product page ---------- */
.video-more { margin: 1.1rem 0 0; font-size: .88rem; font-weight: 600; }
.video-more .bi { font-size: .9em; }