main.fh-broadcast { padding-top:64px; padding-bottom:80px; }
.fh-broadcast-intro { max-width:1100px; margin-bottom:48px; }
.fh-broadcast-intro h1 { color:var(--slate_darker); }
.fh-broadcast-intro p { max-width:860px; color:var(--slate_normal); }
.fh-broadcast-player { position:relative; max-width:1200px; aspect-ratio:15 / 8; min-height:420px; overflow:hidden; border-radius:32px; background:#292e33; }
.fh-broadcast-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.fh-broadcast-overlay { position:relative; min-height:inherit; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; }
.fh-broadcast-countdown { display:flex; align-items:center; padding:24px; border-radius:24px; background:rgba(70,78,87,.45); color:var(--ivory_light); margin-top:32px; }
.fh-broadcast-unit { position:relative; display:flex; flex-direction:column; align-items:center; min-width:88px; padding:0 20px; }
.fh-broadcast-unit + .fh-broadcast-unit:before { content:':'; position:absolute; left:-4px; top:0; font-size:2.5rem; font-weight:300; }
.fh-broadcast-unit [data-unit] { font-variant-numeric:tabular-nums; line-height:1.1; margin-bottom:8px; }
.fh-broadcast-unit .fs-6 { color:var(--slate_light_active); }
.fh-broadcast-details { margin-top:56px; color:var(--ivory_light); }
.fh-broadcast-details p { color:inherit; }
.fh-broadcast-details p:nth-child(2) { color:var(--sky_light); }
@media(max-width:767.98px) {
    main.fh-broadcast { padding-top:40px; padding-bottom:48px; }
    .fh-broadcast-intro { margin-bottom:32px; }
    .fh-broadcast-player { min-height:400px; aspect-ratio:auto; border-radius:24px; }
    .fh-broadcast-overlay { padding:32px 12px; }
    .fh-broadcast-countdown { padding:20px 8px; width:100%; max-width:360px; margin-top:0; }
    .fh-broadcast-unit { min-width:0; flex:1; padding:0 6px; }
    .fh-broadcast-unit [data-unit] { font-size:2rem; }
    .fh-broadcast-unit .fs-6 { font-size:.75rem !important; }
    .fh-broadcast-unit + .fh-broadcast-unit:before { font-size:1.75rem; }
    .fh-broadcast-details { margin-top:40px; }
}

/* Frosted glass countdown: lighter slate tint to reveal more of the auditorium. */
.fh-broadcast-countdown {
    background:rgba(70,78,87,.45);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
    backdrop-filter:blur(12px) saturate(120%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .fh-broadcast-countdown { background:rgba(70,78,87,.88); }
}

/* === Fluid Figma sizing (1920px canvas, node 8571:5510) — START ===
   CSS only: matches Figma font sizes/colours at 1920px and scales down on smaller screens.
   Countdown logic, markup and date text are untouched.
   To revert: delete everything between START and END. */
@media (min-width: 768px) {
    main.fh-broadcast { padding-top: clamp(56px, 4.1667vw, 80px); }
    .fh-broadcast-intro { margin-bottom: clamp(40px, 3.3333vw, 64px); }
    .fh-broadcast-intro h1 { font-size: clamp(44px, 3.3333vw, 64px) !important; line-height: 1.1 !important; color: #131f2a; margin-bottom: clamp(16px, 1.25vw, 24px) !important; }
    .fh-broadcast-intro p { font-size: clamp(18px, 1.25vw, 24px) !important; line-height: 1.2 !important; color: #58626d; max-width: clamp(720px, 50vw, 960px); }

    .fh-broadcast-player { max-width: clamp(720px, 62.5vw, 1200px); }
    /* Figma: countdown centred in the player, details block starts 480/640 (75%) down */
    .fh-broadcast-countdown { margin-top: 0; padding: clamp(16px, 1.25vw, 24px); background: rgba(70,78,87,.6); }
    .fh-broadcast-details { position: absolute; left: 0; right: 0; top: 75%; margin-top: 0; }

    .fh-broadcast-unit { min-width: clamp(68px, 5.0521vw, 97px); padding: 0; }
    .fh-broadcast-unit + .fh-broadcast-unit { margin-left: clamp(32px, 2.6042vw, 50px); }
    .fh-broadcast-unit + .fh-broadcast-unit:before {
        left: calc(clamp(32px, 2.6042vw, 50px) / -2); top: 50%; transform: translate(-50%, -50%);
        font-size: clamp(56px, 4.1667vw, 80px); line-height: 1.1; color: #fcfcfa;
    }
    .fh-broadcast-unit [data-unit] { font-size: clamp(44px, 3.3333vw, 64px) !important; line-height: 1.1; margin-bottom: 0; }
    .fh-broadcast-unit .fs-6 { font-size: clamp(16px, 1.25vw, 24px) !important; line-height: 1.2; font-weight: 300; }

    .fh-broadcast-details .h5 { font-size: clamp(18px, 1.25vw, 24px) !important; line-height: 1.2 !important; }
}
/* === Fluid Figma sizing — END === */

/* === Live state (YouTube player, Figma node 8571:5878) — START ===
   The countdown overlay and poster are replaced by the embedded stream when the player gets .is-live.
   To revert: delete everything between START and END. */
.fh-broadcast-video { position:absolute; inset:0; z-index:1; }
.fh-broadcast-video:empty { display:none; }
.fh-broadcast-video iframe { display:block; width:100%; height:100%; border:0; }
.fh-broadcast-player.is-live { background:#131f2a; }
.fh-broadcast-player.is-live .fh-broadcast-poster,
.fh-broadcast-player.is-live .fh-broadcast-overlay { display:none; }
@media(max-width:767.98px) {
    .fh-broadcast-player.is-live { aspect-ratio:16 / 9; min-height:0; }
}
/* === Live state — END === */

/* === Countdown redesign (Figma 8571:5510, Oct 2026) — START ===
   Sky-blue box with ivory wave; brown countdown text; no frosted panel.
   An optional Background image (ACF) replaces the wave.
   To revert: delete everything between START and END. */
.fh-broadcast-player:not(.is-live) { background:#bdd5e5; }
.fh-broadcast-poster { opacity:1; }
.fh-broadcast-wave {
    position:absolute; left:-39.4167%; top:49.948%; width:199.1667%; aspect-ratio:2390 / 690;
    background:url('wave.svg') left top / 100% 100% no-repeat; pointer-events:none;
}
.fh-broadcast-player.is-live .fh-broadcast-wave { display:none; }
.fh-broadcast-countdown { background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; color:#7f6b64; }
.fh-broadcast-unit .fs-6,
.fh-broadcast-unit + .fh-broadcast-unit:before,
.fh-broadcast-details,
.fh-broadcast-details p:nth-child(2) { color:#7f6b64; }
@media (min-width: 768px) {
    .fh-broadcast-details { top:66.35%; }
}
/* === Countdown redesign — END === */