/* The video grid — thumbnail facade + click-to-play lightbox.
   Built for /episode's #videos section (promoted 2026-07-24), shared with
   /observer-sightings 2026-07-26 (see resources/views/partials/video-grid.blade.php).
   Scoped under .fvg / .fvg-modal. --md-accent (set by the Massive Dynamic skin)
   tints the category headings + focus ring; falls back to blueverse blue.
   The caller owns the measure; the cap here is only a backstop. */

.fvg { max-width: 1320px; }
.fvg__cat {
    font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .06em;
    font-size: .8rem; font-weight: 700; margin: 1.9rem 0 .85rem;
    color: var(--md-accent, #0056b7);
}
.fvg__cat:first-child { margin-top: .5rem; }
.fvg__grid {
    display: grid; gap: 1.15rem 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.fvg--single .fvg__grid { grid-template-columns: minmax(0, 640px); justify-content: center; }

.fvg-card {
    display: flex; flex-direction: column; text-align: left;
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit;
}
.fvg-card__thumb {
    position: relative; display: block; aspect-ratio: 16 / 9;
    border-radius: 10px; overflow: hidden; background: #0c1420;
    box-shadow: 0 2px 10px rgba(8,17,28,.18);
    transition: transform .16s ease, box-shadow .16s ease;
}
.fvg-card__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s ease, filter .25s ease;
}
.fvg-card:hover .fvg-card__thumb { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(8,17,28,.32); }
.fvg-card:hover .fvg-card__thumb img { transform: scale(1.05); }
.fvg-card:focus-visible { outline: none; }
.fvg-card:focus-visible .fvg-card__thumb { outline: 3px solid var(--md-accent, #0056b7); outline-offset: 2px; }

.fvg-card__play {
    position: absolute; inset: 0; margin: auto; width: 54px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .16s ease, opacity .16s ease; opacity: .92;
}
.fvg-card__play-bg { fill: #1c1c1c; opacity: .78; transition: fill .16s ease, opacity .16s ease; }
.fvg-card:hover .fvg-card__play { transform: scale(1.12); }
.fvg-card:hover .fvg-card__play-bg { fill: #cc0000; opacity: 1; }

.fvg-card__meta { display: block; padding: .6rem .15rem 0; }
.fvg-card__title {
    display: block; font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: .92rem; line-height: 1.3; color: #1a2632;
}
.fvg-card__desc {
    display: block; margin-top: .2rem; font-size: .82rem; line-height: 1.4;
    color: #5a6b7a;
}

/* Spoilers: the still + title stay fully visible (the spoiler is *inside* the
   video). Just a corner heads-up on the card, and a confirm step before play. */
.fvg-card__flag {
    position: absolute; left: .4rem; bottom: .4rem;
    display: inline-flex; align-items: center; gap: .28rem;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .68rem;
    letter-spacing: .02em; line-height: 1; color: #fff;
    padding: .3rem .5rem; border-radius: 5px;
    background: rgba(178,10,10,.92); box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.fvg-card__flag svg { flex: 0 0 auto; }

/* Lightbox */
.fvg-modal .modal-content { background: transparent; border: 0; box-shadow: none; }
.fvg-modal .ratio { border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 12px 48px rgba(0,0,0,.6); }
.fvg-modal__bar { display: flex; align-items: center; gap: 1rem; padding: 0 .2rem .55rem; }
.fvg-modal__bar .modal-title {
    color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: 1rem; margin: 0; flex: 1 1 auto;
}
.fvg-modal .btn-close { flex: 0 0 auto; }

/* Confirm-before-play overlay (spoiler videos only) */
.fvg-modal__confirm {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; text-align: center; padding: 1.5rem;
    background: radial-gradient(circle at center, rgba(16,22,30,.96), rgba(8,12,18,.99));
    color: #fff;
}
.fvg-modal__confirm > svg { color: #ff5a5a; margin-bottom: .2rem; }
.fvg-modal__confirm-lead {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0;
}
.fvg-modal__confirm-sub { font-size: .9rem; color: rgba(255,255,255,.72); margin: 0 0 .4rem; max-width: 30rem; }
.fvg-modal__confirm-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.fvg-btn {
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .9rem;
    padding: .55rem 1.15rem; border-radius: 7px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.fvg-btn:hover { background: rgba(255,255,255,.12); }
.fvg-btn--primary { background: #b20a0a; border-color: #b20a0a; }
.fvg-btn--primary:hover { background: #cc0f0f; border-color: #cc0f0f; }

@media (prefers-reduced-motion: reduce) {
    .fvg-card__thumb, .fvg-card__thumb img, .fvg-card__play { transition: none; }
}