/* ==========================================================================
   Blogs listing page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40000567:27656 "Blogs"). Uses the --hr-* tokens declared globally in
   layout-revamp.css.

   NOTE: .blg-hero reproduces the same "Innerpage-hero" component the Speakers
   and Contact pages use, differing only in the banner asset. Three pages now
   share this shape — worth extracting into one partial + rule set.
   ========================================================================== */

/* Hero geometry, shared by the listing and the details page so the two cannot
   drift apart: both render the same "Innerpage-hero" instance through the
   .blg-hero / .blg-breadcrumb / .blg-hero-decor rules below. Same three tokens,
   same names and the same +80px derivation the Videos, Talks, Events, Speakers,
   Annual Gatherings and Search heroes carry (--vid-*, --tlk-*, --evt-*, --spk-*,
   --sml-*, --srp-*), so all of them step 256 -> 200 -> 160 from one place.

   --blg-gutter is the single source for the side padding of every section on the
   page, so the hero, the intro, the featured panel and the listing keep the same
   left and right edges at every breakpoint instead of each carrying its own
   160/40/16 triple. */
.blogs-revamp,
.blogd-revamp {
    /* The pill shadow from Figma's Button component in its cream-50 state —
       three drop layers plus a white inset highlight along the top edge. Both
       the active filter tab and a hovered inactive one wear it, so they must not
       drift apart. Same value as --vid-pill-shadow / --evt-pill-shadow, whose
       filter rows this page's is the twin of; Figma's ramp opens with two layers
       at alpha 0 (7px 63px 18px and 4px 40px 16px) which paint nothing, so they
       are documented, not emitted. */
    --blg-pill-shadow:
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03),
        inset 0 4px 6.1px rgba(255, 255, 255, .23);
    --blg-gutter: 160px;
    --blg-hero-h: 256px;
    /* Hero + 40px. The wash is the HERO's paint, so it wants to die just past the
       hero's own bottom edge rather than drifting down the page - at +80 it ran
       to 336px and, with the pink's fade on top, the tint was still landing well
       under the first heading. +40 puts the red out at 296 and the pink at 316
       against a heading at 376 (Figma's first section sits 120px below the hero),
       so there is a clear 60px of cream before the type starts.
       This is a deliberate step away from the +80 that .video-revamp,
       .events-revamp, .speakers-revamp and .summit-listing-revamp carry: those
       pages were not the ones being looked at, and their heroes do not have a
       breadcrumb that grows. Worth revisiting together if the shorter tail reads
       better there too. */
    --blg-wash-h: calc(var(--blg-hero-h) + 40px);
}

/* The wash is now painted in CSS instead of served as blogs-hero-banner.png (a
   340KB screenshot of the same gradient, fixed at 704px and therefore unable to
   follow --blg-hero-h down to 200/160px — it just kept covering the intro copy).

   Figma's fill for the shared "Innerpage-hero/Without" instance, read off its
   own paint panel: a linear gradient at 89% opacity whose three stops are
   red/red-500 (#ee3b33) at 100%, 50% and 0%, over a solid #F9EAEA. 89% x
   (1 / .5 / 0) gives the alphas below. Byte-for-byte the same stack as
   .video-revamp, .evt-revamp and the other washed heroes.

   #F9EAEA is its own layer rather than the page's background-color, because that
   colour would tint every section down to the footer pink. Cut to the wash's
   height it would end on a hard line against cream-400 (the two differ by 15 in
   green), so its box is 1.5x the wash: solid for the red's full span (to 66.67%)
   and then eased to transparent across the remaining half again. */
.blogs-revamp {
    position: relative;
    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 var(--blg-wash-h),
            rgba(249, 234, 234, 0) 100%) no-repeat top center,
        var(--hr-cream-400);
    /* The #f9eaea layer needs its OWN falloff, or it ends on a hard line: the red
       above it fades to zero, so the band's last pixels would be pure #F9EAEA
       butting straight into cream-400 (#faf9ed) - the two differ by 15 in green,
       which is visible.
       That falloff used to run 1.5x the wash, i.e. to 504px, which is what left
       pale pink still sitting at 76% behind the title block's meta row and 40%
       behind the title itself. It now ends 20px after the red does: the solid
       stop is pinned to --blg-wash-h so it always finishes exactly where the red
       finishes, and the box is 20px taller to give the fade its runway. Figma
       puts the first heading 120px below the hero and the wash ends 80px below
       it, so 20px of runway lands the pink at zero a clear 20px above the
       heading. 15 green units over 20px is 0.75 a pixel - there is no edge to
       see. */
    background-size: 100% var(--blg-wash-h), 100% calc(var(--blg-wash-h) + 20px);
}
/* Figma's hero carries a fine grain baked into the fill, which a plain
   linear-gradient() cannot reproduce — it renders flat and plastic instead of
   "brushed". Same tiled feTurbulence overlay, same 0.85 tile, same .7 opacity
   and same decay mask as the other washed heroes; events-revamp.css carries the
   original rationale for the feComponentTransfer re-centering (without it the
   raw noise is skewed bright, so overlay tints the whole wash lighter instead of
   just adding grain). The mask stops are the wash's own alphas normalised
   against its .89 start, so the texture fades out exactly with the red. */
.blogs-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--blg-wash-h);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
    background-repeat: repeat;
    opacity: .7;
    mix-blend-mode: overlay;
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}
.blg-accent { color: var(--hr-yellow-500); }

/* The decor box is a child of the wrapper, not of .blg-hero, so the wedges sit
   under the hero's z-index 1 content without fighting that stacking context. Its
   own overflow:hidden is what crops them to the band, and the height tracks
   --blg-hero-h so it keeps doing that at 200/160px. */
.blg-hero-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--blg-hero-h);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
/* Pattern-01 / Pattern-02 from Figma's "Innerpage-hero/Without" instance:
   angular cream wedges at 10% fill in the two bottom corners — two DISTINCT
   vectors, not one shape mirrored, which is what this hero used to render (a
   37%-wide press-releases-revamp/hero-decor-shape.svg flipped onto both sides,
   positioned with left:-3% / left:63% so neither one actually reached its
   corner). Same pair, same geometry and the same shared innerpage-hero/ assets
   as .vid-hero-pattern (Videos), .evt-hero-pattern (Events), .spk-hero-pattern
   (Speakers), .sml-hero-pattern (Annual Gatherings) and .srp-hero-pattern
   (Search).

   Both anchored to the hero's BOTTOM edge, as Figma has them — Pattern-01 runs
   top:95.03 + height:160.658 = 255.7 against a 256px hero, Pattern-02 is
   bottom:0 outright — so they keep the same relationship to the breadcrumb at
   the shorter 200px/160px breakpoints instead of drifting off the baseline.

   These are NOT the innerpage-hero/hero-pattern-{left,right}.svg pair the agenda
   detail hero uses: that is the taller banner variant, with its own geometry. */
.blg-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.blg-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. */
.blg-hero-pattern-end {
    inset-inline-end: 0;
    width: 305.29px;
    height: 204.731px;
    background-image: url("../images/innerpage-hero/hero-pattern-nobanner-right.svg");
    mix-blend-mode: overlay;
}
/* Flip the pair under RTL so each wedge keeps its own visual side and the
   composition mirrors with the text direction. */
[dir="rtl"] .blg-hero-pattern { transform: scaleX(-1); }
/* Kept on phones, both corners, rather than dropped - the wedges are part of
   the hero at every width. They used to be display:none here, which is why the
   Blogs hero lost its side design on a phone while the Events and Press Releases
   heroes - the same component, the same two assets - kept theirs.

   They scale instead of holding 305px: at that size the pair is 610px against a
   390px screen, so they would overlap in the middle and be clipped. min() caps
   them at 190px (reached at ~432px, so 430/440-class phones render at the full
   190) and below that holds the pair at 88% of the width with a real gap
   between them. aspect-ratio carries each asset's own proportions - 305.329 x
   160.658 and 305.29 x 204.731 - which at 190px resolve to 100px and 128px, so
   both clear the hero's shortest 160px clip box. Same treatment and the same
   numbers as .evt-hero-pattern and .pr-hero-decor, which use assets of
   identical dimensions. */
@media (max-width: 767.98px) {
    .blg-hero-pattern-start {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.329 / 160.658;
    }
    .blg-hero-pattern-end {
        width: min(190px, 44%);
        height: auto;
        aspect-ratio: 305.29 / 204.731;
    }
}
/* The divider trail's mark. Shared with .blgd-divider-cluster on the blog
   detail page, which restates the size and colour but relies on the rotation
   here — so both trails go back to unrotated, invisible squares without it. */
.blg-diamond {
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}

/* ---------- Hero / breadcrumb ---------- */
.blg-hero {
    position: relative;
    /* z-index 1 to clear the wrapper's grain overlay, which paints at 0. */
    z-index: 1;
    /* min-height rather than height, and a derived top rather than a picked one:
       a single-line breadcrumb occupies its 28px line plus the 32px bottom, so
       `hero - 60px` is exactly the clear space above it and it tracks
       --blg-hero-h across all three breakpoints instead of needing hand-written
       values. Total height is unchanged at 256/200/160.
       The min- matters on the details page, whose last crumb is the article
       title: if that row ever wraps the hero grows DOWNWARD, instead of the
       extra line pushing the trail up into the overlay header. With the old
       fixed height and align-items:flex-end it could only grow upward. */
    height: auto;
    min-height: var(--blg-hero-h);
    display: flex;
    align-items: flex-end;
    padding: calc(var(--blg-hero-h) - 60px) var(--blg-gutter) 32px;
}
.blg-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    width: 100%;
    margin-inline: auto;
}
.blg-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* So the diamond cluster drops below the trail rather than squeezing it,
       matching .vid-breadcrumb-row. */
    flex-wrap: wrap;
}
/* 22px between crumbs and a 28px line box, both from .vid-breadcrumb / the
   details hero. The gap was 12px, and with no line-height the crumbs sat in
   Bootstrap's 1.5 (a 30px box), which read tighter horizontally and 2px taller
   than the sibling heroes — and left the derived `hero - 60px` above off by that
   2px.
   Type and gap scale down with the viewport instead of holding 20px/22px, which
   is what the legal pages and the Videos listing already do and what keeps a
   three-crumb trail on one line down to ~440px. Both clamps top out at this
   page's own desktop values, so nothing changes above that. */
.blg-breadcrumb {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.2vw, 22px);
    row-gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: clamp(13px, calc(5vw - 3px), 20px);
    line-height: 28px;
    color: var(--hr-cream-500);
    text-transform: uppercase;
}
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.blg-breadcrumb a,
.blg-breadcrumb span:not(.blg-breadcrumb-sep) { opacity: 1; }
.blg-breadcrumb a { flex-shrink: 0; }
.blg-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}
.blg-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
/* The article title here can run long, so — unlike the other (short, static)
   crumbs — this one is allowed to shrink and truncates to one line with an
   ellipsis instead of wrapping tall enough to push "Home / Blogs" off the
   top of the (fixed-height) hero on narrow viewports. */
.blg-breadcrumb-current {
    font-weight: 700;
    opacity: 1 !important;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.blg-breadcrumb-sep {
    width: 1px;
    height: 16px;
    background: rgba(249, 247, 234, .5);
}
.blg-hero-divider { display: none; }
@media (min-width: 1200px) {
    .blg-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        /* Bleeds the rule past the 1600px inner box to the true viewport edge.
           var, not a literal -160px: --blg-gutter is the single source for that
           value now, so the rule keeps reaching the edge if it ever moves. */
        margin-inline-end: calc(-1 * var(--blg-gutter) - max(0px, (100vw - 1920px) / 2));
    }
    /* Scoped to the hero divider: .blg-diamond is shared with
       .blgd-divider-cluster on the blog detail page, which keeps the 14px
       size. Only the hero trail grows to match About Us / Terms. */
    .blg-hero-divider .blg-diamond {
        width: 20px;
        height: 20px;
        margin-inline: 4.142px;
    }
    .blg-hero-divider-line {
        flex: 1 1 auto;
        height: 1px;
        background: rgba(249, 247, 234, .5);
        /* The last diamond's own 4.142px slot margin supplies the gap now, so a
           negative offset here would eat into it. */
        margin-inline-start: 0;
    }
}
.blg-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}

/* ---------- Intro heading ---------- */
/* Transparent: the wrapper's gradient continues behind this. */
/* 120px top, not 100: Figma puts this section's frame on the hero's own bottom
   edge with its heading row at y=120, which lands the h1 at 376px — the same
   place the Videos, Events, Speakers and Annual Gatherings headings sit, and the
   geometry --blg-wash-h is derived from. */
/* position/z-index 1 for the same reason .blg-hero carries it: the wrapper's
   grain overlay is a later sibling at z-index 0, so untouched static content in
   the wash's band would paint underneath it. */
.blg-intro { position: relative; z-index: 1; padding: 120px var(--blg-gutter) 40px; }
.blg-intro-inner { max-width: 1600px; margin-inline: auto; }
.blg-intro h1 {
    font-size: 56px;
    line-height: 72px;
    font-weight: 700;
    color: var(--hr-brown-500);
    margin: 0 0 16px;
}
.blg-intro p {
    font-size: 20px;
    line-height: 32px;
    color: var(--hr-brown-300);
    margin: 0;
}

/* ---------- Shared: category chip + Read Article button ---------- */
.blg-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #e6f0ef;
    background: var(--hr-green-500);
    white-space: nowrap;
}
/* Per-category accents. Categories are user-created, so the tone is derived
   from the category id in blogCategoryTone() rather than hard-coded. */
.blg-chip-green { background: var(--hr-green-500); }
.blg-chip-amber { background: var(--hr-yellow-500); }
.blg-chip-purple { background: #8e3b78; }
.blg-chip-blue { background: var(--hr-blue-500); }

/* Figma's "Secondary" Button — the same glass pill as .vidd-btn-ghost ("Copy
   link" / "Share this video" on the video details page), which is this
   component's corrected form. Only the padding and type size differ: this one
   sits in a card foot, not a 56px action row.

   border-color was `transparent`, which threw the edge away entirely; the glass
   rim on ::after (layout-revamp.css, already opted in) needs a real translucent
   border under it, or the ring has nothing to sit on and the pill reads as a
   flat tint. Same note .vidd-btn-ghost carries.

   The shadow is an outer soft drop, not the `inset 0 4px 6.1px white/.23`
   highlight that was here — that layer belongs to the amber primary, and on a
   translucent fill it lit the button's own face instead of its top edge. */
.blg-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 61px;
    border: 1.5px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 4px 6.1px rgba(0, 0, 0, .06);
    font-size: 14px;
    font-weight: 700;
    color: var(--hr-brown-500);
    text-decoration: none;
    white-space: nowrap;
    /* .vidd-btn's own transition. transform has to be named here or the shared
       `transition: transform .2s ease` on the bare class (layout-revamp.css)
       would be overridden by this longhand and the lift would snap. */
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Holds its resting fill and lights the shared ::before ellipse instead — the
   white-55% swap this used to do was invented, and it is the only thing on the
   site that answered the cursor by changing a glass button's tint. No transform
   here either: the shared BIL-900 lift (translateY(-2px), layout-revamp.css)
   already covers this selector, and the -1px it declared was overriding it to a
   shorter hop than every other pill on the page. */
.blg-read-btn:hover {
    color: var(--hr-brown-500);
    text-decoration: none;
}
.blg-read-btn img { flex-shrink: 0; }
[dir="rtl"] .blg-read-btn img { transform: scaleX(-1); }

/* ---------- Featured article ---------- */
/* overflow:visible explicitly. app.css carries a sitewide `section { overflow:
   hidden }` and this wrapper IS a <section>, with no bottom padding of its own -
   so its bottom edge lands exactly on the panel's, and .blg-featured's drop
   shadow, which reaches 37px below the card (the 2px 23px 14px layer is 23px of
   offset plus 14px of blur), was being cut off flat along that edge. The shadow
   is what makes the panel read as a raised card; sliced to a hard line the card
   looks cut off at the bottom instead.

   Nothing else needs to escape this box - the panel keeps its own
   overflow:hidden, so the cover image is still clipped to the 32px radius - and
   the 80px of top padding on .blg-listing below already leaves the shadow room
   to fall into, so no spacing moves. Same override, for the same reason, that
   .vidd-player-section, .evt-featured-wrap and .tlkd-player-section carry. */
.blg-featured-wrap { padding: 0 var(--blg-gutter); overflow: visible; }
.blg-featured {
    position: relative;
    max-width: 1600px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border-radius: 40px;
    /* Frosted panel, as on the cards below. box-shadow rather than `border`
       so the padding box isn't inset (see the Contact card for the same
       reasoning) — the image sits flush to the rounded edge. */
    background: linear-gradient(to top, rgba(255, 255, 255, .45), rgba(255, 255, 255, .6));
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
    box-shadow: inset 0 0 0 1px #fff, 0 3px 6px rgba(0, 0, 0, .03), 2px 23px 14px rgba(0, 0, 0, .02);
    overflow: hidden;
}
.blg-featured-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
    padding: 56px;
}
.blg-featured-text { display: flex; flex-direction: column; gap: 24px; }
.blg-featured-text h2 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    margin: 0;
}
.blg-featured-text h2 a { color: var(--hr-brown-900); text-decoration: none; }
/* No underline on hover: the heading is 34-48px display type, so a rule under
   three wrapped lines of it reads as a block of strikethrough rather than a
   link affordance. The whole panel is clickable and carries "Read Article"
   below, which is the affordance. */
.blg-featured-text h2 a:hover { color: var(--hr-brown-900); text-decoration: none; }
.blg-featured-text > p {
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-300);
    margin: 0;
    /* Two lines, as in Figma (48px tall at this line-height). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blg-author { display: flex; align-items: center; gap: 16px; }
.blg-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50px;
    object-fit: cover;
    flex-shrink: 0;
}
.blg-author-text { display: flex; flex-direction: column; gap: 2px; }
.blg-author-text strong { font-size: 18px; font-weight: 700; color: var(--hr-brown-900); }
.blg-author-text span { font-size: 14px; color: var(--hr-brown-300); }

.blg-featured-media {
    display: block;
    border-radius: 32px;
    overflow: hidden;
    min-height: 480px;
    background: rgba(27, 25, 12, .06);
}
.blg-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Listing: filters ---------- */
.blg-listing { padding: 80px var(--blg-gutter) 100px; }
.blg-listing-inner { max-width: 1600px; margin-inline: auto; }
/* flex-start, not space-between: .blg-filters-tabs' auto end-margin below is
   what holds the date/sort pills and the search box at the end of the row now,
   and an auto margin neutralises justify-content on the line it sits on - so on
   the ONE line case the two spellings are identical. They stop being identical
   the moment the row wraps, which it does here as soon as there are more than a
   couple of category tabs (the tab list is DB-driven and unbounded): the tabs
   take line one, and line two holds .blg-filters-fields and .blg-search with no
   auto margin between them, where space-between drove them to opposite ends of
   the row - the date/sort pills hard left, the search box hard right, ~190px of
   nothing between them at 1100px wide. flex-start leaves them adjacent on their
   16px gap, which is exactly how they read before the search box moved out of
   .blg-filters-fields. */
.blg-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 48px;
}
/* Inert above the phone breakpoint: the wrapper exists only so the category
   tabs and the date/sort pills can scroll as one row down there (see the <=767
   block), and display:contents leaves this row the same flat flex it has
   always been. */
.blg-filters-row { display: contents; }
/* The auto end-margin absorbs the row's free space, which is what keeps the
   date/sort pills and the search box grouped together at the end of it.
   justify-content: space-between did that on its own while .blg-filters had
   exactly two children; the search box is now a third, having moved out of
   .blg-filters-fields so it can sit on its own row on a phone. */
.blg-filters-tabs { display: flex; gap: 16px; flex-wrap: wrap; margin-inline-end: auto; }
.blg-tab {
    display: inline-flex;
    align-items: center;
    /* 11px block, i.e. the design's 12px less the 1px border: Figma strokes the
       pill INSIDE its 48px box (label at y=12, 24px tall), so 11 + 24 + 11 + 2
       = 48 — which is also what .blg-field measures, so the tabs and the
       date/sort/search pills finally sit level in the same row. At 12px with no
       line-height these stood 50px and the row was 2px out of true. Same
       correction .vid-tab and .srp-tab carry. */
    padding: 11px 20px;
    border-radius: 61px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--hr-brown-500);
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    text-decoration: none;
    white-space: nowrap;
    /* Named longhands rather than a bare `all`/`.3s`: app.css puts a blanket
       `transition: .3s` on every <a>, which was the only thing animating here
       and it animated everything, this pill's colour included. */
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.blg-tab:hover { text-decoration: none; color: var(--hr-brown-500); }
/* Hovering an inactive tab previews the active pill exactly — same cream-50
   fill, white border and shadow — plus the 2px lift, which is how the Videos
   (.vid-tab) and Events (.evt-tab) rows answer the cursor. Scoped off
   .is-active: that one is already at the destination and isn't a target, so it
   shouldn't move. */
.blg-tab:not(.is-active):hover {
    background: var(--hr-cream-50);
    border-color: #fff;
    box-shadow: var(--blg-pill-shadow);
    transform: translateY(-2px);
}
/* Weight stays 400: the design separates the active pill by fill, border and
   shadow alone. The 700 this added also re-flowed the whole row on every tab
   change, a bold label being wider than the regular one — the same reason
   .vid-tab.is-active and .evt-tab.is-active dropped it. The shadow is the full
   stack, not the single 0 3px 6px layer, so all three rows read alike. */
.blg-tab.is-active {
    background: var(--hr-cream-50);
    border-color: #fff;
    box-shadow: var(--blg-pill-shadow);
}
.blg-filters-fields { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.blg-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 61px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    font-size: 16px;
    color: var(--hr-brown-500);
}
/* No opacity here: the icons in this row are stroked brown-500 glyphs, the same
   colour as the labels beside them, so the .7 only greyed them out against
   their own text. */
.blg-field img { flex-shrink: 0; }
.blg-field input {
    border: 0;
    background: none;
    outline: none;
    font-size: 16px;
    color: var(--hr-brown-500);
    font-family: inherit;
}
/* Full strength, in the label colour. brown-300 at .8 washed the hint to grey
   while "Sort: Latest" and the category tabs beside it sat at brown-500 — the
   same drift .evt-search input::placeholder documents, and the same fix (the
   colour token alone was the whole difference). Firefox also applies its own
   default placeholder opacity, so that is reset explicitly rather than left to
   the UA. */
.blg-field input::placeholder { color: var(--hr-brown-500); opacity: 1; }
/* app.css has a sitewide, unscoped `input:-webkit-autofill` rule that paints a
   solid green inset behind autofilled text on EVERY input. Overridden here the
   same way events-revamp.css and podcasts-revamp.css do it. */
.blg-field input:-webkit-autofill,
.blg-field input:-webkit-autofill:hover,
.blg-field input:-webkit-autofill:focus,
.blg-field input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--hr-brown-500) !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}
/* A 300px cap that it GROWS into, rather than a fixed 266 sized by the input's
   200px floor: on a line with room the box reaches the same 300 the Events
   listing's search box holds, and on the line it wraps to it fills to 300
   instead of leaving a short pill and a long empty run beside it. max-width is
   what keeps flex-grow from eating the free space .blg-filters-tabs' auto
   end-margin needs to hold the tabs/fields grouping - grow resolves first, then
   auto margins take whatever is left. */
.blg-search { flex: 1 1 auto; max-width: 300px; min-width: 0; }
.blg-search input { flex: 1 1 auto; min-width: 200px; }

/* ---- Date pill --------------------------------------------------------
   A native <input type="date"> paints its own "dd/mm/yyyy" hint while empty:
   the wrong string (no other filter on the site shows a format mask), in the
   UA's own styling, and unreachable by __() so it never localises. So the pill
   renders its OWN label — "Select Date", or the picked date formatted by
   Carbon::translatedFormat on the server — and the real input is laid over the
   whole pill at opacity 0 to catch the click and open the native picker.

   Exactly the pattern .pr-date-wrap uses on the Press Releases listing, which
   is the same filter-row component; the two are kept in step. */
.blg-date {
    position: relative;
    /* 16px trailing against the base 20px: the icon/clear glyph is 16px wide and
       sits closer to the edge than a text label would, as on .pr-date-wrap. */
    padding-inline: 20px 16px;
    cursor: pointer;
    white-space: nowrap;
}
.blg-date-icon { flex-shrink: 0; pointer-events: none; }
/* The same has-value treatment the sort pill below carries, for the same
   reason: once a date is picked this is an APPLIED filter, and the design marks
   an applied filter. Empty, it stays the translucent resting pill so "Select
   Date" reads as the invitation it is — the distinction select2's own pill
   makes between its placeholder and its value.

   The shadow is the fourth part of that state, and it belongs here: select2's
   own has-value pill (select2-revamp.css) is cream-50 + white rim + THIS
   four-layer stack + a 700 label, and its empty pill is explicitly
   box-shadow:none. The sort pill beside this one IS that component now, so
   without the stack here the date pill was the only applied filter on the page
   rendering flat - which is the mismatch, not the halo it was dropped for. */
.blg-date.has-value {
    background-color: var(--hr-cream-50);
    border-color: #fff;
    box-shadow: var(--blg-pill-shadow);
}
.blg-date.has-value .blg-date-label { font-weight: 700; }
/* Takes the calendar icon's spot once a date is picked. The invisible input's
   own native clear control cannot be relied on (browsers vary, and it is under
   our label anyway), so this explicit link drops the query param instead — the
   same pattern the "All" category tab already uses.
   It needs its own stacking context (position + z-index) to actually receive
   the click: .blg-date-input covers the whole pill, so without this the
   invisible input would swallow it. */
.blg-date-clear {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
    font-size: 18px;
    color: var(--hr-brown-300);
    text-decoration: none;
}
.blg-date-clear:hover { color: var(--hr-brown-500); text-decoration: none; }
/* Both the clear link and the icon are always in the DOM with .is-hidden
   deciding which shows, so an AJAX filter change can swap them without the
   filter row being re-rendered (see blogs/index). */
.blg-date-clear.is-hidden,
.blg-date-icon.is-hidden { display: none; }
.blg-date .blg-date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0;
    cursor: pointer;
    appearance: none;
}
/* Stretched over the pill so a click anywhere on it opens the picker, not just
   on Chrome's own little calendar button. */
.blg-date .blg-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* The sort pill is <x-front.select> now (select2-revamp.css owns its look), so
   this page no longer restates the applied-filter treatment - the copy it kept
   here had drifted: no drop shadow, and 46px tall against the component's 48. */

/* ---------- Card grid ---------- */
.blg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 56px;
}
@media (max-width: 1199.98px) { .blg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .blg-grid { grid-template-columns: 1fr; } }

.blg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 40px;
    background: linear-gradient(to top, rgba(255, 255, 255, .45), rgba(255, 255, 255, .6));
    -webkit-backdrop-filter: blur(53px);
    backdrop-filter: blur(53px);
    box-shadow: inset 0 0 0 1px #fff, 0 3px 6px rgba(0, 0, 0, .03), 2px 23px 14px rgba(0, 0, 0, .02);
    overflow: hidden;
    isolation: isolate;
    transition: transform .2s ease;
}
.blg-card:hover { transform: translateY(-3px); }
/* Geometric watermark in the card's bottom-right corner (Figma's own asset). */
.blg-card-motif {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 512px;
    height: 329px;
    background: url("../images/blogs-revamp/card-motif.svg") no-repeat right bottom / contain;
    pointer-events: none;
    opacity: .5;
    z-index: -1;
}
[dir="rtl"] .blg-card-motif { transform: scaleX(-1); }
.blg-card-media {
    display: block;
    height: 285px;
    border-radius: 32px;
    overflow: hidden;
    background: rgba(27, 25, 12, .06);
    flex-shrink: 0;
}
.blg-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Image-less article: the media box keeps its size and carries the title's
   first two letters instead. Cream over brown so it reads as a deliberate
   cover rather than a failed image, and so the card's own motif cannot show
   through it. Shared by the grid card and the featured panel above - the two
   differ only in how big the pair is set, below. */
.blg-card-media-empty,
.blg-featured-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hr-brown-500);
}
.blg-card-initials,
.blg-featured-initials {
    /* Always in the DOM so the img's onerror has something to reveal; shown
       only once the box is in its empty state. */
    display: none;
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--hr-cream-500);
    /* Only latin has case to raise; an Arabic pair is left as it is. */
    text-transform: uppercase;
    /* The pair is the title's own first two letters, so it keeps the title's
       direction inside this otherwise-LTR box rather than the page's. */
    unicode-bidi: isolate;
}
.blg-card-media-empty .blg-card-initials,
.blg-featured-media-empty .blg-featured-initials { display: block; }
/* The featured panel is half of a 1600px row and 480px tall, so the card's
   72px would sit lost in it. Declared after the shared rule, not up in the
   featured section, or the shared font-size would win on source order. */
.blg-featured-initials { font-size: 140px; }
.blg-card-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    flex: 1 1 auto;
}
/* wrap + row-gap, at every width. Both children carry white-space:nowrap and a
   flex item will not shrink below its content, so a nowrap row had nowhere to
   put a long category: "Business & Entrepreneurship" is a 265px pill, and with
   the 12px gap and the 88px reading time that is 365px of content in the 295px
   the card body gives it on a phone. The row overflowed and .blg-card's
   overflow:hidden sliced it - and under the centring below it spilled equally
   past BOTH edges, so the pill lost its left end and "5 MIN READ" its right.
   Wrapping drops the reading time onto a second line instead. */
.blg-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 8px;
}
.blg-readtime {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    text-transform: uppercase;
    color: #49473d;
    white-space: nowrap;
}
.blg-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.blg-card-content { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.blg-card-content h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    margin: 0;
    /* Single line, ellipsised — as specified in Figma. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blg-card-content h3 a { color: var(--hr-brown-900); text-decoration: none; }
/* No underline on hover, matching the featured panel's heading: the title is
   clamped to one ellipsised line, so a rule under it lands on the ellipsis and
   reads as a strikethrough rather than a link affordance. The whole card
   carries "Read Article" as its affordance instead.
   One rule for both pages - blog_card.blade.php is the same partial the listing
   grid and the details page's "Related articles" row both render. */
.blg-card-content h3 a:hover { color: var(--hr-brown-900); text-decoration: none; }
.blg-card-content p {
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-300);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blg-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}
.blg-published { font-size: 14px; color: #49473d; }

/* ---------- Pagination ---------- */
/* Only the active page is filled; arrows and inactive numbers sit flat on the
   cream, matching the Speakers listing. */
.blg-pagination {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
/* The same 56px glass circle .vid-page-* and .evt-page-* wear, which is Figma's
   Button/icon component — this row was 40px bare text on a transparent circle
   with a flat rgba(27,25,12,.06) hover, the only pagination on the site not
   using the component at all. It also carries the three shared pseudo-element
   treatments now (masked gradient rim, white-20% ring start, bottom hover
   bloom), which live in layout-revamp.css and are opted into by selector list —
   .blg-page-* was in none of them.

   position: relative is stated for all three states, not just the non-active
   ones the ring list covers: the hover bloom is an absolutely-positioned
   ::before, so without a positioned box on .is-active too it would anchor to
   .blg-pagination and light the whole row instead of one pill. Same note
   .vid-page-* carries. */
.blg-page-arrow,
.blg-page-number,
.blg-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 61px;
    background: rgba(255, 255, 255, .2);
    border: 1.5px solid transparent;
    box-shadow: 2px 23px 14px rgba(0, 0, 0, .02), 1px 10px 10px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6.1px rgba(255, 255, 255, .23);
    text-decoration: none;
    font-size: 16px;
    color: var(--hr-brown-500);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.blg-page-arrow img { width: 24px; height: 24px; }
[dir="rtl"] .blg-page-arrow img { transform: scaleX(-1); }
.blg-page-arrow:hover,
.blg-page-number:hover { text-decoration: none; color: var(--hr-brown-500); background: rgba(255, 255, 255, .4); }
.blg-page-arrow.is-disabled { opacity: .35; pointer-events: none; }
.blg-page-number.is-active,
.blg-page-number.is-active:hover {
    /* Fully transparent rather than amber-on-amber: the active pill carries no
       rim in the design, and the shared gradient ring is already scoped off
       .is-active in layout-revamp.css. */
    border-color: rgba(255, 255, 255, 0);
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    font-weight: 700;
}

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

/* ---------- Listing filters: laptop and tablet ----------------------------
   The row's own spacing comes in between 768 and 1599px so the category tabs,
   the date/sort pills and the search box hold ONE line instead of breaking the
   search onto a row of its own. Nothing here changes what the controls ARE -
   only the air inside and between them: 20px of pill padding -> 12, 16px gaps
   -> 10, and the search input's 200px floor -> 120. That takes the row from
   1223px down to ~940.

   1600 is where it ends, not 1440: the roomy desktop row needs 1223px of
   column, and the column is viewport - 320 above 1200px, so those values only
   actually fit from ~1543 up. 1600 is the design's own content width and the
   next clean step, so the tightened row covers every laptop below it - 1280,
   1366, 1440 and 1536 included, which is where this was breaking in two.

   One band rather than a ladder of them, so a laptop and a tablet in landscape
   render the identical row. 16px type is kept throughout - only the spacing
   moves - and the <=767 block below still replaces this layout wholesale with
   the scrolling row.

   The thresholds move with the category list, which is DB-driven: these labels
   ("All / Translation / Language / Culture / Events") are 267px of text, and a
   sixth category or a longer name pushes the break point back up. The row wraps
   to two tidy rows when that happens - tabs + date + sort on one, search on the
   next - rather than overflowing. */
@media (min-width: 768px) and (max-width: 1599.98px) {
    .blg-filters,
    .blg-filters-tabs,
    .blg-filters-fields { gap: 10px; }
    .blg-tab { padding-inline: 12px; }
    /* .blg-field before .blg-date: the date pill restates its own asymmetric
       values, and at equal specificity the later rule wins. */
    .blg-field { padding-inline: 12px; }
    .blg-date { padding-inline: 12px 10px; }
    /* 120px still clears the "Search Articles" hint (105px at this size), so the
       box compresses without its own label being cut - it just stops being the
       item that forces the break.
       flex-grow off with it: at these widths whatever slack is left on the line
       belongs to .blg-filters-tabs' auto end-margin, which is what holds the
       tabs at the start and the date/sort/search group at the end. Left growable
       the search would swallow all of it (grow resolves before auto margins). */
    .blg-search { flex-grow: 0; }
    .blg-search input { min-width: 120px; }
}

/* ---------- Responsive ---------- */
/* ---------- Featured panel: laptop ---------------------------------------
   1200-1439 kept the full desktop scale - 56px of copy padding, 56px gaps and a
   48/56 heading - inside a column that is only 465-545px wide there, where the
   desktop's own is 792. The heading alone wrapped to five lines (280px of text
   block), and the media panel stretches to whatever the copy measures, so the
   card stood 760px at 1440 and 816px at 1280 against ~600 on a desktop. This is
   the same step down the <=1199 block below already takes, minus its switch to
   a single column - stacking here would make the card TALLER, not shorter
   (it is what puts the tablet card at 832px).

   Ends at 1600, the same boundary the filter row's own tightening band uses, so
   "laptop" means one thing on this page: the desktop scale needs a ~790px
   column to hold the heading to three lines, and the column is viewport - 320
   above 1200, so it only has that from ~1520 up. 1600 is the design's own
   content width and the next clean step - which is what brings 1440 and 1536
   in, the two widths this was worst at. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .blg-featured-copy { padding: 40px; gap: 32px; }
    .blg-featured-text h2 { font-size: 34px; line-height: 44px; }
    /* 360, not the desktop 480: the copy is what drives the height at this
       width, so the floor only has to keep the panel from collapsing when an
       article's copy is short. */
    .blg-featured-media { min-height: 360px; }
}
@media (max-width: 1199.98px) {
    /* The gutter token carries the four sections' inline padding and the hero
       divider's bleed with it — no per-section override needed. */
    .blogs-revamp, .blogd-revamp { --blg-gutter: 40px; }
    /* Hero comes down 256 -> 200 -> 160 as on the Videos, Events, Speakers and
       Annual Gatherings heroes. The wash and the decor box follow it through
       --blg-hero-h / --blg-wash-h without their own overrides. */
    .blogs-revamp, .blogd-revamp { --blg-hero-h: 200px; }
    /* The featured panel stays TWO columns down to 992 now - the stack moved to
       the <=991.98 block below. Stacking is what made this card the tallest
       thing on the page at tablet widths: side by side the media shares the
       copy's height, stacked it adds its own on top, which is how a 1024px
       tablet ended up with a 736px card against ~515 for the same content in
       two columns. Its type and padding come from the 992-1599 band above. */
    .blg-featured-initials { font-size: 96px; }
}
@media (max-width: 991.98px) {
    .blg-intro h1 { font-size: 36px; line-height: 48px; }
    .blg-intro p { font-size: 18px; line-height: 28px; }
    .blg-listing { padding-top: 48px; padding-bottom: 72px; }
    /* Below 992 two columns really are too narrow for a 28/38 heading, so the
       panel stacks here - media first, copy under it. */
    .blg-featured { grid-template-columns: 1fr; }
    /* 240, not the 320 this carried: stacked, the media no longer shares the
       card's height with the copy, it ADDS to it, so every pixel of floor here
       is a pixel on the card. 240 still leaves a proper 16:9-ish band at these
       widths. */
    .blg-featured-media { min-height: 240px; order: -1; }
    .blg-featured-copy { padding: 28px; gap: 24px; }
    .blg-featured-text h2 { font-size: 28px; line-height: 38px; }
    .blg-card-content h3 { font-size: 20px; line-height: 28px; }
    .blg-card-initials { font-size: 56px; }
    .blg-featured-initials { font-size: 72px; }
}
@media (max-width: 767.98px) {
    .blogs-revamp, .blogd-revamp {
        --blg-gutter: 16px;
        --blg-hero-h: 160px;
        /* No --blg-wash-h override here any more: the base tail is +40, which is
           exactly what this breakpoint used to step down to. .blg-intro's top
           padding halves to 60px here, so the pink lands at 220 - the h1's own
           top - with nothing to spare and nothing over it. */
    }
    /* 60px, matching .vid-featured / .evt-intro: 120px of desktop lead-in is
       most of a phone viewport before the first line of copy. Moved down here
       from the 991.98px block, where it left the wash covering the heading. */
    .blg-intro { padding-top: 60px; }

    /* ---------- Centred column (BIL: match the Videos / Events pattern) -------
       On a phone the other revamped pages put the heading, its standfirst and
       every CTA on the page's centre line - .evt-intro-inner and
       .vid-featured-head both carry `text-align: center; align-items: center`,
       and the Event details page repeats it for each section head, with the
       section's button moved to the foot at `justify-content: center`. This
       listing was the odd one out, still reading from the leading edge all the
       way down. The rules below apply the same treatment to its three stacks -
       intro, featured panel, card - so the four pages render the same shape.

       align-items alongside text-align in every case, not text-align on its
       own: each of these is a flex COLUMN, so the horizontal axis is the cross
       axis and the flex items (the chip, the author row, the buttons) are
       placed by align-items - text-align only reaches the text inside them. */
    .blg-intro-inner {
        display: flex;
        flex-direction: column;
        /* Replaces the h1's own margin-bottom, zeroed just below - a gap keeps
           the pair spaced whichever of the two is missing. */
        gap: 16px;
        text-align: center;
        align-items: center;
    }
    /* 32/40 and 16/24, the sizes the other listing headers step to on a phone
       (.evt-intro-inner h1, .vid-featured-head h1, .tnc-title, .pp-title). The
       <=992 block above leaves this at 36/48, a size too large the moment the
       line is also centred - it broke "Reading, BilAraby" across two ragged
       rows on a 360px screen. */
    .blg-intro h1 { font-size: 32px; line-height: 40px; margin: 0; }
    .blg-intro p { font-size: 16px; line-height: 24px; }

    /* ---------- Featured panel ---------- */
    .blg-featured-copy { align-items: center; text-align: center; padding: 24px; gap: 32px; }
    .blg-featured-text { gap: 16px; }
    .blg-featured-text h2 { font-size: 24px; line-height: 32px; }
    .blg-featured-text > p { font-size: 16px; line-height: 24px; }
    /* The avatar stacks over the name rather than sitting beside it: kept in a
       row, a centred 56px avatar plus two lines of text is wider than the
       column at 360px and the pair ends up off-centre against everything
       above it. */
    .blg-featured-copy .blg-author { flex-direction: column; gap: 12px; text-align: center; }

    /* ---------- Buttons ---------- */
    /* Full-width and centred, the treatment .evt-featured-actions and
       .evt-past-head .evt-btn-ghost both get at this breakpoint. align-self
       rather than width:100%, so the button stretches to the column it is in
       (the featured copy's padding box, the card's foot) instead of to a
       percentage of it. */
    .blg-featured-copy .blg-read-btn,
    .blg-card-foot .blg-read-btn {
        align-self: stretch;
        justify-content: center;
        padding: 12px 24px;
    }

    /* ---------- Cards ---------- */
    /* The meta row goes with the rest of the stack: left at space-between it
       pushed the chip and the reading time to opposite edges, straddling a
       centred title. */
    .blg-card-meta { justify-content: center; }
    /* Last resort for a category longer than the card is wide - the wrap above
       only moves whole items, so a pill that overflows on its own still needs
       to be able to break inside. Scoped to the meta row: the featured panel's
       chip sits in a column with room to spare, and a one-word chip is
       unaffected either way. */
    .blg-card-meta .blg-chip { white-space: normal; text-align: center; }
    .blg-card-content { text-align: center; }
    /* Stacked, so the date sits above a full-width button rather than beside
       it - at this width the pair on one row leaves the button ~140px wide and
       the date ellipsised. Moved up from the <=576 block, where it stacked but
       stayed on the leading edge. */
    .blg-card-foot { flex-direction: column; align-items: stretch; text-align: center; gap: 16px; }

    /* ---------- Pagination ---------- */
    /* Centred on 40px buttons, exactly as .evt-pagination at this breakpoint;
       the base rule's flex-start left the nav hanging off one edge of an
       otherwise centred column. */
    .blg-pagination { justify-content: center; gap: 6px; }

    /* ---------- Listing filters ---------- */
    /* Search on its own full-width row, then All/<category>/Date/Sort as ONE
       horizontally-scrolling line, which is how the Events listing already runs
       its filters; BIL-906 is that every other listing wrapped or stacked them
       instead, so the filter block looked different on every page.
       .blg-filters-row is the scroller; .blg-filters-fields collapses into it so
       the date and sort pills share that scrolling line with the category tabs
       instead of forming a second flex row inside it. Replaces the wrap-and-
       stack this block used to inherit from the base rule. */
    /* nowrap matters here: the base rule wraps, and in a WRAPPING column
       container a flex line takes its cross size from its widest item, so the
       scrolling row below would size itself to its own content width instead of
       stretching to the column it is supposed to overflow. */
    /* margin-bottom 32px against the base 48px, the tighter rhythm the rest of
       the phone layout runs on now that the block is two short rows, not one
       tall stack. */
    .blg-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-bottom: 32px; }

    /* order, not DOM order: the search box has to stay last in the markup so the
       desktop row still groups it with the date/sort pills at the end. */
    /* flex:none resets the desktop rule's `flex: 1 1 auto`: .blg-filters is
       flex-direction:column down here, so a main-axis grow would stretch this
       pill's HEIGHT rather than its width. Full width comes from the
       container's align-items:stretch instead. max-width goes with it, or the
       300px cap would hold the box short of the column. */
    .blg-search { order: -1; flex: none; max-width: none; }
    /* Releases the 200px min-width the input holds on desktop so it can fill the
       full-width row instead of forcing the pill wider than the viewport. */
    .blg-search input { flex: 1 1 auto; min-width: 0; width: 100%; }

    .blg-filters-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        /* Room for the active pill's shadow inside the scroll box, cancelled
           again on the outside so the layout does not move. `overflow-x: auto`
           makes overflow-y compute to auto as well, so this box clips
           vertically too and was slicing the shadow off flat along its bottom
           edge. Same clearance .vid-filters / .tlk-filters / .evt-filter-row
           carry. */
        padding-block: 8px 40px;
        margin-block: -8px -40px;
        /* The row is meant to run past the edge, so the bar would only add noise
           on the platforms that draw a persistent one. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .blg-filters-row::-webkit-scrollbar { display: none; }
    .blg-filters-fields { display: contents; }
    /* margin-inline-end back to 0: the desktop rule's `auto` would push the date
       and sort pills to the far end of the scroll content whenever the category
       tabs happen to be narrower than the viewport. nowrap for the same reason
       the container above needs it - a wrapped tab would start a second line
       inside the scroller. */
    .blg-filters-tabs { flex: none; flex-wrap: nowrap; gap: 8px; margin-inline-end: 0; }
    /* flex:none on every pill in the row: it is meant to overflow and scroll,
       not to squeeze its controls down until they fit the viewport. */
    .blg-tab { flex: none; padding: 12px 16px; font-size: 14px; line-height: 20px; }
    /* 46px = the .blg-tab pill's 12 + 20 + 12 plus its 1px borders (everything is
       border-box here), so the two pill families line up in the one scrolling
       row; the base 48px was picked against the larger desktop type. */
    .blg-field { flex: none; height: 46px; padding: 0 16px; font-size: 14px; }
    .blg-field input { font-size: 14px; }
    /* The date pill's own trailing padding, restated because the `padding`
       shorthand on .blg-field just above is later in the file at equal
       specificity and would otherwise take it back to a symmetric 16px. 12px
       trailing keeps the icon the same distance from the edge it holds on
       desktop, proportional to the tighter 16px lead. */
    .blg-date { padding-inline: 16px 12px; }

    /* A <=576 block used to sit below this one carrying three more filter rules
       - .blg-filters-fields' width, the search input's min-width release and
       .blg-field.blg-search's flex: 1 1 100%. All three existed to wrap the
       search box onto its own line inside the old wrapping fields row, which
       this block now does structurally, and .blg-field.blg-search in particular
       had to go: at 0,2,0 it outranked the flex the search box needs as a
       column item. The block's last rule, .blg-card-foot, is above.

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