/* =====================================================================
 * Video Center System V2 — shared styles across Main, Collection, Watch.
 * Scoped under .vid-sys root via CSS nesting. Bare class names inside.
 * Framework classes handle spacing, typography, buttons, flex, grid.
 * Cross-system primitives (.search, .search-input, .search-clear, .empty)
 * are imported below and live in /styles/modules/system-primitives.css.
 * Custom CSS below covers: hero, video cards, topic sidebar, horizontal
 * scroll rows, player chrome, related list, badges.
 * Colors use theme tokens.
 * Font weight and text dimming via opacity are intentionally absent —
 * weight + color belong to the framework font-declaration system.
 * ===================================================================== */

@import url("/styles/modules/system-primitives.css");

.vid-sys {

    .subtitle {
        max-width: 58ch;
    }

    /* ---------- SEARCH INPUT (system-specific: wider + leading icon) ---------- */
    .search {
        max-width: 32rem;
    }

    /* Override primitives' left padding to leave room for the ::before icon. */
    .search-input {
        padding-left: 2.75em;
    }

    .search::before {
        content: "";
        position: absolute;
        left: 1em;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
        background-repeat: no-repeat;
        pointer-events: none;
    }

    /* ---------- BADGES ----------
     * Typography from `fnt_t-4`. Bg + color from `.bg-bx ulk-bg` applied in
     * HTML — the framework picks palette-opposite tokens so badges stay
     * legible across all four data-colors modes.
     */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 0.45em 0.875em;
        white-space: nowrap;
        z-index: 2;
    }

    /* badge--ghost is a translucent variant. Uses an alpha of the inherited
       --text-color so the tint matches the foreground in any palette. */
    .badge--ghost {
        background: hsl(from var(--text-color) h s l / 0.18);
        border: 1px solid hsl(from var(--text-color) h s l / 0.3);
    }

    /* ---------- HERO ---------- */
    .hero {
        position: relative;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        aspect-ratio: 16 / 6;
        transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
        box-shadow:
            0 20px 50px -15px hsl(from var(--text-color) h s l / 0.35),
            0 0 0 1px hsl(from var(--text-color) h s l / 0.05);
    }

    .hero:hover {
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .hero {
            aspect-ratio: 4 / 3;
        }
    }

    .hero-img,
    .hero-img > img,
    .hero-placeholder {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .hero-placeholder {
        background: linear-gradient(135deg, hsl(from var(--text-color) h s l / 0.55) 0%, hsl(from var(--text-color) h s l / 0.95) 100%);
    }

    /* hero-overlay flips the section palette via `.bg-bx ulk-bg` on the
       element (applied in HTML) so the text + gradient fade are always a
       legible contrast pair across all four data-colors modes. */
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent 40%, var(--background) 100%);
    }

    .hero-title {
        color: inherit;
        letter-spacing: -0.015em;
        max-width: 24ch;
        margin: 0;
    }

    .hero-desc {
        max-width: 56ch;
    }

    /* ---------- TOPICS SIDEBAR ----------
     * `.topics-label` typography delegated to kicker — apply
     * `fnt_t-4` alongside `topics-label`.
     */
    .topics-label {
        color: hsl(from var(--text-color) h s l / 0.6);
    }

    .topics {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .topic {
        width: 100%;
        padding: 0.625em 0.875em;
        border: none;
        background: transparent;
        color: var(--text-color);
        font: inherit;
        font-size: 0.9375rem;
        text-align: left;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5em;
        border-radius: 2px;
        transition: background 0.15s, color 0.15s;
    }

    .topic:hover {
        background: hsl(from var(--text-color) h s l / 0.06);
    }

    .topic.active {
        background: var(--text-color);
        color: var(--main-bg);
    }

    .topic-count {
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
    }

    /* ---------- ROW (collection section) ---------- */
    .row-head {
        margin-bottom: 0.25rem;
    }

    .row-title {
        margin: 0;
    }

    /* `.row-action` typography delegated to kicker — apply
       `fnt_t-4` alongside `row-action`. */
    .row-action {
        text-decoration: none;
        color: var(--link-color);
        transition: opacity 0.15s;
    }

    .row-action:hover {
        opacity: 0.7;
    }

    /* ---------- HORIZONTAL SCROLL ----------
     * Scroll behavior + snap is provided by the framework's scrolling-list
     * utility — `data-role="scroller"` on the row section, `data-role="list"`
     * on the <ul>, `data-role="item"` on each <li>. <ScrollNav /> adds the
     * prev/next arrows. Item sizing comes from the `grd mx-3` classes on
     * the list (container-query-based: 1 col narrow → 2 cols medium →
     * 3 cols wide), with `data-role="list"` forcing flex-wrap: nowrap so
     * extra items overflow into a horizontal scroll. No custom item widths.
     */

    /* ---------- VIDEO CARD ---------- */
    .card {
        text-decoration: none;
        color: inherit;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    }

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px hsl(from var(--text-color) h s l / 0.08);
    }

    .thumb {
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: hsl(from var(--text-color) h s l / 0.08);
    }

    .thumb-img,
    .thumb-img > img,
    .thumb-placeholder {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .thumb-placeholder {
        background: linear-gradient(135deg, hsl(from var(--text-color) h s l / 0.45) 0%, hsl(from var(--text-color) h s l / 0.85) 100%);
    }

    .thumb-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent 55%, hsl(from var(--text-color) h s l / 0.55));
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
    }

    .crd:hover .thumb-overlay,
    .crd:focus-visible .thumb-overlay {
        opacity: 1;
    }

    /* Brand-colored circle: --buttons / --text-alt are framework-paired
       tokens that flip together so the icon always contrasts. */
    .play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--buttons);
        color: var(--text-alt);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s, transform 0.2s;
    }

    .play svg {
        margin-left: 3px;
    }

    .crd:hover .play,
    .crd:focus-visible .play {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }

    /* thumb-cat is a category pill floating over the thumbnail. Typography
       from `fnt_t-4`. Bg + color from `.bg-bx ulk-bg` in HTML — the pill
       picks palette-opposite tokens so it always contrasts with the page,
       independent of what the thumbnail image happens to look like. */
    .thumb-cat {
        position: absolute;
        top: 0.625em;
        left: 0.625em;
        padding: 0.3em 0.625em;
        border-radius: 2px;
        z-index: 2;
    }

    .card-title {
        margin: 0;
        letter-spacing: -0.005em;
    }

    /* ---------- REDUCED MOTION ---------- */
    @media (prefers-reduced-motion: reduce) {
        .hero,
        .card,
        .play,
        .thumb-overlay,
        .topic,
        .search-input {
            transition: none;
        }

        .hero:hover,
        .card:hover {
            transform: none;
        }
    }
}