/* ============================================
   PODCAST.CSS — page-specific styles
   Loaded after base + layout + components.
   ============================================ */

.hero { position: relative; background: #050508; line-height: 0; }
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-banner { display: block; width: 100%; height: auto; }

.hero-banner-placeholder { width: 100%; aspect-ratio: 3.17 / 1; background: #050508; }

.listen-strip {
    position: relative;
    background: linear-gradient(180deg, #0B0D14 0%, #080A0E 100%);
    border-top: 1px solid rgba(25,164,166,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 28px 0;
}

.listen-strip::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: min(680px, 80%); height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--teal) 50%, transparent 100%);
    filter: blur(0.5px);
    box-shadow: 0 0 12px rgba(25,164,166,0.55);
}

.listen-strip-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 0 40px;
    display: flex; align-items: center; gap: 32px;
    flex-wrap: wrap; justify-content: center;
}

.listen-cta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 14px 26px 14px 18px;
    background: linear-gradient(135deg, var(--teal) 0%, #0F8688 100%);
    color: #041618; text-decoration: none;
    font-family: var(--font-heading); font-size: 12px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(25,164,166,0.28), 0 0 0 1px rgba(25,164,166,0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.listen-cta-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(4,22,24,0.2);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.listen-cta-icon svg { width: 14px; height: 14px; margin-left: 2px; }

.listen-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(25,164,166,0.4), 0 0 0 1px rgba(25,164,166,0.55);
}

.listen-divider {
    width: 1px; height: 42px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
}

.listen-platforms {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; justify-content: center;
}

.listen-platforms-label {
    font-family: var(--font-heading); font-size: 10px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted);
    margin-right: 6px;
}

.platform-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-heading); font-size: 11px; font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--off-white);
    transition: all 0.3s ease;
}

.platform-chip svg {
    width: 14px; height: 14px;
    fill: var(--muted);
    transition: fill 0.3s ease, transform 0.3s ease;
}

.platform-chip:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
    color: var(--white);
    transform: translateY(-1px);
}

.platform-chip[data-platform="youtube"]:hover svg { fill: #FF0000; }

.platform-chip[data-platform="apple"]:hover svg { fill: #D56DFB; }

.platform-chip[data-platform="spotify"]:hover svg { fill: #1DB954; }

.platform-chip[data-platform="amazon"]:hover svg { fill: #25D8FD; }

@media (max-width: 960px) {
    .listen-strip-inner { gap: 20px; }
    .listen-divider { display: none; }
}

@media (max-width: 560px) {
    .listen-platforms-label { flex-basis: 100%; text-align: center; margin-right: 0; margin-bottom: 4px; }
    .platform-chip { padding: 8px 12px; font-size: 10.5px; }
}

.featured { background: linear-gradient(180deg, var(--black) 0%, #0D0D18 100%); }

.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.featured-image { position: relative; overflow: hidden; background: var(--card); display: block; text-decoration: none; color: inherit; }

/* Default fallback (no YouTube id) keeps the previous square crop */
.featured-image--fallback { aspect-ratio: 1; }
.featured-image--fallback::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--black) 0%, transparent 40%); pointer-events: none; }

/* YouTube variant adopts the standard 16:9 since the embed and thumbnail
   are both natively 16:9 — no awkward letterboxing on play. */
.featured-image--youtube { aspect-ratio: 16/9; cursor: pointer; }
.featured-image--youtube:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.featured-image img,
.featured-image .featured-yt-thumb { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: filter 0.6s ease, transform 0.6s ease; display: block; }

.featured-image:hover img,
.featured-image:hover .featured-yt-thumb { filter: grayscale(0%); }

.featured-image--youtube:hover .featured-yt-thumb { transform: scale(1.02); }

/* Live YouTube iframe (replaces the thumbnail in-place after first click) */
.featured-image iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.featured-image.is-playing { cursor: default; }
.featured-image.is-playing .featured-yt-thumb,
.featured-image.is-playing .featured-play-overlay,
.featured-image.is-playing .featured-badge { display: none; }

/* Play overlay: large central teal triangle on hover.
   On mobile the overlay stays slightly visible (no hover) so the
   affordance is obvious without interaction. */
.featured-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%);
    transition: background 0.3s ease;
    z-index: 1;
}
.featured-play-overlay svg {
    width: 80px;
    height: 80px;
    color: var(--white);
    background: var(--teal);
    border-radius: 50%;
    padding: 22px 18px 22px 26px;
    box-shadow: 0 12px 40px rgba(25,164,166,0.45);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.featured-image--youtube:hover .featured-play-overlay { background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.05) 60%); }
.featured-image--youtube:hover .featured-play-overlay svg { transform: scale(1); background: var(--teal-light, #2cd6d8); }

.featured-badge { position: absolute; bottom: 16px; left: 16px; z-index: 2; font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; background: var(--teal); color: var(--black); padding: 6px 14px; }

.featured-meta { font-family: var(--font-heading); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }

.featured h3 { font-family: var(--font-heading); font-size: 36px; font-weight: 600; line-height: 1.2; color: var(--white); margin-bottom: 12px; }

.featured-guest { font-size: 16px; color: var(--muted); margin-bottom: 4px; }

.featured-info { font-size: 13px; color: rgba(255,255,255,0.62); margin-bottom: 24px; }

.featured-description { font-size: 16px; color: var(--off-white); line-height: 1.8; margin-bottom: 32px; opacity: 0.7; }

.read-more-link { color: var(--teal); text-decoration: none; font-weight: 500; transition: color 0.3s; }

.read-more-link:hover { color: var(--teal-light); }

.audio-player { background: var(--card); padding: 20px 24px; margin-bottom: 24px; }

.player-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }

.play-btn { width: 44px; height: 44px; background: var(--teal); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; }

.play-btn:hover { background: var(--teal-light); }

.play-btn svg { width: 20px; height: 20px; fill: var(--black); }
.play-btn .icon-pause { display: none; }
.play-btn.is-playing .icon-play { display: none; }
.play-btn.is-playing .icon-pause { display: block; }

.player-time { font-family: var(--font-body); font-size: 12px; color: var(--muted); letter-spacing: 0.05em; }

.player-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.1); position: relative; cursor: pointer; }
.player-bar:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.player-bar-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--teal-light)); transition: width 0.1s linear; }

/* Legacy .platform-buttons: kept for back-compat if a future view ever
   restores the old shape. The featured episode now uses .ep-cta--featured. */
.platform-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.platform-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--off-white); border: 1px solid rgba(255,255,255,0.12); background: transparent; padding: 10px 20px; text-decoration: none; transition: all 0.3s ease; cursor: pointer; }
.platform-btn:hover { border-color: var(--teal); color: var(--teal); }
.platform-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Featured-size variant of the DOAC CTA (Watch / Listen).
   Slightly larger to anchor the hero block — same colors, same states. */
.ep-cta--featured .ep-cta-btn { min-height: 56px; padding: 16px 28px; font-size: 13px; letter-spacing: 0.2em; }
.ep-cta--featured .ep-cta-icon { width: 18px; height: 18px; }
.ep-cta--featured .ep-also-available { padding-top: 18px; }
.ep-cta--featured .ep-platform-icon { width: 48px; height: 48px; }
.ep-cta--featured .ep-platform-icon svg { width: 30px; height: 30px; }
.ep-cta--featured .ep-also-icons .ep-share { width: 48px; height: 48px; }
.ep-cta--featured .ep-also-icons .ep-share svg { width: 26px; height: 26px; }

.episodes { background: linear-gradient(180deg, #0D0D18 0%, var(--dark) 50%, #0D0D18 100%); }

.episodes-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; flex-wrap: wrap; gap: 24px; }

.episodes-header h2 { font-family: var(--font-heading); font-size: 42px; font-weight: 300; color: var(--white); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }

.filter-btn { font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 8px 18px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.3s ease; }

.filter-btn:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }

.filter-btn.active { background: var(--teal); color: var(--black); border-color: var(--teal); }

.episodes-list { display: flex; flex-direction: column; gap: 0; }

.episode-item {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    grid-template-areas:
        "thumb info buttons"
        "also  also  also";
    column-gap: 32px;
    row-gap: 20px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s ease;
}

.episode-thumb { grid-area: thumb; }
.episode-info { grid-area: info; }
.episode-item .ep-cta-buttons { grid-area: buttons; align-self: center; }
.episode-item .ep-also-available { grid-area: also; }

.episode-link { display: contents; color: inherit; text-decoration: none; }

.episode-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }

.episode-item:hover { background: rgba(255,255,255,0.02); padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; }

.episode-thumb { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--card); flex-shrink: 0; }

.episode-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

.episode-item:hover .episode-thumb img { transform: scale(1.05); }

.episode-thumb .play-overlay { position: absolute; inset: 0; background: rgba(25, 164, 166, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }

.episode-item:hover .play-overlay { opacity: 1; }

.play-overlay svg { width: 40px; height: 40px; fill: var(--white); }

.episode-number { position: absolute; top: 8px; left: 8px; font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; background: var(--teal); color: var(--black); padding: 3px 8px; }

.episode-info { display: flex; flex-direction: column; gap: 8px; }

.episode-info h4 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--white); line-height: 1.3; transition: color 0.3s ease; }

.episode-item:hover .episode-info h4 { color: var(--teal); }

.episode-guest-name { font-size: 14px; color: var(--muted); }

.episode-excerpt { font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.episode-meta { display: flex; align-items: center; gap: 16px; margin-top: 4px; }

.episode-date { font-family: var(--font-heading); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

.episode-duration { font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); }

.episode-lang { font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 2px 8px; background: rgba(25, 164, 166, 0.15); color: var(--teal); border-radius: 2px; }
.episode-lang[data-lang="fr"] { background: rgba(210, 109, 251, 0.15); color: var(--orchid, #D26DFB); }

/* Legacy .episode-platforms kept for back-compat; the live grid uses .ep-cta below.
   If a future view ever renders the old markup, these rules still apply. */
.episode-platforms { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.episode-platforms a { display: flex; align-items: center; justify-content: center; opacity: 0.35; transition: all 0.3s ease; text-decoration: none; }
.episode-platforms a:hover { opacity: 1; transform: scale(1.15); }
.episode-platforms a svg { width: 20px; height: 20px; }

/* === DOAC-style CTA row (Watch / Listen + Also available on) =============
   Listing: buttons sit in the right grid column (Jay Shetty layout).
   Featured: .ep-cta wrapper still stacks buttons + also-available vertically. */

.ep-cta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.ep-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 144px;
}

/* Featured keeps a 2-column row of buttons since it has more horizontal space. */
.ep-cta--featured .ep-cta-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
}
.ep-cta--featured .ep-cta-buttons > * { flex: 1 1 180px; }

.ep-cta-btn {
    --btn-fg: var(--white);
    --btn-bg: var(--teal-deep);
    --btn-bd: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-bd);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    user-select: none;
    line-height: 1;
}

.ep-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(25,164,166,0.22);
}

.ep-cta-btn:focus-visible {
    outline: 2px solid var(--teal-light, #2cd6d8);
    outline-offset: 3px;
}

.ep-cta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Watch (primary, filled teal) — YouTube */
.ep-cta-btn--watch {
    --btn-fg: var(--white);
    --btn-bg: var(--teal-deep);
    --btn-bd: var(--teal);
}
.ep-cta-btn--watch:hover {
    --btn-bg: var(--teal-light, #2cd6d8);
    --btn-bd: var(--teal-light, #2cd6d8);
}

/* Listen (secondary, ghost teal) — Spotify */
.ep-cta-btn--listen {
    --btn-fg: var(--teal);
    --btn-bg: transparent;
    --btn-bd: var(--teal);
}
.ep-cta-btn--listen:hover {
    --btn-fg: var(--white);
    --btn-bg: var(--teal-deep);
    --btn-bd: var(--teal);
}

/* Disabled (URL absent) — visible but inert */
.ep-cta-btn.is-disabled {
    --btn-fg: rgba(255,255,255,0.5);
    --btn-bg: rgba(255,255,255,0.04);
    --btn-bd: rgba(255,255,255,0.12);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}
.ep-cta-btn--listen.is-disabled {
    --btn-fg: rgba(25,164,166,0.4);
    --btn-bg: transparent;
    --btn-bd: rgba(25,164,166,0.18);
}

/* Also available on: row of brand-coloured platform icons (no border, no
   chip — just the colour mark itself, like the listen-strip chips at top
   of the page but applied per-episode). Hover = scale only (no colour
   change), per editorial decision. */
.ep-also-available {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.ep-also-label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.ep-also-icons {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.ep-platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease;
}

.ep-platform-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.ep-platform-icon:hover { transform: scale(1.18); }

.ep-platform-icon:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.ep-platform-icon--youtube { color: #FF0000; }
.ep-platform-icon--spotify { color: #1DB954; }
.ep-platform-icon--apple   { color: #D56DFB; }
.ep-platform-icon--amazon  { color: #25D8FD; }
.ep-platform-icon--deezer  { color: #A238FF; }

.ep-platform-icon.is-disabled {
    pointer-events: none;
    cursor: not-allowed;
    color: rgba(255,255,255,0.18);
}
.ep-platform-icon.is-disabled:hover { transform: none; }

/* Share button keeps its own neutral colour + scale-only hover. */
.ep-also-icons .ep-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: rgba(255,255,255,0.45);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}
.ep-also-icons .ep-share svg { width: 22px; height: 22px; }
.ep-also-icons .ep-share:hover { color: var(--white); transform: scale(1.18); }
.ep-also-icons .ep-share:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
    border-radius: 4px;
}

.ep-also-available--share-only {
    justify-content: flex-end;
}
.ep-also-available--share-only .ep-share {
    margin-left: auto;
}

/* Share button keeps its existing copy-confirmation animation */
.episode-share-btn { background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; transition: all 0.3s ease; position: relative; }
.episode-share-btn.copied::after { content: '✓'; position: absolute; top: -22px; right: -4px; font-size: 11px; color: var(--teal); font-weight: 700; animation: copyPulse 1.4s ease; }
@keyframes copyPulse { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2px); } }

.episodes-count { text-align: center; margin-top: 48px; font-family: var(--font-heading); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

.load-more { text-align: center; margin-top: 24px; }

.load-more-btn { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); background: transparent; border: 1px solid var(--teal); padding: 16px 48px; cursor: pointer; transition: all 0.3s ease; }

.load-more-btn:hover { background: var(--teal); color: var(--black); }

.subscribe-bar { background: var(--card); padding: 64px 0; text-align: center; }

.subscribe-bar h2 { font-family: var(--font-heading); font-size: 14px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-bottom: 64px; }

.subscribe-platforms { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; align-items: center; }

.subscribe-platform { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; opacity: 0.55; transition: opacity 0.3s ease; } /* was 0.4 → white label only 3.82:1; 0.55 = 6.2 (AA) */

.subscribe-platform:hover { opacity: 1; }

.subscribe-platform svg { width: 40px; height: 40px; }

.subscribe-platform .platform-name { font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); }

.newsletter { background: linear-gradient(180deg, var(--black) 0%, #0D0D18 50%, var(--black) 100%); text-align: center; padding: 140px 40px; }

.newsletter h3 { font-family: var(--font-heading); font-size: 36px; font-weight: 300; color: var(--white); margin-bottom: 16px; }

.newsletter p { font-size: 16px; color: var(--muted); max-width: 480px; margin: 0 auto 40px; }

.newsletter-form { display: flex; max-width: 520px; margin: 0 auto; gap: 0; }

.newsletter-form input { flex: 1; background: transparent; border: 1px solid rgba(255,255,255,0.15); border-right: none; color: var(--white); padding: 16px 20px; font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color 0.3s; }

.newsletter-form input::placeholder { color: rgba(255,255,255,0.2); }

.newsletter-form input:focus { border-color: var(--teal); }

.newsletter-form button { font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; background: var(--teal); color: var(--black); border: 1px solid var(--teal); padding: 16px 32px; cursor: pointer; transition: all 0.3s; }

.newsletter-form button:hover { background: var(--teal-light); }

.newsletter .rgpd { font-size: 10px; color: rgba(255,255,255,0.25); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 20px; }

@media (max-width: 1024px) {
    .featured-grid { grid-template-columns: 1fr; gap: 40px; }
    /* On tablet, drop the 3rd column — buttons go on their own row below thumb+info. */
    .episode-item {
        grid-template-columns: 160px 1fr;
        grid-template-areas:
            "thumb info"
            "buttons buttons"
            "also  also";
        column-gap: 24px;
    }
    .episode-item .ep-cta-buttons { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .episode-item .ep-cta-buttons > * { flex: 1 1 160px; }
}

@media (max-width: 768px) {
    .episode-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "thumb"
            "info"
            "buttons"
            "also";
        gap: 16px;
        padding: 24px 0;
    }
    .episode-thumb { max-width: 280px; }
    .episode-platforms { margin-top: 4px; }
    .episodes-header { flex-direction: column; align-items: flex-start; }
    .featured h3 { font-size: 26px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form input { border-right: 1px solid rgba(255,255,255,0.15); }
    .subscribe-platforms { gap: 32px; }
}

/* CTA — responsive collapse */
@media (max-width: 640px) {
    .ep-cta-buttons { flex-direction: row; gap: 10px; }
    .ep-cta-buttons > * { flex: 1; }
    .ep-cta-btn { min-height: 48px; font-size: 11px; letter-spacing: 0.16em; padding: 12px 16px; }
    .ep-also-available { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 10px; }
    .ep-also-icons { margin-left: 0; gap: 14px; }
    .ep-also-available--share-only { align-items: flex-end; }
}

/* === htmx loading feedback (filters + Load more) ===
   htmx adds .htmx-request on the triggering element while the GET is in
   flight; we hide the label, swap in a rotating ring, and lock pointer-
   events so the user can't fire the same request twice.
   Pattern: button is position: relative so the spinner can absolutely
   center over the (visibility:hidden) label without changing button width. */
.filter-btn,
.load-more-btn {
    position: relative;
}

.filter-btn .btn-spinner,
.load-more-btn .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lop-spin 0.7s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
}

.filter-btn.htmx-request,
.load-more-btn.htmx-request {
    pointer-events: none;
    cursor: progress;
}

.filter-btn.htmx-request .btn-label,
.load-more-btn.htmx-request .btn-label {
    visibility: hidden;
}

.filter-btn.htmx-request .btn-spinner,
.load-more-btn.htmx-request .btn-spinner {
    display: inline-block;
}

@keyframes lop-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   WATCH THE HIGHLIGHTS — YouTube shorts carousel (added 26/05/2026)
   3-per-view desktop, 2 tablet, 1 mobile. Max 9 trailers.
   No iframes at render — thumbnails only. Modal lazy-loads the iframe.
   ============================================ */

.trailers {
    background: linear-gradient(180deg, var(--black) 0%, #0A0A14 100%);
    padding: clamp(72px, 11vh, 120px) 0;
}

.trailers-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 56px);
    text-align: center;
}

.trailers-inner h2 {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 300;
    color: var(--white);
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

.trailers-intro {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    color: var(--off-white);
    opacity: 0.85;
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vh, 64px);
}

.trailers-carousel {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: clamp(8px, 1.5vw, 16px);
    align-items: center;
}

.trailers-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    color: var(--white);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.25s ease;
    padding: 0;
}

.trailers-nav:hover:not([disabled]) {
    background: var(--teal-dim);
    border-color: var(--teal);
    color: var(--teal);
}

.trailers-nav[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
}

.trailers-nav svg { width: 20px; height: 20px; }

.trailers-viewport {
    overflow: hidden;
}

.trailers-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 32px) / 3);
    gap: 16px;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.trailer-card { padding: 0; }

.trailer-card-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    text-align: left;
    gap: 12px;
}

.trailer-thumb {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--card);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.trailer-card-btn:hover .trailer-thumb { transform: translateY(-4px); }
.trailer-card-btn:focus-visible .trailer-thumb {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

.trailer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.trailer-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease;
}

.trailer-card-btn:hover .trailer-play { background: rgba(0, 0, 0, 0.4); }

.trailer-play svg {
    width: 56px;
    height: 56px;
    color: var(--white);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease;
}

.trailer-card-btn:hover .trailer-play svg { transform: scale(1.08); }

.trailer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 2px;
}

.trailer-guest {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--white);
    line-height: 1.3;
}

.trailer-title {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .trailers-track { grid-auto-columns: calc((100% - 16px) / 2); }
}

@media (max-width: 560px) {
    .trailers-carousel {
        grid-template-columns: 36px 1fr 36px;
        gap: 6px;
    }
    .trailers-nav { width: 36px; height: 36px; }
    .trailers-nav svg { width: 16px; height: 16px; }
    .trailers-track { grid-auto-columns: 100%; }
}

/* === Trailer modal === */

.trailer-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.trailer-modal[hidden] { display: none; }

.trailer-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.trailer-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trailer-modal-close {
    position: absolute;
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.5);
    color: var(--white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.25s ease;
}

.trailer-modal-close:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--black);
}

.trailer-modal-close svg { width: 18px; height: 18px; }

.trailer-modal-frame {
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.trailer-modal-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.trailer-modal-caption {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0.02em;
    margin: 0;
    text-align: center;
    opacity: 0.9;
}