/* ==========================================================================
   Podcasts listing page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:71809 "Podcast"). Reuses the --hr-* tokens declared globally
   in layout-revamp.css and follows the same page-pattern established by
   video-revamp.css / bilaraby-talks-revamp.css: an "Innerpage-hero"
   (breadcrumb + diamond divider) on the same flat coral "liquid" gradient
   wash, no photo banner.
   ========================================================================== */
.podcasts-revamp .hr-accent { color: var(--hr-yellow-500); }

/* ---------- Hero ---------- */
.podcasts-revamp {
    /* One source of truth for the side gutter — every section's padding and the
       hero divider's bleed derive from it, so they cannot drift apart across
       breakpoints. Same approach as --vid-gutter. */
    --pod-gutter: 160px;
    --pod-hero-h: 256px;
    /* Hero + 80px, the same value the Videos, Events, Speakers and Annual
       Gatherings washes carry, and for the same reason: Figma puts this page's
       first section 120px below the hero, so the h1 sits at 376px — exactly
       those pages' geometry — and +80 leaves the shared 40px of clearance
       under the wash. .pod-intro's padding-top is pinned to that 120px. */
    --pod-wash-h: calc(var(--pod-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-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(--pod-wash-h), 100% calc(var(--pod-wash-h) * 1.5);
}
/* Figma's hero asset carries a fine grain/noise baked into it, which a plain
   linear-gradient() cannot reproduce — it renders flat and plastic instead of
   "brushed". Same tiled feTurbulence overlay, same 0.85 tile, same .7 opacity
   and same decay mask as the other washed heroes (events-revamp.css carries
   the original rationale for the feComponentTransfer re-centering: without it
   the raw noise is skewed bright, so overlay tints the whole wash lighter
   instead of just adding grain). The mask stops are the wash's own alphas
   normalised against its .89 start, so the texture fades out with the red. */
.podcasts-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--pod-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;
}
/* The decor box is a child of the wrapper, not of .pod-hero, so the wedges sit
   under the hero's z-index 1 content without fighting that stacking context.
   Its own overflow:hidden is what crops them to the band. */
.pod-hero-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--pod-hero-h);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
/* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero/Without" instance:
   angular cream wedges at 10% fill in the two bottom corners — two DISTINCT
   vectors, not one shape mirrored, which is what this hero used to render (a
   37%-wide press-releases-revamp/hero-decor-shape.svg flipped onto both
   sides). Same pair, same geometry and the same shared innerpage-hero/ assets
   as .vid-hero-pattern (Videos), .evt-hero-pattern (Events),
   .spk-hero-pattern (Speakers), .sml-hero-pattern (Annual Gatherings) and
   .srp-hero-pattern (Search).

   Both anchored to the hero's BOTTOM edge, as Figma has them — Pattern-01
   runs top:95.03 + height:160.658 = 255.7 against a 256px hero, Pattern-02 is
   bottom:0 outright — so they stay in the same relationship to the breadcrumb
   at the shorter 200px/160px breakpoints instead of drifting off the baseline. */
.pod-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.pod-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 would
   composite against the SVG's own transparency and do nothing. */
.pod-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;
}
/* Flip the pair under RTL so each wedge keeps its own visual side and the
   composition mirrors with the text direction. */
[dir="rtl"] .pod-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, which is why the
   Podcasts hero lost its side design on a phone while the Events and Press Releases
   heroes - the same component, the same two assets - kept theirs.

   They scale instead of holding 305px: at that size the pair is 610px against a
   390px screen, so they would overlap in the middle and be clipped. 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 - 305.329 x
   160.658 and 305.29 x 204.731 - which at 190px resolve to 100px and 128px, so
   both clear the hero's shortest 160px clip box. Same treatment and the same
   numbers as .evt-hero-pattern and .pr-hero-decor, which use assets of
   identical dimensions. */
@media (max-width: 767.98px) {
    .pod-hero-pattern-start {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.329 / 160.658;
    }
    .pod-hero-pattern-end {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.29 / 204.731;
    }
}

.pod-hero {
    position: relative;
    z-index: 1;
    /* Vertical placement ported from .vid-hero. 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 --pod-hero-h across the three breakpoints instead of needing
       hand-written values.
       min-height rather than height: if a crumb ever wraps, the hero grows
       downward instead of the extra line pushing up into the overlay header.
       This page's three short crumbs do not wrap today, so nothing moves. */
    height: auto;
    min-height: var(--pod-hero-h);
    display: flex;
    align-items: flex-end;
    padding: calc(var(--pod-hero-h) - 60px) var(--pod-gutter) 32px;
}
.pod-hero-inner { position: relative; z-index: 1; max-width: 1600px; width: 100%; margin-inline: auto; }
.pod-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Type and gap scale down with the viewport instead of holding 20px/12px, the
   same clamp .vid-breadcrumb carries: both top out at this page's own desktop
   values, so nothing changes above ~440px, and the 28px line box matches the
   60px the hero's padding is derived from. */
.pod-breadcrumb { display: flex; align-items: center; gap: clamp(8px, 2.2vw, 22px); row-gap: 4px; flex-wrap: wrap; font-size: clamp(13px, calc(5vw - 3px), 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. */
.pod-breadcrumb a,
.pod-breadcrumb span:not(.pod-breadcrumb-sep) { opacity: 1; }
.pod-breadcrumb a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.pod-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.pod-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.pod-breadcrumb-sep { width: 1px; height: 16px; background: rgba(249, 247, 234, .5); }
.pod-hero-divider { display: none; }
/* The line bleeds past the 160px hero padding to the true viewport edge, the
   diamonds stay put a fixed distance in — same edge-to-edge treatment used
   by Videos/Talks/Press Releases. 160px padding + 1600px max content width
   matches Figma's 1920px frame exactly. */
@media (min-width: 1200px) {
    .pod-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        /* 300px, not the 400px this carried: the width the Videos, 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(--pod-gutter) - max(0px, (100vw - 1920px) / 2));
    }
    .pod-hero-divider .pod-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;
    }
    .pod-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; }
}
.pod-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Intro + featured episode ---------- */
.pod-intro { position: relative; z-index: 1; padding: 120px var(--pod-gutter) 0; }
.pod-intro-inner { max-width: 1600px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.pod-intro-inner h1 { font-size: 64px; line-height: 72px; font-weight: 700; color: var(--hr-brown-500); margin: 0; text-transform: capitalize; }
.pod-intro-inner p { font-size: 24px; line-height: 32px; color: var(--hr-brown-300); margin: 0; max-width: 900px; }

.pod-featured-wrap { position: relative; z-index: 1; padding: 60px var(--pod-gutter) 0; }
.pod-featured-inner { max-width: 1600px; margin-inline: auto; margin-bottom: 60px; }
.pod-featured {
    position: relative;
    display: flex;
    align-items: stretch;
    cursor: pointer;
    padding: 8px;
    border: 1px solid #fff;
    border-radius: 40px;
    overflow: hidden;
    background: linear-gradient(to top, rgba(255,255,255,.6) 0%, rgba(255,255,255,.8) 76%, rgba(255,255,255,.8) 100%);
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
    box-shadow: 0 3px 6px rgba(0,0,0,.03), 1px 10px 10px rgba(0,0,0,.03), 2px 23px 14px rgba(0,0,0,.02);
}
.pod-featured-media {
    position: relative;
    flex-shrink: 0;
    width: 40%;
    max-width: 521px;
    /* Card's own 40px radius minus its 8px padding — the nested-radius
       arithmetic every other revamp card uses so the media's corners line up
       under the outer border instead of leaving a mismatched square edge. */
    border-radius: 32px;
    background-size: cover;
    background-position: center;
    background-color: var(--hr-brown-300);
}
.pod-featured-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 56px; padding: 56px; }
.pod-featured-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--hr-blue-500);
    color: #e6f0ef;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.pod-featured-body { display: flex; flex-direction: column; gap: 40px; }
.pod-featured-text { display: flex; flex-direction: column; gap: 24px; }
.pod-featured-text h2 {
    margin: 0;
    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;
}
.pod-featured-text p { margin: 0; font-size: 18px; line-height: 28px; color: var(--hr-brown-300); }
.pod-featured-listen { display: flex; flex-direction: column; gap: 24px; }
.pod-featured-listen-label { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--hr-brown-900); }
.pod-featured-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. */
.pod-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;
}
.pod-listen-btn:hover { color: var(--hr-brown-900); }

/* ---------- Listing ---------- */
.pod-listing { position: relative; z-index: 1; padding: 60px var(--pod-gutter) 100px; }
.pod-listing-inner { position: relative; z-index: 1; max-width: 1600px; margin-inline: auto; }
.pod-listing-head { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
/* Headings/H3/Bold and Body/Body Large/Regular, per the component's own spec —
   both were missing their line-height and inheriting the browser default. */
.pod-listing-title { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
/* Title + optional subtitle, as one flex child of .pod-listing-head, so the
   count keeps its place at the end of that row (BIL-997). The design ships no
   subtitle here - the field exists on the CMS page for an editor who wants one. */
.pod-listing-heading { display: flex; flex-direction: column; gap: 8px; }
.pod-listing-subtitle { font-size: 18px; line-height: 26px; font-weight: 400; color: var(--hr-brown-300); margin: 0; max-width: 700px; }
.pod-listing-count { font-size: 24px; line-height: 32px; font-weight: 400; color: var(--hr-brown-300); margin: 0; }

.pod-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.pod-search {
    flex: 1 1 320px;
    max-width: 659px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 12px 16px;
    border-radius: 61px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
}
.pod-search img { flex-shrink: 0; opacity: .7; }
/* The hint is .pod-search-placeholder, a sibling span layered over the field,
   not the native placeholder attribute: an <input> clips to its own content
   box, and in Arabic that clip was slicing the tails off the hint along its
   baseline (the deep dots/tails on ج, ع, ي ink further below the baseline
   than Latin text does). A sibling span is not subject to that clip. Same fix
   as .pr-search-field / .sml-search-field - keep the three in step. */
.pod-search-field { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.pod-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    /* An <input> does not inherit font-family, so without this the field falls
       back to the UA's default, which has no reliable Arabic coverage. */
    font-family: inherit;
    font-size: 16px;
    /* Explicit rather than the browser default (~1.15-1.2 for Almarai), and
       shared with .pod-search-placeholder below, so the two strings land on
       the same baseline by construction instead of by tuning. */
    line-height: 24px;
    padding-block: 0;
    padding-inline: 0;
    color: var(--hr-brown-500);
}
.pod-search input:focus { outline: none; }
/* inset:0 rather than a measured offset - the span shares the input's box,
   its font and its 24px line box, so it never needs separate positioning. */
.pod-search-placeholder {
    position: absolute;
    inset: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-500);
    /* Full strength per Figma's own node (Body/Body XSmall/Regular at brown-500,
       no reduced-opacity variant) - this carried the .7 the native ::placeholder
       rule used to fake a greyed-out hint, which read lighter than the design.
       Same correction .evt-search's own placeholder carries. */
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Clicks belong to the field underneath. */
    pointer-events: none;
}
.pod-search-placeholder.is-hidden { display: none; }
/* app.css has a sitewide, unscoped `input:-webkit-autofill` rule (written for
   a dark-green newsletter field elsewhere) that paints a solid green inset
   background behind autofilled text on EVERY input, including this one.
   Override it here — needs the same !important + inset box-shadow trick,
   just transparent, plus a matching dark text-fill-color since autofill
   ignores a plain `color` declaration. */
.pod-search input:-webkit-autofill,
.pod-search input:-webkit-autofill:hover,
.pod-search input:-webkit-autofill:focus,
.pod-search input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--hr-brown-500) !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.pod-filter-fields { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pod-select {
    appearance: none;
    padding: 12px 40px 12px 20px;
    border-radius: 61px;
    font-size: 16px;
    /* !important: custom.js sets an inline color (~30% opacity "placeholder"
       gray) on every <select> site-wide on load, meant for old-style forms
       whose first option really is a placeholder. Ours always has a real
       selected value (e.g. "Sort: Newest"), so it shouldn't read as unset.
       Both pills now also carry data-native-select, which makes that handler
       skip them outright (it was the inline font-size that broke the phone
       row); the !important stays as the guard for any select added here later
       without the attribute. */
    color: var(--hr-brown-500) !important;
    background: rgba(236, 230, 211, .4) url("../images/press-releases-revamp/icon-chevron-down.svg") no-repeat;
    background-size: 11px;
    background-position: right 20px center;
    border: 1px solid rgba(177, 175, 165, .5);
    cursor: pointer;
}
[dir="rtl"] .pod-select { background-position: left 20px center; padding: 12px 20px 12px 40px; }

/* ---------- Card grid ---------- */
.pod-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.pod-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border: 1px solid #fff;
    border-radius: 20px;
    background: linear-gradient(0deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .6) 76.22%, rgba(255, 255, 255, .45) 102.95%);
    -webkit-backdrop-filter: blur(53.55px);
    backdrop-filter: blur(53.55px);
    box-shadow: 0 4px 6.1px rgba(255, 255, 255, .23) inset, 4px 40px 16px rgba(0, 0, 0, 0), 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 7px 63px 18px rgba(0, 0, 0, 0), 0 3px 6px rgba(0, 0, 0, .03);
    text-decoration: none;
    color: inherit;
}
.pod-card:hover { color: inherit; }
.pod-card-media {
    position: relative;
    flex-shrink: 0;
    width: 250px;
    border: 4.9px solid #eae1d4;
    border-radius: 16px;
    box-shadow: 0 20px 24px -18px rgba(0, 0, 0, .17);
    background-size: cover;
    background-position: center;
    background-color: var(--hr-brown-300);
    overflow: hidden;
}
/* Shown instead of a photo whenever the admin hasn't uploaded a thumbnail —
   a quiet on-brand watermark rather than an empty flat-colour box. */
.pod-media-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pod-media-fallback img {
    width: 64px;
    height: 64px;
    opacity: .4;
    filter: brightness(0) invert(1);
}
/* The card version sits behind the centered play button (same 56px circle,
   same center point) — sized a little larger so it still reads around the
   button's edges instead of being fully hidden underneath it. */
.pod-featured-media .pod-media-fallback img { width: 88px; height: 88px; }
/* Same play circle as .vid-card-play / .tlk-card-play: the amber fill, the
   masked gradient ring on the 1.5px transparent border (--hr-ring-start/-mid,
   picked up by the shared ::after rule in layout-revamp.css), and the full
   effect stack — this carried a lone 0 3px 6px drop and a flat white border,
   which read as a plain flat disc with no glass rim. Own stacking context
   (isolation), so the ring's gradient blends against this button's amber
   rather than the media behind it. Kept at this card's own 56px rather than
   the video card's 72px - the podcast thumbnail is a fraction of that card's
   width. */
.pod-card-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;
    --hr-ring-start: rgba(255, 255, 255, .3);
    --hr-ring-mid: rgba(101, 104, 111, .39);
    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;
}
/* solar:play-bold at its native 19x20, replacing video-play-icon.svg squeezed
   to 18x21 - the same glyph correction the Videos/Talks cards carry. */
.pod-card-play img { width: 19px; height: 20px; transform: translateX(1.5px); }
.pod-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    background: rgba(255, 255, 255, .5);
    border-radius: 8px;
}
.pod-card-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pod-card-date {
    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 / .podd-tag 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);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hr-cream-900, #696862);
    white-space: nowrap;
}
.pod-card-duration { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; color: var(--hr-brown-700); }
.pod-card-duration-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.pod-card-duration-icon img { width: 20px; height: 20px; }
.pod-card-text { display: flex; flex-direction: column; gap: 8px; }
.pod-card-text h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--hr-brown-700);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.pod-card-text p {
    font-size: 20px;
    line-height: 28px;
    color: var(--hr-brown-700);
    opacity: .6;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
/* 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
   brown-900 text (was brown-500) to match the rest of the ghost pills on the
   site. The shared masked rim + hover glow (layout-revamp.css) replace the
   manual background swap on hover - off the CARD's hover, not the pill's own,
   since the whole card is the link. */
.pod-card-cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 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);
    transition: all .2s ease-in-out;
}
.pod-card:hover .pod-card-cta { color: var(--hr-brown-900); }
[dir="rtl"] .pod-card-cta img { transform: scaleX(-1); }

/* ---------- Pagination ---------- */
/* Taken from .vid-page-* / .pr-page-* (Figma's pagination component in full):
   every control - arrows, numbers AND the ellipsis - is the same 56px glass
   circle. This carried the circle on the arrows/numbers only (the ellipsis
   was a bare text box with no fill, border or shadow), and one of the stack's
   four shadow layers, so no inset white rim - the thing that makes it read
   as glass rather than a flat disc. */
.pod-pagination { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.pod-page-arrow,
.pod-page-number,
.pod-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Stated for all three states, not just the non-active ones layout-revamp's
       ring list covers: the shared hover glow is an absolutely-positioned
       ::before, so without a positioned box on .is-active too it would anchor to
       .pod-pagination and light up the whole row instead of one pill. */
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid transparent;
    box-shadow: 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6.1px rgba(255, 255, 255, .23);
    text-decoration: none;
    font-size: 16px;
    color: var(--hr-brown-500);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
[dir="rtl"] .pod-page-arrow img { transform: scaleX(-1); }
.pod-page-arrow:hover,
.pod-page-number:hover { text-decoration: none; color: var(--hr-brown-500); background: rgba(255, 255, 255, .4); }
.pod-page-arrow.is-disabled { opacity: .35; pointer-events: none; }
.pod-page-number.is-active,
.pod-page-number.is-active:hover {
    /* Fully transparent rather than amber-on-amber: the active pill carries no
       rim in the design, and the shared gradient ring is already scoped off
       .is-active in layout-revamp.css. */
    border-color: rgba(255, 255, 255, 0);
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    font-weight: 700;
}

.pod-empty { padding: 60px 0; text-align: center; font-size: 18px; color: var(--hr-brown-300); }

@media (max-width: 1199.98px) {
    /* The gutter carries every section's padding with it — no per-section
       override needed. */
    .podcasts-revamp { --pod-gutter: 40px; }
    /* Hero comes down with the gutters, 256 -> 200 -> 160, as on the Videos,
       Events, Speakers and Annual Gatherings heroes. The wash follows it
       through --pod-wash-h without needing its own override here. */
    .podcasts-revamp { --pod-hero-h: 200px; }
    .pod-intro-inner h1 { font-size: 48px; line-height: 56px; }
}
@media (max-width: 991.98px) {
    .pod-featured { flex-direction: column; }
    .pod-featured-media { width: 100%; max-width: none; height: 280px; }
    .pod-featured-copy { padding: 40px; }
    .pod-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .podcasts-revamp {
        --pod-gutter: 16px;
        --pod-hero-h: 160px;
        /* .pod-intro's top padding is halved below, so the desktop +80px would
           finish over the h1 at this breakpoint. Same override, for the same
           reason, that .video-revamp / .summit-listing-revamp / .events-revamp
           carry on their own phone breakpoint. */
        --pod-wash-h: calc(var(--pod-hero-h) + 40px);
    }
    /* 60px, matching .vid-featured / .evt-intro: 120px of desktop lead-in is
       most of a phone viewport before the first line of copy. */
    .pod-intro { padding-top: 60px; }
    .pod-intro-inner h1 {
        font-size: 32px;
        line-height: 40px;
        color: var(--hr-brown-900);
        text-align: center;
    }
    /* 32px to the featured card below, replacing .pod-featured-wrap's
       unconditional 60px top padding - that section is a sibling, not a
       flex child of .pod-intro-inner, so this can't just be a margin on p
       without adding to that 60px rather than replacing it. */
    .pod-intro-inner p {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    .pod-featured-wrap { padding-top: 32px; }
    .pod-featured-copy { padding: 28px; gap: 32px; }
    /* Each of these is a plain 2-child flex column, so a single gap value
       IS the one spacing value asked for - h2->p, p->"Listen on", and
       "Listen on"->the link row. */
    .pod-featured-body { gap: 16px; }
    .pod-featured-text { gap: 16px; }
    .pod-featured-listen { gap: 16px; }
    .pod-featured-text h2 {
        font-size: 24px;
        line-height: 32px;
        text-align: center;
    }
    .pod-featured-text p { text-align: center; }
    /* The 60px gap under the card lives on .pod-featured itself now, not
       .pod-featured-inner (zeroed) or .pod-listing's own top padding
       (also zeroed here) - either of those staying on top of this would
       double the gap to 120px instead of the 60px asked for. */
    .pod-featured-inner { margin-bottom: 0; }
    .pod-featured { margin-bottom: 60px; }
    .pod-listing { padding-top: 0; }
    .pod-card { flex-direction: column; padding: 8px; gap: 12px; }
    .pod-card-media { width: 100%; height: 240px; }
    .pod-card-body { gap: 0; padding: 16px; }
    .pod-card-meta { margin-bottom: 14px; }
    .pod-card-text { margin-bottom: 24px; }
    .pod-card-cta { align-self: stretch; justify-content: center; }
    /* Design's own tokens, matching .vid-listing-title/-count's phone step:
       Headings/H6/Bold (24/32) for the title, Utility/Caption/Regular (12,
       line-height 100%) for the count — this carried an odd-one-out 28px with
       no line-height and left the count at its desktop 24px. */
    .pod-listing-title { font-size: 24px; line-height: 32px; }
    .pod-listing-count { font-size: 12px; line-height: normal; }
    /* Figma's row is items-center, not the desktop rule's flex-end — the count
       sits vertically centered against the title's cap-height here, matching
       .vid-listing-head's own phone step. */
    .pod-listing-head { align-items: center; margin-bottom: 16px; }
    /* Search on its own full-width row, then Sort/Topic as ONE horizontally
       scrolling line — the same phone filter treatment the events listing
       already ships (BIL-906: the filter row is meant to read the same on every
       listing page, and this one used to stack one control per row instead).
       There is no wrapper element to add the way .evt-filter-row is added
       there: that wrapper exists only to gather the tabs and the selects onto
       one scrolling line, and this page has no tabs, so .pod-filter-fields is
       already the whole pill row and becomes the scroller itself. .pod-search
       needs no `order` for the same reason — it is already outside the fields
       group and first in the markup. */
    /* nowrap matters here: the base rule wraps, and a WRAPPING column container
       sizes its single flex line to its widest item rather than to the
       container, so the moment the pills total more than the content column the
       line — and the search box stretched to it — would grow to the pills' width
       instead of leaving them to scroll. */
    .pod-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-bottom: 32px; }
    /* .pod-search's flex-basis (320px) is a min-width hint for the desktop
       row layout — in this column layout the main axis is vertical, so that
       same basis reads as a height instead and blows the search bar up to
       320px tall. Reset to a plain block so it only takes its content height.
       Padding evens out to 12/16 from the desktop rule's 12px 20px 12px 16px:
       the extra 4px at the end keeps text off the rounded edge of a 659px
       field, which is width this row has none of to spare. */
    .pod-search { flex: none; max-width: none; padding: 12px 16px; }
    .pod-search input,
    .pod-search-placeholder { font-size: 14px; }
    .pod-filter-fields {
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        /* Room for the select2 pill's own ambient shadow (.ba-select2--has-value,
           select2-revamp.css) inside the scroll box, cancelled again on the
           outside so the layout does not move. `overflow-x: auto` makes
           overflow-y compute to auto as well, so this box clips vertically too
           and was slicing the shadow off flat along its bottom edge. Same
           clearance .srp-tabs / .vid-filters / .tlk-filters / .evt-filter-row
           carry. */
        padding-block: 8px 40px;
        margin-block: -8px -40px;
        /* The row is meant to run past the edge, so the bar would only add noise
           on the platforms that draw a persistent one. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .pod-filter-fields::-webkit-scrollbar { display: none; }
    /* A fixed width, not `auto`: a bare <select> is sized by its widest OPTION,
       and the topic list is admin-authored, so one long title would blow that
       pill out inside a row that no longer has a wrapping container to hold it
       in check. 140px is the widest label this page can show selected —
       "Sort: Newest", 77px in Almarai at 14px — plus the 16/40 padding and the
       1px borders, rounded up. Both pills take the same width so they read as a
       matched set; two of them on an 8px gap is 288px, which fits the content
       column rather than needing to scroll at today's two filters — the
       scroller is what keeps them on one line as the artboard draws them, and
       what absorbs a third filter if one is ever added.
       The ellipsis trio is what makes the fixed width safe: without it a topic
       title longer than the pill is cut mid-glyph by the browser rather than
       trailing off. The open dropdown list is not constrained by any of this,
       so long titles stay readable while choosing.
       line-height pins the pill to 46px (20 + 24 padding + 2 border), which is
       the height the search field above it settles at too. */
    .pod-select {
        flex: none;
        width: 140px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 12px 40px 12px 16px;
        font-size: 14px;
        line-height: 20px;
        background-position: right 16px center;
    }
    /* Needed at this specificity, not folded into .pod-select above: the base
       [dir="rtl"] .pod-select rule outranks a bare .pod-select whatever the
       order, so without this the RTL pill would keep the desktop 20px arrow
       inset and the 40px padding on the wrong side of the new width. */
    [dir="rtl"] .pod-select { padding: 12px 16px 12px 40px; background-position: left 16px center; }

    /* 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. */
    .pod-breadcrumb { font-size: 12px; gap: 8px; }
    .pod-breadcrumb-sep { height: 12px; }
}