/* ==========================================================================
   BilAraby Talk details page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:70130 "Talks Details"). Uses the --hr-* tokens declared
   globally in layout-revamp.css. Self-contained: the Talks listing page has
   not been revamped yet, so nothing here is shared with it.
   ========================================================================== */

/* Figma has no photo here — the hero is a plain coral "liquid" gradient wash
   fading to transparent over the top of the page, bleeding past the
   breadcrumb hero into the top of the video player section below it. */
.tlkd-revamp {
    /* Hero height as a variable so the wedge box below derives from it instead of
       the two drifting apart. */
    --tlkd-hero-h: 256px;
    /* hero + 80px, identical to the listing's --tlk-wash-h. It was a flat 560px so
       the wash would also cover the top of the player section, but that spread the
       same three stops over a box two-thirds taller, so the fade began and ended
       much lower down than on the listing — the two headers did not read as the
       same colour. Same hero height, same box, same stops now. */
    --tlkd-wash-h: calc(var(--tlkd-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. This carried
       238,58,50 (#ee3a32), one off in every channel.
       89% x (1 / .5 / 0) gives the .89 / .445 / 0 alphas below, replacing the
       seven-stop About Us falloff this borrowed: 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(--tlkd-wash-h), 100% calc(var(--tlkd-wash-h) * 1.5);
}
/* The brushed grain over the wash — same tile, .7 opacity and decay mask as the
   Videos pages and the other washed heroes. A plain linear-gradient() renders
   flat and plastic without it. */
.tlkd-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--tlkd-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;
}

/* ---------- Hero / breadcrumb ---------- */
/* 356px, matching the speakers/press-release hero height — the Figma node's
   own 256px falls short of this site's actual 159px fixed header, crowding
   the breadcrumb against it. */
.tlkd-hero {
    position: relative;
    z-index: 1;
    /* min-height, NOT height. This page's breadcrumb ends in the talk title, so it
       wraps to two or three lines well before the phone breakpoint; with a fixed
       height and align-items:flex-end the extra lines could only grow UPWARD,
       into the space the overlay header occupies. As a minimum the hero grows
       downward instead.
       256px, matching the Videos detail page, replaces the 356px this carried to
       buy header clearance — the derived top padding below now does that job. */
    height: auto;
    min-height: var(--tlkd-hero-h);
    display: flex;
    align-items: flex-end;
    /* 160px inline, the Talks listing's gutter, so both talks pages put their
       content on the same left and right edges (was 24px).
       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 — 196 / 140 / 100px at the three breakpoints — and it tracks
       --tlkd-hero-h automatically. */
    padding: calc(var(--tlkd-hero-h) - 60px) 160px 32px;
    /* Clips the corner wedges to the band, the way .spk-hero does — this page has
       no separate decor box. */
    overflow: hidden;
}
/* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero/Without" instance: two
   DISTINCT angular cream wedges at 10% fill in the bottom corners, not one shape
   mirrored. Same pair and the same shared innerpage-hero/ assets as
   .tlk-hero-pattern on the listing and .vid- / .evt- / .spk- / .sml- / .srp-. */
.tlkd-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.tlkd-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. */
.tlkd-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"] .tlkd-hero-pattern { transform: scaleX(-1); }
@media (max-width: 767.98px) {
    .tlkd-hero-pattern { display: none; }
}
.tlkd-hero-inner { position: relative; z-index: 1; max-width: 1600px; width: 100%; margin-inline: auto; }
/* Breadcrumb and the diamond divider sit side by side on one row (per Figma,
   not stacked) — the full-width hairline below is a wholly separate element
   (.tlkd-hero::after), bleeding to the true viewport edge rather than being
   part of this row. */
.tlkd-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tlkd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
/* The span selector covers non-link crumbs — "CONTENT" has no page to point at,
   so it is plain text. Without it such a crumb falls through to the inherited
   body type: 16px, dark, and not uppercased. Scoped with :not() so the
   separators, which are also spans, keep their own 1px box. */
.tlkd-breadcrumb a,
.tlkd-breadcrumb > span:not(.tlkd-breadcrumb-sep),
.tlkd-breadcrumb-current {
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #f9f7ea;
    text-decoration: none;
}
.tlkd-breadcrumb a:hover { text-decoration: underline; }
.tlkd-breadcrumb-current { font-weight: 700; }
.tlkd-breadcrumb-sep {
    width: 1px;
    height: 16px;
    background: rgba(249, 247, 234, .5);
    flex-shrink: 0;
}
/* Fixed-width group (matches the ~280px short line in Figma) pinned to the
   row's end by justify-content:space-between on .tlkd-breadcrumb-row —
   hidden below 1200px same as the speakers page, where it has no room. */
.tlkd-hero-divider { display: none; }
@media (min-width: 1200px) {
    .tlkd-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        /* Cancels the section's own 160px padding so the rule reaches the true
           viewport edge, then keeps doing so past 1920 (160 + 1600 + 160) where
           the inner starts centring. Was written against the old 24px gutter and
           its 1648px total. */
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
}
/* BIL-822: 20px with 4.142px of margin a side, matching .tlk-hero-divider on the
   listing and .vid- / .sml- / .srp- before it. At 16px with a 4px flex gap the row
   read smaller than the wedges behind it AND left a visible gap between the tips;
   20 * (sqrt(2) - 1) / 2 = 4.142 cancels each rotated square's overhang exactly,
   so adjacent tips just touch. The margin form also puts 4.142px on the row's
   trailing end, which lets the rule start on the last tip with no pull-back. */
.tlkd-diamond {
    width: 20px;
    height: 20px;
    margin-inline: 4.142px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}
.tlkd-hero-divider-line { flex: 1 1 auto; height: 1px; background: rgba(249, 247, 234, .5); margin-inline-start: 0; }
/* Full-bleed hairline closing the hero, directly under the breadcrumb row —
   a separate element from the short divider line above, per Figma. */
.tlkd-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Video player card ---------- */
/* overflow:visible explicitly: app.css has a sitewide `section { overflow: hidden }`
   rule and this is a <section>, so with 0 bottom padding it was cutting the player
   card's drop shadow off at its own bottom edge. That shadow reaches 154.7px below
   the card (48px offset + 106.7px blur), which is the room the export's filter
   region reserves. Same override .evt-featured-wrap carries for its watermark. */
.tlkd-player-section { position: relative; z-index: 1; overflow: visible; padding: 120px 160px 0; margin-bottom: 60px; }
.tlkd-player-card {
    max-width: 1600px;
    margin-inline: auto;
    background: #1a180c;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 48px 106.7px rgba(59, 42, 6, .22);
}
.tlkd-player-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tlkd-player-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26, 24, 12, .18) 40%, rgba(26, 24, 12, .78));
    pointer-events: none;
}
.tlkd-player-play {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    /* radius 61px rather than 50%: the component's own value, identical on a
       square. Amber fill with the masked three-stop glass rim on a 1.5px
       transparent border (drawn by layout-revamp.css off the --hr-ring-* pair),
       replacing a flat 2.5px solid white ring that drew a hard even edge. */
    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);
    /* The standard stack SCALED by 120/72 = 1.6667, which is what the export
       specifies for this instance: drops at dy 5 / 16.67 / 38.33 with sigma
       5 / 8.33 / 11.67 and an inner highlight at dy 6.67 / sigma 5.08 — the 72px
       card values times 1.6667 exactly. The design scales the effect with the
       button, so a 120px circle wearing 72px shadows sits flatter than it should. */
    box-shadow:
        0 6.67px 10.17px 0 rgba(255, 255, 255, .23) inset,
        3.33px 38.33px 23.33px 0 rgba(0, 0, 0, .02),
        1.67px 16.67px 16.67px 0 rgba(0, 0, 0, .03),
        0 5px 10px 0 rgba(0, 0, 0, .03);
    /* Own stacking context, so the glow's plus-lighter blends against this
       button's amber rather than the video frame behind it. */
    isolation: isolate;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tlkd-player-play:hover { transform: scale(1.05); }
/* 30.4x32, off the export: the play path spans 29.17px wide and 32px tall inside
   the 120px circle, i.e. the 19x20 glyph at 1.6x — a 40x40 box both oversized it
   and stretched it, icon-play-large's artboard being 31.6656x33.3343. The nudge is
   1.5 * 1.6 = 2.4, and the export's glyph centre sits 2.5px right of the
   button's. */
.tlkd-player-play img { width: 30.4px; height: 32px; transform: translateX(2.5px); }
.tlkd-player-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tlkd-player-badges {
    position: absolute;
    top: 53px;
    inset-inline-start: 53px;
    z-index: 1;
    display: flex;
    gap: 13px;
}
.tlkd-player-badge {
    padding: 13px 25px;
    border-radius: 999px;
    background: rgba(249, 245, 230, .16);
    border: 1px solid rgba(249, 245, 230, .24);
    color: #f9f5e6;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* Mobile-only equivalent of .tlkd-player-badges above — hidden by default,
   shown and positioned top-right in the 767.98px query below. Same shared
   export the Videos detail page uses (bilaraby-talks-revamp/icon-more-btn.svg):
   pill background/border/dots all baked into the SVG, since the pill's inside
   stroke is an SVG mask that doesn't translate to a real CSS border without
   adding 2px to the box. The button itself is just a transparent hit target
   sized to the image. */
.tlkd-player-more {
    display: none;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.tlkd-player-more img { display: block; width: 42px; height: 27px; }
/* Hidden by default — the desktop/tablet reading is the inline subtitle
   button inside .tlkd-player-controls-right; this float twin only shows up
   at the 767.98px query below.
   .tlkd-player-media, not a bare class, so this beats .tlkd-player-btn's own
   display:inline-flex (below) on specificity — same specificity as a bare
   .tlkd-player-subtitle-float would let source order decide, and
   .tlkd-player-btn's rule comes later in the file, which would leave this
   button visible (and, with no position:absolute outside the mobile query,
   centred by .tlkd-player-media's own flex centring) on every breakpoint
   above mobile — the exact bug the Videos detail page hit and fixed. */
.tlkd-player-media .tlkd-player-subtitle-float { display: none; }

.tlkd-player-controls {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 56px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tlkd-player-timeline-track {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: rgba(249, 245, 230, .25);
}
.tlkd-player-timeline-fill {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: #e8930d;
    display: block;
}
.tlkd-player-timeline-handle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-inline-start: -7px;
    transform: translateY(-50%) rotate(45deg);
    background: #e8930d;
}
.tlkd-player-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tlkd-player-controls-left,
.tlkd-player-controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.tlkd-player-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(26.5px);
    color: var(--hr-cream-500);
    border-radius: 100px;
    /* 15px, not 16: Figma's icon Button is a 56px box with its 1px stroke drawn
       INSIDE the frame, so the 24px icon at (16,16) leaves 15px of real space
       between the stroke and the glyph. 16px here added the border on top and
       rendered these 58px tall — 2px over the design's 56. */
    padding: 15px;
    cursor: pointer;
    font-size: 16px;
}
.tlkd-player-btn-round { padding: 15px; }
.tlkd-player-btn img { width: 24px; height: 24px; display: block; }
.tlkd-player-time {
    color: #f9f5e6;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}
.tlkd-player-time-total { opacity: .55; }
.tlkd-player-subtitle { padding: 15px 16px 15px 20px; font-weight: 400; }
.tlkd-player-subtitle strong { font-weight: 700; margin-inline-start: 4px; margin-inline-end: 4px; }
/* icon-chevron-down.svg is stroked dark brown for use on light buttons
   elsewhere (e.g. the listing's sort select) — near-invisible on this
   button's dark, translucent player background, so it's recoloured white.
   Also overrides .tlkd-player-btn img's 24x24 (sized for the round icon-only
   buttons) back down to the chevron's own small, unstretched proportions. */
.tlkd-player-subtitle img { width: 11px; height: 6px; filter: brightness(0) invert(1); }

/* ---------- Talk info + chapters ---------- */
.tlkd-main { padding: 60px 160px 120px; }
.tlkd-main-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    gap: 80px;
}
.tlkd-content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }

.tlkd-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.tlkd-meta-pill {
    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 the pill is 8 + 16 + 8 = 32 tall, matching
       .tlk-card-tag on the listing and .tlkd-card-tag / .tlkd-tag on this page.
       Without it Bootstrap's 1.5 (21px) made this the only 37px pill left. */
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.tlkd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #49473d;
    white-space: nowrap;
}
.tlkd-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.tlkd-title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
}
.tlkd-description { font-size: 20px; line-height: 28px; font-weight: 400; color: #3e3d30; }
.tlkd-description p { margin: 0 0 16px; }
.tlkd-description p:last-child { margin-bottom: 0; }

.tlkd-author { display: flex; align-items: center; gap: 16px; }
.tlkd-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.tlkd-author-text { display: flex; flex-direction: column; }
.tlkd-author-text strong { font-size: 18px; line-height: 28px; color: var(--hr-brown-900); }
.tlkd-author-text span { font-size: 16px; line-height: 24px; color: var(--hr-brown-300); }

.tlkd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; }
.tlkd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 14.5/22.5, not 16/24: Figma measures this component's padding INCLUSIVE of
       its 1.5px inside-aligned stroke, which is what makes it exactly 56px tall.
       Adding 16 and 24 to the border instead rendered 59px. The old value was also
       asymmetric (16px lead / 24px trail); the component is symmetric, with the
       8px gap separating icon from label. */
    padding: 14.5px 22.5px;
    border-radius: 61px;
    border: 1.5px solid transparent;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tlkd-btn:hover { transform: translateY(-2px); }
.tlkd-btn img { width: 24px; height: 24px; }
/* Primary. The border is the home hero's "Culture" ring — 61% white with
   border-bottom-width:0, so it lights the top and sides and lets the bottom edge
   run straight out of the amber, rather than the hard even ring a solid #fff
   draws. It costs 1px of height by design (55px). The shadow gains the four
   ambient drop layers it was missing; it had only the inset highlight, so it read
   as a flat amber chip. cream-50, not #fff. */
.tlkd-btn-primary {
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        7px 63px 18px rgba(0, 0, 0, .02),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
}
.tlkd-btn-primary:hover { color: var(--hr-cream-50); }
/* Ghost. border-color was transparent, which threw away the edge entirely; the
   glass rim on ::after (layout-revamp.css, already opted in) needs a real
   translucent border under it. Its shadow is an outer soft drop, not the inset
   highlight that was here — that belongs to the amber primary. */
.tlkd-btn-ghost {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .2);
    color: var(--hr-brown-900);
    box-shadow: 0 4px 6.1px rgba(0, 0, 0, .06);
}
.tlkd-btn-ghost:hover { color: var(--hr-brown-900); }
.tlkd-share { position: relative; }
.tlkd-share-menu {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-start: 0;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(11, 11, 5, .16);
    z-index: 2;
}
.tlkd-share-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .05);
    color: var(--hr-brown-900);
    text-decoration: none;
}
.tlkd-share-menu a:hover { background: var(--hr-green-500); color: var(--hr-cream-50); }

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

.tlkd-tags { display: flex; flex-wrap: wrap; gap: 16px; max-width: 770px; margin-top: 48px; }
.tlkd-tag {
    display: inline-flex;
    align-items: center;
    /* 7/15, not 8/16: this pill has a 1px border, and Figma strokes INSIDE the
       frame, so the design's 8px and 16px are measured from the edge with the
       stroke sitting within them. Adding 8/16 on top of the border made it 34px
       tall and 2px wide of the design's 32. Same correction .srp-tab carries.
       That also puts it at exactly the same height as .tlk-card-tag on the
       listing grid card. */
    padding: 7px 15px;
    border-radius: 8px;
    background: rgba(18, 115, 106, .1);
    border: 1px solid rgba(18, 115, 106, .5);
    color: var(--hr-green-500);
    font-size: 14px;
    /* The design's instance measures 224x32 with its text box at y=8, height 16 —
       8 + 16 + 8 — so 16px makes the 32px exact. Without it the pill inherited
       Bootstrap's 1.5 and stood 37px tall. */
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Chapters card ---------- */
.tlkd-chapters-card {
    flex-shrink: 0;
    width: 520px;
    padding: 48px;
    border-radius: 24px;
    border: 1px solid #fff;
    background: linear-gradient(to top, rgba(255, 255, 255, .8), rgba(255, 255, 255, .8) 76%, rgba(255, 255, 255, .6));
    backdrop-filter: blur(53.55px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6.1px rgba(255, 255, 255, .23);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.tlkd-chapters-head { display: flex; align-items: center; gap: 12px; }
/* Figma's mark is a small filled diamond centred inside a larger hollow
   diamond ring, not a single hollow outline — the fill is a nested pseudo-
   element rather than a second markup layer. */
.tlkd-chapters-mark {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--hr-purple-500, #8e3b78);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.tlkd-chapters-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: var(--hr-purple-500, #8e3b78);
}
.tlkd-chapters-head h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.tlkd-chapters-list { display: flex; flex-direction: column; gap: 4px; }
.tlkd-chapter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 13px;
    font-size: 18px;
    line-height: 28px;
    color: var(--hr-brown-500);
}
.tlkd-chapter.is-active { background: rgba(232, 147, 13, .1); color: #c87f08; font-weight: 700; }
.tlkd-chapters-note {
    padding-top: 30px;
    border-top: 1px solid #eae3c9;
    margin: 0;
    color: #6b6a57;
    font-size: 16px;
    line-height: 24px;
}

/* ---------- Divider ---------- */
/* The hairline bleeds to the true viewport edges; the diamond clusters stay
   on the 1600px content gutters — same split as the Press Release divider. */
.tlkd-divider {
    position: relative;
    display: block;
    height: 28px;
}
.tlkd-divider-line {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    /* yellow-100 at 60%, not yellow-500 at 60%: the rule is a pale sand line, not
       a dark amber one. Values from .prd-divider, this divider's corrected form. */
    background: rgba(243, 217, 176, .6);
}
.tlkd-divider-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    /* 1920px = the 1600px content cap PLUS both 160px gutters, because the padding
       sits INSIDE this box under border-box sizing. Capping it at 1600 left only
       1280px of content, which put each cluster 160px inside the page's content
       edge rather than on it. */
    max-width: 1920px;
    margin-inline: auto;
    padding: 0 160px;
}
.tlkd-divider-cluster { display: flex; flex-shrink: 0; }
/* Figma: SOLID yellow/yellow-100 #f3d9b0 at full opacity. This was yellow-400
   knocked back to 50%, exactly the washed-out treatment .prd-divider and the Blog
   page were both corrected away from. 4.142px = 20 * (sqrt(2) - 1) / 2, the value
   the hero divider on this page now uses, so adjacent tips just touch rather than
   overlapping by a fraction as a round 4px does. */
.tlkd-diamond-sm {
    width: 20px;
    height: 20px;
    margin-inline: 4.142px;
    background: #f3d9b0;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ---------- Related talks ---------- */
.tlkd-related { position: relative; padding: 60px 160px 120px; }
.tlkd-related-inner { position: relative; z-index: 1; max-width: 1600px; margin-inline: auto; }
/* The same motif that closes the Talks listing above the footer — Figma's
   "Intersect", 254.66x111.564 at x=0, filled #338A81 which is --hr-green-400.
   Replaces a 220px speakers-corner-decor.svg parked at the section's END edge and
   rotated 180deg, which was another page's asset standing in for this one. */
.tlkd-related-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"] .tlkd-related-pattern { transform: scaleX(-1); }
/* Hidden on phones, as on the listing: 254px of motif at the section's start edge
   crowds a single-column card rail. */
@media (max-width: 767.98px) { .tlkd-related-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 the video detail page's
   .vidd-related-pattern-mobile uses, since every page here shares the same
   desktop listing-pattern.svg). */
.tlkd-related-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"] .tlkd-related-pattern-mobile { transform: scaleX(-1); }
@media (max-width: 767.98px) { .tlkd-related-pattern-mobile { display: block; } }
.tlkd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.tlkd-related-head h2 { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.tlkd-accent { color: var(--hr-yellow-500); }
.tlkd-related-nav { display: flex; gap: 12px; }
/* Same fix as the video detail page's .vidd-nav-btn (Figma node 40001286:70400
   confirms it's the standard glass "Button" component): solid white 1.5px
   border and the full inset-highlight shadow stack, not the flat hairline +
   single soft drop this carried. background stays rgba(255,255,255,.2) —
   already correct. */
.tlkd-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 61px;
    border: 1.5px solid #fff;
    background: rgba(255, 255, 255, .2);
    color: var(--hr-brown-900);
    cursor: pointer;
    flex-shrink: 0;
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        7px 63px 18px rgba(0, 0, 0, 0),
        4px 40px 16px rgba(0, 0, 0, 0),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tlkd-nav-btn:hover { transform: translateY(-2px); }
.tlkd-nav-btn img { width: 24px; height: 24px; }
/* BIL-581: prev/next are separate left/right assets, so under RTL the glyphs have
   to flip with the reading direction or "previous" points away from the card it
   scrolls to. This pair had no flip at all; every other arrow pair in the codebase
   carries this one-liner. */
[dir="rtl"] .tlkd-nav-btn img { transform: scaleX(-1); }

/* Mobile-only — desktop/tablet keep the slider's prev/next arrows to reach
   talks past the visible set. Reuses .tlkd-btn-ghost (already the page's
   "Copy link"/"Share" pill) rather than the home page's .hr-btn-ghost-dark,
   which only carries styles when scoped under .home-revamp and would render
   unstyled here. */
.tlkd-related-viewall { display: none; }

.tlkd-related-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* overflow-x: auto forces overflow-y to compute to auto, so this track clips
       at its padding box. The card's ambient shadow (same three drops as
       .tlk-card on the listing) reaches 37px below the card and its top blur
       6px above it; without this room the cards render flat-bottomed here while
       the listing's grid (overflow: visible) shows the full shadow. */
    padding: 8px 0 40px;
}
.tlkd-related-track::-webkit-scrollbar { display: none; }

/* Split in two, .tlkd-card (shadow shell, still the flex item the track
   sizes/positions) + .tlkd-card-surface (blur/clip/internal layout) — same
   fix as the listing page's .vid-card/.tlk-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. */
.tlkd-card {
    position: relative;
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    display: flex;
    border-radius: 40px;
    border: 1px solid #fff;
    background: var(--hr-cream-600, #e3e1d4);
    /* 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);
    /* The listing card's three ambient drops. The inset white highlight that was
       here belongs to the amber buttons, not to this cream shell. */
    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);
}
/* Everything that used to live directly on .tlkd-card: the internal
   flex-column layout, the 8px padding, the blur, and the clip. Fills
   .tlkd-card's content box exactly (a flex item at flex:1 with no size of
   its own), so it sits flush behind the 1px border with the same effective
   shape .tlkd-card-glow's bleed and .tlkd-card-media's corners were already
   positioned against. */
.tlkd-card-surface {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    border-radius: 40px;
    overflow: hidden;
    /* Forces its own compositing layer, which is what makes iOS Safari
       actually respect this overflow:hidden + border-radius clip against
       .tlkd-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);
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
}
/* Image and content panel sit flush (no gap) but each keeps its own full
   border-radius — the slight curve where they meet, rather than a hard
   edge, is the soft "video / content" seam from the Figma card. */
/* 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
   .tlkd-card-surface, not this element) instead of leaving that gap a flat,
   plain colour. */
.tlkd-card-glow {
    position: absolute;
    z-index: 0;
    inset: -16px -16px auto -16px;
    height: 65%;
    background-image: var(--tlkd-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);
}
.tlkd-card-media {
    position: relative;
    z-index: 1;
    display: block;
    /* 16/9, the listing card's ratio — 496/278 was 1.784 against its 1.778. */
    aspect-ratio: 16 / 9;
    /* Bottom corners squared off, not rounded: .tlkd-card-body overlaps this
       block's bottom edge by only 16px, 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);
    background-size: cover;
    background-position: center;
}
/* Overlay.svg's two layers, as on the listing card: ::before is a blurred copy of
   the thumbnail (Figma's "Image" layer) masked to the bottom band, ::after is the
   export's own gradient. bilaraby-talks-revamp.css carries the derivation. */
.tlkd-card-media::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: 0;
    background-image: var(--tlkd-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;
}
.tlkd-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. */
.tlkd-card-play,
.tlkd-card-stats,
.tlkd-card-duration { z-index: 2; }
.tlkd-card-play {
    position: absolute;
    top: 50%;
    inset-inline-start: 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);
    isolation: isolate;
    pointer-events: none;
}
/* solar:play-bold at its native 19x20 with the glyph's own optical nudge. */
.tlkd-card-play img { width: 19px; height: 20px; transform: translateX(1.5px); }
.tlkd-card-stats {
    position: absolute;
    /* 43px, clearing the body panel that overlaps this block by 26px — the
       listing's own figure for the same relationship. */
    bottom: 43px;
    inset-inline-start: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.tlkd-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: var(--hr-cream-500);
}
.tlkd-card-stat img { width: 16px; height: 16px; }
.tlkd-card-stat-sep { width: 1px; height: 13.734px; background: rgba(255, 255, 255, .3); }
.tlkd-card-duration {
    position: absolute;
    bottom: 43px;
    inset-inline-end: 16px;
    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;
    /* 300, matching .tlk-card-duration on the listing: Almarai Light is a real
       face here (app.css declares 300/400/700/800), so this is not a synthesised
       thin — 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. */
    font-weight: 300;
    white-space: nowrap;
}
.tlkd-card-duration img { width: 16px; height: 16px; }

.tlkd-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;
    /* The listing card's ramp. Also fixes an invalid alpha: this read
       rgba(255,255,255,4.4), which clamps to 1 and so never faded at all. */
    background: linear-gradient(180deg, #fff 18%, rgba(255, 255, 255, 0) 100%);
}
.tlkd-card-copy { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tlkd-card-title {
    display: block;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--hr-brown-900);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tlkd-card-title:hover { color: var(--hr-brown-900); text-decoration: underline; }
.tlkd-card-author { font-size: 16px; color: #6e6852; }
.tlkd-card-heart {
    grid-column: 2;
    grid-row: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
    padding: 0;
    position: relative;
    isolation: isolate;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.tlkd-card-heart img { width: 24px; height: 24px; }
.tlkd-card-heart.is-active { background: var(--hr-yellow-500); border-color: var(--hr-yellow-500); }
.tlkd-card-heart.is-active img { filter: brightness(0) invert(1); }
.tlkd-card-tags { grid-column: 1 / -1; display: flex; gap: 13.3px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tlkd-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    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;
}
.tlkd-card-tag--blue { background: var(--hr-blue-400); }
.tlkd-card-tag--green { background: var(--hr-green-400); }
.tlkd-card-tag--purple { background: var(--hr-purple-400, #a56293); }
.tlkd-card-tag-lang {
    display: inline-flex;
    align-items: center;
    /* 4/16, 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;
}

/* ---------- Responsive ---------- */
@media (max-width: 1439.98px) {
    .tlkd-main-inner { flex-direction: column; gap: 48px; }
    /* order:-1 so the chapters card stacks FIRST, directly under the player
       section, instead of after the whole content column. In the markup it is the
       last child of .tlkd-main-inner (an <aside> following .tlkd-content), which
       is right for the desktop two-column layout but puts it below the title,
       description, author and actions once that column collapses — a long way
       from the video it belongs to. Reordering visually rather than in the blade
       keeps the DOM order sensible for reading order and for the desktop case. */
    .tlkd-chapters-card { width: 100%; order: -1; }
    .tlkd-content { gap: 24px; }
}
@media (max-width: 1199.98px) {
    /* Gutter and hero come down together, 160 -> 40 -> 16 and 256 -> 200 -> 160,
       exactly as the Talks listing and the Videos pages step. padding-inline only,
       so .tlkd-hero keeps its derived top padding. */
    .tlkd-hero,
    .tlkd-player-section,
    .tlkd-main,
    .tlkd-related { padding-inline: 40px; }
    .tlkd-divider-inner { padding-inline: 40px; }
    .tlkd-revamp { --tlkd-hero-h: 200px; }
    .tlkd-title { font-size: 40px; line-height: 48px; }
    .tlkd-player-badges { display: none; }
    .tlkd-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 991.98px) {
    .tlkd-player-section { padding-top: 80px; }
    .tlkd-player-controls { padding: 0 24px 24px; }
    /* padding-block, not the full shorthand: these used to restate a 24px inline
       value, which would now override the ladder above at this breakpoint. */
    .tlkd-main { padding-block: 40px 80px; }
    .tlkd-related { padding-block: 40px 80px; }
    .tlkd-related-head h2 { font-size: 30px; line-height: 40px; }
}
@media (max-width: 767.98px) {
    .tlkd-hero,
    .tlkd-player-section,
    .tlkd-main,
    .tlkd-related { padding-inline: 16px; }
    .tlkd-divider-inner { padding-inline: 16px; }
    .tlkd-revamp { --tlkd-hero-h: 160px; }
    /* Matches .hr-diamond-border's own mobile step and .vidd-diamond-sm: 20px
       diamonds shrink to 10px rather than staying full-size on a narrow rail.
       margin-inline halves with it — 10*(sqrt(2)-1)/2 = 2.071px, the same
       per-side-overhang formula the base 20px rule already uses (4.142px). */
    .tlkd-diamond-sm { width: 10px; height: 10px; margin-inline: 2.071px; }
    /* .tlkd-related still carries its own 40px padding-top (from the
       991.98px breakpoint above), which would stack underneath this 60px
       margin-top for a real gap of 100px — zeroed so the margin is the only
       spacing between the divider and the heading, same fix as .tlkd-main
       below. */
    .tlkd-related { padding-top: 0; }
    .tlkd-related-head { margin-top: 60px; margin-bottom: 20px; }
    .tlkd-player-section { margin-bottom: 32px; }
    /* .tlkd-main's own 40px padding-top (set at the 991.98px breakpoint,
       still in effect here) was stacking on top of this 32px margin, so the
       real gap to .tlkd-main was 72px instead of the design's 32px. Zeroed
       here so the margin above is the only spacing between the two
       sections; padding-bottom is untouched. */
    .tlkd-main { padding-top: 0; }
    /* flex-basis:100% forces a wrap onto its own line regardless of how
       much room is left next to the category pill — plain flex-wrap only
       wraps when the row actually runs out of width. Applies to both meta
       items this page renders (location, recorded date). */
    .tlkd-meta-item { flex-basis: 100%; }

    /* Transcript full-width on its own row (kept for when the commented-out
       button above it is restored); Copy link + Share split the next row
       evenly. .tlkd-share is the DIV wrapping the share button+menu, not a
       button itself, so it (not .tlkd-btn-ghost) is the flex item sized for
       its slot. */
    .tlkd-btn-primary { flex-basis: 100%; justify-content: center; }
    /* "this talk" drops (see the blade's .tlkd-share-label-extra span), so
       "Share" reads about the same width as "Copy link" and both stay on
       one line — min-width:0 still overrides the flex item default of auto
       so each genuinely shrinks to its calc(50%) share. */
    .tlkd-share-label-extra { display: none; }
    .tlkd-actions > .tlkd-btn-ghost,
    .tlkd-share { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .tlkd-actions > .tlkd-btn-ghost,
    .tlkd-share .tlkd-btn-ghost { justify-content: center; }
    .tlkd-share .tlkd-btn-ghost { width: 100%; }
    /* .tlkd-content is a flex column with its own 24px gap (set at the
       1439.98px breakpoint, still active here) spacing every child apart —
       .tlkd-actions to .tlkd-tags included. An 8px margin-top on top of
       that 24px gap nets the intended 32px; the full desktop 48px here
       would have stacked on the gap for 72px. */
    .tlkd-tags { margin-top: 8px; }
    .tlkd-title { font-size: 32px; line-height: 40px; }
    .tlkd-description { font-size: 18px; line-height: 26px; }
    .tlkd-chapters-card { padding: 32px; }

    /* Related talks: no slider at all on phone — a single-column grid, same
       shape as the listing page's .tlk-grid at this breakpoint, not a
       scroll-snap rail showing one 85%-width card at a time. Nav arrows
       have nothing to control once it's a plain stacked grid, so they're
       hidden; the controller already caps this at 6 talks
       (BilArabyTalkController::show), so nothing further to trim here. */
    .tlkd-related-nav { display: none; }
    .tlkd-related-track {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
    }
    .tlkd-card { flex: none; width: 100%; scroll-snap-align: none; }
    .tlkd-related-viewall { display: flex; justify-content: center; width: 100%; margin-top: 20px; }

    /* 362 x 203.625 in the Figma frame is exactly 16:9 — same ratio as the
       desktop rule, not the 3:4 portrait crop this carried before; the
       mobile player is the same widescreen shape, just narrower. Same
       component family as the Videos detail page, which carries this exact
       fix already. */
    .tlkd-player-media { aspect-ratio: 16 / 9; }
    /* 48px (16px padding + 16px icon), not 120 — applied by analogy with the
       Videos detail page's own mobile player button, which is the same
       120px desktop component and was pulled from its real mobile frame in
       Figma (fetching the button embedded in its full parent container,
       not the bare node id, which resolves to the wrong default variant).
       No Figma access was available while porting this page, so this has
       NOT been independently re-verified against the Talks page's own
       mobile frame — flagged in the task report. */
    .tlkd-player-play {
        width: 48px;
        height: 48px;
        border-width: 1px;
        box-shadow:
            inset 0 2.667px 4.067px rgba(255, 255, 255, .23),
            4.667px 42px 12px rgba(0, 0, 0, 0),
            2.667px 26.667px 10.667px rgba(0, 0, 0, 0),
            1.333px 15.333px 9.333px rgba(0, 0, 0, .02),
            .667px 6.667px 6.667px rgba(0, 0, 0, .03),
            0 2px 4px rgba(0, 0, 0, .03);
    }
    .tlkd-player-play img { width: 12.16px; height: 12.8px; transform: translateX(1px); }

    /* Subtitle pill top-left, the new "more" pill top-right — the inline
       subtitle button (inside .tlkd-player-controls) is swapped for its
       float twin, which sits directly in .tlkd-player-media and so actually
       gets that element as its containing block, in the badge row's old
       spot (.tlkd-player-badges is hidden below 1200px already). */
    .tlkd-player-subtitle-inline { display: none; }
    /* A distinct, smaller component from the desktop pill, not just a
       recolour of it: 12px type (Utility/Caption), 7/13 padding and a 6px
       gap, against the .tlkd-player-btn base's 16px type, 15px padding and
       8px gap. Badge tokens for fill/border, not the generic white-based
       .tlkd-player-btn ones, and an explicit line-height so the label
       doesn't inherit the page's ~1.5 body line-height, which would throw
       it off-center in the pill vertically.
       .tlkd-player-media prefix matches the base hide rule's specificity
       (0,0,2,0) — needed so this display:inline-flex actually outranks it
       here instead of losing to it the same way .tlkd-player-btn's rule
       used to win outside this query on the Videos detail page. */
    .tlkd-player-media .tlkd-player-subtitle-float {
        display: inline-flex;
        position: absolute;
        top: 16px;
        inset-inline-start: 16px;
        z-index: 2;
        padding: 7px 13px;
        gap: 6px;
        font-size: 12px;
        line-height: normal;
        background: rgba(249, 245, 230, .16);
        border: 1px solid rgba(249, 245, 230, .24);
        border-radius: 999px;
    }
    .tlkd-player-subtitle-float strong { margin-inline: 0; }
    .tlkd-player-subtitle-float img { width: 7.5px; height: 3.75px; }
    .tlkd-player-more {
        display: inline-flex;
        position: absolute;
        top: 16px;
        inset-inline-end: 16px;
        z-index: 2;
    }

    /* Volume + fullscreen get the shared "ghost" glass treatment — the same
       masked three-stop rim (layout-revamp.css's shared ::after) plus the
       full glass box-shadow stack, instead of the plain flat fill/border
       .tlkd-player-btn carries on its own. Scoped to these two specific
       buttons via [data-action], not the whole .tlkd-player-btn-round set,
       so the round PLAY button (already hidden here) isn't touched. */
    .tlkd-player-btn[data-action="volume"],
    .tlkd-player-btn[data-action="fullscreen"] {
        position: relative;
        background: rgba(255, 255, 255, .2);
        border: 1.5px solid transparent;
        box-shadow:
            inset 0 4px 6.1px rgba(255, 255, 255, .23),
            2px 23px 14px rgba(0, 0, 0, .02),
            1px 10px 10px rgba(0, 0, 0, .03),
            0 3px 6px rgba(0, 0, 0, .03);
    }
    .tlkd-player-btn[data-action="volume"]::after,
    .tlkd-player-btn[data-action="fullscreen"]::after {
        content: "";
        position: absolute;
        inset: -1.5px;
        border-radius: inherit;
        padding: 1.5px;
        background: linear-gradient(0deg,
            rgba(255, 255, 255, .1) 0%,
            rgba(101, 104, 111, .3) 74.04%,
            rgba(255, 255, 255, .75) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }

    /* Seek line moves to the bottom of the control stack — column-reverse
       flips the two children (.tlkd-player-timeline-track then
       .tlkd-player-controls-row in the DOM) without touching markup. */
    .tlkd-player-controls { padding: 0 16px 20px; gap: 10px; flex-direction: column-reverse; }
    /* Back to a single row (space-between), not the stacked column this used
       to force: subtitle is gone from the flow above, leaving a clean
       volume+time cluster on the left and fullscreen alone on the right. */
    .tlkd-player-controls-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
    .tlkd-player-controls-left,
    .tlkd-player-controls-right { flex-wrap: wrap; gap: 10px; }
    /* The round PLAY button in the controls row — not .tlkd-player-play, the
       big center one, which stays. Volume moves ahead of the duration text
       to read "volume, then time" left to right. */
    .tlkd-player-controls-left [data-action="play"] { display: none; }
    .tlkd-player-controls-left [data-action="volume"] { order: -1; }
    .tlkd-player-btn { padding: 12px; }

    /* ---------- Talk details (related) 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. */
    .tlkd-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);
    }
    .tlkd-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. */
    .tlkd-card-heart { 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. */
    .tlkd-card-title { 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). */
    .tlkd-card-tag { padding: 6px 12px; border-radius: 6px; font-size: 10px; }
    .tlkd-card-tag-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. */
    .tlkd-breadcrumb { font-size: 12px; gap: 8px; }
    /* ...and restated on the crumbs themselves, which is what the rule
       above could not reach. Every other page puts the 20px on the
       .xxx-breadcrumb container and lets the crumbs inherit it, so one
       override there does the whole job; this page declares it on the
       children instead (see the base rule), so the container override was
       taking the gap and nothing else and the text sat at 20px on the
       phone while every other page read 12px. Same selector list as the
       base rule, so links, plain crumbs and the current crumb all follow.
       line-height is deliberately left at its 28px: that is the box the
       Talks listing (.tlk-breadcrumb) keeps at this width, so the detail
       page and its listing stay in step. */
    .tlkd-breadcrumb a,
    .tlkd-breadcrumb > span:not(.tlkd-breadcrumb-sep),
    .tlkd-breadcrumb-current { font-size: 12px; }
    .tlkd-breadcrumb-sep { height: 12px; }
}