/* ==========================================================================
   Podcast episode detail page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:71584 "Podcast Episode Detail"). Reuses the --hr-* tokens
   declared globally in layout-revamp.css, and the .pod-grid / .pod-card
   styles from podcasts-revamp.css for the "More Episodes" grid — Figma reuses
   the exact same "Podcasts-card" component there, so this page loads both
   stylesheets rather than duplicating that card a second time.

   No photo banner — the same flat coral "liquid" gradient wash as
   video-detail-revamp.css, bled tall enough to wash over the episode card
   below the hero too. */
.podcasts-detail-revamp .hr-accent { color: var(--hr-yellow-500); }
.podcasts-detail-revamp {
    /* One source of truth for the side gutter — every section's padding and
       the divider bleed derive from it, so they cannot drift apart across
       breakpoints. Same approach as --podd-hero-h below and --vidd-hero-h on
       the video detail page. */
    --podd-gutter: 160px;
    --podd-hero-h: 256px;
    /* hero + 80px, identical to the listing's --pod-wash-h and the video
       detail page's --vidd-wash-h. It was a flat 560px so the wash would also
       cover the top of the episode card, but that spread the same three
       stops over a box roughly twice as tall, so the fade began and ended
       much lower down than on the listing — the two pages did not read as
       the same colour. Same hero height, same box, same stops now. */
    --podd-wash-h: calc(var(--podd-hero-h) + 80px);
    position: relative;
    /* Figma's fill for the shared "Innerpage-hero/Without" instance, read off
       its own paint panel: a linear gradient at 89% opacity whose three
       stops are red/red-500 at 100%, #EE3B33 at 50% and #EE3B33 at 0%, over a
       solid #F9EAEA. Ported verbatim from .video-detail-revamp — the
       four-stop .89/.6/.3/0 falloff this page carried, on a one-off
       #ee3a32, was a stand-in from before the component's real paint was
       available.
       #F9EAEA is its own layer rather than the page's background-color,
       because that colour paints every section down to the footer — putting
       it there would tint the whole page pink. That layer needs its OWN
       falloff: as a flat fill cut to the wash's height it would end on a
       hard line against cream-400, so its box is 1.5x the wash, held solid
       for the red's full span (to 66.67%) and then eased to transparent. */
    background:
        linear-gradient(to bottom,
            rgba(238, 59, 51, .89) 0%,
            rgba(238, 59, 51, .445) 50%,
            rgba(238, 59, 51, 0) 100%) no-repeat top center,
        linear-gradient(to bottom,
            #f9eaea 0%,
            #f9eaea 66.67%,
            rgba(249, 234, 234, 0) 100%) no-repeat top center,
        var(--hr-cream-400);
    background-size: 100% var(--podd-wash-h), 100% calc(var(--podd-wash-h) * 1.5);
}
/* The brushed grain over the wash — same tile, same .7 opacity, same decay
   mask as the listing hero and the video detail page, so all three read
   identically. A plain linear-gradient() renders flat and plastic without
   it. */
.podcasts-detail-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--podd-wash-h);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
    background-repeat: repeat;
    opacity: .7;
    mix-blend-mode: overlay;
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Hero / breadcrumb ---------- */
.podd-hero {
    position: relative;
    z-index: 1;
    /* min-height, NOT height. This page's last crumb is the episode title
       (Str::limit to 60 chars), which can wrap to two or three lines well
       before the phone breakpoint. With a fixed height and
       align-items:flex-end the extra lines could only grow UPWARD, into the
       space the overlay header occupies. As a minimum the hero grows
       downward instead, and the header keeps its clearance at every width.
       Same reasoning as .vidd-hero on the video detail page. */
    height: auto;
    min-height: var(--podd-hero-h);
    display: flex;
    align-items: flex-end;
    /* The top is derived rather than picked: a single-line breadcrumb
       occupies its 28px line plus the 32px bottom, so `hero - 60px` is
       exactly the clear space above it, and it tracks --podd-hero-h across
       the three breakpoints instead of needing hand-written values. Same
       expression as .podd-hero / .vidd-hero. */
    padding: calc(var(--podd-hero-h) - 60px) var(--podd-gutter) 32px;
    /* Clips the corner wedges to the band, the way .vidd-hero does — this
       page has no separate decor box. */
    overflow: hidden;
}
/* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero/Without" instance: two
   DISTINCT angular cream wedges at 10% fill in the bottom corners, not one
   shape mirrored. Same pair, same geometry and the same shared
   innerpage-hero/ assets as .podd-hero-pattern's siblings on the listing and
   video detail pages. Bottom-anchored, as Figma has them, so they keep the
   same relationship to the breadcrumb at the shorter breakpoints. */
.podd-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.podd-hero-pattern-start {
    inset-inline-start: 0;
    width: 305.329px;
    height: 160.658px;
    background-image: url("../images/innerpage-hero/hero-pattern-nobanner-left.svg");
}
/* Figma puts mix-blend-mode:overlay on this one's container, not inside the
   SVG — as a background-image the blend has to be applied here or it
   composites against the SVG's own transparency and does nothing. */
.podd-hero-pattern-end {
    inset-inline-end: 0;
    width: 305.29px;
    height: 204.731px;
    background-image: url("../images/innerpage-hero/hero-pattern-nobanner-right.svg");
    mix-blend-mode: overlay;
}
[dir="rtl"] .podd-hero-pattern { transform: scaleX(-1); }
/* Kept on phones, both corners, rather than dropped - the wedges are part of
   the hero at every width. They used to be display:none here, on the reasoning
   that the band is too short for Pattern-02's 204.731px; scaled, the pair comes
   out 100px and 128px tall, so both clear it.

   min() caps them at 190px (reached at ~432px, so 430/440-class phones render
   at the full 190) and below that holds the pair at 88%% of the width with a
   real gap between them. aspect-ratio carries each asset's own proportions.
   Same treatment and the same numbers as .evt-hero-pattern, which uses assets
   of identical dimensions. */
@media (max-width: 767.98px) {
    .podd-hero-pattern-start {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.329 / 160.658;
    }
    .podd-hero-pattern-end {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.29 / 204.731;
    }
}
.podd-hero-inner { position: relative; z-index: 1; max-width: 1600px; width: 100%; margin-inline: auto; }
.podd-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* 22px between crumbs and a 28px line box, matching .vidd-breadcrumb.
   nowrap + min-width:0 (needed so this can shrink as a flex ITEM of
   .podd-breadcrumb-row too, not just lay out its own children) - with wrap
   still on, a too-long current crumb pushed the whole trail onto a second
   line instead of the ellipsis on .podd-breadcrumb-current ever engaging. */
.podd-breadcrumb { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; min-width: 0; font-size: 20px; line-height: 28px; color: var(--hr-cream-500); text-transform: uppercase; }
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.podd-breadcrumb a,
.podd-breadcrumb span:not(.podd-breadcrumb-sep) { opacity: 1; }
.podd-breadcrumb a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.podd-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
/* A long episode title used to wrap the whole crumb trail onto a second line
   at narrow widths instead of just cutting itself off. flex:1 1 auto +
   min-width:0 lets this one crumb alone shrink to whatever space the row
   actually has left, at any viewport width, and ellipsis marks the cut
   instead of wrapping. */
.podd-breadcrumb-current {
    font-weight: 700;
    opacity: 1 !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.podd-breadcrumb-sep { width: 1px; height: 16px; background: rgba(249, 247, 234, .5); flex-shrink: 0; }
.podd-hero-divider { display: none; }
@media (min-width: 1200px) {
    .podd-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        /* 300px, not the 400px this carried: the width the listing, video
           detail, Speakers, Annual Gatherings and Search heroes all settled
           on for this same 256px breadcrumb-only variant, so the cluster
           starts at the same distance from the edge on all of them. */
        width: 300px;
        /* var, not a literal -160px: the gutter is now the single source for
           it, so the rule keeps reaching the viewport edge if that moves. */
        margin-inline-end: calc(-1 * var(--podd-gutter) - max(0px, (100vw - 1920px) / 2));
    }
    .podd-hero-divider .podd-diamond {
        /* 20 * (sqrt(2) - 1) / 2. A rotated 20px square is 28.28px wide visually
           but still occupies a 20px layout box, so the 4.142px overhang per side
           would make neighbours merge into one continuous zigzag. This margin
           separates the boxes by exactly that overhang, so adjacent tips just
           touch - corner to corner, 0px visible gap, no merge. Carried on the
           diamond rather than as a `gap` on the row so the last one also spaces
           itself off the line. Matches .abt-diamond / .tnc-diamond / .sml-*. */
        width: 20px;
        height: 20px;
        margin-inline: 4.142px;
        transform: rotate(45deg);
        background: var(--hr-cream-500);
        flex-shrink: 0;
    }
    .podd-hero-divider-line { flex: 1 1 auto; height: 1px; background: rgba(249, 247, 234, .5);        /* The last diamond's own 4.142px slot margin supplies the gap now, so a
           negative offset here would eat into it. */
        margin-inline-start: 0; }
}
.podd-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Episode header card ---------- */
.podd-episode-wrap { position: relative; z-index: 1; padding: 120px var(--podd-gutter) 0; }
.podd-episode-inner { max-width: 1600px; margin-inline: auto; margin-bottom: 80px; }
.podd-episode {
    position: relative;
    display: flex;
    align-items: stretch;
    /* min-height, not height: a fixed height + overflow:hidden clipped the
       seek bar clean off whenever a long title wrapped to 2-3 lines and
       pushed .podd-episode-copy's content past 436px. This lets the card
       grow with the title instead - .podd-episode-media has no height of
       its own any more (below), so align-items:stretch sizes it to match
       whatever height the row actually ends up needing. */
    min-height: 436px;
    padding: 8px;
    border: 1px solid #fff;
    border-radius: 40px;
    overflow: hidden;
    background: linear-gradient(0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 76.22%, rgba(255,255,255,.6) 102.95%);
    -webkit-backdrop-filter: blur(53.55px);
    backdrop-filter: blur(53.55px);
    box-shadow: inset 0 4px 6.1px rgba(255,255,255,.23), 7px 63px 18px rgba(0,0,0,0), 4px 40px 16px rgba(0,0,0,0), 2px 23px 14px rgba(0,0,0,.02), 1px 10px 10px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.03);
}
.podd-episode-media {
    position: relative;
    flex-shrink: 0;
    width: 40%;
    max-width: 521px;
    /* min-height, not height: a fixed height wins over align-items:stretch
       and would leave a gap under the image whenever the card (now
       min-height itself) grows past 436px for a long, wrapping title.
       min-height is just a floor - stretch still grows this to match the
       row's actual height above that. */
    min-height: 420px;
    border-radius: 32px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--hr-brown-300);
}
/* Same recipe as .podd-episode-progress-play - amber fill, 1.5px transparent
   border + masked ring, inset highlight + drop-shadow stack - just centred
   absolutely over the thumbnail instead of sitting inline in the seek bar.
   Stays a plain one-shot trigger (fa-play only, no is-playing state): this
   button is removed from the DOM the moment it's pressed, so it never needs
   to answer a pause state the way the seek bar's does. */
.podd-episode-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    background: var(--hr-yellow-500);
    border: 1.5px solid transparent;
    box-shadow:
        0 4px 6.1px 0 rgba(255, 255, 255, .23) inset,
        2px 23px 14px 0 rgba(0, 0, 0, .02),
        1px 10px 10px 0 rgba(0, 0, 0, .03),
        0 3px 6px 0 rgba(0, 0, 0, .03);
    isolation: isolate;
    cursor: pointer;
    transition: transform .2s ease;
}
.podd-episode-play::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(101,104,111,.39) 74.04%, rgba(255,255,255,.75) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.podd-episode-play:hover { transform: translate(-50%, -50%) scale(1.05); }
.podd-episode-play i { font-size: 19px; color: #fff; transform: translateX(1.5px); }
.podd-episode-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.podd-episode-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 56px; }
.podd-episode-date {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 56px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    color: var(--hr-cream-900, #696862);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.podd-episode-title {
    margin: 0 0 24px;
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    background: linear-gradient(90deg, #d09a38 0%, #ac853a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.podd-episode-desc { margin: 0 0 40px; font-size: 18px; line-height: 28px; color: var(--hr-brown-300); }
.podd-episode-progress { display: flex; align-items: center; gap: 32px; width: 100%; }
/* Same play circle recipe as .pod-card-play on the podcasts listing - amber
   fill, 1.5px transparent border, inset highlight + drop-shadow stack - just
   static in a row instead of absolutely centred over a thumbnail. */
.podd-episode-progress-play {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    background: var(--hr-yellow-500);
    border: 1.5px solid transparent;
    box-shadow:
        0 4px 6.1px 0 rgba(255, 255, 255, .23) inset,
        2px 23px 14px 0 rgba(0, 0, 0, .02),
        1px 10px 10px 0 rgba(0, 0, 0, .03),
        0 3px 6px 0 rgba(0, 0, 0, .03);
    isolation: isolate;
    cursor: pointer;
    transition: transform .2s ease;
}
.podd-episode-progress-play::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(101,104,111,.39) 74.04%, rgba(255,255,255,.75) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.podd-episode-progress-play:hover { transform: translateY(-2px); }
.podd-episode-progress-play i {
    font-size: 19px;
    color: #fff;
    /* Optical centring for the play triangle, same 1.5px nudge as the SVG
       glyph it replaces (.pod-card-play img) - not needed once it flips to
       the symmetrical pause bars. */
    transform: translateX(1.5px);
}
.podd-episode-progress-play.is-playing i { transform: none; }
.podd-episode-progress-track { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 12px; }
.podd-episode-progress-time { flex-shrink: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--hr-brown-700); opacity: .6; }
.podd-episode-progress-bar { flex: 1 1 auto; min-width: 0; height: 12px; border-radius: 80px; background: #e8e8e7; overflow: hidden; }
/* 1/4 by default, matching the design's static state - the player script
   overwrites this with the real percentage once playback actually starts. */
.podd-episode-progress-fill { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--hr-yellow-500); }
.podd-episode-meta { display: flex; align-items: center; gap: 8px; font-size: 20px; color: var(--hr-brown-700); }
.podd-episode-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hr-green-500);
}
.podd-episode-meta-icon img { width: 12px; height: 12px; }
.podd-episode-listen { display: flex; flex-direction: column; gap: 16px; }
/* 28px line box, matching .pod-featured-listen-label on the listing's own
   featured spotlight — without it this inherited the browser default and
   stood a couple pixels shorter than its sibling. */
.podd-episode-listen-label { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--hr-brown-900); }
.podd-episode-links { display: flex; gap: 12px; flex-wrap: wrap; }
/* Same recipe as .hr-btn-ghost-dark / .vidd-btn-ghost: translucent white
   fill+border at the Figma stroke's own 1.5px, the flat ambient shadow, and
   the shared masked rim + hover glow (layout-revamp.css) instead of a manual
   background swap on hover. */
.podd-listen-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 24px;
    border-radius: 61px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid rgba(255, 255, 255, .2);
    box-shadow: 0 4px 6.1px rgba(0, 0, 0, .06);
    font-size: 16px;
    font-weight: 700;
    color: var(--hr-brown-900);
    text-decoration: none;
    transition: all .2s ease-in-out;
}
.podd-listen-btn:hover { color: var(--hr-brown-900); }

/* ---------- Main content ---------- */
/* z-index 2, not 1: .podd-share-menu's own z-index only wins within this
   section's stacking context - it still needs .podd-main itself to outrank
   .podd-related below, since that section sits later in the DOM at the same
   z-index:1 and was painting over the share dropdown whenever it opened.
   overflow:visible overrides app.css's blanket `section { overflow: hidden; }`
   - .podd-main IS a <section>, so the share dropdown (which opens below the
   fold of this section's own box) was being clipped by that rule regardless
   of any z-index fix. */
.podd-main { position: relative; z-index: 2; overflow: visible; padding: 0 var(--podd-gutter) 0; }
/* Must sit AFTER .podd-main, not before it: same specificity, and .podd-main
   sets `padding` as a SHORTHAND, so from up there this padding-bottom was being
   reset to 0 and the modifier did nothing at all. With More Episodes switched
   off, .podd-main is the last section on the page and the tags row ended up
   flush against the footer's top edge - no gap whatsoever. Roughly matches the
   100px .podd-related carries when it is the one closing the page out. */
.podd-main-no-related { padding-bottom: 120px; }
.podd-main-inner { max-width: 1600px; margin-inline: auto; display: flex; align-items: flex-start; gap: 80px; }
.podd-content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.podd-content h2 { font-size: 48px; line-height: 56px; font-weight: 700; color: var(--hr-brown-900); margin: 0; }
.podd-content-text { font-size: 20px; line-height: 28px; color: #3e3d30; margin: 0; max-width: 770px; }

.podd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; }
.podd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14.5px 22.5px;
    border-radius: 61px;
    border: 1.5px solid transparent;
    background: none;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}
.podd-btn:hover { transform: translateY(-2px); }
.podd-btn img { width: 24px; height: 24px; }
/* Same recipe as .vidd-btn-primary on the video detail page: outset white
   ring with no bottom edge, plus the full ambient drop-shadow stack under the
   inset highlight - not just the flat inset alone. */
.podd-btn-primary {
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        7px 63px 18px rgba(0, 0, 0, .02),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
}
.podd-btn-primary:hover { color: var(--hr-cream-50); }
/* Ghost. Same recipe as .vidd-btn-ghost / .tlkd-btn-ghost: translucent white
   fill+border and the flat ambient shadow (no inset highlight - that belongs
   to the amber primary), joining the same masked glass rim + hover glow in
   layout-revamp.css. This carried a dark-tinted border and a half-strength
   white fill instead, on the reasoning that this row sits below the hero's
   gradient fade on plain cream and the .2 fill would be nearly invisible
   there - worth watching after this change; the fix trades that concern for
   matching every other ghost pill on the site. */
.podd-btn-ghost { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .2); color: var(--hr-brown-900); box-shadow: 0 4px 6.1px rgba(0, 0, 0, .06); }
.podd-btn-ghost:hover { color: var(--hr-brown-900); }
.podd-share { position: relative; }
.podd-share-menu {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-start: 0;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(11, 11, 5, .16);
    z-index: 10;
}
.podd-share-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .05);
    color: var(--hr-brown-900);
    text-decoration: none;
}
.podd-share-menu a:hover { background: var(--hr-green-500); color: var(--hr-cream-50); }

.podd-transcript {
    max-width: 770px;
    padding: 20px 24px;
    border-radius: 16px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    color: var(--hr-brown-300);
    font-size: 16px;
    line-height: 24px;
}

.podd-tags { display: flex; flex-wrap: wrap; gap: 16px; max-width: 770px; }
.podd-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    /* Utility/Tag/Bold sets lineHeight 100% - i.e. 14px on 14px type, so
       8 + 14 + 8 + 2 (this pill's 1px border, top and bottom) = 32px. Same
       correction .pr-card-date / .pod-card-date carry for the identical chip;
       without it this inherited the browser default and stood taller. */
    line-height: 1;
    border-radius: 8px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    color: var(--hr-cream-900, #696862);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- "In this episode" card ---------- */
.podd-guest-card {
    flex-shrink: 0;
    width: 519px;
    padding: 48px;
    border-radius: 24px;
    border: 1px solid #fff;
    background: linear-gradient(to top, rgba(255, 255, 255, .8), rgba(255, 255, 255, .8) 76%, rgba(255, 255, 255, .6));
    -webkit-backdrop-filter: blur(53.55px);
    backdrop-filter: blur(53.55px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6.1px rgba(255, 255, 255, .23);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.podd-guest-head { display: flex; align-items: center; gap: 12px; }
.podd-guest-mark {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--hr-purple-500, #8e3b78);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.podd-guest-mark::after { content: ""; position: absolute; inset: 5px; background: var(--hr-purple-500, #8e3b78); }
.podd-guest-head h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.podd-guest-row { display: flex; align-items: center; gap: 16px; }
.podd-guest-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--hr-brown-300);
    display: flex;
    align-items: center;
    justify-content: center;
}
.podd-guest-avatar img { width: 24px; height: 24px; opacity: .5; filter: brightness(0) invert(1); }
.podd-guest-text { display: flex; flex-direction: column; min-width: 0; }
.podd-guest-name { font-size: 18px; font-weight: 700; color: var(--hr-brown-900); }
.podd-guest-role { font-size: 16px; color: var(--hr-brown-300); }

/* ---------- Divider ---------- */
/* Same technique as the homepage's .hr-diamond-border: a ::before line running
   the full width of this box, with a diamond cluster near each end. The
   diamonds use a solid, pre-blended colour (hr-yellow-400 at 50% over the
   cream background) rather than opacity — opacity flattens the diamond as a
   group, so a translucent diamond still lets the line drawn behind it show
   through its centre. Must stay a plain sibling between sections, not nested
   inside a <section>: the line is only as wide as this element, so the element
   has to be full-bleed for it to reach the viewport edges (and app.css
   defaults sections to overflow:hidden besides). */
.podd-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Full-bleed box with the 1600px cap moved into the padding, so the
       hairline below can be anchored to this element's own edges instead of
       100vw. Percentage padding resolves against the parent's content width -
       the viewport's client width here - so the clusters land exactly where
       `max-width: 1600px; margin-inline: auto` used to put them, and under
       1600px the max() floors it at 0, matching the cap being inactive. */
    /* The 5px floor is not cosmetic: .podd-diamond-sm is a 20px square turned
       45deg, so it needs (20 * sqrt(2) - 20) / 2 = 4.14px of room either side
       of its layout box for the rotated corners. Below the 1600px cap the
       clusters sat flush against the viewport edge and those corners hung off
       the document, which is its own 4px of horizontal overflow independent of
       the hairline. Sibling instances of this divider (home, About) never hit
       it because they always keep a 16px+ gutter. */
    padding-inline: max(5px, calc((100% - 1600px) / 2));
    margin: 60px 0 0;
}
.podd-divider::before {
    content: "";
    position: absolute;
    /* left/right: 0 spans this box, which is now the viewport's client width.
       100vw included the vertical scrollbar on top of that, and nothing clips
       this divider by design (it is a plain sibling between sections, per the
       note above), so the overhang landed in the document's scrollable
       overflow and pushed scrollWidth past clientWidth. */
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: var(--hr-yellow-400);
    opacity: .35;
}
.podd-divider-cluster { position: relative; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.podd-diamond-sm { width: 20px; height: 20px; background: #e9be75; transform: rotate(45deg); flex-shrink: 0; }

/* ---------- More episodes (reuses .pod-grid / .pod-card from podcasts-revamp.css) ---------- */
.podd-related { position: relative; z-index: 1; padding: 60px var(--podd-gutter) 100px; }
.podd-related-inner { position: relative; z-index: 1; max-width: 1600px; margin-inline: auto; }
/* Column, so the optional subtitle stacks under the heading rather than sitting
   inline beside it. Both are CMS fields and either can be empty. */
.podd-related-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.podd-related-head h2 { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
/* Body/Body Medium/Regular, the size the sibling sections' subtitles use. Only
   rendered when an admin has written one - the section ships without subtitle
   copy (see Podcast::SECTION_HEADINGS). */
.podd-related-subtitle {
    font-size: 20px;
    line-height: 30px;
    color: var(--hr-brown-300);
    margin: 0;
    max-width: 720px;
}

/* ---------- Not-found state ---------- */
.podd-empty {
    position: relative;
    z-index: 1;
    padding: 160px 160px 200px;
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.podd-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(236, 230, 211, .5);
}
.podd-empty-icon img { width: 40px; height: 40px; opacity: .5; }
.podd-empty h1 { font-size: 40px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.podd-empty p { font-size: 18px; line-height: 28px; color: var(--hr-brown-300); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1439.98px) {
    /* Stacked layout re-flows the vertical rhythm around explicit margins
       instead of the desktop gap values, and pulls the guest card up to sit
       directly under the hero (order: -1) - same technique as
       .vidd-chapters-card on the video detail page - rather than after the
       whole "About this episode" content column. */
    .podd-episode-wrap { padding-top: 60px; }
    .podd-episode-inner { margin-bottom: 24px; }
    .podd-main { padding-top: 0; }
    .podd-main-inner { flex-direction: column; gap: 0; }
    .podd-guest-card { width: 100%; order: -1; margin-bottom: 32px; }
    .podd-content { gap: 0; }
    .podd-content h2 { margin-bottom: 12px; }
    .podd-content-text { margin-bottom: 32px; }
    .podd-actions { margin-bottom: 32px; }
    .podd-related-head { margin-bottom: 20px; gap: 12px; }
    .podd-related-subtitle { font-size: 18px; line-height: 28px; }
}
@media (max-width: 1199.98px) {
    /* The gutter carries every section's padding with it — no per-section
       override needed. */
    .podcasts-detail-revamp { --podd-gutter: 40px; }
    /* Hero comes down with the gutters, 256 -> 200 -> 160, as on the listing
       and the video detail page. The wash follows it through --podd-wash-h
       without needing its own override here. */
    .podcasts-detail-revamp { --podd-hero-h: 200px; }
    .podd-episode-title { font-size: 40px; line-height: 48px; }
    .podd-content h2 { font-size: 36px; line-height: 44px; }
}
@media (max-width: 991.98px) {
    /* min-height:0 on both, too - the base rule's min-height:436px/420px
       would otherwise still win over this stacked layout's own auto/280px
       (min-height only ever raises the used size; a plain height override
       alone doesn't cancel it). */
    .podd-episode { flex-direction: column; height: auto; min-height: 0; }
    .podd-episode-media { width: 100%; max-width: none; height: 280px; min-height: 0; }
    .podd-episode-copy { padding: 24px; }
    .podd-episode-date { margin-bottom: 24px; }
    .podd-episode-title { margin-bottom: 14px; }
    .podd-episode-desc { margin-bottom: 16px; }
    .podd-related { padding-bottom: 80px; }
    .podd-main-no-related { padding-bottom: 80px; }
}
@media (max-width: 767.98px) {
    .podcasts-detail-revamp {
        --podd-gutter: 16px;
        --podd-hero-h: 160px;
    }
    .podd-episode-title { font-size: 30px; line-height: 38px; }
    .podd-content h2 { font-size: 28px; line-height: 36px; }
    /* 18/26, matching .vidd-description's own phone step — this carried
       16/24, a size step further down than its sibling body copy. */
    .podd-content-text { font-size: 18px; line-height: 26px; }
    .podd-guest-card { padding: 28px; }

    /* Same phone step as .vidd-diamond-sm on the video detail page: the 20px
       diamonds shrink to 10px rather than staying full-size on a narrow rail.
       Cluster spacing halves with it, translated to this page's gap-based
       model (video uses a per-diamond margin-inline instead). */
    .podd-diamond-sm { width: 10px; height: 10px; }
    .podd-divider-cluster { gap: 2px; }

    /* Same wrap as .vidd-actions on the video detail page: Transcript takes
       its own full-width row (flex-basis:100%), Copy link and Share split
       the second row 50/50. */
    .podd-btn-primary { flex-basis: 100%; justify-content: center; }
    .podd-share-label-extra { display: none; }
    .podd-actions > .podd-btn-ghost,
    .podd-share { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .podd-actions > .podd-btn-ghost,
    .podd-share .podd-btn-ghost { justify-content: center; }
    .podd-share .podd-btn-ghost { width: 100%; }
    .podd-empty { padding: 100px 24px 120px; }
    .podd-empty h1 { font-size: 28px; }

    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps,
       a 12px separator. This page had no phone step at all. */
    .podd-breadcrumb { font-size: 12px; gap: 8px; }
    .podd-breadcrumb-sep { height: 12px; }
}