/* ==========================================================================
   Video details page (Figma: QF - BilAraby - WebsiteDesign-Concept-2, node
   40001286:70288 "Videos Details"). Uses the --hr-* tokens declared globally
   in layout-revamp.css. Shares the video-player-card / chapters-card /
   related-track patterns with bilaraby-talk-detail-revamp.css (renamed
   .tlkd-* to .vidd-*). No photo banner — the exact same coral "liquid"
   gradient wash as .tlkd-revamp, just bled taller (560px) so it also washes
   over the top of the player section below the hero. */
.vidd-revamp {
    /* Hero height as a variable so the wedge box below derives from it instead of
       the two drifting apart — same pattern as the listing and its siblings. */
    --vidd-hero-h: 256px;
    /* hero + 80px, identical to the listing's --vid-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. */
    --vidd-wash-h: calc(var(--vidd-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(--vidd-wash-h), 100% calc(var(--vidd-wash-h) * 1.5);
}
/* The brushed grain over the wash — same tile, same .7 opacity, same decay mask
   as the listing hero and the other washed pages, so the two video pages read
   identically. A plain linear-gradient() renders flat and plastic without it. */
.vidd-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--vidd-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 ---------- */
.vidd-hero {
    position: relative;
    z-index: 1;
    /* min-height, NOT height. This page's breadcrumb carries four crumbs, the last
       of them the video 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 —
       which is what read as squished. As a minimum the hero grows downward
       instead, and the header keeps its clearance at every width.
       The listing hero can stay fixed: its breadcrumb is three short crumbs and
       never wraps. */
    height: auto;
    min-height: var(--vidd-hero-h);
    display: flex;
    align-items: flex-end;
    /* 160px inline, the listing's gutter, so both video pages put their content on
       the same left and right edges. Was 24px, which set this page's column 136px
       wider a side than every other revamp page.
       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 today. That keeps the unwrapped hero pixel-identical at all three
       breakpoints (196 / 140 / 100px) while giving the wrapped one somewhere to
       go, and it tracks --vidd-hero-h automatically instead of needing three
       hand-written values. */
    padding: calc(var(--vidd-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, same geometry and the same shared innerpage-hero/ assets
   as .vid-hero-pattern on the 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 breakpoints. */
.vidd-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.vidd-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. */
.vidd-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"] .vidd-hero-pattern { transform: scaleX(-1); }
@media (max-width: 767.98px) {
    .vidd-hero-pattern { display: none; }
}
.vidd-hero-inner { position: relative; z-index: 1; max-width: 1600px; width: 100%; margin-inline: auto; }
.vidd-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vidd-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. */
.vidd-breadcrumb a,
.vidd-breadcrumb > span:not(.vidd-breadcrumb-sep),
.vidd-breadcrumb-current {
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    color: #f9f7ea;
    text-decoration: none;
}
.vidd-breadcrumb a:hover { text-decoration: underline; }
.vidd-breadcrumb-current { font-weight: 700; }
.vidd-breadcrumb-sep {
    width: 1px;
    height: 16px;
    background: rgba(249, 247, 234, .5);
    flex-shrink: 0;
}
.vidd-hero-divider { display: none; }
@media (min-width: 1200px) {
    .vidd-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. Same expression the listing carries. */
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
}
/* BIL-822: 20px with 4.142px of margin a side, matching .vid-hero-divider on the
   listing and .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 is what lets the rule start on the last tip with no
   pull-back. */
.vidd-diamond {
    width: 20px;
    height: 20px;
    margin-inline: 4.142px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}
.vidd-hero-divider-line { flex: 1 1 auto; height: 1px; background: rgba(249, 247, 234, .5); margin-inline-start: 0; }
.vidd-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Video player card ---------- */
/* position/z-index, not just padding: the wash's grain layer
   (.vidd-revamp::before) is a positioned element at z-index 0 and runs 560px down
   the page, which reaches ~184px into this section. A non-positioned block paints
   BELOW a positioned one, so without this the grain would speckle over the top of
   the player card instead of sitting behind it. .vid-featured carries the same
   z-index on the listing for the same reason. */
/* 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 exactly the room the export's
   filter region reserves — the shadow was specified correctly all along and simply
   had nowhere to render. Same override, for the same reason, that
   .evt-featured-wrap carries for its watermark. */
.vidd-player-section { position: relative; z-index: 1; overflow: visible; padding: 120px 160px 0; margin-bottom: 60px; }
.vidd-player-card {
    max-width: 1600px;
    margin-inline: auto;
    background: #1a180c;
    border-radius: 24px;
    overflow: hidden;
    /* Figma filter0_d off the card export: feOffset dy=48, feGaussianBlur
       stdDeviation=53.35 (CSS blur is 2x sigma, hence 106.7), feColorMatrix
       rgb(59,42,6) at alpha .22. A 1:1 translation — kept as-is. */
    box-shadow: 0 48px 106.7px rgba(59, 42, 6, .22);
}
.vidd-player-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vidd-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;
}
/* The same Button treatment as .vid-feature-play / .vid-card-play on the listing:
   amber fill, the masked three-stop glass rim on a 1.5px transparent border
   (drawn by layout-revamp.css off the --hr-ring-* pair below), the full effect
   stack, and the shared bottom-ellipse hover glow. Replaces a flat 2.5px solid
   white ring, which drew a hard even edge all the way round instead of a
   light-catching one, and a lone transform on hover.
   120px stays — this is the player's own large instance, not the 72px card one.
   radius 61px rather than 50%: the component's value, identical on a square. */
.vidd-player-play {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    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 same stack, SCALED by 120/72 = 1.6667 — which is what the export's
       filter1_dddi actually specifies for this instance: its three drops are
       dy 5 / 16.67 / 38.33 at sigma 5 / 8.33 / 11.67 and its inner highlight is
       dy 6.67 at sigma 5.08, i.e. the 72px card values times 1.6667 exactly. The
       design scales the effect with the button rather than reusing the small
       one's, so a 120px circle carrying 72px shadows sat 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;
}
.vidd-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 — not the 2x I had assumed, so
   38x40 was oversized. The nudge is 1.5 * 1.6 = 2.4, and the export's own glyph
   centre sits 2.5px right of the button's (962.5 against 960), so 2.5px it is. */
.vidd-player-play img { width: 30.4px; height: 32px; transform: translateX(2.5px); }
.vidd-player-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.vidd-player-badges {
    position: absolute;
    top: 53px;
    inset-inline-start: 53px;
    z-index: 1;
    display: flex;
    gap: 13px;
}
.vidd-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 .vidd-player-badges above — hidden by default,
   shown and positioned top-right in the 767.98px query below. Figma node
   40005017:73699: same translucent pill as .vidd-player-badge (same fill/
   border tokens), just icon-only and fully rounded. */
/* Renders the exported Text.svg (pill + inside stroke + dots, all baked in)
   directly, rather than reconstructing the pill in CSS — the mask-based
   inside stroke isn't reproducible pixel-exact with a real border (it added
   2px to the box; see the removed box-shadow workaround), and the SVG is
   simpler and exactly right. The button itself is just a transparent hit
   target sized to the image. */
.vidd-player-more {
    display: none;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.vidd-player-more img { display: block; width: 42px; height: 27px; }
/* Hidden by default — the desktop/tablet reading is the inline subtitle
   button inside .vidd-player-controls-right; this float twin only shows up
   at the 767.98px query below. */
/* .vidd-player-media, not a bare class, so this beats .vidd-player-btn's
   own display:inline-flex (line 390) on specificity — same specificity as a
   bare .vidd-player-subtitle-float let source order decide, and .vidd-player-
   btn's rule comes later in the file and was winning, leaving this button
   visible (and, with no position:absolute outside the mobile query, centred
   by .vidd-player-media's own flex centring — a second subtitle pill sitting
   dead in the middle of the player on every breakpoint above mobile). */
.vidd-player-media .vidd-player-subtitle-float { display: none; }

.vidd-player-controls {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 56px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vidd-player-timeline-track {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: rgba(249, 245, 230, .25);
}
.vidd-player-timeline-fill {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: #e8930d;
    display: block;
}
.vidd-player-timeline-handle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-inline-start: -7px;
    transform: translateY(-50%) rotate(45deg);
    background: #e8930d;
}
.vidd-player-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.vidd-player-controls-left,
.vidd-player-controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.vidd-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;
}
.vidd-player-btn-round { padding: 15px; }
.vidd-player-btn img { width: 24px; height: 24px; display: block; }
.vidd-player-time {
    color: #f9f5e6;
    font-size: 16px;
    font-weight: 300;
    white-space: nowrap;
}
.vidd-player-time-total { opacity: .55; }
.vidd-player-subtitle { padding: 15px 16px 15px 20px; font-weight: 400; }
.vidd-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 .vidd-player-btn img's 24x24 (sized for the round icon-only
   buttons) back down to the chevron's own small, unstretched proportions. */
.vidd-player-subtitle img { width: 11px; height: 6px; filter: brightness(0) invert(1); }

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

.vidd-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.vidd-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
       .vid-card-tag on the listing and .vidd-card-tag / .vidd-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;
}
.vidd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #49473d;
    white-space: nowrap;
}
.vidd-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.vidd-title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
}
/* Body/Body Medium/Regular — Almarai 400, 20/28, #3e3d30. The weight is stated
   rather than left to inheritance because this renders raw editor HTML. */
.vidd-description { font-size: 20px; line-height: 28px; font-weight: 400; color: #3e3d30; }
.vidd-description p { margin: 0 0 16px; }
.vidd-description p:last-child { margin-bottom: 0; }

.vidd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; }
/* The shared Button primitives, re-declared and scoped here rather than loading
   another page's stylesheet — the same convention agenda-detail-revamp.css and
   summit-revamp.css follow. Values are .agenda-revamp .hr-btn / .hr-btn-primary
   and .home-revamp .hr-btn-ghost-dark, which are this component's corrected
   forms. */
.vidd-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 — 3px over — the same
       miss agenda-detail-revamp.css documents. The old value was also asymmetric
       (16px lead / 24px trail); the component is symmetric, with the 8px gap
       doing the work of separating the icon from the 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;
}
.vidd-btn:hover { transform: translateY(-2px); }
.vidd-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 (14.5 + 24 + 14.5 + 2 + 0 = 55), which
   is what Culture measures on its own.
   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. */
.vidd-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);
}
/* Holds its resting shadow on hover and lights the shared ::before ellipse
   instead — the lifted amber drop-shadow this component used to grow was
   invented (home-revamp.css records it). The translateY stays. */
.vidd-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. */
.vidd-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);
}
.vidd-btn-ghost:hover { color: var(--hr-brown-900); }
.vidd-share { position: relative; }
.vidd-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;
}
.vidd-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;
}
.vidd-share-menu a:hover { background: var(--hr-green-500); color: var(--hr-cream-50); }

.vidd-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;
}

.vidd-tags { display: flex; flex-wrap: wrap; gap: 16px; max-width: 770px; margin-top: 48px; }
/* Figma node 40001286:70359, type "Utility/Tag/Bold" (Almarai 700 / 14). Fill,
   1px border, 8px radius, 8/16 padding and green-500 all already matched; the
   line box was the one thing missing, so the pill stood 37px tall against the
   design's 32 — it had no value of its own and inherited Bootstrap's 1.5 (21px).
   The design's instance measures 224x32 with its text box at y=8, height 16 —
   8 + 16 + 8 — so 16px makes the 32px exact. Same correction .vid-feature-tag
   carries on the listing, from the same type token. */
.vidd-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 .vid-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;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Speaker / guest rows ---------- */
/* Copied from .podd-guest-* (podcasts-detail-revamp.css, the "In this episode"
   card) and renamed to this page's prefix — the markup here was written against
   the podcast page's class names, which live in a stylesheet this page never
   loads, so the whole block rendered unstyled.
   Only the five rules the markup actually uses come across. The podcast's
   .podd-guest-card / -head / -mark are deliberately left behind: there, the
   guests sit in a 519px frosted sidebar card with its own heading and diamond
   mark; here the block sits inside .vidd-content's main column, between the
   description and the action buttons, so the card shell would be a second panel
   inside the page's own one. */
.vidd-speaker-section {
    display: flex;
    flex-direction: column;
    /* Stacking gap for multiple speakers. The podcast card has no value for this
       — it shows a single guest — so this reuses its row's own internal 16px. */
    gap: 16px;
}
.vidd-speaker-row { display: flex; align-items: center; gap: 16px; }
.vidd-speaker-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--hr-brown-300);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vidd-speaker-avatar img { width: 24px; height: 24px; opacity: .5; filter: brightness(0) invert(1); }
.vidd-speaker-text { display: flex; flex-direction: column; min-width: 0; }
.vidd-speaker-name { font-size: 18px; font-weight: 700; color: var(--hr-brown-900); }
.vidd-speaker-role { font-size: 16px; color: var(--hr-brown-300); }

/* ---------- Chapters card ---------- */
.vidd-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;
}
.vidd-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. */
.vidd-chapters-mark {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--hr-purple-500, #8e3b78);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.vidd-chapters-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    background: var(--hr-purple-500, #8e3b78);
}
.vidd-chapters-head h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.vidd-chapters-list { display: flex; flex-direction: column; gap: 4px; }
.vidd-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);
}
.vidd-chapter.is-active { background: rgba(232, 147, 13, .1); color: #c87f08; font-weight: 700; }
.vidd-chapters-note {
    padding-top: 30px;
    border-top: 1px solid #eae3c9;
    margin: 0;
    color: #6b6a57;
    font-size: 16px;
    line-height: 24px;
}

/* ---------- Divider ---------- */
.vidd-divider {
    position: relative;
    display: block;
    height: 28px;
}
/* Values copied from .prd-divider (press-release-detail-revamp.css), which is
   this divider's corrected form — the same fix was applied to the Blog details
   page's matching one. */
.vidd-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. */
    background: rgba(243, 217, 176, .6);
}
.vidd-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
       instead left only 1280px of content, which put each cluster 160px inside
       the page's content edge rather than on it. Same arithmetic as
       .prd-divider-inner, whose 1448px is its page's 1400px cap plus 2x24px.
       Below 1920px the box just fills the viewport and the padding alone sets
       the gutter, exactly as .vidd-hero / .vidd-main do. */
    max-width: 1920px;
    margin-inline: auto;
    padding: 0 160px;
}
.vidd-divider-cluster { display: flex; flex-shrink: 0; }
/* Figma (node 40001286:69697 on the press-release page, the same component):
   SOLID yellow/yellow-100 #f3d9b0 at full opacity. This was yellow-400 knocked
   back to 50%, which is exactly the washed-out treatment prd- and the Blog page
   were both corrected away from. 4.142px = 20 * (sqrt(2) - 1) / 2, the value the
   hero divider on this page already uses, so adjacent tips just touch rather
   than overlapping by a fraction as a round 4px does. */
.vidd-diamond-sm {
    width: 20px;
    height: 20px;
    margin-inline: 4.142px;
    background: #f3d9b0;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ---------- Related videos ---------- */
.vidd-related { position: relative; padding: 60px 160px 120px; }
.vidd-related-inner { position: relative; z-index: 1; max-width: 1600px; margin-inline: auto; }
/* The same motif that closes the listing page above the footer — Figma's
   "Intersect" (node 40004073:54719), 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.
   Flush to the start edge and the section's bottom, as the design has it. The
   section carries position:relative already, and app.css's global
   `section { overflow: hidden }` keeps the shape inside it. */
.vidd-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"] .vidd-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. Its mobile-only twin below takes over here
   instead of just disappearing. */
@media (max-width: 767.98px) { .vidd-related-pattern { display: none; } }
/* Node 40005017:73675 — 84.0432x49.1494, its own export at this size, not the
   desktop motif scaled down (different path data, 1.71:1 vs the desktop's
   2.28:1 aspect ratio). Hidden by default, shown only at the mobile
   breakpoint below. */
.vidd-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"] .vidd-related-pattern-mobile { transform: scaleX(-1); }
@media (max-width: 767.98px) { .vidd-related-pattern-mobile { display: block; } }
.vidd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.vidd-related-head h2 { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.vidd-accent { color: var(--hr-yellow-500); }
.vidd-related-nav { display: flex; gap: 12px; }
/* Figma node 40001286:70400 confirms this is the standard glass "Button"
   component — solid white 1.5px border and the full inset-highlight shadow
   stack, the same recipe every other glass control in this codebase carries
   (.vidd-player-play, .hr-icon-btn, etc.), not a bespoke hairline-brown-edge
   variant. The comment this replaced claimed the inset highlight "belongs to
   the amber buttons" and gave this one a flat rgba(27,25,12,.08) hairline +
   single soft drop instead — direct inspection of the actual node shows
   that reasoning was wrong; brown-900 for the glyph stays, since the icon is
   a plain <img> asset colored in the file itself, not driven by `color`.
   It also picks up the shared hover ellipse — see layout-revamp.css, where
   this is opted into the glow lists alongside .smt-performance-nav.
   border-radius stays 61px (not Figma's 50%) — draws the same circle on a
   square box and is the figure the rest of this file uses. */
.vidd-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;
}
.vidd-nav-btn:hover { transform: translateY(-2px); }
.vidd-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"] .vidd-nav-btn img { transform: scaleX(-1); }

/* Mobile-only — desktop/tablet keep the slider's prev/next arrows to reach
   videos past the visible set. Reuses .vidd-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. */
.vidd-related-viewall { display: none; }

.vidd-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
       .vid-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;
}
.vidd-related-track::-webkit-scrollbar { display: none; }

/* Split in two, .vidd-card (shadow shell, still the flex item the track
   sizes/positions) + .vidd-card-surface (blur/clip/internal layout) — the
   same fix as the listing page'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. */
.vidd-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 .vidd-card: the internal
   flex-column layout, the 8px padding, the blur, and the clip. Fills
   .vidd-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 .vidd-card-glow's bleed and .vidd-card-media's corners were already
   positioned against. */
.vidd-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
       .vidd-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);
}
/* 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
   .vidd-card-surface, not this element) instead of leaving that gap a flat,
   plain colour. */
.vidd-card-glow {
    position: absolute;
    inset: -16px -16px auto -16px;
    height: 65%;
    background-image: var(--vidd-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);
}
.vidd-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: .vidd-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. video-revamp.css carries the full derivation. */
.vidd-card-media::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: 0;
    background-image: var(--vidd-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;
}
.vidd-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. */
.vidd-card-play,
.vidd-card-stats,
.vidd-card-duration { z-index: 2; }
.vidd-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, the
   same correction the listing's cards carry. */
.vidd-card-play img { width: 19px; height: 20px; transform: translateX(1.5px); }
.vidd-card-stats {
    position: absolute;
    /* 43px, clearing the body panel that now 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;
}
.vidd-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: var(--hr-cream-500);
}
.vidd-card-stat img { width: 16px; height: 16px; }
.vidd-card-stat-sep { width: 1px; height: 13.734px; background: rgba(255, 255, 255, .3); }
.vidd-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 .vid-card-duration on the listing: Almarai Light is a real
       face (app.css declares 300/400/700/800), and it is the weight the
       like/views stats in this same row already use. */
    font-weight: 300;
    white-space: nowrap;
}
.vidd-card-duration img { width: 16px; height: 16px; }

.vidd-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;
    background: linear-gradient(180deg, #fff 18%, rgba(255, 255, 255, 0) 100%);
}
.vidd-card-copy { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vidd-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;
}
.vidd-card-title:hover { color: var(--hr-brown-900); text-decoration: underline; }
/* Same recipe as .vid-card-like on the listing (video-revamp.css) — identical
   56px glass circle, identical amber active state — plus the grid placement this
   card's body needs. The declarations already matched; what was missing was the
   shared chrome in layout-revamp.css, where this is now opted into the rim lists
   (:not(.is-active), so the rim drops away once the button goes amber), the
   white-20% rim-start list, and the three BIL-539 hover-glow lists. Without those
   it was the only button on this page that did not answer the cursor.
   It states position/isolation on itself rather than relying on the rim list's
   position rule, because that rule is scoped to :not(.is-active) while the glow
   has to work in both states; isolation keeps the glow's plus-lighter blending
   against this button's own fill. */
.vidd-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;
}
.vidd-card-heart img { width: 24px; height: 24px; }
.vidd-card-heart.is-active { background: var(--hr-yellow-500); border-color: var(--hr-yellow-500); }
.vidd-card-heart.is-active img { filter: brightness(0) invert(1); }
.vidd-card-tags { grid-column: 1 / -1; display: flex; gap: 13.3px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.vidd-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    color: #e6f0ef;
    font-size: 14px;
    /* 16px line box, so the pill is 8 + 16 + 8 = 32 — the design's tag-row
       height and the same as .vid-card-tag. Without it Bootstrap's 1.5 (21px)
       made it 37. */
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.vidd-card-tag--blue { background: var(--hr-blue-400); }
.vidd-card-tag--green { background: var(--hr-green-400); }
.vidd-card-tag--purple { background: var(--hr-purple-400, #a56293); }
.vidd-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) {
    .vidd-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 .vidd-main-inner (an <aside> following .vidd-content), which
       is right for the desktop two-column layout but puts it below the title,
       description, speakers 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. */
    .vidd-chapters-card { width: 100%; order: -1; }
    .vidd-content { gap: 24px; }
}
@media (max-width: 1199.98px) {
    /* 256 -> 200 -> 160, the same ladder the listing hero and its siblings use. */
    .vidd-revamp { --vidd-hero-h: 200px; }
    /* Gutter comes down with the hero, 160 -> 40 -> 16, exactly as .vid-hero /
       .vid-featured / .vid-listing step on the listing page. */
    /* padding-inline only, so .vidd-hero keeps its derived top padding. */
    .vidd-hero,
    .vidd-player-section,
    .vidd-main,
    .vidd-related { padding-inline: 40px; }
    .vidd-divider-inner { padding-inline: 40px; }
    .vidd-title { font-size: 40px; line-height: 48px; }
    .vidd-player-badges { display: none; }
    .vidd-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 991.98px) {
    .vidd-player-section { padding-top: 80px; }
    .vidd-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. */
    .vidd-main { padding-block: 40px 80px; }
    .vidd-related { padding-block: 40px 80px; }
    .vidd-related-head h2 { font-size: 30px; line-height: 40px; }
}
@media (max-width: 767.98px) {
    .vidd-revamp { --vidd-hero-h: 160px; }
    .vidd-hero,
    .vidd-player-section,
    .vidd-main,
    .vidd-related { padding-inline: 16px; }
    .vidd-divider-inner { padding-inline: 16px; }
    /* Matches .hr-diamond-border's own mobile step (home-revamp.css): 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),
       so adjacent points still meet edge-to-edge instead of gapping or
       overlapping. */
    .vidd-diamond-sm { width: 10px; height: 10px; margin-inline: 2.071px; }
    /* .vidd-related still carries its own 40px padding-top (from the
       991.98px breakpoint), which was stacking 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 .vidd-main
       above. */
    .vidd-related { padding-top: 0; }
    .vidd-related-head { margin-top: 60px; margin-bottom: 20px; }
    .vidd-player-section { margin-bottom: 32px; }
    /* .vidd-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 .vidd-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. */
    .vidd-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. */
    .vidd-meta-item { flex-basis: 100%; }

    /* Transcript full-width on its own row; Copy link + Share split the next
       row evenly. .vidd-share is the DIV wrapping the share button+menu, not
       a button itself, so it (not .vidd-btn-ghost) is the flex item to size
       for the third slot — sizing the button instead would leave the menu's
       wrapper at its content width and throw off the 50/50 split. */
    .vidd-btn-primary { flex-basis: 100%; justify-content: center; }
    /* "this video" drops (see the blade's .vidd-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 instead of the
       un-wrapped label pushing it wider, but nothing needs to wrap anymore. */
    .vidd-share-label-extra { display: none; }
    .vidd-actions > .vidd-btn-ghost,
    .vidd-share { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .vidd-actions > .vidd-btn-ghost,
    .vidd-share .vidd-btn-ghost { justify-content: center; }
    .vidd-share .vidd-btn-ghost { width: 100%; }
    /* .vidd-content is a flex column with its own 24px gap (set at the
       1439.98px breakpoint, still active here) spacing every child apart —
       .vidd-actions to .vidd-tags included. An 8px margin-top on top of
       that 24px gap nets the intended 32px; the full 32px here would have
       stacked on the gap for 56px. */
    .vidd-tags { margin-top: 8px; }
    .vidd-title { font-size: 32px; line-height: 40px; }
    .vidd-description { font-size: 18px; line-height: 26px; }
    .vidd-chapters-card { padding: 32px; }
    /* Related videos: no slider at all on phone — a single-column grid, same
       shape as the listing page's .vid-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 videos
       (VideoController::show), so nothing further to trim here. */
    .vidd-related-nav { display: none; }
    .vidd-related-track {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
    }
    .vidd-card { flex: none; width: 100%; scroll-snap-align: none; }
    .vidd-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 (line 236), not the 3:4 portrait crop this carried
       before; the mobile player is the same widescreen shape, just narrower. */
    .vidd-player-media { aspect-ratio: 16 / 9; }
    /* 48px (16px padding + 16px icon), not 72 — pulled from the button as
       actually placed in the mobile player frame (node 40005017:73680 in
       context), not a re-query of that node id in isolation, which resolves
       to the component's other/default variant instead of this instance's
       real override. Shadow and icon scaled 0.4x off the desktop 120px
       button's own 30.4x32/2.5px numbers (48/120), matching the ratio the
       Figma export itself carries at this size. */
    .vidd-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);
    }
    .vidd-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 .vidd-player-controls) is swapped for its
       float twin, which sits directly in .vidd-player-media and so actually
       gets that element as its containing block, in the badge row's old
       spot (.vidd-player-badges is hidden below 1200px already). */
    .vidd-player-subtitle-inline { display: none; }
    /* Figma node 40005017:73694 — 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 .vidd-player-btn base's 16px
       type, 15px padding and 8px gap. Badge tokens for fill/border, not the
       generic white-based .vidd-player-btn ones, and an explicit
       line-height — it had none of its own and was inheriting the page's
       ~1.5 body line-height, which is what threw the label off-center in
       the pill vertically. */
    /* .vidd-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 .vidd-player-btn's rule
       used to win outside this query. */
    .vidd-player-media .vidd-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;
    }
    .vidd-player-subtitle-float strong { margin-inline: 0; }
    .vidd-player-subtitle-float img { width: 7.5px; height: 3.75px; }
    .vidd-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, already
       driving .vidd-btn-ghost/.vidd-nav-btn) plus the full glass box-shadow
       stack (.hr-icon-btn's recipe), instead of the plain flat fill/border
       .vidd-player-btn carries on its own. Scoped to these two specific
       buttons via [data-action], not the whole .vidd-player-btn-round set,
       so the round PLAY button (already hidden here) and any other page
       reusing [data-action="volume"/"fullscreen"] elsewhere aren't touched. */
    .vidd-player-btn[data-action="volume"],
    .vidd-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);
    }
    .vidd-player-btn[data-action="volume"]::after,
    .vidd-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 (.vidd-player-timeline-track then
       .vidd-player-controls-row in the DOM) without touching markup. */
    .vidd-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. */
    .vidd-player-controls-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
    .vidd-player-controls-left,
    .vidd-player-controls-right { flex-wrap: wrap; gap: 10px; }
    /* The round PLAY button in the controls row — not .vidd-player-play, the
       big center one, which stays. Volume moves ahead of the duration text
       to read "volume, then time" left to right. */
    .vidd-player-controls-left [data-action="play"] { display: none; }
    .vidd-player-controls-left [data-action="volume"] { order: -1; }
    .vidd-player-btn { padding: 12px; }

    /* ---------- Video 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. */
    .vidd-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);
    }
    .vidd-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. */
    .vidd-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. */
    .vidd-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). */
    .vidd-card-tag { padding: 6px 12px; border-radius: 6px; font-size: 10px; }
    .vidd-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. */
    .vidd-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
       Videos listing (.vid-breadcrumb) keeps at this width, so the detail
       page and its listing stay in step. */
    .vidd-breadcrumb a,
    .vidd-breadcrumb > span:not(.vidd-breadcrumb-sep),
    .vidd-breadcrumb-current { font-size: 12px; }
    .vidd-breadcrumb-sep { height: 12px; }
}