/* =========================================================
   Video Grid — [brokk_video_grid]

   Cards + player modal. The pill chrome comes from
   components/filter-ui/filter-ui.css; only the --inline
   variant and everything below .brk-vg is defined here.

   Headings and buttons deliberately do NOT set font-family:
   they inherit the Bricks/ACSS theme typography.
   ========================================================= */

.brk-vg {
    --brk-vg-gap: var(--space-l, 2rem);
    --brk-vg-radius: var(--radius-xs, 2.222px);
    --brk-vg-ink: var(--text-dark, #0A0A0A);
    --brk-vg-muted: var(--text-dark-muted, #555);
    --brk-vg-accent: var(--brk-yellow, var(--primary, #FFC600));
    --brk-vg-line: var(--neutral-trans-20, rgba(0, 0, 0, 0.12));

    width: 100%;
}

/* ── Grid ───────────────────────────────────────────────── */

.brk-vg__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--brk-vg-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 991px) {
    .brk-vg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
    .brk-vg__grid { grid-template-columns: 1fr; }
}

/* ── Card ───────────────────────────────────────────────── */

.brk-vg__card {
    position: relative;   /* anchor for the stretched play button */
    display: flex;
    flex-direction: column;
    min-width: 0;         /* long titles must not blow out the track */
}

/* The 16:9 frame. Source thumbnails are 3:2 (1440x960), so without a fixed
   frame the grid rows would be ragged. object-fit crops rather than distorts. */
.brk-vg__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brk-vg-line);
    border-radius: var(--brk-vg-radius);
}

.brk-vg__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

/* ── Play button ────────────────────────────────────────
   One tab stop per card. ::after stretches over the whole card so the
   title and description are clickable too, without a second control. */

.brk-vg__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    background: rgba(0, 0, 0, 0.15);
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.brk-vg__play::after {
    content: "";
    position: absolute;
    inset: 0 0 -100vh 0;   /* clipped by the card's own height below */
}

/* Keep the stretched hit area inside the card, not down the page. */
.brk-vg__card { overflow: clip; }

.brk-vg__play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    /* DESIGN.md:293 — circle radius is for avatars, stat dots and icon buttons.
       A play affordance is an icon button, so the round shape is sanctioned. */
    border-radius: var(--radius-circle, 50vw);
    background: var(--brk-vg-accent);
    color: var(--brk-vg-ink);
    transition: transform 0.2s ease;
}

/* The accessible name. Visually hidden, never display:none — a hidden
   button label would be dropped from the accessibility tree. */
.brk-vg__play-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.brk-vg__card:hover .brk-vg__thumb { transform: scale(1.04); }
.brk-vg__card:hover .brk-vg__play  { background: rgba(0, 0, 0, 0.28); }
.brk-vg__card:hover .brk-vg__play-icon { transform: scale(1.08); }

.brk-vg__play:focus-visible {
    outline: 3px solid var(--brk-vg-accent);
    outline-offset: -3px;
}

/* ── Card text ──────────────────────────────────────────
   The site reset zeroes margin-block globally, so vertical rhythm is
   restored explicitly here rather than inherited. */

.brk-vg__title {
    margin: var(--space-s, 1rem) 0 0 0;
    font-size: var(--text-m, 1.125rem);
    line-height: 1.3;
    color: var(--brk-vg-ink);
}

.brk-vg__excerpt {
    margin: 0.5rem 0 0 0;
    font-size: var(--text-s, 0.875rem);
    line-height: 1.55;
    color: var(--brk-vg-muted);
}

/* ── Inline filter spacing ──────────────────────────────── */

.brk-vg__filter {
    margin-bottom: var(--space-l, 2rem);
}

/* ═════════════════════════════════════════════════════════
   Modal — YouTube facade
   ═════════════════════════════════════════════════════════ */

.brk-vg__modal[hidden] { display: none; }

.brk-vg__modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-m, 1.5rem);
    background: rgba(0, 0, 0, 0.85);
}

.brk-vg__dialog {
    position: relative;
    width: min(1100px, 100%);
    max-height: 100%;
}

.brk-vg__player {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--black, #000);
}

.brk-vg__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.brk-vg__modal-title {
    margin: var(--space-s, 1rem) 0 0 0;
    color: var(--white, #fff);
    font-size: var(--text-m, 1.125rem);
    line-height: 1.3;
}

.brk-vg__close {
    position: absolute;
    top: -3rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--white, #fff);
    cursor: pointer;
}

.brk-vg__close:focus-visible {
    outline: 2px solid var(--brk-vg-accent);
    outline-offset: 2px;
}

@media (max-width: 599px) {
    .brk-vg__close { top: -3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .brk-vg__thumb,
    .brk-vg__play,
    .brk-vg__play-icon {
        transition: none;
    }
    .brk-vg__card:hover .brk-vg__thumb,
    .brk-vg__card:hover .brk-vg__play-icon {
        transform: none;
    }
}