/* ==========================================================================
   BilAraby Talks listing page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:70092 "Talks"). Reuses the --hr-* tokens declared globally in
   layout-revamp.css and follows the same page-pattern established by
   press-releases-revamp.css / speakers-revamp.css: a shared "Innerpage-hero"
   look (breadcrumb + diamond divider) followed by its own listing sections.

   No photo banner here — the hero is the same flat coral "liquid" gradient
   wash as .tlkd-revamp (BilAraby Talk details page) and video-revamp.css
   (Videos listing), bleeding from behind the header down through the hero.
   ========================================================================== */
.bilaraby-talks-revamp .hr-accent { color: var(--hr-yellow-400); }

/* ---------- Hero ---------- */
.bilaraby-talks-revamp {
    /* The pill shadow from Figma's Button component in its cream-50 state —
       three drop layers plus a white inset highlight along the top edge. Two
       states share it, the active filter tab and a hovered inactive one, and
       they must not drift apart. Same token as --vid-pill-shadow / --srp-pill-shadow.
       Figma's ramp opens with two layers at alpha 0 (7px 63px 18px and
       4px 40px 16px); they paint nothing, so they are documented, not emitted. */
    --tlk-pill-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);
    /* Hero height as a variable so the wash derives from it instead of the two
       drifting apart — same pattern as the Videos listing and its siblings. */
    --tlk-hero-h: 256px;
    /* One source of truth for the side gutter — the three sections' padding, the
       carousel's bleed and the slide widths all derive from it, so they cannot
       drift apart across breakpoints. Same approach as video-revamp.css. */
    --tlk-gutter: 160px;
    /* The content column: exactly how wide .tlk-featured-inner ends up. Slide
       widths are taken from THIS, not from the swiper's own box, because the
       swiper bleeds past the gutter — sizing off the bled box would grow the
       cards past the design's 1000/600. */
    --tlk-track-w: min(1600px, 100vw - 2 * var(--tlk-gutter));
    /* 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 (its heading row at y=120), so the h1
       sits at 376px — exactly those pages' geometry — and +80 leaves the shared
       40px of clearance under the wash. .tlk-featured's padding-top is pinned to
       that 120px below. */
    --tlk-wash-h: calc(var(--tlk-hero-h) + 80px);
    position: relative;
    /* Figma's fill for the shared "Innerpage-hero/Without" instance (node
       40001286:70252), 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.
       The red is #ee3b33 — red/red-500's actual token value.
       89% x (1 / .5 / 0) gives the .89 / .445 / 0 alphas below, replacing the
       hero-banner.png this carried: a reasonable stand-in before the real paint
       was available, but not what the component uses.
       #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, though. As a flat fill cut to the wash's
       height it ended on a hard line: the red above it fades to zero, so the
       band's last pixels were pure #F9EAEA butting straight into cream-400, and
       those two differ by 15 in green — a visible edge. So its box is 1.5x the
       wash, held solid for the red's full span (to 66.67%) and then eased to
       transparent across the remaining half again, which lands it on the page
       ground with nothing to see. */
    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(--tlk-wash-h), 100% calc(var(--tlk-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). The mask stops
   are the wash's own alphas normalised against its .89 start, so the texture
   fades out exactly with the red. */
.bilaraby-talks-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--tlk-wash-h);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
    background-repeat: repeat;
    opacity: .7;
    mix-blend-mode: overlay;
    /* Retracked to the new curve: these are the wash's own alphas normalised
       against its .89 start, so the grain still cannot outlive the red beneath
       it. */
    -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;
}
.tlk-hero-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--tlk-hero-h);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
/* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero" instance: two DISTINCT
   angular cream wedges at 10% fill in the bottom corners — 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 on the Videos listing, and .evt- / .spk- / .sml- / .srp-
   before it.
   Bottom-anchored, as Figma has them, so they keep the same relationship to the
   breadcrumb at the shorter 200px/160px breakpoints. */
.tlk-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.tlk-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. */
.tlk-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"] .tlk-hero-pattern { transform: scaleX(-1); }
@media (max-width: 768px) {
    .tlk-hero-pattern { display: none; }
}

.tlk-hero {
    position: relative;
    z-index: 1;
    /* Vertical placement copied from .tlkd-hero, which reads correctly. 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 --tlk-hero-h across the three breakpoints (196 / 140 / 100px)
       instead of needing hand-written values. Total height is unchanged at
       256/200/160.
       min-height rather than height, for the same reason the detail hero uses it:
       if a crumb ever wraps, the hero grows downward instead of the extra line
       pushing up into the overlay header. */
    height: auto;
    min-height: var(--tlk-hero-h);
    display: flex;
    align-items: flex-end;
    padding: calc(var(--tlk-hero-h) - 60px) var(--tlk-gutter) 32px;
}
.tlk-hero-inner { position: relative; z-index: 1; max-width: 1600px; width: 100%; margin-inline: auto; }
.tlk-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* 22px between crumbs and a 28px line box, both from .tlkd-breadcrumb. The gap was
   12px, and with no line-height the crumbs sat in Bootstrap's 1.5 (a 30px box),
   which is what made the row read tighter horizontally and 2px taller than the
   detail page's. */
.tlk-breadcrumb { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 20px; line-height: 28px; color: var(--hr-cream-500); text-transform: uppercase; }
.tlk-breadcrumb a,
.tlk-breadcrumb span:not(.tlk-breadcrumb-sep) { opacity: 1; }
.tlk-breadcrumb a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.tlk-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.tlk-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.tlk-breadcrumb-sep { width: 1px; height: 16px; background: rgba(249, 247, 234, .5); }
.tlk-hero-divider { display: none; }
/* The line bleeds past the 160px hero padding to the true viewport edge —
   same edge-to-edge treatment as .tlk-hero::after right below it — while the
   diamonds stay put a fixed distance in. 160px padding + 1600px max content
   width matches Figma's 1920px frame exactly, so this cancels out flush at
   any viewport up to that width, then centers like the other sections beyond it. */
@media (min-width: 1200px) {
    .tlk-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        /* 300px, the width the Videos, Speakers, Annual Gatherings and Search
           heroes all settled on for this same breadcrumb-only variant, so the
           cluster starts 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 value ever moves. */
        margin-inline-end: calc(-1 * var(--tlk-gutter) - max(0px, (100vw - 1920px) / 2));
    }
    .tlk-hero-divider .smt-hero-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;
    }
    .tlk-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; }
}
.tlk-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Featured carousel ---------- */
/* 120px top, from Figma: the section frame begins at the hero's own bottom edge
   and its heading row sits at y=120 (was 64px). */
.tlk-featured { position: relative; z-index: 1; padding: 120px var(--tlk-gutter) 24px; }
.tlk-featured-inner { max-width: 1600px; margin-inline: auto; }
/* Figma's heading row is a true 50/50 split of the 1600px column — 792px + 16px
   + 792px — with both columns top-aligned, so the copy runs the full half rather
   than the 480px it was capped at, and the two basis values are equal instead of
   leaving the paragraph narrower than the heading. 60px to the carousel, not 40. */
.tlk-featured-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 60px; }
/* Headings/H1/Bold — Almarai 700, 64/72 (was 44px on a 1.15 ratio, which
   resolved to 50.6px lines and read a full size step small). */
.tlk-featured-head h1 { flex: 1 1 360px; font-size: 64px; line-height: 72px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
/* Body/Body Large/Regular — Almarai 400, 24/32 (was 18px on a 1.6 ratio). */
.tlk-featured-head p { flex: 1 1 360px; font-size: 24px; line-height: 32px; font-weight: 400; color: var(--hr-brown-300); margin: 0; }

.tlk-carousel { position: relative; }
/* The bleed sits on the TRACK, not on .tlk-carousel: it has to take the peek card
   past the section's end padding to the viewport edge, but the controls row below
   is a sibling inside .tlk-carousel and must stay on the content column. Same
   expression the hero divider uses: cancel the gutter, then keep cancelling the
   centring margin once the viewport clears 1920. margin-inline-end, so it bleeds
   to the correct side under RTL too. */
/* .tlk-carousel .tlk-swiper (not the bare .tlk-swiper class): swiper-bundle
   .min.css's own base rule (loaded via CDN in head.blade.php) sets
   `.swiper { margin-left: auto; margin-right: auto; }` — the SAME
   specificity as a bare `.tlk-swiper` class selector, which makes the
   winner purely a function of stylesheet load order rather than intent.
   Scoping through the ancestor bumps this to two classes' worth of
   specificity, safely beating the library's rule regardless of load order.
   Ported from the Video listing page's .vid-swiper (video-revamp.css),
   where all of this was verified live in a real browser. */
.tlk-carousel .tlk-swiper {
    /* NOT overflow:hidden — on the Video page this was confirmed live to
       create a stacking context that visually sent the previous slide
       (mid-transition) BEHIND a sibling element instead of over it, and
       also clipped the second (fully-visible, unscaled) peek card that
       should render without any clip at all. Removing it fixed both, and
       there's no reason this component would behave differently here. */
    overflow: hidden;
    /* -30px, not -24. The design's own "24px spaceBetween" reasoning (peek
       card's visual right edge lands at column+24) is right, but the
       peek's true edge needs a few px more to clear the swiper's own edge
       with zero pixels cut — ~6px of rounding/scrollbar slack, confirmed
       live on the Video page at both 1920px and 1440px. Not a function of
       --tlk-gutter or track width (the algebra cancels those terms out
       exactly), so a flat constant is correct here too. */
    margin-inline-end: -30px;
}
.tlk-swiper .swiper-wrapper { align-items: center; }
/* Two-width "peek" carousel, straight off Figma's track: the active slide is
   1000px and every other 600px, 24px apart, against a 1600px content column.
   Taken as .625 / .375 of --tlk-track-w rather than as those pixels, so the pair
   holds its ratio at every width — 1000/600 at a 1920px viewport, 700/420 at
   1440. Sized off the COLUMN, not off the swiper's own box, because the carousel
   bleeds past the end gutter.
   This replaced a uniform min(760px, 68vw) box scaled to .82, which put a full
   card, a shrunken one and a sliver in view — a transform changes what you see
   but not the box Swiper lays out, so the neighbours never moved. Real widths
   are what move them, hence the update() in index.blade.php.
   The peek cards sit at 50%, which is literally the export's outermost
   `<g opacity="0.5">`. Paired with the 60% black scrim on .tlk-feature-card::after
   it gives the flat grey the design has: darken hard, then halve over the cream
   page. Neither half works alone. */
.tlk-swiper .swiper-slide {
    /* UNIFORM boxes, all at the active card's width, with the inactive ones
       scaled to .6 (= 600/1000, the design's ratio) from the leading edge. The
       visible result is the design's: card 1 at .625 of the column, card 2 at
       .375, 24px apart. Uniform boxes remove the circularity entirely: the grid
       never changes, so every position is correct with no re-measure. */
    width: calc(var(--tlk-track-w) * .625);
    height: auto;
    transform: scale(.6);
    transform-origin: left center;
    opacity: .5;
    transition: transform .4s ease, opacity .4s ease;
    cursor: grab;
}
.tlk-swiper .swiper-slide-active { transform: scale(1); opacity: 1; cursor: default; }
/* The shrink has to hug the reading-start edge, which flips with direction — the
   blade puts dir="rtl" on the swiper itself on the Arabic pages. */
.tlk-swiper[dir="rtl"] .swiper-slide,
[dir="rtl"] .tlk-swiper .swiper-slide { transform-origin: right center; }

.tlk-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 320px;
    aspect-ratio: 16 / 9;
    border-radius: 32px;
    padding: 32px;
    color: var(--hr-cream-500);
    text-decoration: none;
    overflow: hidden;
    background-color: var(--hr-brown-700);
    /* The design's "overlay" layer — and unlike the grid card's, this one
       carries NO layer blur, so it stays a background gradient rather than
       becoming a blurred pseudo-element.
       Figma draws it as a 1032.414x357.363 rect at (-16.203, 245) on the
       1000x562.5 card, filled transparent-to-black top-down. Mapped onto the
       card's own box: it starts at 245/562.5 = 43.556% and would reach full
       black at 602.363, i.e. 7.09% BELOW the card, so the visible bottom edge
       lands at (562.5-245)/357.363 = 88.85% of the ramp. Percentages rather than
       the design's pixels because this card is aspect-ratio driven and scales.
       Replaces a three-stop ramp that ran the full height and put 35% black
       across the TOP of the card, which the design has nothing of — the badge
       is legible on its own rgba(23,21,9,.8) pill. */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 43.556%, rgba(0, 0, 0, .889) 100%), var(--tlk-feature-bg);
    background-size: cover;
    background-position: center;
}
.tlk-feature-card:hover { color: var(--hr-cream-500); }
/* The peek card's greying, taken from the inactive slide's own export: a rect of
   FLAT BLACK at 60% over the artwork, with the whole card then drawn at 50% (see
   the slide rule below). No blend mode, no grayscale, no brightness — the export
   carries none of them. Black at 60% then halved over the cream page is what
   produces the flat, low contrast grey.
   Oversized by 16.67% a side, which is the export's own 800x450 rect over its
   600x337.5 card expressed proportionally, so it holds however the card scales.
   That overhang is also what gives backdrop-filter material to sample at the
   edges instead of averaging in the transparency past them; the card's own
   overflow:hidden clips it back to the 32px radius.
   The blur is the one thing the SVG cannot carry, so the 4px from the paint
   panel is real, kept here at 12px per request.
   Rendered on every card and switched by opacity, so it cross-fades with the
   scale rather than snapping. Last in paint order, so it greys the badge, the
   copy and the play button too, as the export's layer order does. */
.tlk-feature-card::after {
    content: "";
    position: absolute;
    inset: -16.67%;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.tlk-swiper .swiper-slide:not(.swiper-slide-active) .tlk-feature-card::after { opacity: 1; }
/* Box was already right (rgba(23,21,9,.8) fill, 8px gap, 12px block padding) —
   the design's own 14.948px inline padding and 11.626px radius are pinned here
   rather than left at the rounded 15px/12px, and the type is the design's
   "Labels/Label XSmall/Bold" token in full: Almarai 700 16/24, UPPERCASE. The
   label was rendering in title case; uppercase is also what makes the 48px pill
   height come out exactly (12 + 24 + 12). */
.tlk-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 12px 14.948px;
    border-radius: 11.626px;
    background: rgba(23, 21, 9, .8);
    color: var(--hr-yellow-500);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    white-space: nowrap;
}
/* The glyph is the brand diamond, NOT a dot: Figma draws it as two nested shapes
   inside a 14.644x16 slot — a SOLID yellow-500 diamond (bbox 7.961x8.397) inside
   a much larger one carrying only a 0.217px yellow-500 stroke (bbox
   15.441x16.286). This rule used to render one 8px box with a 1px border and no
   fill, i.e. the outline at the inner shape's size and no filled centre at all.
   Both are rotated squares, as every other diamond in this codebase is; the side
   lengths come from the mean of each bbox over sqrt(2). */
.tlk-feature-badge-dot {
    position: relative;
    width: 14.644px;
    height: 16px;
    flex: 0 0 auto;
}
.tlk-feature-badge-dot::before,
.tlk-feature-badge-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.tlk-feature-badge-dot::before {
    width: 11.217px;
    height: 11.217px;
    border: .217px solid var(--hr-yellow-500);
}
.tlk-feature-badge-dot::after {
    width: 5.784px;
    height: 5.784px;
    background: var(--hr-yellow-500);
}
.tlk-feature-bottom { display: flex; flex-direction: column; gap: 24px; }
.tlk-feature-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The design's instance measures 120x32 with its text box at y=8, height 16 —
   8 + 16 + 8 — so the line box is pinned here; without it the pill inherited
   Bootstrap's 1.5 and stood 37px tall. Fill and text colour are left as they
   are: the design's own instance is purple-400, because the tone tracks the
   talk's type. */
.tlk-feature-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--hr-green-400);
    color: #e6f0ef;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Same pill as the badge above and the same fill. The design's own 14.948px
   inline padding and 11.626px radius rather than the rounded 15px/12px, and the
   28px line box (which this had no value for, so it inherited Bootstrap's 1.5 =
   27px) is what makes the chip's 37.97px height exact: 4.983 + 28 + 4.983.
   300, matching the videos listing's chip: Almarai Light is a real face here,
   and it is the same weight as the like/views stats beside it. */
.tlk-feature-duration {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4.983px 14.948px;
    border-radius: 11.626px;
    background: rgba(23, 21, 9, .8);
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    white-space: nowrap;
}
/* Headings/H6/Bold (24/32) and Body/Body XSmall/Regular (16/24) at 70% — both
   already matched the design's type. What did not: the clamp. Figma fixes the
   card's content block at 920x92 — a 32px title box (ONE line), 12px, then a
   48px description box (two 24px lines) — so the title truncates at one line
   here instead of two, which keeps the block's height stable whatever the
   title's length. */
.tlk-feature-content h3 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 0 0 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.tlk-feature-content p { font-size: 16px; line-height: 24px; font-weight: 400; margin: 0; opacity: .7; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Figma's shared "Button" component, icon-only variant. 72px, not 64: the
   instance is a 72px frame around a 24px icon slot, i.e. 24px of padding a side.
   The stroke is a GRADIENT, not the solid #fff that was here — that drew a hard
   even ring all the way round — so it goes on the shared masked ::after rim in
   layout-revamp.css, fed by the --hr-ring-* pair below, over a 1.5px transparent
   border. The shadow gains the three ambient drops and the inset highlight it was
   missing; on its own the single 0 3px 6px layer read as a flat disc. */
.tlk-feature-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    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);
    /* Own stacking context, so the hover glow's plus-lighter blends against this
       button's amber rather than whatever sits behind the card. */
    isolation: isolate;
}
/* solar:play-bold at its native 19x20, replacing video-play-icon.svg squeezed to
   21x24 — a different play glyph, cropped tight, which rendered the triangle ~10%
   wider and 20% taller than the design's. The 1.5px nudge is the glyph's own
   optical centring: Figma pads it 4px lead / 1px trail inside its 24px slot, so
   its centre sits 1.5px right of the button's. */
.tlk-feature-play img { width: 19px; height: 20px; transform: translateX(1.5px); }
.swiper-slide:not(.swiper-slide-active) .tlk-feature-play { opacity: 0; }

/* 60px, from the design: its pagination frame sits at y=622.5 against a track
   that ends at 562.5. */
.tlk-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 60px; }
.tlk-carousel-arrows { display: flex; align-items: center; gap: 12px; }
.tlk-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.tlk-carousel-arrow:hover { background: rgba(255, 255, 255, .4); }
.tlk-carousel-arrow.swiper-button-disabled { opacity: .4; cursor: default; pointer-events: none; }
[dir="rtl"] .tlk-carousel-arrow img { transform: scaleX(-1); }
.tlk-carousel-progress { display: flex; align-items: center; gap: 24px; }
.tlk-carousel-pagination { display: flex; align-items: center; gap: 4px; }
.tlk-carousel-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: var(--hr-yellow-500);
    opacity: .6;
    margin: 0;
    transition: width .25s ease, opacity .25s ease;
}
.tlk-carousel-pagination .swiper-pagination-bullet-active { width: 36px; opacity: 1; }
.tlk-carousel-fraction { font-size: 16px; color: var(--hr-brown-500); white-space: nowrap; }

/* ---------- Listing ---------- */
.tlk-listing { position: relative; z-index: 1; padding: 60px var(--tlk-gutter) 100px; }
.tlk-listing-inner { position: relative; z-index: 1; max-width: 1600px; margin-inline: auto; }

/* Mirrors the decorative diamond+wave flourish bookending the hero's own
   decor (.tlk-hero-decor) at the top of the page — Figma anchors it bottom-
   right of the listing section, bleeding down into the footer's teal, so the
   same "liquid" motif runs unbroken from the header banner to the footer. */
/* Replaces the old listing-decor-shape.png, which sat at right:-256px /
   bottom:-148px and so showed only a sliver of itself. Figma's own vector is
   254.66x111.564 at x=0 — flush to the start edge and to the section's bottom,
   i.e. closing the page directly above the footer. Its fill is #338A81, which is
   --hr-green-400, so nothing new enters the palette. The asset lives under
   video-revamp/ because that page shipped it first; cross-referencing is the
   norm here (this page's own icons are used all over the Videos pages). */
.tlk-listing-pattern {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 254.66px;
    height: 111.564px;
    z-index: 0;
    pointer-events: none;
}
/* Mirrored under RTL so the motif stays on the reading-start side. */
[dir="rtl"] .tlk-listing-pattern { transform: scaleX(-1); }
/* Hidden on phones, as the shape it replaces was: 254px of motif at the section's
   start edge crowds a single-column grid, and the pagination sits low enough to
   collide with it. 768px rather than the old 991.98px, so it drops out at the
   same breakpoint as the hero's own wedges. */
@media (max-width: 768px) { .tlk-listing-pattern { display: none; } }
/* Node 40005017:73675 — 84.0432x49.1494, its own export at this size, not the
   desktop motif scaled down. Hidden by default, shown only at the mobile
   breakpoint below (same asset video-revamp.css's .vid-listing-pattern-mobile
   uses, since every page here shares the same desktop listing-pattern.svg). */
.tlk-listing-pattern-mobile {
    display: none;
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 84.0432px;
    height: 49.1494px;
    z-index: 0;
    pointer-events: none;
}
[dir="rtl"] .tlk-listing-pattern-mobile { transform: scaleX(-1); }
@media (max-width: 768px) { .tlk-listing-pattern-mobile { display: block; } }
.tlk-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; }
.tlk-listing-title { font-size: 40px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.tlk-listing-count { font-size: 24px; color: var(--hr-brown-300); margin: 0; }

.tlk-filters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 80px; }
.tlk-filters-tabs { display: flex; gap: 16px; flex-wrap: wrap; }
/* Same pill as the Search page's filter row (.srp-tab) and the Videos listing's.
   The base already agreed — cream tint, grey hairline, 61px radius, 16px
   brown-500 — so what comes across is the geometry correction, the full shadow,
   and the hover. */
.tlk-tab {
    display: inline-flex;
    align-items: center;
    /* 11px block, i.e. the design's 12px less the 1px border: Figma strokes the
       pill INSIDE its 48px box (label at y=12, 24px tall), so 11 + 24 + 11 + 2
       = 48. At 12px these stood 50px tall. */
    padding: 11px 20px;
    border-radius: 61px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--hr-brown-500);
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tlk-tab:hover { text-decoration: none; color: var(--hr-brown-500); }
/* Hovering an inactive tab previews the active pill exactly — same cream-50
   fill, white border and shadow — plus the 2px lift. Scoped off .is-active: that
   one is already at the destination and isn't a target, so it shouldn't move. */
.tlk-tab:not(.is-active):hover {
    background: var(--hr-cream-50);
    border-color: #fff;
    box-shadow: var(--tlk-pill-shadow);
    transform: translateY(-2px);
}
/* Weight stays 400: the design separates the active pill by fill, border and
   shadow alone. The 700 this used to add also nudged the whole row on every tab
   change, a bold label being wider than the regular one. */
.tlk-tab.is-active {
    background: var(--hr-cream-50);
    border-color: #fff;
    box-shadow: var(--tlk-pill-shadow);
}
.tlk-sort-form { display: flex; }
/* The sort control is the shared <x-front.select> (select2-revamp.css), which
   carries the whole pill - fill, hairline, chevron, sizing, open panel - so
   this row has nothing left to declare. */

/* ---------- Card grid ---------- */
.tlk-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}
/* Split in two, .tlk-card (shadow shell) + .tlk-card-surface (blur/clip) —
   same fix as the Videos listing's .vid-card. Keeping backdrop-filter and
   overflow:hidden together but off box-shadow wasn't enough on real iOS
   Safari devices: box-shadow can fail to render at all on an element that
   also carries backdrop-filter there, independent of overflow, so the two
   effects need to live on genuinely different elements. */
.tlk-card {
    position: relative;
    display: block;
    border: 1px solid #fff;
    border-radius: 40px;
    background: var(--hr-cream-600, #e3e1d4);
    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);
    text-decoration: none;
    color: inherit;
    /* iOS Safari: without its own compositing layer, box-shadow on a rounded
       element can get rasterized on a fast path that ignores border-radius
       entirely, painting a square-cornered shadow instead of following the
       curve. translateZ(0) forces that layer promotion so the shadow gets
       clipped to the same rounded rect the border is. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.tlk-card:hover { color: inherit; }
/* Everything that used to live directly on .tlk-card: the flex layout, the
   8px padding, the blur, and the clip. A plain block child of a block
   .tlk-card fills its content box exactly at 100% width with no sizing of
   its own needed, so it sits flush behind the 1px border with the same
   effective shape .tlk-card-glow's bleed and .tlk-card-media's corners were
   already positioned against. */
.tlk-card-surface {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    border-radius: 40px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
    /* Forces its own compositing layer, which is what makes iOS Safari
       actually respect this overflow:hidden + border-radius clip against
       .tlk-card-glow below — without it, iOS fails to clip a filter:blur()'d
       child to an ancestor's rounded overflow:hidden at all, letting the
       blur render as an unclipped rectangle past the rounded corners (this
       is what actually read as a "square shadow"). */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
/* A blurred, oversized echo of the card's own thumbnail sitting behind the
   media block — bleeds into the 8px cream gap around it (clipped by
   .tlk-card-surface, not this element) instead of leaving that gap a flat,
   plain colour. */
.tlk-card-glow {
    position: absolute;
    z-index: 0;
    inset: -16px -16px auto -16px;
    height: 65%;
    background-image: var(--tlk-card-bg);
    background-size: cover;
    background-position: center;
    /* 50px, the design's own layer blur on this echo. */
    filter: blur(50px);
    pointer-events: none;
    /* Belt-and-braces for the same iOS clipping bug the surface's
       translateZ(0) targets: border-radius directly on the filtered element
       itself, so even if the ancestor clip still fails on some iOS version,
       this element's own corners are rounded, not square. Invisible under
       50px of blur either way on browsers where the ancestor clip works. */
    border-radius: 56px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.tlk-card-media {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 9;
    /* Bottom corners squared off, not rounded: .tlk-card-body overlaps this
       block's bottom edge by only 14px, well short of a 32px radius, so a
       rounded bottom corner curved out from under the (straight-edged) panel
       above it instead of being fully covered by it. */
    border-radius: 32px 32px 0 0;
    overflow: hidden;
    background-color: var(--hr-brown-700);
    /* Thumbnail only. The darkening scrim used to be a second background layer
       here; the design draws it as its own blurred element — see ::before/::after. */
    background-image: var(--tlk-card-bg);
    background-size: cover;
    background-position: center;
}
/* Overlay.svg's two layers. ::before is a blurred copy of the thumbnail (Figma's
   "Image" layer) masked to the bottom band; ::after is the export's own gradient,
   black at 0.6 up to clear over the bottom 51.22%. filter, not backdrop-filter:
   the card already carries backdrop-filter:blur(53px) and nesting them is
   unreliable. inset:-30px gives filter() material to sample at the edges, since
   it averages in the transparency past an element's own box. */
.tlk-card-media::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: 0;
    background-image: var(--tlk-card-bg);
    background-size: cover;
    background-position: center;
    filter: blur(12px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 44%, transparent 51%);
    mask-image: linear-gradient(to top, #000 0%, #000 44%, transparent 51%);
    pointer-events: none;
}
.tlk-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, 0) 51.22%);
    pointer-events: none;
}
/* Above both layers, so neither the blurred copy nor the scrim touches them. */
.tlk-card-play,
.tlk-card-media-meta { z-index: 2; }
.tlk-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 72px, like the featured card's: this card's own instance is p-[24px] around
       the 24px icon slot, not the component's default p-[16px]. Gradient rim on a
       transparent border (drawn by layout-revamp.css off the --hr-ring-* pair)
       rather than a solid white ring, plus the full effect stack. */
    width: 72px;
    height: 72px;
    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 with the glyph's own optical nudge. */
.tlk-card-play img { width: 19px; height: 20px; transform: translateX(1.5px); }
.tlk-card-media-meta {
    position: absolute;
    left: 16px;
    right: 16px;
    /* 43px, clearing the body panel that now overlaps this block by 26px. */
    bottom: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tlk-card-stats { display: flex; align-items: center; gap: 11px; }
/* Almarai Light 16/24 in cream-500 — only the line box was missing. */
.tlk-card-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; color: var(--hr-cream-500); font-weight: 300; }
/* Vector 2538: a 1px rule 13.734px tall, stroked white at 30% — not cream-500 at
   40%, which read slightly warm and tall against the two icons. */
.tlk-card-stat-sep { width: 1px; height: 13.734px; background: rgba(255, 255, 255, .3); }
/* Matched to .tlk-feature-duration: the design's own 14.948px/4.983px padding
   and 11.626px radius rather than the rounded 15px/5px/12px, and the 28px line
   box that makes the chip 37.97px tall. */
/* 300, matching .tlk-feature-duration on the featured card: Almarai Light is a
   real face here, and it is the same weight as the like/views stats sitting
   beside it in this row, which keeps the chip from shouting over them. */
.tlk-card-duration {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4.983px 14.948px;
    border-radius: 11.626px;
    background: rgba(23, 21, 9, .8);
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    white-space: nowrap;
}
/* The same body panel as .tlkd-card-body on the details page — the grid places
   the copy and the like button side by side (1fr / 56px) and the tag row spans
   both columns, with the same 8px row / 16px column gaps, the same -26px pull
   over the media and the same 24px bottom padding. The extra 40px this body
   used to add has been dropped with the --tlk-card-extra-h knob: the two pages'
   cards now end at the same height. */
.tlk-card-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px 16px;
    padding: 32px 24px 24px;
    margin-top: -26px;
    border-radius: 28px;
    /* Light translucent overlay, not a solid panel — fades from opaque white
       (right where it meets the video) down to transparent, so the card's own
       cream backing shows through and it reads as a soft floating layer on
       top of the video rather than a hard second block glued underneath it. */
    background: linear-gradient(180deg, #fff 18%, rgba(255, 255, 255, 0) 100%);
}
.tlk-card-copy { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tlk-card-text { display: flex; flex-direction: column; gap: 8px; }
.tlk-card-text h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.tlk-card-text p { font-size: 16px; color: #6e6852; margin: 0; }
/* 13.3px, the design's own gap between the two pills. */
.tlk-card-tags { grid-column: 1 / -1; display: flex; gap: 13.3px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tlk-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--hr-purple-400, #a56293);
    color: #e6f0ef;
    font-size: 14px;
    /* 16px line box, so this pill is 8 + 16 + 8 = 32 tall — the design's tag row
       height. With no line-height it inherited Bootstrap's 1.5 (21px) and stood
       37px. */
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
/* The language pill beside the category tag: a fully rounded green-tinted chip,
   type "Labels/Label XSmall/Bold" — Almarai 700, 16/24, #12736a — on a 10% green
   fill. 8px block padding against the 24px line box gives the design's 40px pill;
   the 18.7px inline padding is its own. */
.tlk-card-lang {
    display: inline-flex;
    align-items: center;
    /* 4px block / 16px inline, re-read off the node: the pill is 55x32 with its
       24px text at y=4 and x=16. It was 8/18.7 — a 40px pill — which made the
       tags row 40 instead of 32 and this panel 8px taller than the design. */
    padding: 4px 16px;
    border-radius: 999px;
    background: rgba(18, 115, 106, .1);
    color: #12736a;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.tlk-card-like {
    grid-column: 2;
    grid-row: 1;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
    padding: 0;
}
.tlk-card-like img { width: 24px; height: 24px; }
.tlk-card-like.is-active { background: var(--hr-yellow-500); border-color: var(--hr-yellow-500); }
.tlk-card-like.is-active img { filter: brightness(0) invert(1); }

/* ---------- Pagination ---------- */
/* Taken from .pr-page-* (press-releases-revamp.css), which is Figma's pagination
   component in full: every control — arrows, numbers AND the ellipsis — is the
   same 56px glass circle. This page had the circle on the arrows and numbers
   only, carried 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), sized its arrow
   glyphs off the markup's 20px attributes instead of the design's 24, and left
   the ellipsis as a bare text box. */
.tlk-pagination { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.tlk-page-arrow,
.tlk-page-number,
.tlk-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
       .tlk-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;
}
.tlk-page-arrow img { width: 24px; height: 24px; }
[dir="rtl"] .tlk-page-arrow img { transform: scaleX(-1); }
.tlk-page-arrow:hover,
.tlk-page-number:hover { text-decoration: none; color: var(--hr-brown-500); background: rgba(255, 255, 255, .4); }
.tlk-page-arrow.is-disabled { opacity: .35; pointer-events: none; }
.tlk-page-number.is-active,
.tlk-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;
}

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

@media (max-width: 1199.98px) {
    .tlk-grid { grid-template-columns: repeat(2, 1fr); }
    /* The gutter carries the padding, the carousel's bleed and the slide widths
       with it — no per-section override needed. */
    .bilaraby-talks-revamp { --tlk-gutter: 40px; }
    /* Same step down .sml-head h1 takes from this identical 64/72 token. */
    .tlk-featured-head h1 { font-size: 48px; line-height: 54px; }
    /* Hero comes down with the gutters, 256 -> 200 -> 160, as on the Videos,
       Events, Speakers and Annual Gatherings heroes. */
    .bilaraby-talks-revamp { --tlk-hero-h: 200px; }
}
@media (max-width: 768px) {
    .tlk-grid { grid-template-columns: 1fr; }
    .bilaraby-talks-revamp {
        --tlk-hero-h: 160px;
        /* .tlk-featured's top padding is halved below, so the desktop +80px
           would finish 20px OVER the h1 at this breakpoint. Same override, for
           the same reason, that the Videos listing carries on its phone
           breakpoint. */
        --tlk-wash-h: calc(var(--tlk-hero-h) + 40px);
    }
    /* 60px, matching .evt-intro: 120px of desktop lead-in is most of a phone
       viewport before the first line of copy. */
    .tlk-featured { padding-top: 60px; }
    /* Centered on phone, per the mobile layout: the 50/50 split heading row
       reads better stacked and centred than left-aligned at this width.
       flex-basis reset to auto on both children — same fix as the Videos
       listing (video-revamp.css): the desktop rule's "flex: 1 1 360px" sets a
       360px MAIN-AXIS basis, which is a width in the row layout but becomes a
       HEIGHT once flex-direction flips to column here, forcing a large gap
       between the heading and the paragraph. */
    .tlk-featured-head { flex-direction: column; align-items: center; text-align: center; margin-bottom: 32px; }
    .tlk-featured-head h1,
    .tlk-featured-head p { flex: 0 1 auto; }
    .tlk-featured-head h1 { font-size: 36px; line-height: 42px; }
    .tlk-featured-head p { font-size: 18px; line-height: 26px; }
    /* Was targeting a nonexistent "h2" descendant — .tlk-listing-title IS the
       h2 (index.blade.php), so the old rule matched nothing and never
       actually shrank on phone, the same dead-selector bug the Videos
       listing carried. Sizes are the design's own tokens: Headings/H6/Bold
       (24/32) for the title, Utility/Caption/Regular (12, line-height 100%)
       for the count. */
    .tlk-listing-title { font-size: 24px; line-height: 32px; }
    .tlk-listing-count { font-size: 12px; line-height: normal; }
    /* Figma's own row is "items-center justify-between", not the desktop
       rule's flex-end — the count sits vertically centered against the
       title's cap-height here, not baseline-aligned to its bottom. */
    .tlk-listing-head { align-items: center; margin-bottom: 16px; }

    /* Filters row goes inline and scrollable on phone instead of wrapping
       onto multiple lines — same technique as the Videos listing.
       overflow-x: auto forces overflow-y to compute as auto too (the spec
       ties the axes together), so the row was clipping the active/hover
       pill's box-shadow flat along the top/bottom edges. --tlk-pill-shadow's
       layers are identical to --vid-pill-shadow (23px/10px/3px offsets),
       reaching ~37px below the pill, so the same asymmetric padding/margin
       trick applies with the same numbers: 8px top clears the 2px hover lift,
       40px bottom clears the shadow's full reach, each canceled by an
       equal-and-opposite negative margin so the visible 80px desktop
       margin-bottom nets to the same 32px it did before (40 padding - 8
       margin). Same clipping happens left/right too, since this is also a
       horizontal scroller — 16px padding-inline/-margin-inline covers the
       shadow's largest blur radius (14px) with the same trick, coming out of
       this page's own 16px mobile gutter so the tabs' visible start position
       doesn't move. */
    .tlk-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-block: 8px 40px;
        padding-inline: 16px;
        margin-block: -8px -8px;
        margin-inline: -16px;
    }
    .tlk-filters::-webkit-scrollbar { display: none; }
    .tlk-filters-tabs { flex-wrap: nowrap; }
    .tlk-tab { flex-shrink: 0; white-space: nowrap; }
    .tlk-sort-form { flex-shrink: 0; }
    .tlk-carousel-controls { flex-wrap: wrap; margin-top: 24px; }
    .bilaraby-talks-revamp { --tlk-gutter: 16px; }

    /* One card per slide on phone: the peek/scale treatment is a desktop
       effect, so the slide takes the full track width and stays at full
       scale/opacity instead of showing a sliver of the next card. */
    .tlk-carousel .tlk-swiper { margin-inline-end: 0; }
    .tlk-swiper .swiper-slide {
        width: var(--tlk-track-w);
        transform: none;
        opacity: 1;
    }
    .tlk-swiper .swiper-slide-active { transform: none; }

    /* Mobile feature card — Figma's "Active small" mobile variant of this
       component, not a scaled-down copy of the desktop "Active" one. Same
       component family as the Videos listing's featured card (identical
       desktop values), so the same mobile numbers apply 1:1. */
    .tlk-feature-card {
        aspect-ratio: 362 / 451;
        min-height: 0;
        border-radius: 28px;
        padding: 24px;
    }
    /* Featured badge: smaller pill, smaller diamond glyph. */
    .tlk-feature-badge { padding: 8px 10px; border-radius: 6px; gap: 8px; font-size: 12px; line-height: normal; }
    .tlk-feature-badge-dot { width: 10.983px; height: 12px; }
    .tlk-feature-badge-dot::before { width: 8.416px; height: 8.416px; border-width: .162px; }
    .tlk-feature-badge-dot::after { width: 4.339px; height: 4.339px; }

    /* Duration above the category/type tag, both left-aligned and stacked —
       the mobile card reads top-to-bottom instead of the desktop's
       space-between row. */
    .tlk-feature-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
    .tlk-feature-duration { order: -1; padding: 8px 10px 8px 8px; border-radius: 6px; font-size: 12px; line-height: normal; }
    .tlk-feature-tag { padding: 6px 12px; border-radius: 6px; font-size: 10px; }

    .tlk-feature-content h3 { font-size: 20px; line-height: 32px; }
    .tlk-feature-content p { font-size: 14px; }

    /* Play button: 48px (16px padding + 16px icon) vs the desktop 72px.
       top is 34% here, not the desktop rule's inherited 50%: Figma pins this
       variant at "50% - 71.5px" against its 451px-tall card, i.e. centred on
       the clear photo area ABOVE the title/description block rather than on
       the card's full height. */
    .tlk-feature-play {
        top: 34%;
        width: 48px;
        height: 48px;
        border-width: 1px;
        box-shadow:
            0 2.667px 4.067px 0 rgba(255, 255, 255, .23) inset,
            1.333px 15.333px 9.333px 0 rgba(0, 0, 0, .02),
            .667px 6.667px 6.667px 0 rgba(0, 0, 0, .03),
            0 2px 4px 0 rgba(0, 0, 0, .03);
    }
    .tlk-feature-play img { width: 12.667px; height: 13.333px; transform: translateX(1px); }

    /* ---------- Talks listing card, phone ----------
       The card carried its desktop sizes straight onto the phone; the featured
       card above (.vid-feature-* in video-revamp.css) already takes this step,
       so these follow its numbers rather than new ones. */

    /* 48px, from 72 - the same 2/3 step .vid-feature-play takes, with the
       border and the effect stack scaled by the same factor and the glyph at
       19x20 * 2/3. */
    .tlk-card-play {
        width: 48px;
        height: 48px;
        border-width: 1px;
        box-shadow:
            0 2.667px 4.067px 0 rgba(255, 255, 255, .23) inset,
            1.333px 15.333px 9.333px 0 rgba(0, 0, 0, .02),
            .667px 6.667px 6.667px 0 rgba(0, 0, 0, .03),
            0 2px 4px 0 rgba(0, 0, 0, .03);
    }
    .tlk-card-play img { width: 12.667px; height: 13.333px; transform: translateX(1px); }
    /* 48px from 56. The 24px heart is left alone: it reads as 50% of the
       button here against 43% at 56, which is the proportion the design shows. */
    .tlk-card-like { width: 48px; height: 48px; }
    /* 20px. line-height stays at the base 32px, as .vid-feature-content h3
       keeps its 32px line box when it drops to 20px on this breakpoint. */
    .tlk-card-text h3 { font-size: 20px; }
    /* 10px, with the 6px/12px padding and 6px radius .vid-feature-tag takes on
       the phone. The language pill's line box drops 24 -> 20 so the two pills
       stay the same height as each other - 28px here, the way they match at
       32px on desktop (4 + 20 + 4 against the tag's 6 + 16 + 6). */
    .tlk-card-tag { padding: 6px 12px; border-radius: 6px; font-size: 10px; }
    .tlk-card-lang { padding: 4px 12px; font-size: 10px; line-height: 20px; }

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