/* =========================================================================
   GÂNDACUL TV — VIDEO SECTION
   Tabloid broadcast aesthetic.
   ========================================================================= */

/* ===== HOMEPAGE VIDEO STRIP =============================================
   Tabloid "TV listings" section. No structural borders — the slim marquee's
   dashed rules carry the visual separation, and the next section's existing
   red-square header naturally takes over below. */

/* Heavy 4px charcoal rules above and below the strip — same weight as the
   hero's own bottom border, so the strip reads as a strong section break
   between the upper article row and the rest of the grid. */
.home-video-strip {
    margin: 0 0 18px;
    padding: 18px 0 18px;
    background: #fff;
    border: 0;
}

.home-video-strip-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 16px 10px;
    max-width: 1320px;
    margin: 0 auto;
}

.home-video-strip-titleblock {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.home-video-strip-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 700 11px/1 "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--gt-charcoal);
}

.home-video-strip-bar {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--gt-red);
    flex-shrink: 0;
}

.home-video-strip-title {
    margin: 0;
    line-height: 1;
}

.home-video-strip-title a {
    font: 600 clamp(30px, 4.4vw, 42px)/1 "DM Serif Display", "Georgia", serif;
    color: var(--gt-charcoal);
    text-decoration: none;
    letter-spacing: -.015em;
    transition: color .18s ease;
}

.home-video-strip-title a:hover {
    color: var(--gt-red);
}

.home-video-strip-dot {
    color: var(--gt-red);
}

.home-video-strip-more {
    font: 700 12px/1 "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--gt-red);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-end;
    margin-bottom: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: color .18s ease;
}

.home-video-strip-more:hover {
    color: var(--gt-charcoal);
}

@media (max-width: 480px) {
    .home-video-strip-head {
        padding: 0 14px 14px;
        gap: 16px;
    }
    .home-video-strip-more {
        margin-bottom: 4px;
    }
}
.video-marquee-slim {
    margin: 0;
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-top: 1px dashed rgba(0,0,0,.18);
    border-bottom: 1px dashed rgba(0,0,0,.18);
}
.video-marquee-slim .video-marquee-track span {
    font-size: 11px;
    letter-spacing: .14em;
}

.home-video-strip-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 8px;
    max-width: 1320px;
    margin: 0 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.25) transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.home-video-strip-track::-webkit-scrollbar { height: 4px; }
.home-video-strip-track::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2); border-radius: 3px;
}
.video-card-strip {
    flex: 0 0 auto;
    width: 116px;
    scroll-snap-align: start;
}
@media (min-width: 600px) { .video-card-strip { width: 132px; } }
@media (min-width: 900px) { .video-card-strip { width: 148px; } }

/* "Video" link in the masthead topnav — small pulsing red dot before text. */
.topnav-video { display: inline-flex; align-items: center; gap: 6px; }
.topnav-video-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #E20613;
    box-shadow: 0 0 0 2px rgba(226,6,19,.25);
    animation: gt-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

:root {
    --gt-red: #E20613;
    --gt-yellow: #FFD600;
    --gt-ivory: #FAF6EE;
    --gt-charcoal: #1A1A1A;
    --gt-near-black: #0A0A0A;
    --gt-stage-black: #000;
    --gt-glass: rgba(20,20,20,.55);
    --gt-glass-hi: rgba(255,255,255,.14);
}

.gallery-mode .video-page-head {
    padding: 36px 0 28px;
    text-align: center;
    border-bottom: 4px solid var(--gt-charcoal);
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.video-eyebrow {
    font: 600 11px/1 "Roboto Condensed", system-ui, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gt-red);
    margin: 0 0 14px;
}
.video-eyebrow::before, .video-eyebrow::after {
    content: "·"; margin: 0 .6em; color: var(--gt-charcoal); opacity: .35;
}
.video-page-title {
    font: 600 clamp(34px, 5.5vw, 56px)/1 "DM Serif Display", "Georgia", serif;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--gt-charcoal);
    position: relative;
    display: inline-block;
}
.video-page-title-dot {
    color: var(--gt-red);
}

.video-marquee {
    margin-top: 18px;
    overflow: hidden;
    border-top: 1px dashed rgba(0,0,0,.25);
    border-bottom: 1px dashed rgba(0,0,0,.25);
    background: var(--gt-ivory);
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.video-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
    animation: gt-marquee 38s linear infinite;
    will-change: transform;
}
.video-marquee-track span {
    font: 500 13px/1 "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gt-charcoal);
}
.video-marquee-track i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gt-red);
    flex-shrink: 0;
}
@keyframes gt-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.gallery-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 12px 60px;
    max-width: 1320px;
    margin: 0 auto;
}
@media (min-width: 600px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; padding: 0 24px 80px; } }

.video-card {
    display: block;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.video-card-frame {
    position: relative;
    aspect-ratio: 9 / 16;
    background: #000;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 12px 24px -16px rgba(0,0,0,.45);
    isolation: isolate;
    transform: translateZ(0);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.video-card:hover .video-card-frame, .video-card:focus-visible .video-card-frame {
    transform: translateY(-4px);
    box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 28px 36px -18px rgba(0,0,0,.55), 0 0 0 2px var(--gt-red);
}
.video-card-blur {
    position: absolute; inset: -8%;
    width: 116%; height: 116%;
    object-fit: cover;
    filter: blur(28px) brightness(.55) saturate(1.2);
    z-index: 0;
}
.video-card-poster, .video-card-preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
.video-card-preview {
    z-index: 2;
    opacity: 0;
    transition: opacity .25s ease;
}
.video-card:hover .video-card-preview { opacity: 1; }

.video-card-tag {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--gt-red);
    color: #fff;
    font: 800 10px/1 "Roboto Condensed", sans-serif;
    letter-spacing: .18em;
    padding: 6px 8px 5px;
    z-index: 5;
    text-transform: uppercase;
    box-shadow: 0 1px 0 rgba(0,0,0,.3);
    transform: rotate(-1.5deg);
}
.video-card-onair {
    position: absolute;
    top: 10px; right: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    color: #fff;
    font: 700 9px/1 "Roboto Condensed", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    z-index: 5;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.video-card-onair-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gt-red);
    box-shadow: 0 0 0 2px rgba(226,6,19,.25);
    animation: gt-pulse 1.2s ease-in-out infinite;
}
@keyframes gt-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .55; transform: scale(.85); }
}

.video-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 60px 12px 12px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.92) 100%);
    z-index: 4;
    color: #fff;
}
.video-card-hero {
    margin: 0 0 4px;
    font: 600 10px/1.1 "Roboto Condensed", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gt-yellow);
    opacity: .92;
}
.video-card-headline {
    margin: 0;
    font: 700 14px/1.2 "Roboto Condensed", sans-serif;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 900px) { .video-card-headline { font-size: 15px; } }

.video-empty { text-align: center; padding: 80px 24px 120px; }
.video-empty-stamp {
    display: inline-block;
    font: 900 56px/1 "Roboto Condensed", sans-serif;
    color: transparent;
    -webkit-text-stroke: 2px var(--gt-charcoal);
    text-transform: uppercase;
    letter-spacing: .04em;
    transform: rotate(-3deg);
    border: 4px double var(--gt-charcoal);
    padding: 8px 24px;
    margin: 0 0 18px;
    opacity: .25;
}
.video-empty-line {
    font: italic 400 18px/1.5 "Inter", sans-serif;
    color: var(--gt-charcoal);
    opacity: .7;
    margin: 0;
}

/* ===== PLAYER ============================================================ */
body.player-mode {
    background: var(--gt-near-black);
    color: #fff;
    overflow: hidden;
    overscroll-behavior: none;
}
body.player-mode .site-footer { display: none; }

/* Neutralize the global <main> wrapper for the full-bleed player. The site
   main has `max-width: 1280px; margin: 0 auto; padding: 24px 20px 64px` —
   on a 1440px laptop that pushed the .scroll-feed (width: 100vw) start
   point ~80-100px to the right of the viewport, so the centered
   .player-video appeared off-center. The player owns the whole viewport. */
body.player-mode main {
    max-width: none;
    margin: 0;
    padding: 0;
}

.player-back {
    position: fixed;
    top: 14px; left: 14px;
    z-index: 30;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px 8px 8px;
    background: var(--gt-glass);
    border: 1px solid var(--gt-glass-hi);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.player-back:hover, .player-back:focus-visible {
    background: rgba(40,40,40,.7);
    transform: translateX(-2px);
}
.player-back-arrow {
    font: 700 22px/1 "DM Serif Display", serif;
    margin-top: -2px;
}
.player-back-wordmark {
    font: 600 14px/1 "DM Serif Display", serif;
}
.player-back-wordmark::after {
    content: "";
    display: inline-block;
    width: 4px; height: 4px;
    background: var(--gt-red);
    margin-left: 4px;
    vertical-align: 4px;
}

.player-onair {
    position: fixed;
    top: 18px; right: 18px;
    z-index: 30;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px 6px 8px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 4px;
    color: #fff;
    font: 800 10px/1 "Roboto Condensed", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.player-onair-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gt-red);
    box-shadow: 0 0 8px rgba(226,6,19,.7);
    animation: gt-pulse 1.1s ease-in-out infinite;
}

.scroll-feed {
    /* Anchor to the viewport directly (position: fixed) so we don't
       inherit any padding/margin/max-width from <main> or other parent
       wrappers. `width: 100vw` measured from a positioned-relative
       parent (e.g. main centered with padding) starts AT the parent's
       content edge — that put the whole player chain ~80-180px right of
       viewport-left on wider laptops. Fix: detach from layout. */
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh; height: 100svh;
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 20;  /* above any backdrops/page chrome */
}
.scroll-feed::-webkit-scrollbar { display: none; }

.player-stage {
    position: relative;
    height: 100dvh; height: 100svh;
    width: 100vw;
    background: var(--gt-stage-black);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}
.player-blur-bg {
    position: absolute; inset: -10%;
    background-size: cover;
    background-position: center;
    filter: blur(60px) brightness(.4) saturate(1.4);
    transform: scale(1.2);
    z-index: 0;
}
.player-video {
    position: relative;
    z-index: 1;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: #000;
    box-shadow: 0 0 0 1px rgba(226,6,19,.4), 0 0 80px rgba(0,0,0,.6);
}

.play-overlay {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--gt-red);
    border: 0;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(.85);
    pointer-events: none;
    transition: opacity .18s ease, transform .25s cubic-bezier(.3,1.4,.4,1);
    box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 8px 28px rgba(0,0,0,.5);
}
.play-overlay svg { transform: translateX(3px); }
.play-overlay[data-visible] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.player-actions {
    position: absolute;
    right: 12px;
    bottom: 32%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}
.player-action {
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
}
.player-action-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(28,28,28,.55);
    border: 1px solid rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: transform .2s cubic-bezier(.3,1.4,.4,1), background .2s ease;
}
.player-action:hover .player-action-icon, .player-action:focus-visible .player-action-icon {
    transform: scale(1.06);
    background: rgba(60,60,60,.75);
}
.player-action:active .player-action-icon {
    transform: scale(.92);
    background: var(--gt-red);
    border-color: var(--gt-red);
}
.player-action-label {
    font: 700 10px/1 "Roboto Condensed", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.86);
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.player-stage [data-mute-stroke] { display: block; }
.player-stage.is-unmuted [data-mute-stroke] { display: none; }
.player-stage.is-unmuted .player-action[data-mute-toggle] .player-action-icon {
    background: var(--gt-red);
    border-color: var(--gt-red);
}

.player-meta {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    padding: 28px 84px 38px 18px;
    z-index: 8;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.96) 100%);
    color: #fff;
    pointer-events: none;
}
.player-meta > * { pointer-events: auto; }
.player-handle {
    margin: 0 0 8px;
    font: italic 600 13px/1 "Inter", sans-serif;
    color: rgba(255,255,255,.85);
    display: inline-flex; align-items: center;
}
.player-handle::before {
    content: "";
    width: 5px; height: 5px;
    background: var(--gt-red);
    margin-right: 7px;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(226,6,19,.55);
}
.player-headline {
    margin: 0 0 10px;
    font: 800 18px/1.18 "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    color: #fff;
    max-width: 90%;
}
@media (min-width: 600px) { .player-headline { font-size: 21px; } }

.player-teaser {
    margin: 0 0 4px;
    font: 400 14px/1.45 "Inter", sans-serif;
    color: rgba(255,255,255,.78);
    max-width: 92%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.player-meta.is-expanded .player-teaser { -webkit-line-clamp: 99; }
.player-expand {
    background: transparent; border: 0; padding: 0;
    font: italic 400 13px/1 "Inter", sans-serif;
    color: var(--gt-yellow);
    cursor: pointer;
    margin: 0 0 12px;
}
.player-expand:hover { text-decoration: underline; }
.player-source {
    display: inline-block;
    font: 600 11px/1 "Roboto Condensed", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gt-red);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.player-source:hover { color: #fff; }

.progress-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: rgba(255,255,255,.15);
    z-index: 9;
}
.progress-bar-fill {
    display: block;
    width: 100%; height: 100%;
    background: var(--gt-red);
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

.player-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--gt-charcoal);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font: 600 13px/1 "Roboto Condensed", sans-serif;
    z-index: 50;
    opacity: 0;
    transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.4,.4,1);
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.player-toast[data-visible] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.player-toast::before {
    content: "✓";
    color: var(--gt-red);
    font-weight: 800;
    margin-right: 6px;
}

@media (min-width: 900px) and (orientation: landscape) {
    /* Video is 80vw — 10% gutter on each side. object-fit: contain
       letterboxes/pillarboxes the source inside that box so 16:9 and
       9:16 clips both render correctly without distortion. The blur
       background fills the gutters so they look intentional, not empty.
       Width chosen so the right gutter (10vw) leaves room for the
       action stack to sit fully off the video. */
    .player-video {
        width: 80vw;
        height: 100dvh;
        max-width: 80vw;
        max-height: 100dvh;
        object-fit: contain;
        box-shadow: none;
    }
    /* Actions live in the right gutter, vertically centered. With
       100vw - 80vw = 20vw of total gutter (10vw each side), pinning
       to right: 2.5vw centers the 44px-wide stack inside the right
       gutter and keeps it well clear of any pillarboxed video edge. */
    .player-actions {
        right: 2.5vw;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
    /* Meta overlay sits at the bottom, centered to the video column. */
    .player-meta {
        left: 50%;
        transform: translateX(-50%);
        width: min(80vw, 720px);
        max-width: 80vw;
        padding: 28px 24px 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-marquee-track,
    .video-card-onair-dot,
    .player-onair-dot,
    .video-page-title::after { animation: none !important; }
    .video-card-frame, .player-action-icon, .play-overlay, .player-toast {
        transition: none !important;
    }
}