/**
 * [gg_video_index] cards — R15 (Healing Paths iteration 2, Phase 5, 2026-09-04).
 * Enqueued by inc/video-index.php only on pages carrying the shortcode, after
 * gg-hp-tokens (healing-tokens.css). /video-index/ is a plain WP page under
 * Elementor chrome, so every rule is scoped under .gg-video-index and nothing
 * here may leak. Thumbnails are decorative (alt="") — the title is in the
 * same link, with the practitioner · duration line under it (B1, 2026-10-07).
 * Mobile-first: 1 column, 2 at ≥ 768, 3 at ≥ 1200.
 * RUCSS keeps a per-URL used-CSS row — clear it after deploy
 * (scripts/wp-rocket-perf/wpe/rucss-clear-video-index.sh) or this file is invisible.
 */
.gg-video-index { --gg-vi-thumb: 120px; }
.gg-video-index, .gg-video-index * { box-sizing: border-box; }

/* ---------- filtered-view header line ---------- */
.gg-video-index .gg-vi-filter { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.5; }
.gg-video-index .gg-vi-filter a,
.gg-video-index .gg-vi-empty a { color: var(--gg-berry, #6C1D45); text-decoration: underline; }
.gg-video-index .gg-vi-empty { margin: 0 0 24px; }

/* ---------- list ---------- */
.gg-video-index .gg-vi-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px 24px;
}
.gg-video-index .gg-vi-item { margin: 0; padding: 0; }

/* ---------- card: thumb + title, one link ---------- */
.gg-video-index .gg-vi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--gg-tap-min, 44px);
    text-decoration: none;
}
.gg-video-index .gg-vi-card:hover .gg-vi-card__title,
.gg-video-index .gg-vi-card:focus .gg-vi-card__title { text-decoration: underline; }
.gg-video-index .gg-vi-card:focus-visible { outline: var(--gg-focus-ring, 2px solid currentColor); outline-offset: 2px; }
.gg-video-index .gg-vi-card__thumb {
    flex: 0 0 var(--gg-vi-thumb);
    width: var(--gg-vi-thumb);
    aspect-ratio: 16 / 9;
    background: var(--gg-dawn-pink, #F2EAEE);     /* empty box when no thumbnail resolves */
    overflow: hidden;
    border-radius: 4px;
}
.gg-video-index .gg-vi-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gg-video-index .gg-vi-card__title { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
/* With the video extras on (gg_video_extras), the title sits in a body column. */
.gg-video-index .gg-vi-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gg-video-index .gg-vi-card__body .gg-vi-card__title { flex: 0 1 auto; }
/* B1 (2026-10-07): practitioner · duration, plain text inside the card's one link. */
.gg-video-index .gg-vi-card__meta { font-size: 0.8125rem; line-height: 1.4; color: var(--gg-text-muted, #6b5a63); }

@supports not (aspect-ratio: 16 / 9) {
    .gg-video-index .gg-vi-card__thumb { height: 68px; }      /* 120 × 9/16 */
}
@media (min-width: 768px) {
    .gg-video-index .gg-vi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .gg-video-index .gg-vi-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}