/* ==========================================================================
   Annual Gatherings Listing page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:71401 "Annual Gatherings Listing"). Reuses the --hr-* tokens
   declared globally in layout-revamp.css.

   NOTE: .sml-hero below reproduces the same "Innerpage-hero" component used by
   About Us, Contact Us, the Speakers listing and Press Releases (.pr-hero),
   differing only in the banner asset (getBanner('summits'), already wired
   admin-side).
   Prefix: .sml-
   ========================================================================== */
.summit-listing-revamp {
    --sml-yellow-100: #f3d9b0;
    --sml-green-50: #e6f0ef;
    /* The opaque --sml-glass-fill / -hover / -stroke trio that Discover More
       and Watch highlights used to share is gone: both pills now take the home
       page's .hr-btn-ghost-dark recipe (a translucent rgba(255,255,255,.2) fill
       and border plus the shared glass rim), so the sampled flat colours no
       longer have a user. */
    /* Hero height as a variable so the wash can be derived from it rather than
       the two drifting apart (same pattern as speakers-revamp.css). */
    --sml-hero-h: 256px;
    --sml-wash-h: calc(var(--sml-hero-h) + 80px);
    position: relative;
    /* One blue gradient on the PAGE, ending above the h1 and never over it. It
       used to be three stacked pieces (a navy->slate->dusty hero gradient, then
       a 260px dusty->sage->cream continuation on .sml-listing, plus a second
       grain layer) which together ran 140px past the title.

       The CURVE is About Us's, which is the one that reads as a liquid flow into
       the cream rather than a band that stops. Its wash is a Figma SVG export
       (about-revamp/hero-banner.svg), so the shape was sampled off the asset
       rather than guessed - alpha over its 424px box runs
       .91 / .84 / .75 / .59 / .42 / .23 / .01 at 0 / 42 / 106 / 170 / 233 / 297
       / 348px, i.e. a steady decay that is spent by 82% of the box. The four
       stops here previously held .55 all the way to 80% and then fell to zero
       inside the last 64px, which is the hard edge: two thirds of the ramp did
       almost nothing and the whole transition happened at the end.
       Those samples are renormalised onto 0-100% of this box (each position
       divided by that 0.82), so the decay per pixel matches About Us to within
       3% while finishing at the box's own end.

       Colour stays this page's blue - only the falloff is borrowed.

       Height is hero + 80px, so the ramp is spent 40px above the h1 (which
       starts at hero + .sml-listing's 120px padding). Every value below is
       normalised against the .91 start, so the grain mask on ::before can
       reuse them directly and cannot outlive the blue underneath it. */
    background: var(--hr-cream-500) linear-gradient(to bottom,
        rgba(0, 80, 135, .91) 0%,
        rgba(0, 80, 135, .84) 12.2%,
        rgba(0, 80, 135, .75) 30.5%,
        rgba(0, 80, 135, .59) 48.8%,
        rgba(0, 80, 135, .42) 67.1%,
        rgba(0, 80, 135, .23) 85.4%,
        rgba(0, 80, 135, 0) 100%) no-repeat top center;
    background-size: 100% var(--sml-wash-h);
    font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif;
    /* BIL-821: every section on this page shares the HEADER's container, so
       content starts at the BilAraby logo's left edge and ends at the right edge
       of the language pill. .header-revamp .container-xl (layout-revamp.css) is
       a flat 160px inline padding with max-width:none from 992px up, and
       Bootstrap's own 12px half-gutter below that - so this token is those two
       values. It replaces the page's own 80/40/16px ladder, which put every
       section 80px wide of the logo on one side and 80px past the language pill
       on the other. The inners' 1600px caps came off with it: the header has no
       cap, so a capped inner pulls away again on a wide monitor. */
    --sml-gutter: 12px;
}
/* Matching the header's own breakpoint, so the two switch together. */
@media (min-width: 992px) {
    .summit-listing-revamp { --sml-gutter: 160px; }
}
.summit-listing-revamp .hr-accent { color: var(--hr-yellow-400); }
/* Brushed grain over the wash - the same tile, opacity and decay mask the
   Speakers listing uses, so the two heroes read identically. The mask alphas
   are the gradient's own normalised against its .9 start, so the texture
   cannot outlive the blue underneath it. */
.summit-listing-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--sml-wash-h);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
    background-repeat: repeat;
    opacity: .7;
    mix-blend-mode: overlay;
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.923) 12.2%, rgba(0,0,0,.824) 30.5%,
        rgba(0,0,0,.648) 48.8%, rgba(0,0,0,.462) 67.1%, rgba(0,0,0,.253) 85.4%,
        rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.923) 12.2%, rgba(0,0,0,.824) 30.5%,
        rgba(0,0,0,.648) 48.8%, rgba(0,0,0,.462) 67.1%, rgba(0,0,0,.253) 85.4%,
        rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Same Figma "Button" component as the card CTAs further down (see
   .sml-btn-know / .sml-btn-highlights): 56px tall from a 24px line-height plus
   16px block / 24px inline padding, a 61px pill radius, a 1.5px inside stroke,
   an inset white top highlight and a soft drop-shadow stack. The stroke is the
   first inset shadow rather than a border because Figma draws strokes inside
   the frame — a real border would make these 59px instead of 56px. */
.sml-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14.5px 22.5px;
    border-radius: 61px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    border: 0;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
        inset 0 0 0 1.5px var(--sml-btn-stroke, transparent),
        inset 0 4px 6.1px rgba(255,255,255,.23),
        0 3px 6px rgba(0,0,0,.03),
        1px 10px 10px rgba(0,0,0,.03),
        2px 23px 14px rgba(0,0,0,.02),
        7px 63px 18px rgba(0,0,0,.02);
    transition: transform .2s ease, background-color .2s ease;
}
.sml-btn:hover { transform: translateY(-2px); text-decoration: none; }
.sml-btn-primary {
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    /* The lit outer ring, same as the home hero's "Culture" pill and the
       Annual Gathering detail hero's Register Now. */
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    /* Home's five-layer ambient stack. The inset 1.5px stroke the other
       .sml-btn variants carry is dropped here: the ring is a real border now,
       exactly as .home-revamp .hr-btn-primary draws it. */
    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);
}
/* Home keeps the resting shadow on hover and lights the shared ::before glow;
   the .92 fade here was this page's own invention. */
.sml-btn-primary:hover { color: var(--hr-cream-50); }
.sml-btn-ghost-light {
    /* .home-revamp .hr-btn-ghost-dark, verbatim: a translucent white fill and
       matching 1.5px border instead of the opaque --sml-glass-* pair, plus its
       single soft shadow rather than the five-layer stack. Both instances sit
       on light ground (cream for Discover More - the page's blue wash is only
       336px tall and these are ~1200px down - and the near-white card body for
       Watch highlights), so .2 white composites to the light pill the design
       shows rather than darkening. */
    border: 1.5px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.2);
    color: var(--hr-brown-900);
    box-shadow: 0 4px 6.1px rgba(0,0,0,.06);
    position: relative;
}
.sml-btn-ghost-light:hover { color: var(--hr-brown-900); }
.sml-btn img { flex-shrink: 0; }
[dir="rtl"] .sml-btn img { transform: scaleX(-1); }

/* BIL-822: 20px, matching .cta-diamond on Contact and the About hero the
   ticket points at as the reference. At 14px this row read visibly smaller than
   the banner pattern behind it. .sml-diamond-divider already overrode to 20px
   for the section rule, so that one is unaffected. */
.sml-hero-diamond {
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}

/* ---------- Hero / breadcrumb (no banner photo — a flowing gradient wash
   fading into the cream page below, matching the Agenda Details hero) ---------- */
.sml-hero {
    position: relative;
    z-index: 1;
    /* Fixed height with the breadcrumb pinned to the bottom, matching the
       Events hero (.evt-hero: 256px, padding-bottom 24px) - the old
       min-height:320 plus 100px of top padding pushed the breadcrumb far
       further from the header than Events sits it. */
    height: var(--sml-hero-h);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Side padding is a floor for laptop-range viewports below the 1760px
       content cap (.sml-hero-inner's max-width + margin:auto only centers
       content once the viewport clears 1760px + this padding). Kept
       narrower than earlier revamp pages' 160px specifically for this page:
       .sml-featured's 50/50 image/copy split needs real pixels to stay
       close to the 792px-per-column Figma reference, or the row's aspect
       drifts from the artwork's and crops it harder (see .sml-featured-media
       below) - the extra ~80px/side this frees up measurably helps that. */
    padding: 0 var(--sml-gutter) 24px;
    /* Transparent: the wash lives on .summit-listing-revamp so it can run past
       this section and fade out on its own terms. */
    overflow: hidden;
}
@media (max-width: 1199.98px) {
    .sml-hero { padding-inline: var(--sml-gutter); }
    .summit-listing-revamp { --sml-hero-h: 200px; }
}
@media (max-width: 767.98px) {
    .sml-hero { padding-inline: var(--sml-gutter); }
    .summit-listing-revamp {
        --sml-hero-h: 160px;
        /* .sml-listing's top padding is tighter here than on desktop, so the
           desktop +64px would end 4px OVER the h1. 40px keeps the wash clear
           of it at this breakpoint. */
        --sml-wash-h: calc(var(--sml-hero-h) + 40px);
    }
}
/* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero/Without" instance
   (node 40001286:71403): angular cream wedges at 10% fill that sit in the two
   bottom corners. Both are anchored to the hero's BOTTOM edge, which is how
   Figma has them - Pattern-01 runs top:95.03 + height:160.658 = 255.7 against
   a 256px hero, and Pattern-02 is bottom:0 outright. Anchoring to the bottom
   rather than the top is what keeps them in the same relationship to the
   breadcrumb here, where the hero is taller than Figma's 256px.

   These are a different variant from innerpage-hero/hero-pattern-{left,right}
   .svg, which the agenda detail hero uses - that one is the taller banner
   variant, so it has its own geometry and can't be shared. */
.sml-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.sml-hero-pattern-start {
    inset-inline-start: 0;
    width: 305.329px;
    height: 160.658px;
    background-image: url("../images/innerpage-hero/hero-pattern-nobanner-left.svg");
}
/* Figma puts mix-blend-mode:overlay on this one's container, not inside the
   SVG - as a background-image the blend has to be applied here, or it would
   composite against the SVG's own transparency and do nothing. */
.sml-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"] .sml-hero-pattern { transform: scaleX(-1); }
@media (max-width: 767.98px) {
    .sml-hero-pattern { display: none; }
}
.sml-hero-inner {
    position: relative;
    z-index: 1;
    max-width: none;
    width: 100%;
    margin-inline: auto;
}
.sml-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.sml-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    color: var(--hr-cream-500);
    text-transform: uppercase;
}
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.sml-breadcrumb a,
.sml-breadcrumb span:not(.sml-breadcrumb-sep) { opacity: 1; }
.sml-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}
.sml-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.sml-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.sml-breadcrumb-sep {
    width: 1px;
    height: 16px;
    background: rgba(249, 247, 234, .5);
}
/* "HOME | EVENTS | ANNUAL GATHERINGS" measures ~18px of width per 1px of
   font-size plus its four fixed gaps, so at the desktop 20px/12px it wants
   407px - nine over the 398px a 430px phone leaves after the hero's 16px
   gutters, which is enough to wrap "ANNUAL GATHERINGS" onto a second line.
   16px type with 8px gaps needs 320px, so all three crumbs stay on one line
   down to ~350px wide. The rule comes down with the text: at 20px it sat just
   above the cap height, and left at 16px it would have overshot the smaller
   letters top and bottom instead of reading as a divider between them. */
@media (max-width: 767.98px) {
    .sml-breadcrumb { font-size: 16px; gap: 8px; }
    .sml-breadcrumb-sep { height: 12px; }
}
.sml-hero-divider { display: none; }
@media (min-width: 1200px) {
    .sml-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
    /* Spacing by per-diamond margin rather than a flex gap, which is how
       .cta-diamond does it on Contact. Both land the tips flush - a 20px square
       rotated 45deg is 20*sqrt(2) wide visually but occupies only its 20px
       layout box, and 20*(sqrt(2)-1) = 8.284px of separation cancels exactly
       that overhang - but the margin form also puts 4.142px on the row's
       leading and trailing ends, which is what lines the cluster up against the
       banner pattern and lets the rule start on the last tip with no pull-back.
       Scoped to the hero: .sml-diamond-divider-cluster keeps its own gap. */
    .sml-hero-divider .sml-hero-diamond { margin-inline: 4.142px; }
    /* 0, not a negative pull-back: the last diamond's own 4.142px trailing
       margin already places this exactly on its rotated tip. */
    .sml-hero-divider-line { flex: 1 1 auto; height: 1px; background: rgba(249, 247, 234, .5); margin-inline-start: 0; }
}
.sml-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Listing shell ---------- */
/* No bottom padding: the diamond divider is this section's last child and in
   Figma it sits flush against the CTA band below (divider bottom edge ==
   Component 69's top edge), with the whole 120px gap to "Be a speaker at the
   next Gathering" coming from .sml-cta's own top padding. */
.sml-listing { position: relative; padding: 120px var(--sml-gutter) 0; overflow: hidden; }
@media (max-width: 1399.98px) { .sml-listing { padding: 100px var(--sml-gutter) 0; } }
.sml-listing-inner { position: relative; z-index: 1; max-width: none; margin-inline: auto; display: flex; flex-direction: column; gap: 64px; }
/* Same asset/placement as video-revamp.css's .vid-listing-pattern: flush to
   the section's start edge and bottom, closing the page directly above the
   footer. .sml-listing already carries position:relative + overflow:hidden. */
.sml-listing-pattern {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 254.66px;
    height: 111.564px;
    z-index: 0;
    pointer-events: none;
}
[dir="rtl"] .sml-listing-pattern { transform: scaleX(-1); }
@media (max-width: 767.98px) { .sml-listing-pattern { display: none; } }
.sml-listing-pattern-mobile {
    display: none;
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 84.0432px;
    height: 49.1494px;
    z-index: 0;
    pointer-events: none;
}
[dir="rtl"] .sml-listing-pattern-mobile { transform: scaleX(-1); }
@media (max-width: 767.98px) { .sml-listing-pattern-mobile { display: block; } }
.sml-head { display: flex; flex-direction: column; gap: 16px; }
/* Figma: Almarai 64/72 Bold. The size and weight already matched; the ratios
   used here resolved to 73.6px and 32.4px, so both are pinned to the design's
   own whole numbers instead. */
.sml-head h1 { font-size: 64px; line-height: 72px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.sml-head p { font-size: 24px; line-height: 32px; color: var(--hr-brown-300); margin: 0; }
@media (max-width: 1399.98px) {
    .sml-head h1 { font-size: 48px; line-height: 54px; }
}
@media (max-width: 767.98px) {
    .sml-listing { padding: 60px var(--sml-gutter) 24px; }
    .sml-head h1 { font-size: 36px; line-height: 42px; }
    .sml-head p { font-size: 18px; line-height: 26px; }
}

/* ---------- Featured / upcoming gathering card ---------- */
.sml-featured {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    /* Capped at Figma's own 1600px even though the page container now runs to
       1800 on large monitors. .sml-featured-media is a real <img>, so past
       this width its intrinsic 792x667 ratio - not the copy - starts driving
       the row: at a 1800px container each column is 868px, which forces the
       card to 731px tall while the copy only needs ~568, dumping ~163px of
       dead space under the buttons. Holding the card at the width the artwork
       was cut for keeps image and copy in the proportion the design assumes. */
    max-width: none;
    margin-inline: auto;
    padding: 8px;
    border: 1px solid #fff;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 1px 10px 10px rgba(0,0,0,.03), 2px 23px 14px rgba(0,0,0,.02), 0 3px 6px rgba(0,0,0,.03);
}
.sml-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 76%, rgba(255,255,255,.6) 100%);
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
}
/* Padding/gap/type scale below are pulled directly from Figma node
   40001286:71411 ("Related Post Card"): 792x792 - an exact 50/50 split of
   the 1584px content width (1600 minus this card's own 8px padding), 56px
   padding, 56px gap between badges/copy/ctas. Undersizing these (as an
   earlier pass here did, at 40/32) shortens the row below the 667px the
   reference copy naturally produces at 792px wide - and since the image
   fills that row via object-fit:cover (see .sml-featured-media below), a
   shorter row means a harder crop, which is what was cutting off the
   hands and the second figure. */
/* flex-basis:50% (a literal Figma-matched 792:792 half share), not the
   usual 0%: with box-sizing:border-box, a 0% basis floors at the item's own
   padding+border before flex-grow distributes the rest, so this padded
   column (56px all round) would end up 56px wider each side than the
   padding-less .sml-featured-media once "grown" - 50% sidesteps that by
   giving both columns their full target width directly, with grow/shrink
   only adjusting from there. */
/* justify-content:center so whatever height the image column contributes
   beyond the copy's own is split above and below it, rather than packing the
   copy to the top and leaving the whole remainder as a gap under the buttons.
   Figma's copy happens to fill the card exactly, so the design never shows
   this - but real CMS text is rarely that exact length. */
/* Fluid rather than fixed at Figma's 56/48/24/20 across the row band, the same
   pass the events page's featured card got. Figma's card is 1600x627 - a 2.55
   ratio - but its type sizes were held at their 1920 values all the way down to
   this card's 1500px stacking point, where the card is only 1323 wide. The copy
   wrapped instead of scaling, so the card ran 1323x758 there: a 1.75 ratio, i.e.
   46% taller than the design. Each clamp is a straight line through two points -
   Figma's value at a 1920 viewport, and a floor at 1500 where the card stacks -
   expressed as `Avw + B` so it lands exactly on both. The <=1499 block below
   already sets the stacked state and still wins there. */
.sml-featured-body { position: relative; z-index: 1; flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 5.71vw - 53.7px, 56px); padding: clamp(36px, 4.76vw - 35.4px, 56px); }
.sml-featured-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.sml-badge { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; font-size: 14px; line-height: 1; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.sml-badge-upcoming { background: var(--hr-green-400); color: var(--hr-cream-500); }
.sml-badge-flagship { background: var(--hr-blue-500); color: var(--sml-green-50); }
.sml-featured-copy { display: flex; flex-direction: column; gap: clamp(16px, 1.9vw - 12.6px, 24px); }
.sml-featured-copy h2 {
    /* Unitless line-height so it tracks the fluid font-size instead of leaving
       Figma's 56px of leading on 32px type. */
    font-size: clamp(32px, 3.81vw - 25.1px, 48px);
    line-height: 1.1667;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(90deg, #d09a38, #ac853a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Two lines, as in Figma. The blade caps the description at 320 characters,
   but how many LINES that is depends on the column width - it ran to five at
   1500px, which alone was 93px of card height the design never has. */
.sml-featured-copy p {
    font-size: clamp(15px, 0.71vw + 4.3px, 18px);
    line-height: 1.5556;
    color: var(--hr-brown-300);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Date | ◆ | Place stay side-by-side (Figma) — Place is the flexible column
   so a long address wraps within its own width instead of the whole row
   dropping to a stack. */
.sml-featured-meta { display: flex; align-items: stretch; gap: 24px; flex-wrap: nowrap; }
.sml-meta-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.sml-meta-item:first-child { flex: 0 0 auto; }
.sml-meta-item span { font-size: clamp(16px, 0.95vw + 1.7px, 20px); line-height: 1.4; color: #4d4d4d; }
.sml-meta-item strong { font-size: clamp(19px, 1.19vw + 1.1px, 24px); line-height: 1.3333; font-weight: 700; color: var(--hr-brown-700); }
.sml-meta-item:first-child strong { white-space: nowrap; }
/* Two lines max: a long real venue string runs to three at the narrow end of
   the row band, which no design shows and which made the meta the tallest
   block in the card. */
.sml-meta-item strong {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media (max-width: 767.98px) {
    /* column instead of wrap: Date and Place stack full-width in DOM order,
       with the separator as its own row between them - flex-wrap:wrap left
       the separator sharing Date's row (since .sml-meta-item:first-child
       can shrink to make room for it) and centred it across the whole card
       width, not aligned under the Date/Place labels. */
    .sml-featured-meta { flex-direction: column; }
    /* Left-align under the Date/Place text (align-items:stretch from the
       base rule would otherwise stretch this to the full card width too). */
    .sml-meta-separator {
        align-self: flex-start;
        /* Height instead of the collapsed 0 that align-items:stretch gives
           an item alone on its own row. 40px, not 24px: the diamond's 16px
           square rotated 45deg has a ~22.6px diagonal, so 24px left almost
           no line visible above/below it. */
        height: 40px;
    }
}
.sml-meta-separator {
    width: 16px;
    align-self: stretch;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(var(--hr-green-500), var(--hr-green-500)) center / 1px 100% no-repeat;
}
.sml-meta-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--hr-green-500);
}
.sml-featured-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Matches Figma's own "Image container": an equal 50/50 flex share (see
   .sml-featured-body above) that self-stretches to the row's height (set
   by the copy column's content) and object-fit:covers it. Cropping is the
   intended technique here, not a bug to design around - Figma's own static
   artwork was itself cropped to exactly 792x667 to fit this box at their
   reference copy length, so matching their padding/gap/type scale above is
   what keeps the crop tasteful instead of cutting off the hands/second
   figure. min-height is a defensive floor for unusually short real CMS
   copy, which Figma's fixed placeholder text never has to account for. */
.sml-featured-media {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    min-width: 0;
    min-height: 340px;
    border-radius: 32px;
    overflow: hidden;
    /* Matches the static artwork's own near-white backdrop so there's no
       seam where the image meets the surrounding glass card. */
    background-color: #f6f5f1;
    object-fit: cover;
    object-position: center;
}
/* Row layout only holds up once the container gives each 50/50 column
   real pixels to work with: below it the text column narrows, wraps onto
   more lines, and grows taller relative to its own width - drifting the
   image box's aspect further from the artwork's 792x667 and cropping
   harder. Measured with .sml-hero/.sml-listing/.sml-cta's 80px side
   padding + 1760px cap above: aspect ~0.88 at 1366-1450px (tolerable),
   ~1.00 at 1550px, ~1.19 (dead-on the artwork's own ratio) by 1728px+.
   1499.98px is the floor where that stays acceptable. */
@media (max-width: 1499.98px) {
    .sml-featured { flex-direction: column; }
    .sml-featured-body { padding: 32px; gap: 32px; }
    .sml-featured-copy h2 { font-size: 32px; line-height: 40px; }
    .sml-featured-meta { flex-wrap: wrap; }
    /* Column layout hands width (now the cross axis) to the image at
       100%, full-bleed - so as this range's own container narrows further
       towards 1499px, a fixed max-height (the row layout's technique)
       would force an ever-wider, ever-shorter crop window instead of a
       narrower one, the opposite of what stacking should do. aspect-ratio
       locks the box to the artwork's own 792x667 ratio so object-fit:cover
       never actually needs to crop anything - height just follows width -
       and the max-width keeps that height from growing unreasonably tall
       once the column itself gets close to this block's 1499px ceiling. */
    .sml-featured-media { width: 100%; max-width: 760px; min-height: 0; margin-inline: auto; aspect-ratio: 792 / 667; }
}

/* ---------- Past gatherings head + filters ---------- */
.sml-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.sml-list-head h2 { font-size: 40px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
@media (max-width: 1399.98px) { .sml-list-head h2 { font-size: 32px; } }
.sml-filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* BIL-906: the phone scroller's wrapper. display:contents here means the Year
   select inside it stays a DIRECT flex child of .sml-filters at every width
   above the phone block at the bottom of this section, so the desktop filter
   row is byte-for-byte what it was before the div existed. The wrapper only
   becomes a real box - and a scroller - inside that block. */
.sml-filter-row { display: contents; }
.sml-select {
    appearance: none;
    /* 17px block, not 12: matches the 60px .sml-search pill beside it (24px of
       line box + 34 + 2px border). These two sit in the same flex row, so they
       have to move together - at 12px this stood 50px against the search's 60. */
    padding: 17px 40px 17px 20px;
    border-radius: 61px;
    font-size: 16px;
    color: var(--hr-brown-500);
    background: rgba(236, 230, 211, .4) url("../images/press-releases-revamp/icon-chevron-down.svg") no-repeat;
    background-size: 11px;
    background-position: right 20px center;
    border: 1px solid rgba(177, 175, 165, .5);
    cursor: pointer;
}
[dir="rtl"] .sml-select { background-position: left 20px center; padding: 17px 20px 17px 40px; }
.sml-search {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 9px block: 40px line box + 18 + 2px border = a 60px pill, up from 52.
       Height was held at the original 52 through two passes at the Arabic
       descender clipping and the tails still read as cut, so the pill itself
       gets the room rather than only the line box inside it. .sml-select below
       is taken to the same 60 so the filter row stays level. */
    padding: 9px 20px 9px 16px;
    border-radius: 61px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
}
.sml-search img { flex-shrink: 0; }
/* line-height 28 with no block padding, rather than the UA's 24px + 1px:
   Almarai reports a 14/3 ascent/descent, so a 24px line box leaves only 6.5px
   below the baseline - but Arabic actually INKS 6px below it (the tails of ج
   and ع, the dots under ب), against Latin's ~3px. Half a pixel of clearance
   plus the `overflow: clip` a text input carries by default meant the bottom
   antialiased row of those descenders was being sliced off, which reads as the
   text fading out along its baseline. 28px puts the baseline 19.5px down with
   only 6.5px beneath it - against a deepest descender (ي) that inks 6.3px. Two
   tenths of a pixel, with the `overflow: clip` a text input carries by default,
   is what was slicing the bottom row off those tails.

   40px rather than a value tuned to that 6.3px: where exactly a browser puts the
   baseline inside an input's box is not something the half-leading rule pins
   down reliably, and a margin of a pixel or two is inside the error bars of both
   that and fractional device-pixel ratios - twice already a figure that measured
   as "clear" still rendered clipped. A 40px line box puts ~14.5px under the
   baseline, so ي clears by ~8px and no plausible rounding reaches it.
   The block padding goes to 0 so the 40px comes from the line box alone, and
   .sml-search gives the 12px this costs back out of its own padding, so the pill
   still measures its original 52px. */
.sml-search input {
    border: 0;
    background: none;
    /* THE fix for the Arabic descenders reading as cut off along the baseline,
       and the reason the two line-box passes above never landed: an <input>
       does not inherit font-family, so this field was rendering in the UA's
       Arial while the rest of the page is Almarai - and for Arabic, Arial has
       no coverage, so the OS substituted its own Arabic face, whose tails
       (the bowls of ج and ع, the deepest dots) ink far lower than the Almarai
       metrics those passes were tuned against. In Almarai the same string
       clears the line box with room to spare. Latin text was silently in the
       wrong face here too. */
    font-family: inherit;
    font-size: 16px;
    line-height: 40px;
    padding-block: 0;
    /* 0 rather than the UA's 2px, so .sml-search-placeholder - which sits in the
       same box with the same font and line box - starts on exactly the same
       pixel as typed text does. */
    padding-inline: 0;
    color: var(--hr-brown-500);
    min-width: 300px;
    outline: none;
}
/* The hint is a span layered over the field, not the native placeholder: an
   input clips to its own content box, and that clip is what cropped the tails
   of the Arabic string along its baseline. A sibling element is not subject to
   it. The blade renders the span already carrying .is-hidden when the field
   comes back with a search term in it, so it never flashes on load; the script
   pushed from that view toggles the class on every `input` event after that.

   inset:0 rather than a measured offset - the span shares the input's box, its
   font (both resolve to the page's Almarai) and its 40px line box, so the two
   strings land on the same baseline by construction rather than by tuning, in
   either direction. opacity .7 matches the identical pill on the Events listing
   (.evt-search input::placeholder): at full strength the hint rendered in the
   same brown-500 as text the visitor has actually typed, so the field read as
   already filled in. */
.sml-search-field {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}
.sml-search-placeholder {
    position: absolute;
    inset: 0;
    font-size: 16px;
    line-height: 40px;
    color: var(--hr-brown-500);
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Clicks belong to the field underneath. */
    pointer-events: none;
}
.sml-search-placeholder.is-hidden { display: none; }
/* BIL-906 ("keep filters consistent across all the pages"): on a phone every
   listing runs its filter controls as ONE horizontally scrolling row of pills
   with the search box on its own full-width row above it. This page used to sit
   the Year select and the search side by side on a single nowrap row instead,
   which is exactly the per-page drift the ticket is about. The Events listing
   (.evt-filter-row, events-revamp.css) is the reference this now matches. */
@media (max-width: 767.98px) {
    .sml-list-head { flex-direction: column; align-items: stretch; }
    /* flex-wrap:nowrap is load-bearing here, not tidiness: in a WRAPPING column
       container a flex line takes its cross size from its widest item, and
       .sml-filter-row's widest item is its own un-wrapped scrolling content - so
       with wrap left on, the line (and the page with it) would size to the full
       scroll width rather than to the column, and the whole page would scroll
       sideways instead of just the pill row. 10px between the two rows. */
    .sml-filters { width: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
    /* Above the scroller even though it comes after it in the DOM: the markup
       carries the DESKTOP order (Year pill, then search), and only the phone
       lifts the search out in front of it.
       3px block / 16px inline, the same reconciliation .pr-search makes on the
       press releases listing - the one other page carrying this exact 40px line
       box. The line box is NOT touched: it is what keeps the Arabic tails clear
       of the input's own content-box clip (full note on .sml-search input), and
       at 14px it clears by even more than it did at 16. What comes off is the
       block padding, 9 -> 3, which takes the pill from 60px to the 48px every
       other listing's phone search field measures (evt/spk/mns/pod 12+20+12+2 =
       46, pr 3+40+3+2 = 48, blg a flat 46) - the 60px figure exists only to
       stand level with the Year pill BESIDE it on the desktop row, which is the
       constraint this block removes. 20px -> 16px inline is the shared phone
       inset. flex:none so a column container's free space is not handed to this
       pill's height; min-width:0 so the input's own 300px floor (overridden
       just below) can never widen the row. */
    .sml-search { order: -1; flex: none; min-width: 0; padding: 3px 16px; }
    /* 14px to match the Year pill under it, and the phone search field on every
       other listing. The hint span shares the input's box, font and line box, so
       it has to move with it or the typed text and the hint render at two
       sizes. */
    .sml-search input,
    .sml-search-placeholder { font-size: 14px; }
    .sml-search input { min-width: 0; width: 100%; }
    /* The wrapper stops being display:contents and becomes the scroller itself.
       The bar is hidden in all three engines (Firefox / old Edge / WebKit-Blink):
       this row is MEANT to run past the screen edge, and a bar parked under a
       single pill is just noise. */
    .sml-filter-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sml-filter-row::-webkit-scrollbar { display: none; }
    /* flex:none so the pill is never squeezed to fit - the row is supposed to
       overflow and scroll. The explicit width is what a bare <select> otherwise
       lacks: it sizes itself to its WIDEST OPTION, and inside a nowrap row that
       has no container width to check it against, one long option (a translated
       "Year" label, a future range string) would blow the pill out. 122px is the
       figure the other listings' phone selects use, so the Year pill reads as
       the same control across the set.
       The ellipsis trio is what makes a fixed width safe (same pairing as
       .evt-select and .pod-select): "Year" is a translation-managed string, so
       a translator writing something longer than the 64px of content box left
       here would otherwise be hard-clipped mid-glyph under the chevron rather
       than cut with an ellipsis. The years themselves are four digits and never
       come close.
       12/16px padding and 14/20 type are that same shared phone pill. This
       page's own 17/20px + 16px is NOT carried over because the only reason it
       is that tall is to stand level with the search pill BESIDE it (see
       .sml-select above) - a constraint that no longer exists once the two are
       on separate rows. The search's own 40px line box, which is the
       Arabic-descender fix rather than a style choice, is left alone; only the
       padding and type around it come down to this row's figures. */
    .sml-select {
        flex: none;
        width: 122px;
        padding: 12px 40px 12px 16px;
        font-size: 14px;
        line-height: 20px;
        background-position: right 16px center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Chevron side and its padding swap together, same pairing as the base
       [dir="rtl"] .sml-select rule this overrides - equal specificity, so it
       wins on source order from inside this later block. */
    [dir="rtl"] .sml-select { padding: 12px 16px 12px 40px; background-position: left 16px center; }
}

/* ---------- Past gathering card list ---------- */
.sml-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; }
.sml-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border: 1px solid #fff;
    border-radius: 20px;
    background: linear-gradient(to top, rgba(255,255,255,.45) 0%, rgba(255,255,255,.6) 76%, rgba(255,255,255,.6) 100%);
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
    box-shadow: 0 3px 3px rgba(0,0,0,.03), 1px 10px 5px rgba(0,0,0,.03), 2px 23px 7px rgba(0,0,0,.02);
}
.sml-card-media {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    width: 372px;
    border: 4.905px solid #eae1d4;
    border-radius: 16px;
    box-shadow: 0 20px 24px -18px rgba(0,0,0,.17);
    background-color: var(--hr-brown-300);
    background-size: cover;
    background-position: center;
    padding: 16px;
}
.sml-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--hr-yellow-400);
    color: var(--hr-cream-500);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.sml-card-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; padding: 24px; background: rgba(255,255,255,.5); border-radius: 8px; }
.sml-card-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sml-card-text { display: flex; flex-direction: column; gap: 8px; }
.sml-card-text h3 { font-size: 24px; font-weight: 700; line-height: 32px; color: var(--hr-brown-700); margin: 0; }
.sml-card-text p {
    font-size: 20px;
    line-height: 28px;
    color: var(--hr-brown-700);
    opacity: .6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sml-card-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sml-card-meta-item { display: flex; gap: 12px; align-items: center; font-size: 20px; font-weight: 700; color: var(--hr-brown-700); white-space: nowrap; }
.sml-card-meta-item img { flex-shrink: 0; }
/* stretch, not center: the orange pill's border-bottom-width is 0, so it is
   intrinsically 55px against the ghost pill's 56px and the pair sat 1px out.
   Home's own rows (.hr-gathering-ctas, .hr-hero-ctas) leave align-items at
   its default for exactly this reason, and .sml-featured-ctas already does. */
.sml-card-actions { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.sml-card-actions a { text-decoration: none; }
/* Both card CTAs are the same Figma "Button" component as the hero's .sml-btn
   (nodes 40001176:83465 / :83466 inside card/past-annual-gathering): 56px tall
   from a 24px line-height plus 16px block / 24px inline padding, a 61px pill
   radius, a 1.5px stroke, an inset white top highlight and a soft drop-shadow
   stack. Only the fill, stroke and label colour differ between the two. */
.sml-btn-know,
.sml-btn-highlights {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14.5px 22.5px;
    border-radius: 61px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    white-space: nowrap;
    /* The 1.5px stroke is the first inset shadow rather than a border: Figma
       strokes are drawn inside the frame, so a real border would push these to
       59px tall instead of the 56px the design specifies. --sml-btn-stroke is
       set per variant below. */
    box-shadow:
        inset 0 0 0 1.5px var(--sml-btn-stroke, transparent),
        inset 0 4px 6.1px rgba(255,255,255,.23),
        0 3px 6px rgba(0,0,0,.03),
        1px 10px 10px rgba(0,0,0,.03),
        2px 23px 14px rgba(0,0,0,.02);
}
.sml-btn-know {
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    /* The lit outer ring, same as the home hero's "Culture" pill and the
       Annual Gathering detail hero's Register Now. */
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    /* Home's five-layer ambient stack. The inset 1.5px stroke the other
       .sml-btn variants carry is dropped here: the ring is a real border now,
       exactly as .home-revamp .hr-btn-primary draws it. */
    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);
}
.sml-btn-know:hover { color: var(--hr-cream-50); }
/* Fill and stroke come from Figma's RENDER, not its CSS panel. The panel
   reports white washes (bg rgba(255,255,255,.2), stroke .1), but a white wash
   over a near-white card can only lighten it, and both the PNG export and the
   design review show the pill sitting darker than the card with a visible ring
   — the frame almost certainly carries a second fill the panel doesn't export.
   Sampled off the export at rgb(236,236,233) fill / rgb(224,224,224) stroke,
   which is the same neutral glass as Discover More (see --sml-glass-* above). */
.sml-btn-highlights {
    /* .home-revamp .hr-btn-ghost-dark, verbatim: a translucent white fill and
       matching 1.5px border instead of the opaque --sml-glass-* pair, plus its
       single soft shadow rather than the five-layer stack. Both instances sit
       on light ground (cream for Discover More - the page's blue wash is only
       336px tall and these are ~1200px down - and the near-white card body for
       Watch highlights), so .2 white composites to the light pill the design
       shows rather than darkening. */
    border: 1.5px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.2);
    color: var(--hr-brown-900);
    box-shadow: 0 4px 6.1px rgba(0,0,0,.06);
    position: relative;
}

/* The always-on bottom wash that used to live on ::after here (Figma's
   "Ellipse 262", dialled to --sml-btn-glow: .1) is gone: ::after is now the
   shared glass rim, and home's version of this glow is hover-only, on
   ::before. Both come from layout-revamp.css. */
/* Keeps the label above the additive glow — otherwise plus-lighter washes out
   the bottom half of the glyphs, which the design keeps solid. */
.sml-btn-highlights > span,
.sml-btn-ghost-light > span { position: relative; z-index: 1; }
.sml-btn-highlights:hover { color: var(--hr-brown-900); }
@media (max-width: 991.98px) {
    .sml-card { flex-direction: column; align-items: stretch; }
    .sml-card-media { width: 100%; height: 200px; }
    .sml-card-body { flex-direction: column; align-items: stretch; gap: 16px; }
    .sml-card-text h3 { font-size: 20px; line-height: 28px; }
    .sml-card-text p { font-size: 16px; -webkit-line-clamp: 3; }
}

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

/* ---------- Pagination ---------- */
.sml-pagination { display: flex; align-items: center; gap: 8px; }
.sml-page-arrow,
.sml-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: 0 16px;
    border-radius: 61px;
    border: 1.5px solid transparent;
    background: rgba(255,255,255,.2);
    text-decoration: none;
    font-size: 16px;
    color: var(--hr-brown-500);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.sml-page-arrow { border-color: transparent; }
.sml-page-arrow:hover,
.sml-page-number:hover { text-decoration: none; color: var(--hr-brown-500); background: rgba(255,255,255,.5); }
.sml-page-arrow.is-disabled { opacity: .35; pointer-events: none; }
.sml-page-number.is-active,
.sml-page-number.is-active:hover {
    background: var(--hr-yellow-500);
    border-color: rgba(255,255,255,0);
    color: var(--hr-cream-50);
    font-weight: 700;
}
.sml-page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; color: var(--hr-brown-300); }

/* ---------- Decorative diamond+line divider ---------- */
/* Full-bleed: breaks out of .sml-listing-inner's 1600px cap so the line
   genuinely reaches the true viewport edges (Figma's Line 26/27 is wider
   than its own 1920px page canvas), regardless of where it sits in the
   markup. .sml-listing has overflow:hidden, so this can't introduce a
   horizontal scrollbar. */
.sml-diamond-divider {
    position: relative;
    /* Full-bleed to the viewport edges. Symmetric negative inline margins
       rather than left:50% + translateX(-50%): a box wider than its parent is
       laid out against the parent's right edge under RTL, so the offset pair
       shifted the whole divider (and one diamond cluster off-screen) on the
       Arabic pages. Margins are direction-agnostic. */
    margin-inline: calc(50% - 50vw);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* Matches wherever .sml-listing-inner's actual left/right edge falls,
       not a fixed inset: below the 1760px content cap that's just this
       page's 80px side padding (.sml-hero/.sml-listing/.sml-cta), but once
       the viewport clears 1760px + 160px (1920px) the inner content stops
       growing and centers instead, so the true gap to the diamonds needs
       to grow right along with it or they'd drift inward of the heading/
       card edges above and below. */
    padding-inline: max(80px, calc((100vw - 1600px) / 2));
    /* A 20px square rotated 45deg is 28.28px tall, but its LAYOUT box stays
       20px - so without this the diamonds' top and bottom points relied on
       overflowing this container by 4.142px each. The lower divider sits
       flush against .sml-listing's bottom edge, and that section is
       overflow:hidden, so its bottom points were being sliced clean off.
       Padding the block axis by exactly that overhang means the points fit
       inside their own box and never depend on overflow. */
    padding-block: 4.142px;
}
/* The 1920px override that used to sit here is gone along with the 1800px
   container bump it tracked - the base rule's 1600px math now holds at every
   width. */
/* The flex-laid .sml-diamond-divider-line only fills the gap between the two
   diamond clusters — this pseudo-element draws the line the rest of the way,
   from each cluster out to the true viewport edge, so it doesn't stop short. */
.sml-diamond-divider::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    /* Matches .sml-diamond-divider-line's own 2px — at 1px this run-out
       segment was visibly thinner than the line between the clusters. */
    height: 2px;
    background: var(--sml-yellow-100);
    transform: translateY(-50%);
}
/* gap = 20 * (sqrt(2)-1): each rotated diamond's point overhangs its own
   20px layout box by 4.142px per side, so separating the boxes by that full
   8.284px overlap makes the points meet edge-to-edge. */
.sml-diamond-divider-cluster { display: flex; align-items: center; flex-shrink: 0; gap: 8.284px; }
/* 20px, not the 14px this shipped with: same Figma divider component as the
   Gathering Detail page (node 40001286:68074, see .smt-diamond-divider in
   summit-revamp.css), which specifies 20px squares. At 14px against a
   full-bleed line they read as barely-visible slivers rather than diamonds.
   Line matched to that component's 2px for the same reason. */
.sml-diamond-divider .sml-hero-diamond { width: 20px; height: 20px; background: var(--sml-yellow-100); }
.sml-diamond-divider-line { flex: 1 1 auto; height: 2px; background: var(--sml-yellow-100); }
/* 1399.98px, not 1199.98px: matches .sml-listing/.sml-cta's own breakpoint
   where their side padding drops to 40px (.sml-hero drops earlier, at
   1199.98px, but this divider sits between .sml-listing and .sml-cta, not
   the hero, so it's their edge it needs to track). */
@media (max-width: 1399.98px) {
    .sml-diamond-divider { padding-inline: var(--sml-gutter); }
}
@media (max-width: 767.98px) {
    .sml-diamond-divider { padding-inline: var(--sml-gutter); }
    .sml-diamond-divider-cluster .sml-hero-diamond:nth-child(n+4) { display: none; }
}

/* ---------- Explore the content tiles ---------- */
.sml-explore h2 { font-size: 50px; line-height: 1.15; font-weight: 700; color: var(--hr-brown-900); margin: 0 0 40px; }
@media (max-width: 1399.98px) { .sml-explore h2 { font-size: 38px; } }
.sml-explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sml-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 42px 39px;
    border-radius: 30px;
    min-height: 300px;
    color: var(--hr-cream-500);
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease;
    /* border-radius + overflow:hidden + an animated transform is a known
       Chromium repaint bug: the rounded clip briefly rasterizes wrong
       during the transition, flashing the tile's corners white. Promoting
       the tile to its own compositing layer up front (rather than only
       when the transform kicks in) avoids that re-rasterization. */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.sml-tile:hover { transform: translateY(-4px); color: var(--hr-cream-500); text-decoration: none; }
.sml-tile-videos { background: radial-gradient(140% 140% at 0% 0%, #548aaf 0%, #2a6d9b 50%, #155f91 75%, #0b578c 87.5%, #005087 100%); }
.sml-tile-talks { background: radial-gradient(140% 140% at 0% 0%, #e6ad54 0%, #e0992a 50%, #dc8f15 75%, #db8a0b 87.5%, #d98500 100%); }
.sml-tile-podcast { background: radial-gradient(140% 140% at 0% 0%, #549d96 0%, #2a857c 50%, #15796f 75%, #0b7369 87.5%, #006d62 100%); }
.sml-tile-gallery { background: radial-gradient(140% 140% at 0% 0%, #b37ca5 0%, #a15c8f 50%, #8e3b78 100%); }
.sml-tile-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
/* Decorative flourish behind each tile's content (Figma frame 40001286:71469 -
   one per tile, same treatment). tile-flourish.svg is that frame's flourish
   group: the full artboard-sized vector, its two clip rects, and the nested
   opacity 0.3 on BOTH the group and the path (0.09 effective - not a typo,
   that is what the frame does). The frame also wraps it in a feGaussianBlur
   stdDeviation="50"; that is deliberately NOT reproduced here, so the shape
   renders as a crisp vector.

   The vector is ~2400px wide and sits mostly OUTSIDE the card - the card's
   rx=30 clip inside the SVG is what crops it, matching Figma. This replaces
   the hand-fitted 45deg linear-gradient that previously stood in for the same
   flourish.

   It sits in FRONT of the tile's coloured gradient, so the icon row and the
   text are lifted to z-index:1 above it; .sml-tile's own overflow:hidden clips
   it to the rounded corners. */
.sml-tile-flourish {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /*background-image: url("../images/summit-listing-revamp/tile-flourish.svg");*/
    /*background-repeat: no-repeat;*/
    /*!* The SVG is the 382x300 card at its design size; stretching it to the tile*/
    /*   keeps the flourish anchored to all four corners at any breakpoint. The*/
    /*   grid's tiles stay close to that ratio, so the shape's 45deg edges hold*/
    /*   their angle - watch this if the tile ever gets much wider or shorter. *!*/
    /*background-size: 100% 100%;*/
}
[dir="rtl"] .sml-tile-flourish { transform: scaleX(-1); }
.sml-tile-diamond {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
}
/* Figma (node 40001286:71489): a 38.619px square rotated 45deg (Figma's Dev
   Mode export approximates the same rotated square as rotate(133.47deg)
   skew(-3.05deg) - simplified here to the equivalent, simpler rotate(45deg)
   already used elsewhere in this codebase for this exact diamond shape).
   This and the ::after solid diamond below were previously 27px/14px -
   roughly 30% smaller than Figma's actual 38.6px/19.9px, which read as a
   thin, undersized icon against the 56px frame it sits in. */
.sml-tile-diamond::before {
    content: "";
    width: 39px;
    height: 39px;
    border: .75px solid var(--hr-cream-500);
    transform: rotate(45deg);
}
/* Smaller solid diamond nested inside the outline (Figma) — the outline
   alone was missing this filled centre. */
.sml-tile-diamond::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: var(--hr-cream-500);
    transform: translate(-50%, -50%) rotate(45deg);
}
/* Figma (node 40001286:71490, "Button"): same glass-pill treatment as the
   home page's .hr-icon-btn (home-revamp.css) - background/border already
   matched, but was missing the inset highlight + ambient shadow, so it
   read as a flat tint instead of a glass circle. The two 0-alpha shadow
   layers Figma also lists (7px 63px 18px, 4px 40px 16px) are dead weight,
   dropped as elsewhere in this codebase. The blurred, plus-lighter-blended
   glow circle the node also carries is reproduced on ::before below. */
.sml-tile-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    background: rgba(255,255,255,.2);
    border: 1.5px solid transparent;
    box-shadow:
        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);
    flex-shrink: 0;
    position: relative;
}
/* Figma's plus-lighter glow inside the button (frame filter2_f): a r=50 circle
   of white at 40%, centred at 28.5/107 in the button's own 56x56 box - i.e.
   BELOW its lower edge - blurred at stdDeviation 18.55 and clipped to the
   circle, so only the blurred upper edge lights the button's lower half.

   The gradient stops are that Gaussian sampled rather than eyeballed: for a
   hard edge at r=50 blurred by sigma 18.55, alpha(r) = 0.4 * PHI((50 - r)/18.55),
   which gives .34 at r=31, .2 at r=50 (the edge itself, always half), .064 at
   r=69 and .012 at r=87. Radii and centre are expressed as percentages of the
   button so the glow scales with it at the 1399px breakpoint; an ellipse is
   used only because CSS will not take a percentage radius on a circle. */
.sml-tile-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 179% 179% at 50% 191%,
        rgba(255,255,255,.4) 0%,
        rgba(255,255,255,.34) 31%,
        rgba(255,255,255,.2) 50%,
        rgba(255,255,255,.064) 69%,
        rgba(255,255,255,.012) 87%,
        rgba(255,255,255,0) 100%);
    mix-blend-mode: plus-lighter;
    pointer-events: none;
}
/* The arrow itself is not positioned, so it would paint under the absolutely
   positioned glow above. */
.sml-tile-arrow img { position: relative; z-index: 1; }
[dir="rtl"] .sml-tile-arrow img { transform: scaleX(-1); }
.sml-tile-text { position: relative; z-index: 1; }
.sml-tile-text h3 { font-size: 32px; font-weight: 700; margin: 0 0 24px; }
.sml-tile-text p { font-size: 24px; line-height: 32px; opacity: .7; margin: 0; }
@media (max-width: 1399.98px) {
    .sml-tile { padding: 32px 28px; min-height: 260px; }
    .sml-tile-text h3 { font-size: 26px; margin-bottom: 16px; }
    .sml-tile-text p { font-size: 18px; line-height: 26px; }
    .sml-tile-diamond, .sml-tile-arrow { width: 48px; height: 48px; }
    /* Scaled down with the 56px -> 48px frame above (48/56 of the base
       39px/20px sizes), so the diamond keeps the same proportions instead
       of staying pinned to its full desktop size inside a smaller frame. */
    .sml-tile-diamond::before { width: 33px; height: 33px; }
    .sml-tile-diamond::after { width: 17px; height: 17px; }
}
@media (max-width: 1199.98px) {
    .sml-explore-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .sml-explore-grid { grid-template-columns: 1fr; }
    .sml-explore h2 { font-size: 32px; }
}

/* ---------- CTA: Be a speaker ---------- */
/* Figma node 40001286:71534 "Component 69" is a 344px band: 120px top padding
   + a 104px content row (56px H3 + 16px gap + 32px body line) + 120px bottom
   padding. The corner artwork is sized in vw (see .sml-cta-flourish-left); the
   offsets/sizes further down are all multiplied by it so the shapes keep their
   Figma proportions and stay glued to the same corners.

   The left shape sits at Figma's own -222.65px section-edge offset: nothing
   on that side constrains it (the heading clears its topmost arm by ~13px),
   and that offset is what leaves the right half of the teal diamond peeking
   past the edge the way the design draws it.

   The right shape can't use its literal -19.46px, though. This page's shared
   container is 1760px wide inside an 80px gutter - 80px wider each side than
   the 1600px artboard column - so the Nominate pill lands 80px further right
   than Figma puts it, and at the artboard offset the teal diamond's top
   corner ends up buried a clean 78px underneath the button. What the design
   actually fixes there is the diamond's clearance from the button (~4px), so
   the offset is measured in from the content column instead, via
   The gutter below is the real distance from the section edge to that
   column, capped at the 160px the artboard uses. Past ~2080px the two
   coincide and this collapses back to Figma's own -19.46px. */
.sml-cta {
    position: relative;
    /* cream-500, matching <main> and .summit-listing-revamp. This was the only
       cream-400 surface on the page (#faf9ed against #f9f7e9), so it showed as a
       faint lighter band across the full width - the same one-step mismatch just
       corrected on the Gathering details page. */
    background: var(--hr-cream-500);
    /* One vertical rhythm at every width. This used to run three different
       recipes - 120/80, 100/40/120 and 64/16/96 - so the band's proportions
       changed shape between desktop, laptop and phone. Symmetric block padding
       keeps the copy optically centred, and the fluid value scales it smoothly
       instead of stepping. Only the side gutter still changes per breakpoint,
       which is what the layout actually needs. */
    /* Ceiling stays at the design's 120px so the band keeps enough height for
       the bottom-anchored corner artwork; a shallower value pulls the art up
       into the copy. */
    --sml-cta-pad: var(--sml-gutter);
    padding: clamp(72px, 8.3vw, 120px) var(--sml-cta-pad);
    /* How far in from the band's right edge the teal diamond's left point sits,
       taken from the artwork's own numbers rather than eyeballed: that vertex is
       at x=72.036 in the flourish's 249.8-wide viewBox, i.e. 71.16% of the way in
       from the box's right edge, and the box itself overhangs the band by 1.01vw.
       So 0.7116 * 13.01vw - 1.01vw = 8.248vw, settling at 158.31px once both of
       the flourish's own min()s bottom out just past 1920px. */
    --sml-cta-tip: min(158.31px, 8.248vw);
    /* Where the content column's right edge lands. This used to add whatever
       .sml-cta-inner's margin:auto contributed once the padding box outgrew a
       1600px cap; that cap is gone (BIL-821), so the column now always ends
       exactly one gutter in and the second term with it. */
    --sml-cta-edge: var(--sml-cta-pad);
    overflow: hidden;
}
@media (max-width: 1399.98px) {
    /* Deeper bottom padding than the top, plus a harder shrink on the corner
       art: the copy wraps to two lines here, so the paragraph's second line
       would otherwise land straight on the left-hand dome. */
    .sml-cta { --sml-cta-pad: var(--sml-gutter); }
}
.sml-cta-inner {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
/* min-width:0 (not a max-width cap) is what stops the paragraph's intrinsic
   one-line width from overflowing .sml-cta-inner and pushing the Nominate
   button onto its own row: flex items refuse to shrink past their content
   under the default min-width:auto. With that cleared, the copy block grows
   to fill everything the button doesn't need - so the paragraph stays on a
   single line at desktop the way Figma draws it (1479px of a 1600px row),
   and only wraps once the viewport genuinely can't fit it. The 480px basis
   is what decides when the button drops below instead. */
.sml-cta-copy { flex: 1 1 480px; min-width: 0; }
/* Fluid between the design's own anchors - 48px at 1400px and 32px at 768px -
   rather than stepping. The old rule dropped the title 48px -> 36px the instant
   the viewport crossed 1399.98px, a 25% cut in one pixel, which is what makes
   the copy read as shrunken on the 1280/1366 laptops that sit just under it.
   Both clamp()s below still resolve to exactly 48/24 at 1400 and 32/16 at 768,
   so the endpoints the design specifies are unchanged - only the jump between
   them is gone. Unitless line-heights so they track the fluid size. */
.sml-cta-copy h2 {
    font-size: clamp(28px, 1.4vw + 17.6px, 40px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0 0 16px;
}
.sml-cta-copy p {
    font-size: clamp(15px, 0.55vw + 11.2px, 20px);
    line-height: 1.4;
    color: var(--hr-brown-300);
    margin: 0;
}
/* Figma stops the Nominate pill's right edge level with the teal diamond's left
   point, a few px clear of it - but that only comes out right at the 1920
   artboard, where the column edge happens to land there on its own. The column
   edge is a fixed gutter (plus centring) while the diamond tracks the viewport,
   so at every width below ~1920 the button slid PAST the point instead of
   stopping short of it: 39px past at 1440, 66px at 1280, which is what leaves
   the pill's corner sitting on the diamond on a laptop. Reserving that shortfall
   holds the design's own relationship at every width, and resolves to 0px from
   ~1920 up, where the gutter already clears the point - so the desktop layout
   the design specifies is untouched. */
.sml-cta-inner .sml-btn {
    flex-shrink: 0;
    margin-inline-end: max(0px, var(--sml-cta-tip) - var(--sml-cta-edge));
}
@media (max-width: 767.98px) {
    /* Only the TOP comes off the clamp's 72px floor, and it is set to centre the
       diamond divider above it rather than to a round number. The space below
       that divider is one contiguous run of cream - .sml-listing's mobile 24px
       bottom padding plus this - so only the TOTAL is visible, and it has to
       balance against the 78px above the divider's line (.sml-listing-inner's
       64px flex gap plus the half of the divider's own 28px box that sits above
       the line). 24 + 32 + 14 puts the heading's cap 77px below the line
       against that 78px: optically centred. Above this breakpoint the same
       measurement leans low (78 above / 93 below at 768, 78 / 144 at 1920,
       where the top padding is the design's own 120px) - deliberately left
       alone, since that is the band padding Figma specifies.

       The bottom keeps all 72px, which is deeper than Figma's 120px is relative
       to the type here for a reason: the copy stacks and the pill drops onto its
       own row directly above the 70px-tall right-hand flourish, so that padding
       IS the artwork clearance - shrink it and the pill sits on the artwork. */
    .sml-cta {
        --sml-cta-pad: var(--sml-gutter);
        padding-top: 32px;
    }

    /* 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 a 16px step. */
    .sml-breadcrumb { font-size: 12px; gap: 8px; }
    .sml-breadcrumb-sep { height: 12px; }
}
/* Corner flourish (Figma nodes 40001286:71536 "Frame 2147239088" and
   40001286:71545 "Frame 2147239091") - real exported vector paths, not a
   hand-approximated shape. Figma composites each through a wrapper with a
   scaleY(-1)/rotate(180deg) transform stack; that's baked directly into
   these SVGs' own path coordinates (via a scripted point transform,
   verified against Figma's own rendered PNG export of each node) rather
   than reproduced with a live CSS transform, so the position numbers below
   are plain scalars taken straight from the Figma frame's own left/right/
   bottom offsets - no transform-origin math to get wrong at another
   breakpoint. */
.sml-cta-flourish { position: absolute; bottom: 0; pointer-events: none; z-index: 0; }
/* Sized in vw, not in stepped scale factors. Figma's numbers are taken at a
   1920 frame, so each one is expressed as its share of that width and capped at
   the literal px so it never exceeds the design above 1920. The old
   --sml-flourish-scale held one value across a whole breakpoint band, so the
   artwork grew relative to the screen as the viewport shrank inside each band
   and then jumped at the edges - 30% of the viewport at 1920, 38% by 1500, and
   62% at 390. As a share of vw it stays put at every width instead. */
.sml-cta-flourish-left {
    left: max(-222.65px, -11.60vw);
    width: min(577.555px, 30.08vw);
    height: min(197.584px, 10.29vw);
}
/* bottom:0, not a negative offset: Figma clips this one inside a 201.598px
   frame *before* flipping it, so the 109.49px that falls outside the frame is
   the empty tail of the artboard-sized vector, not shape. Pulling the image
   down by that amount instead pushes the whole purple mass below the band and
   crops the teal diamond - flush to the bottom edge is what puts the diamond's
   centre 129.64px above it and the purple's flat top edge 74.27px above it,
   which is what Figma renders. */
/* The overhang is CAPPED at Figma's own -19.46px (scaled). Tracking the gutter
   alone is what chopped the purple: the offset resolves to
   gutter - 179.46, so it only equals Figma's -19.46px once the gutter reaches
   its 160px maximum at >=1920px. Below that the gutter clamps down and the
   shape slides further and further past the section's edge, where overflow:hidden
   cuts it - 99px of 250px at 1440, and 59px of 137px at 1280, i.e. 43% of the
   artwork gone. max() keeps the gutter-tracking behaviour wherever it produces a
   SMALLER overhang than the design's, and never lets it exceed it. */
.sml-cta-flourish-right {
    right: max(-19.46px, -1.01vw);
    width: min(249.8px, 13.01vw);
    height: min(311.089px, 16.20vw);
}
[dir="rtl"] .sml-cta-flourish-left {
    left: auto;
    right: max(-222.65px, -11.60vw);
    transform: scaleX(-1);
}
[dir="rtl"] .sml-cta-flourish-right {
    right: auto;
    left: max(-19.46px, -1.01vw);
    transform: scaleX(-1);
}

/* ---------- Big monitors ---------- */
/* These containers used to widen to 1800px here so the page kept filling very
   large screens. That has been dropped: .sml-featured cannot follow past
   1600px (its media is a real <img>, so beyond that width the artwork's own
   792x667 ratio starts driving the card taller than its copy needs - see the
   max-width note on .sml-featured), and a card that stops widening while the
   heading, list and CTA around it keep going just reads as a misaligned page.
   Everything now shares the single 1600px cap, so every left edge lines up.
   The 80px side padding below that cap is unchanged, so laptop widths still
   get the wider content this page asked for. */