/* _content/LiveEventBingo.Shared/Components/Blog/InlineCreateGameCta.razor.rz.scp.css */
/* #9019: inline mid-article CTA card — APPEARANCE ONLY. Container/Stack own all layout
   (size/padding/gap/alignment via props); this file only sets the card's visual treatment
   from tokens (no display/flex/gap/margin/position on a primitive's class; §23.4). */

[b-n4w2u7mp95] .inline-cta {
    background: var(--meb-blog-surface-footer);
    border-radius: var(--meb-radius-lg);
    text-align: center;
}
/* _content/LiveEventBingo.Shared/Components/Blog/StickyCreateGameCta.razor.rz.scp.css */
/* #9019: mobile sticky create-game bar. §4.1 permits position:fixed + inset + safe-area padding on
   this atomic-overlay wrapper (same pattern as the cookie-consent banner and the MobileNavBar burger
   overlay); the inner layout is primitive-owned (Stack). Visibility is data-driven (data-visible),
   never a class, so a circuit re-render can't wipe it. Appearance from --meb-* tokens only. */

.sticky-cta[b-x15w6ioi3l] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000; /* below the consent banner (2147483000) and the burger overlay (2000) */
    background: var(--meb-surface-modal);
    border-top: var(--meb-border-width-sm) solid var(--meb-border-color-subtle);
    /* Clear the iOS home indicator / Android gesture bar (needs viewport-fit=cover on the host). */
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--meb-motion-fast),
        opacity var(--meb-motion-fast),
        visibility var(--meb-motion-fast);
}

.sticky-cta[data-visible="true"][b-x15w6ioi3l] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta[b-x15w6ioi3l] {
        transition: none;
    }
}
/* _content/LiveEventBingo.Shared/Pages/Blog/BlogListingDesktop.razor.rz.scp.css */
/* BlogListingDesktop.razor.css
   CT-01: Desktop render surface scoped styles.
   Compliance rules:
     - Only §4.1-allowed CSS properties authored directly (position, z-index, overflow,
       clip-path, transform, aspect-ratio, object-fit, object-position, inset, inset-*).
     - All color via var(--meb-*). All typography via var(--meb-font-*).
     - No @media queries. No display:flex/grid. No raw hex/rgba.
     - Layout structure belongs to primitives (Container, Stack, Grid, Inline).
*/

.bl-desktop-wrapper[b-jsvlrufx21] {
    /* CT-listing-tokens / Frozen Blog Listing UI Design Contract §1 — the body
       surface uses a dedicated semantic so blog-listing can drift from the
       generic howtoplay slab.  Same #FFF569 value but separate token. */
    background-color: var(--meb-surface-section-blog-listing, #FFF569);
    position: relative;
    overflow: hidden;
}

.bl-section[b-jsvlrufx21] {
    padding-block: var(--meb-space-stack-xl);
    padding-inline: var(--meb-blog-section-inline-padding);
    position: relative;
    z-index: 1;
}

/* ── 1. Hero Strip ─────────────────────────────────────────────────────────
   #9650: replaces the 420px illustrated two-column hero band. No fixed height —
   padding plus one line of h2-scale display type lands the strip at ~72px, and if
   the headline ever wraps the strip grows instead of cropping its own copy.
   padding-inline matches .bl-section so the strip's copy sits on the same optical
   left edge as every section below it. */

.bl-hero-strip[b-jsvlrufx21] {
    background: var(--meb-surface-hero-background);
    border-bottom: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    padding-block: var(--meb-space-stack-md);
    padding-inline: var(--meb-blog-section-inline-padding);
    position: relative;
    z-index: 1;
}

.bl-hero-title[b-jsvlrufx21] {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-accent);
    /* h2, not display: the strip is deliberately quiet so it does not compete with
       the search panel directly below it, which is the page's new focal point. */
    font-size: var(--meb-font-size-h2-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-heading);
    text-shadow: var(--meb-blog-hero-title-text-shadow);
}

.bl-hero-subtitle[b-jsvlrufx21] {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
    max-width: var(--meb-size-content-max-width);
}

/* ── 2. Retrieval Controls Panel ─────────────────────────────────────────── */

/* #9650: the boxed treatment that makes the controls the page's focal point.
   Inner padding is owned by the <Inline Padding="lg" PaddingBlock="lg"> primitive —
   only the surface treatment is authored here. */
.bl-search-panel[b-jsvlrufx21] {
    background: var(--meb-surface-card);
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    border-radius: var(--meb-border-radius-lg);
    box-shadow: var(--meb-shadow-surface-comic);
}

.bl-article-tag[b-jsvlrufx21] {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-bold);
    text-transform: capitalize;
    margin-block-start: var(--meb-space-stack-sm);
    z-index: 2;
}

/* #9650: the vertical rhythm below the strip was tuned for a page whose lead card filled
   the space between the controls and the grid. With the lead gone the same padding read as
   three empty yellow bands, so the three gaps (strip→panel, panel→chips, chips→grid) are
   pulled to a uniform 24px: 24 here, then 16+8 and 8+16 across the section boundaries. */
.bl-controls-row[b-jsvlrufx21] {
    padding-block: var(--meb-space-stack-lg) var(--meb-space-stack-md);
}

.bl-search-input[b-jsvlrufx21] {
    position: relative;
    /* #9650: was width: var(--meb-blog-hero-band-height) — a 420px HEIGHT token reused as a
       width, which only held because the two numbers happened to match. The hero band and its
       token are gone, so the field states its own width. Explicit rather than flex:1 because
       the parent is an <Inline> primitive and stretching from the page side would be reaching
       into the primitive's layout. */
    width: 420px;
}

/* Magnifier icon — absolute-positioned inside the input field, non-interactive */
.bl-search-icon[b-jsvlrufx21] {
    position: absolute;
    left: var(--meb-space-inline-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    color: var(--meb-text-muted);
}

/* ::deep crosses the Input component scoping boundary */
.bl-search-input[b-jsvlrufx21]  .ui-input-wrapper {
    border-radius: var(--meb-border-radius-full);
}

/* CT-05 T3-06: Visually hide the Input label so it serves only as an accessible name.
   position + overflow + clip are §4.1-allowed properties.
   width/height collapse the element to prevent layout impact. */
.bl-search-input[b-jsvlrufx21]  .ui-input-label {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
}

.bl-search-input[b-jsvlrufx21]  .ui-input {
    border-radius: var(--meb-border-radius-full);
    padding-inline-start: calc(var(--meb-space-inline-md) + 18px + var(--meb-space-inline-sm));
    /* CT-06-T3-06: T3-04 planned var(--meb-border-width-sm) for the 1px border-width but only
       changed the color token. Residual raw 1px resolved here. Color token retained as chosen. */
    border: var(--meb-border-width-sm) solid var(--meb-button-primary-border);
}

/* #9650: 48px circle rather than a pill. !important is required to override the
   MebButton component's own padding across the ::deep boundary (pre-existing pattern). */
.bl-controls-row[b-jsvlrufx21]  .bl-search-go-btn {
    width: 48px;
    height: 48px;
    padding: 0 !important;
    border-radius: var(--meb-border-radius-full) !important;
}

.bl-sort-select[b-jsvlrufx21] {
    /* §4.1: only position/overflow/z-index allowed here.
       Width and layout belong to the parent Inline primitive.
       ::deep crosses the Select component scoping boundary. */
    min-width: 160px;
}

/* Cross the Select component boundary to apply consistent border-radius */
.bl-sort-select[b-jsvlrufx21]  .ui-select {
    border-radius: var(--meb-border-radius-full);
}

/* CT-05 T3-06: Visually hide the Select label so it serves only as an accessible name.
   position + overflow + clip are §4.1-allowed properties. */
.bl-sort-select[b-jsvlrufx21]  .ui-select-label {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
}

.bl-btn-icon-left[b-jsvlrufx21] {
    margin-inline-end: var(--meb-space-inline-sm);
}

/* ── 3. Browse Taxonomy Chip Row ───────────────────────────────────────── */

.bl-taxonomy-row[b-jsvlrufx21] {
    padding-block: var(--meb-space-stack-sm);
}

.bl-taxonomy-row[b-jsvlrufx21]  .bl-chip {
    border-radius: var(--meb-border-radius-full) !important;
    text-transform: none !important;
}

/* CT-listing-tokens / Frozen Blog Listing UI Design Contract §2 — the
   selected category chip uses a saturated purple surface with white text
   rather than the generic primary-button orange.  Selectors target
   .bl-chip--active inside the taxonomy row so a default MebButton variant
   elsewhere is untouched; !important is required to override the variant's
   inline-style-equivalent specificity inside ::deep. */
.bl-taxonomy-row[b-jsvlrufx21]  .bl-chip--active {
    background-color: var(--meb-surface-filter-chip-active, #7542BD) !important;
    color: var(--meb-text-filter-chip-active, #FFFFFF) !important;
    border-color: var(--meb-surface-filter-chip-active, #7542BD) !important;
}

/* ── 4. Standard Article Results Grid ─────────────────────────────────── */

.bl-results-surface[b-jsvlrufx21] {
    padding-block-start: var(--meb-space-stack-md);
    padding-block-end: var(--meb-space-stack-xl);
}

.bl-article-card[b-jsvlrufx21] {
    border-radius: var(--meb-border-radius-lg);
    box-shadow: var(--meb-shadow-surface-comic);
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    overflow: hidden;
    position: relative;
    transition: transform var(--meb-motion-fast);
    padding: var(--meb-space-stack-12);
}

.bl-article-card:hover[b-jsvlrufx21] {
    transform: translate(-2px, -2px);
    box-shadow: var(--meb-blog-card-hover-shadow);
}

/* CT-04 T3-06: display:block makes the link fill the card's full content area, consistent
   with .bl-lead-link which already declares display:block. */
.bl-article-link[b-jsvlrufx21] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.bl-article-thumb[b-jsvlrufx21] {
    /* Fill width; height follows from aspect-ratio so card heights stay uniform.
       overflow:hidden is retained for the CdnImage placeholder containment. */
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* ::deep crosses the CdnImage component boundary — the inner <img> carries
   CdnImage's scope id, not this page's, so an unprefixed rule never matched. */
.bl-article-thumb[b-jsvlrufx21]  picture,
.bl-article-thumb[b-jsvlrufx21]  img {
    /* object-fit:contain preserves the full source frame (including right-side
       speech-bubble overlays in the branded thumbnails) at the cost of a thin
       letterboxed band against the card colour — preferred over cover, which
       cropped the bubble text. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bl-article-date[b-jsvlrufx21] {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--meb-space-stack-md);
    inset-inline-start: var(--meb-space-stack-md);
    color: var(--meb-palette-neutral-black);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-bold);
    background: var(--meb-palette-neutral-white);
    border-radius: var(--meb-border-radius-full);
    padding-block: var(--meb-space-stack-xs);
    padding-inline: var(--meb-space-inline-12);
    box-shadow: var(--meb-button-primary-hover-shadow);
   
}

.bl-article-copy[b-jsvlrufx21] {
    padding: var(--meb-space-stack-lg);
    padding-block-end: var(--meb-space-stack-48);
}

.bl-article-title[b-jsvlrufx21] {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-mobile);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
    margin-block-start: var(--meb-space-stack-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: var(--meb-space-stack-40);
}

/* Card arrow button — CT-04 T3-06: pointer-events:none ensures the decorative arrow does not
   intercept clicks in its zone. All click events fall through to the wrapping <a> link,
   preserving the single-destination navigation contract across the full card surface. */
.bl-card-arrow-wrapper[b-jsvlrufx21] {
    position: absolute;
    inset-block-end: var(--meb-space-stack-md);
    inset-inline-end: var(--meb-space-stack-md);
    z-index: 2;
    pointer-events: none;
}

.bl-card-arrow-btn[b-jsvlrufx21] {
    width: var(--meb-space-stack-40);
    height: var(--meb-space-stack-40);
    background: var(--meb-palette-neutral-white);
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    border-radius: var(--meb-radius-full);
    color: var(--meb-palette-neutral-black);
    padding-top: var(--meb-space-stack-6);
}

/* Card color variants — Frozen Blog Listing v0.9 §5 six-variant Bingo palette.
   Each variant pairs background + foreground tokens for AA contrast. */
.bl-card--sky[b-jsvlrufx21]   { background-color: var(--meb-blog-card-sky-background);   color: var(--meb-blog-card-sky-text); }
.bl-card--coral[b-jsvlrufx21] { background-color: var(--meb-blog-card-coral-background); color: var(--meb-blog-card-coral-text); }
.bl-card--mint[b-jsvlrufx21]  { background-color: var(--meb-blog-card-mint-background);  color: var(--meb-blog-card-mint-text); }
.bl-card--gold[b-jsvlrufx21]  { background-color: var(--meb-blog-card-gold-background);  color: var(--meb-blog-card-gold-text); }
.bl-card--plum[b-jsvlrufx21]  { background-color: var(--meb-blog-card-plum-background);  color: var(--meb-blog-card-plum-text); }
.bl-card--pink[b-jsvlrufx21]  { background-color: var(--meb-blog-card-pink-background);  color: var(--meb-blog-card-pink-text); }

/* ADO #7987: per-variant restate of card text colour for the listing card title
   and tag elements. Without these rules, .bl-article-tag / .bl-article-title /
   .bl-lead-title win on specificity over the variant `color:` set above and ship
   their hardcoded `--meb-text-inverse` (white) — which collapses contrast on
   every variant whose text token is navy. After ADO #8005 that's five of the
   six variants (only plum still ships white text). Pattern matches the existing
   precedent at DesktopBlogDetails.razor.css:394-405 for the Similar Articles
   carousel.
   #9650: the .bl-lead-title arm of each rule went with the lead card. */
.bl-card--sky   .bl-article-tag[b-jsvlrufx21],
.bl-card--sky   .bl-article-title[b-jsvlrufx21] { color: var(--meb-blog-card-sky-text); }
.bl-card--coral .bl-article-tag[b-jsvlrufx21],
.bl-card--coral .bl-article-title[b-jsvlrufx21] { color: var(--meb-blog-card-coral-text); }
.bl-card--mint  .bl-article-tag[b-jsvlrufx21],
.bl-card--mint  .bl-article-title[b-jsvlrufx21] { color: var(--meb-blog-card-mint-text); }
.bl-card--gold  .bl-article-tag[b-jsvlrufx21],
.bl-card--gold  .bl-article-title[b-jsvlrufx21] { color: var(--meb-blog-card-gold-text); }
.bl-card--plum  .bl-article-tag[b-jsvlrufx21],
.bl-card--plum  .bl-article-title[b-jsvlrufx21] { color: var(--meb-blog-card-plum-text); }
.bl-card--pink  .bl-article-tag[b-jsvlrufx21],
.bl-card--pink  .bl-article-title[b-jsvlrufx21] { color: var(--meb-blog-card-pink-text); }

[b-jsvlrufx21] .bl-results-dots-wrap {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: clamp(24rem, 34vw, 34rem);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    width: 75%;
}

[b-jsvlrufx21] .bl-results-dots.decorative-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* Loading State */
.bl-loading-state[b-jsvlrufx21] {
    padding-block: var(--meb-space-stack-xl);
    color: var(--meb-text-muted);
}

.bl-spinner[b-jsvlrufx21] {
    width: var(--meb-space-stack-40);
    height: var(--meb-space-stack-40);
    border: var(--meb-border-width-lg) solid var(--meb-border-subtle);
    border-top-color: var(--meb-accent-primary);
    border-radius: var(--meb-radius-full);
    animation: bl-spin-b-jsvlrufx21 1s linear infinite;
}

@keyframes bl-spin-b-jsvlrufx21 {
    to {
        transform: rotate(360deg);
    }
}

/* CT-03 T3-06: Canonical no-results state — shared contract with Mobile render surface.
   Renamed from .bl-empty. bl-no-results is now the single class name used on both surfaces. */
.bl-no-results[b-jsvlrufx21] {
    color: var(--meb-text-muted);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    text-align: center;
    padding-block: var(--meb-space-stack-xl);
}

/* ── 5. Desktop Pagination Row ─────────────────────────────────────────── */

.bl-desktop-pagination[b-jsvlrufx21] {
    padding-block-end: var(--meb-space-stack-xl);
    position: relative;
    z-index: 1;
}

/* Cross Pagination component boundary with ::deep to apply blog comic style.
   Approved exception: visual overrides for a governed sub-component whose token
   bridge cannot be reached from page-level cascade due to inline style precedence.
   Pattern mirrors .bl-search-input ::deep .ui-input usage in §3 above. */

/* All pagination buttons: uniform circles with comic shadow */
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-page {
    width: 58px;
    height: 55px;
}

.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-page,
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-nav {
    border-radius: 40%;
    padding: 0;
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    /* box-shadow: 3px 3px 0 0 var(--meb-palette-neutral-black); */
    background: var(--meb-palette-neutral-white);
    color: var(--meb-palette-neutral-black);
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold);
    transition: transform var(--meb-motion-fast), box-shadow var(--meb-motion-fast);
}

/* Nav arrows: solid black fill — primary action weight matching design */
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-nav {
    border-color: var(--meb-palette-neutral-black);
    box-shadow: var(--meb-blog-pagination-nav-shadow);
    margin-inline: var(--meb-space-inline-lg);
    width: 66px;
    height: 50px;
}

/* Active page number: solid black fill, white label */
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-page.active {
    background: var(--meb-palette-neutral-black);
    color: var(--meb-palette-neutral-white);
    border-color: var(--meb-palette-neutral-black);
}

/* Hover: nudge translate matching blog card interaction */
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-page:hover:not(:disabled),
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-nav:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: var(--meb-blog-pagination-nav-shadow);
}

/* Disabled nav arrow: muted, no shadow */
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-nav:disabled,
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-nav.disabled {
    background: var(--meb-surface-disabled);
    color: var(--meb-text-muted);
    border-color: var(--meb-border-subtle);
    box-shadow: none;
    transform: none;
}

/* Ellipsis: no border, no shadow — just a label */
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-ellipsis {
    min-width: var(--meb-space-stack-48);
    min-height: var(--meb-space-stack-48);
    border: none;
    box-shadow: none;
    background: transparent;
    color: var(--meb-palette-neutral-black);
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold);
}

/* Inter-item gap for nav groups and page list */
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination {
    gap: var(--meb-space-inline-xs);
}

.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-nav-group,
.bl-desktop-pagination[b-jsvlrufx21]  .ui-pagination-list {
    gap: var(--meb-space-inline-xs);
}

/* ── 6. Bottom Promotional Band ────────────────────────────────────────── */

.bl-promo-band[b-jsvlrufx21] {
    background: var(--meb-surface-cta-background);
}

.bl-promo-headline[b-jsvlrufx21] {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-h1-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-heading);
}

.bl-promo-body[b-jsvlrufx21] {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
    max-width: 50ch;
}
/* _content/LiveEventBingo.Shared/Pages/Blog/BlogListingMobile.razor.rz.scp.css */
/* BlogListingMobile.razor.css
   CT-01: Mobile render surface scoped styles.
   Compliance rules:
     - Only §4.1-allowed CSS properties authored directly (position, z-index, overflow,
       clip-path, transform, aspect-ratio, object-fit, object-position, inset, inset-*).
     - All color via var(--meb-*). All typography via var(--meb-font-*).
     - No @media queries. No display:flex/grid. No raw hex/rgba.
     - Layout structure belongs to primitives (Container, Stack, Grid, Inline).
*/

.bl-mobile-surface[b-g21mpvdzpv] {
    /* CT-listing-tokens / Frozen Blog Listing UI Design Contract §1 — the body
       surface uses a dedicated semantic so blog-listing can drift from the
       generic howtoplay slab.  Same #FFF569 value but separate token. */
    background: var(--meb-surface-section-blog-listing, #FFF569);
    min-height: 100vh;
}

/* Shared section separator — mirrors Desktop .bl-section */
.bl-section[b-g21mpvdzpv] {
    padding-block: var(--meb-space-stack-xl);
}

/* ── 1. Hero Strip ── */
/* #9650: replaces the illustrated hero band. Content-driven height, left-aligned copy,
   no dot overlay and no book image. */
.bl-mobile-hero-strip[b-g21mpvdzpv] {
    background: var(--meb-surface-hero-background);
    color: var(--meb-text-inverse);
    padding-block: var(--meb-space-stack-md);
    border-bottom: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    position: relative;
}

.bl-mobile-hero-title[b-g21mpvdzpv] {
    font-family: var(--meb-font-family-accent);
    /* h3, down from display-mobile: the strip is a page label now, not a title card. */
    font-size: var(--meb-font-size-h3-mobile);
    margin: 0;
}

.bl-mobile-hero-subtitle[b-g21mpvdzpv] {
    font-size: var(--meb-font-size-body-sm-mobile);
    opacity: 0.9;
    max-width: 30ch;
}

/* ── 2. Retrieval Controls Panel ── */
/* #9650: same boxed treatment as desktop. Inner padding is owned by the
   <Stack Padding="md" PaddingBlock="md"> primitive — only the surface is authored here. */
.bl-mobile-search-panel[b-g21mpvdzpv] {
    background: var(--meb-surface-card);
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    border-radius: var(--meb-border-radius-lg);
    box-shadow: var(--meb-shadow-surface-comic);
}

/* Date badge — positioned over the thumbnail image */
.bl-article-date[b-g21mpvdzpv] {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--meb-space-stack-md);
    inset-inline-start: var(--meb-space-stack-md);
    color: var(--meb-palette-neutral-black);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-mobile);
    font-weight: var(--meb-font-weight-bold);
    border-radius: var(--meb-border-radius-full);
    padding-block: var(--meb-space-stack-xs);
    padding-inline: var(--meb-space-inline-12);
    background: var(--meb-palette-neutral-white);
    box-shadow: var(--meb-button-primary-hover-shadow);
}

/* ── 2. Retrieval Controls Panel (inner controls) ── */
.bl-mobile-controls-row[b-g21mpvdzpv] {
    padding-block: var(--meb-space-stack-md);
    scroll-margin-top: 80px; /* CT-01: Provides a top buffer for programmatic scrollIntoView calls on mobile. */
}

.bl-mobile-search-input[b-g21mpvdzpv] {
    /* Layout sizing owned by <Grid TemplateColumns="1fr auto auto"> primitive — not authored here */
    position: relative;
}

/* Magnifier icon — absolute-positioned inside the input field, non-interactive */
.bl-mobile-search-icon[b-g21mpvdzpv] {
    position: absolute;
    left: var(--meb-space-inline-sm);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    color: var(--meb-text-muted);
}

/* ::deep crosses the Input component scoping boundary */
.bl-mobile-search-input[b-g21mpvdzpv]  .ui-input-wrapper {
    border-radius: var(--meb-border-radius-full);
}

/* CT-05 T3-06: Visually hide the Input label so it serves only as an accessible name.
   position + overflow + clip are §4.1-allowed properties.
   width/height collapse the element to prevent layout impact. */
.bl-mobile-search-input[b-g21mpvdzpv]  .ui-input-label {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
}

.bl-mobile-search-input[b-g21mpvdzpv]  .ui-input {
    border-radius: var(--meb-border-radius-full);
    padding-inline-start: calc(var(--meb-space-inline-sm) + 16px + var(--meb-space-inline-sm));
}

/* #9650: 40px circle rather than a pill. !important is required to override the
   MebButton component's own padding across the ::deep boundary (pre-existing pattern). */
.bl-mobile-controls-row[b-g21mpvdzpv]  .bl-mobile-search-go-btn {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: var(--meb-border-radius-full) !important;
}

/* #9650: .bl-mobile-sort-select no longer sets min-width — the sort pill is on its own
   full-width row inside the panel now, so it does not need a floor to survive sharing a
   row with the search field. The ::deep rules below still target it. */

/* Cross the Select component boundary to apply consistent border-radius */
.bl-mobile-sort-select[b-g21mpvdzpv]  .ui-select {
    border-radius: var(--meb-border-radius-full);
}

/* CT-05 T3-06: Visually hide the Select label so it serves only as an accessible name.
   position + overflow + clip are §4.1-allowed properties. */
.bl-mobile-sort-select[b-g21mpvdzpv]  .ui-select-label {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
}

.bl-btn-icon-left[b-g21mpvdzpv] {
    margin-inline-end: var(--meb-space-inline-sm);
}

/* ── 3. Browse Taxonomy Chip Row ── */
.bl-mobile-taxonomy-row[b-g21mpvdzpv] {
    padding-block: var(--meb-space-stack-md);
}

/* #9650: the horizontal-scroll rules that used to live here are gone. The row was
   nowrap + overflow-x:auto, and every scrollbar-hiding declaration it carried
   (scrollbar-width, -ms-overflow-style, ::-webkit-scrollbar) still left a visible
   track over the chips on the surfaces that ignore them. The row now WRAPS
   (<Inline Wrap="true">) over a collapsed set plus a More/Less toggle, so there is
   no scroll container to hide a scrollbar on and no chip hidden behind a swipe.
   The flex-shrink:0 rule went with it -- it only existed to stop chips compressing
   inside the nowrap row, and wrapped chips size to their content already. */

.bl-chip[b-g21mpvdzpv] {
    border-radius: var(--meb-border-radius-full) !important;
    text-transform: none !important;
}

/* More/Less toggle chip — same pill as a category chip; the chevron marks it as a
   disclosure rather than a filter. */
.bl-chip-chevron[b-g21mpvdzpv] {
    margin-inline-start: var(--meb-space-inline-xs);
    transition: transform var(--meb-motion-fast);
}

.bl-chip-chevron--up[b-g21mpvdzpv] {
    transform: rotate(180deg);
}

/* CT-listing-tokens / Frozen Blog Listing UI Design Contract §2 — the active
   category chip uses a saturated purple surface with white text instead of
   the primary-button orange.  Scoped to the mobile taxonomy row so it does
   not bleed into other MebButton consumers. */
.bl-mobile-taxonomy-row[b-g21mpvdzpv]  .bl-chip--active {
    background-color: var(--meb-surface-filter-chip-active, #7542BD) !important;
    color: var(--meb-text-filter-chip-active, #FFFFFF) !important;
    border-color: var(--meb-surface-filter-chip-active, #7542BD) !important;
}

/* ── 4. Standard Article Results Stack ── */
.bl-mobile-results-surface[b-g21mpvdzpv] {
    padding-block-end: var(--meb-space-stack-xl);
}

/* Results stack — keeps vertical rhythm between cards */
.bl-mobile-results[b-g21mpvdzpv] {
    padding-block: var(--meb-space-stack-md);
}

.bl-mobile-article-card[b-g21mpvdzpv] {
    border-radius: var(--meb-border-radius-lg);
    box-shadow: var(--meb-shadow-surface-comic);
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    overflow: hidden;
    position: relative;
    padding: var(--meb-space-stack-12);
}

/* CT-04 T3-06: display:block makes the link fill the card's full content area, consistent
   across both lead and standard card surfaces on Mobile. */
.bl-mobile-article-link[b-g21mpvdzpv] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.bl-mobile-article-thumb[b-g21mpvdzpv] {
    /* CT-04 T3-05: position:relative required so CdnImage placeholder (position:absolute;inset:0)
       resolves within the thumb zone, not the card. overflow:hidden clips placeholder to zone bounds
       and matches the Desktop bl-article-thumb structure. */
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
    /* #11039 (U3): mobile-display is 800px wide; 800 x 1.35 / DPR 2 = 540, so cap the zone at 520px
       (1.30x at DPR 2), the same centred cap #10983 uses for blog images. DPR 3 is #11007. */
    max-width: min(100%, 520px);
    margin-inline: auto;
}

/* ::deep crosses the CdnImage component boundary — the inner <img> carries
   CdnImage's scope id, not this page's, so an unprefixed rule never matched. */
.bl-mobile-article-thumb[b-g21mpvdzpv]  picture,
.bl-mobile-article-thumb[b-g21mpvdzpv]  img {
    /* object-fit:contain preserves the full source frame (including right-side
       speech-bubble overlays in the branded thumbnails) at the cost of a thin
       letterboxed band against the card colour — preferred over cover, which
       cropped the bubble text. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bl-mobile-article-copy[b-g21mpvdzpv] {
    padding: var(--meb-space-stack-lg);
    padding-block-end: var(--meb-space-stack-48);
}

.bl-mobile-article-tag[b-g21mpvdzpv] {
    color: var(--meb-text-inverse);
    font-size: var(--meb-font-size-body-sm-mobile);
    font-weight: var(--meb-font-weight-medium);
    z-index: 2;
}

.bl-mobile-article-title[b-g21mpvdzpv] {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-mobile);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
    margin-block-start: var(--meb-space-stack-xxs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: var(--meb-space-stack-40);
}

/* Card arrow button (Mobile) — CT-04 T3-06: pointer-events:none ensures the decorative arrow
   does not intercept clicks in its zone. All click events fall through to the wrapping <a> link,
   preserving the single-destination navigation contract across the full card surface. */
.bl-card-arrow-wrapper[b-g21mpvdzpv] {
    position: absolute;
    inset-block-end: var(--meb-space-stack-md);
    inset-inline-end: var(--meb-space-stack-md);
    pointer-events: none;
}

.bl-card-arrow-btn[b-g21mpvdzpv] {
    width: var(--meb-space-stack-40);
    height: var(--meb-space-stack-40);
    background: var(--meb-palette-neutral-white);
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    border-radius: var(--meb-radius-full);
    color: var(--meb-palette-neutral-black);
    box-shadow: var(--meb-button-primary-hover-shadow);
    padding-top: var(--meb-space-stack-6);
}

/* Card color variants — Frozen Blog Listing v0.9 §5 six-variant Bingo palette.
   Same set as desktop; each variant pairs background + foreground tokens. */
.bl-card--sky[b-g21mpvdzpv]   { background-color: var(--meb-blog-card-sky-background);   color: var(--meb-blog-card-sky-text); }
.bl-card--coral[b-g21mpvdzpv] { background-color: var(--meb-blog-card-coral-background); color: var(--meb-blog-card-coral-text); }
.bl-card--mint[b-g21mpvdzpv]  { background-color: var(--meb-blog-card-mint-background);  color: var(--meb-blog-card-mint-text); }
.bl-card--gold[b-g21mpvdzpv]  { background-color: var(--meb-blog-card-gold-background);  color: var(--meb-blog-card-gold-text); }
.bl-card--plum[b-g21mpvdzpv]  { background-color: var(--meb-blog-card-plum-background);  color: var(--meb-blog-card-plum-text); }
.bl-card--pink[b-g21mpvdzpv]  { background-color: var(--meb-blog-card-pink-background);  color: var(--meb-blog-card-pink-text); }

/* ADO #7987: per-variant restate of card text colour for mobile listing card title +
   tag elements. Same bug as desktop — without this the .bl-mobile-article-tag /
   .bl-mobile-article-title rules above win on specificity over the variant `color:`
   and ship hardcoded white. After ADO #8005, five of six variants use navy text (only
   plum stays white), so the restate is what keeps every navy-text card readable.
   Pattern matches the desktop restate.
   #9650: the .bl-mobile-lead-tag / .bl-mobile-lead-title arms went with the lead card. */
.bl-card--sky   .bl-mobile-article-tag[b-g21mpvdzpv],
.bl-card--sky   .bl-mobile-article-title[b-g21mpvdzpv] { color: var(--meb-blog-card-sky-text); }
.bl-card--coral .bl-mobile-article-tag[b-g21mpvdzpv],
.bl-card--coral .bl-mobile-article-title[b-g21mpvdzpv] { color: var(--meb-blog-card-coral-text); }
.bl-card--mint  .bl-mobile-article-tag[b-g21mpvdzpv],
.bl-card--mint  .bl-mobile-article-title[b-g21mpvdzpv] { color: var(--meb-blog-card-mint-text); }
.bl-card--gold  .bl-mobile-article-tag[b-g21mpvdzpv],
.bl-card--gold  .bl-mobile-article-title[b-g21mpvdzpv] { color: var(--meb-blog-card-gold-text); }
.bl-card--plum  .bl-mobile-article-tag[b-g21mpvdzpv],
.bl-card--plum  .bl-mobile-article-title[b-g21mpvdzpv] { color: var(--meb-blog-card-plum-text); }
.bl-card--pink  .bl-mobile-article-tag[b-g21mpvdzpv],
.bl-card--pink  .bl-mobile-article-title[b-g21mpvdzpv] { color: var(--meb-blog-card-pink-text); }

/* ── 5. Mobile Progressive Reveal ── */
.bl-mobile-progressive-reveal[b-g21mpvdzpv] {
    padding-block: var(--meb-space-stack-lg);
}

/* ── 6. Bottom Promotional Band ── */
.bl-mobile-promo-band[b-g21mpvdzpv] {
    background: var(--meb-surface-cta-background);
    color: var(--meb-text-inverse);
    padding-block: var(--meb-space-stack-xl);
}

.bl-mobile-promo-headline[b-g21mpvdzpv] {
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-h2-mobile);
    margin: 0;
}

.bl-mobile-promo-body[b-g21mpvdzpv] {
    font-size: var(--meb-font-size-body-sm-mobile);
    margin-block-start: var(--meb-space-stack-xs);
}

/* Spinner (Same as desktop) */
.bl-spinner[b-g21mpvdzpv] {
    width: var(--meb-space-stack-xl);
    height: var(--meb-space-stack-xl);
    border: var(--meb-border-width-lg) solid var(--meb-border-subtle);
    border-top-color: var(--meb-accent-primary);
    border-radius: var(--meb-radius-full);
    animation: bl-spin-b-g21mpvdzpv 1s linear infinite;
}

@keyframes bl-spin-b-g21mpvdzpv {
    to {
        transform: rotate(360deg);
    }
}

.bl-mobile-loading[b-g21mpvdzpv] {
    padding-block: var(--meb-space-stack-xl);
    text-align: center;
    color: var(--meb-text-muted);
}

/* CT-03 T3-06: Canonical no-results state — shared contract with Desktop render surface.
   Renamed from .bl-mobile-empty. bl-no-results is now the single class name on both surfaces. */
.bl-no-results[b-g21mpvdzpv] {
    padding-block: var(--meb-space-stack-xl);
    text-align: center;
    color: var(--meb-text-muted);
}
/* _content/LiveEventBingo.Shared/Shared/DesktopBlogDetails.razor.rz.scp.css */
/* CT-05/T6637 compliance: all visual values sourced from blog.* and system tokens.
   Layout primitives (Container, Stack, Inline, Grid) own all structural layout.
   Only §4.1-allowed properties (position, z-index, overflow, object-fit, aspect-ratio,
   transform, clip) carry raw values. Everything else uses var(--meb-*) tokens.
   Approved exceptions noted inline where primitive parameters cannot fully own the concern. */

/* ── Page root ─────────────────────────────────────────────────────────── */
.article-root.desktop[b-q0l6r9ftzg] {
    background: var(--meb-blog-surface-page);
    color: var(--meb-blog-text-on-page);
    font-family: var(--meb-font-family-primary);
    min-height: 100vh; /* viewport-relative — no token equivalent for vh units */
}

/* ── Hero strip ─────────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .article-hero-container {
    background: var(--meb-blog-surface-hero);
    padding-top: var(--meb-space-stack-md);
    padding-bottom: var(--meb-space-stack-md);
}

/* Art column: fixed visual width — approved exception.
   flex-shrink prevents the art column from compressing inside the Inline primitive.
   Refactor to Grid TemplateColumns would remove this in a future pass. */
[b-q0l6r9ftzg] .article-hero {
    width: 100%;
    max-width: 30vw; /* viewport-relative art constraint — no token equivalent */
    flex-shrink: 0;  /* approved exception: art column must not compress in Inline */
}

[b-q0l6r9ftzg] .article-hero picture,
[b-q0l6r9ftzg] .article-hero img {
    display: block; /* approved exception: prevents inline-element gap on img */
    width: auto;
    object-fit: contain; /* §4.1 */
    height: auto;
    margin: var(--meb-space-stack-none) auto;
    max-height: 35vh; /* viewport-relative art constraint */
    max-width: 100%;
}

/* Text column fills remaining space in the Inline flex container.
   Approved exception: needed to give the copy column all remaining width.
   *:first-child targets the text Stack (text is now first after the hero swap). */
[b-q0l6r9ftzg] .article-hero-row > *:first-child {
    flex: 1;       /* approved exception: copy column must fill remaining Inline width */
    min-width: var(--meb-space-stack-none);  /* approved exception: prevents overflow in flex child */
}

/* ── Article header ─────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .article-header {
    padding: var(--meb-space-stack-lg) var(--meb-space-stack-none);
}

/* ── Back link ──────────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .back-chip {
    font-size: var(--meb-blog-font-size-small);
    color: var(--meb-blog-text-back);
    text-decoration: none;
    opacity: var(--meb-opacity-muted);
    /* #10971: WCAG 2.5.8 24px minimum hit area (44px is advisory); inline-block keeps the text where it was. */
    display: inline-block;
    min-height: 24px;
}

    [b-q0l6r9ftzg] .back-chip:hover {
        opacity: 1;
    }

/* ── Article title ──────────────────────────────────────────────────────── */
/* #7855-B: hero role per Frozen Detail v1.2 §5 typography.
   font-family inherits Poppins from BlogLayout's heading rule. */
[b-q0l6r9ftzg] .article-title {
    font-size: var(--meb-blog-font-size-role-hero);
    font-weight: var(--meb-blog-text-role-hero-weight);
    line-height: var(--meb-blog-text-role-hero-lineheight);
    margin: var(--meb-space-stack-12) var(--meb-space-stack-none);
    color: var(--meb-blog-text-title);
}

[b-q0l6r9ftzg] .article-subtitle {
    font-size: var(--meb-blog-font-size-subtitle);
    line-height: var(--meb-blog-lineheight-subtitle);
    color: var(--meb-blog-text-subtitle);
    margin-bottom: var(--meb-space-stack-10);
}

/* article-meta is an Inline primitive — only visual tokens here
   #7855-B: meta role per Frozen Detail v1.2 §5. Family inherits Outfit from BlogLayout. */
[b-q0l6r9ftzg] .article-meta {
    color: var(--meb-blog-text-meta);
    font-size: var(--meb-blog-font-size-role-meta);
    font-weight: var(--meb-blog-text-role-meta-weight);
    line-height: var(--meb-blog-text-role-meta-lineheight);
}

/* #7856-B: article-level date pill now uses blog.surface.datepill +
   blog.text.meta per Frozen Detail v1.2 §5 — replaces the prior
   blog.surface.date.badge / text.date.badge pair which mapped to a
   different visual treatment (green badge with light text). */
[b-q0l6r9ftzg] .article-meta .date {
    background: var(--meb-blog-surface-datepill);
    color: var(--meb-blog-text-meta);
    border-radius: var(--meb-radius-pill);
    padding: var(--meb-space-stack-xxs) var(--meb-space-inline-10);
    font-size: var(--meb-blog-font-size-caption);
    font-weight: var(--meb-font-weight-semibold);
}

[b-q0l6r9ftzg] .disclaimer-note {
    font-size: var(--meb-blog-font-size-small);
    color: var(--meb-blog-text-back);
    opacity: var(--meb-opacity-muted);
}

    [b-q0l6r9ftzg] .disclaimer-note a {
        color: inherit;
    }

/* ── Ad band ────────────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .ad-band {
    padding: var(--meb-space-stack-md) var(--meb-space-stack-none);
}

/* ── Article body ───────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .article-content {
    padding: var(--meb-space-stack-sm) var(--meb-space-stack-none) var(--meb-space-stack-48);
    width: 100%;
}

[b-q0l6r9ftzg] .article-section {
    margin: var(--meb-blog-space-section) var(--meb-space-stack-none);
    width: 100%;
}

/* ── Section heading ────────────────────────────────────────────────────── */
/* #7855-B: section role per Frozen Detail v1.2 §5. Family inherits Poppins from BlogLayout. */
[b-q0l6r9ftzg] .section-title {
    font-size: var(--meb-blog-font-size-role-section);
    font-weight: var(--meb-blog-text-role-section-weight);
    line-height: var(--meb-blog-text-role-section-lineheight);
    margin: var(--meb-space-stack-sm) var(--meb-space-stack-none) var(--meb-space-stack-12);
    /* left-aligned to match design — removed prior center alignment */
}

/* ── Section figure ─────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .section-figure {
    margin: var(--meb-blog-space-figure) auto;
    background: var(--meb-blog-surface-figure-container);
    border: var(--meb-border-width-sm) solid var(--meb-blog-border-figure-container);
    border-radius: var(--meb-radius-lg);
    overflow: hidden; /* §4.1 — clips img corners to container radius */
    text-align: center;
}

    [b-q0l6r9ftzg] .section-figure img {
        width: auto;
        height: auto;
        display: block; /* approved exception: prevents inline-element gap on img */
        max-height: 35vh; /* viewport-relative art constraint */
        object-fit: contain; /* §4.1 */
        margin: var(--meb-space-stack-none) auto;
    }

/* ── Caption ────────────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .caption {
    font-size: var(--meb-blog-font-size-caption);
    color: var(--meb-blog-text-caption);
    margin-top: var(--meb-space-stack-xs);
}

/* ── Section body copy ──────────────────────────────────────────────────── */
/* #7855-B: body role per Frozen Detail v1.2 §5. Family inherits Outfit from BlogLayout.
   color: inherit lets the per-variant `color` set on .article-section--{variant} flow
   into the body text — otherwise body always renders text-body black even inside Ink
   where the section colour is lemon for contrast on the lighter purple surface. */
[b-q0l6r9ftzg] .section-copy {
    font-size: var(--meb-blog-font-size-role-body);
    font-weight: var(--meb-blog-text-role-body-weight);
    line-height: var(--meb-blog-text-role-body-lineheight);
    color: inherit;
}

/* ── Tags row ───────────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .tags-row {
    padding: var(--meb-space-stack-md) var(--meb-space-stack-none) var(--meb-space-stack-lg);
}

    [b-q0l6r9ftzg] .tags-row .tag {
        background: var(--meb-blog-surface-tag);
        color: var(--meb-blog-text-tag);
        border: var(--meb-border-width-sm) solid var(--meb-blog-border-tag);
        border-radius: var(--meb-radius-pill);
        padding: var(--meb-space-stack-xxs) var(--meb-space-inline-10);
        font-size: var(--meb-blog-font-size-caption);
    }

/* ── TOC sidebar (CT-02) ────────────────────────────────────────────────── */
/* Approved exceptions:
   - flex: 0 0 <basis> — Inline does not expose per-child flex-grow/shrink/basis.
     flex-grow and flex-shrink must be unitless integers (0, not 0px); using literal 0.
   - position sticky + top — §4.1-allowed raw-value properties.
   - align-self: flex-start — sticky does not work on stretch-aligned flex items;
     cannot be set via an Inline primitive parameter.
   - max-height + overflow-y — §4.1-allowed; prevents sidebar overflowing the viewport. */
[b-q0l6r9ftzg] .article-toc-sidebar {
    flex: 0 0 var(--meb-size-blog-toc-sidebar); /* approved exception: fixed sidebar width; 0 is unitless (flex-grow/shrink must not be 0px) */
    position: sticky;       /* §4.1 */
    top: 1.5rem;            /* §4.1 — offset below fixed site header */
    align-self: flex-start; /* approved exception: sticky requires non-stretch alignment */
    max-height: 80vh;       /* viewport-relative — no token equivalent for vh units */
    overflow-y: auto;       /* §4.1 */
    padding: var(--meb-space-stack-md) var(--meb-space-inline-md);
    border-right: var(--meb-border-width-sm) solid var(--meb-blog-border-toc);
}

/* Article main column: fills remaining Inline width.
   Approved exception: flex-grow/flex-basis cannot be set via Inline primitive parameters. */
[b-q0l6r9ftzg] .article-main-column {
    flex: 1 1 var(--meb-space-stack-none);  /* approved exception: main column must fill remaining Inline width */
    min-width: var(--meb-space-stack-none); /* approved exception: prevents overflow on long unbreakable content */
}

/* #7855-C: TOC heading "Contents" adopts blog.text.role.toc per Frozen Detail v1.2 §5.
   Family inherits Outfit from BlogLayout's body-family rule. */
[b-q0l6r9ftzg] .toc-heading {
    font-size: var(--meb-blog-font-size-role-toc);
    font-weight: var(--meb-blog-text-role-toc-weight);
    line-height: var(--meb-blog-text-role-toc-lineheight);
    text-transform: uppercase;
    letter-spacing: var(--meb-blog-letter-spacing-toc);
    color: var(--meb-blog-text-toc-heading);
    margin: var(--meb-space-stack-none) var(--meb-space-stack-none) var(--meb-space-stack-sm);
}

[b-q0l6r9ftzg] .toc-list {
    margin: var(--meb-space-stack-none);
    padding-left: var(--meb-space-inline-20);
}

[b-q0l6r9ftzg] .toc-item {
    margin: var(--meb-space-stack-xs) var(--meb-space-stack-none);
}

[b-q0l6r9ftzg] .toc-link {
    font-size: var(--meb-blog-font-size-toc-link);
    color: var(--meb-blog-text-toc-link);
    text-decoration: none;
}

    [b-q0l6r9ftzg] .toc-link:hover {
        text-decoration: underline;
    }

/* CT-02: H3 sub-section heading modifier
   #7855-B: subsection role per Frozen Detail v1.2 §5 — maintains the h2→h3
   size step now that .section-title is on the role-section token. */
[b-q0l6r9ftzg] .section-title--h3 {
    font-size: var(--meb-blog-font-size-role-subsection);
    font-weight: var(--meb-blog-text-role-subsection-weight);
    line-height: var(--meb-blog-text-role-subsection-lineheight);
}

/* CT-02 T6618 — Section style variant treatment moved to the shared non-scoped
   stylesheet at LiveEventBingo.Shared/wwwroot/css/blog/blog-section-variants.css
   (#7870). That file is loaded by both the public Web surface and the admin
   preview pane, so the variant chrome / background / text / link-color rules
   apply identically wherever a BlogSectionVisual.ResolveSectionCss class string
   lands. Add new variant arms to the shared CSS, not here. */

/* CT-02 T6617 / Frozen Design Contract UI/UX v6 §1B — Image side-by-side placement.
   #7870 follow-up: the .article-section--image-left / --image-right flex layout moved to
   the shared, globally-loaded LiveEventBingo.Shared/wwwroot/css/blog/blog-section-variants.css
   so the admin BlogManager preview renders Left/Right side-by-side identically to this
   public surface. Add new placement rules there, not here (matching the variant-treatment
   rule above). */

/* ── Similar Articles (CT-10 T6585) ─────────────────────────────────────── */
/* #7857: header row holds the heading + optional prev/next nav controls.
   Justify="between" on the Inline primitive owns horizontal distribution. */
[b-q0l6r9ftzg] .similar-articles-header {
    /* Layout structure owned by the Inline primitive — visual tokens only here. */
    width: 100%;
}

/* Carousel nav buttons (SimilarArticlesNavButton). Visible only when sortedRelated.Count > PageSize. */
[b-q0l6r9ftzg] .similar-articles-nav {
    /* §4.1: only position / appearance via tokens. Inline primitive owns spacing. */
    background: var(--meb-blog-surface-related-card-arrow);
    color: var(--meb-blog-text-meta);
    border: var(--meb-border-width-md) solid var(--meb-palette-neutral-black);
    border-radius: var(--meb-radius-full);
    width: var(--meb-space-stack-48);
    height: var(--meb-space-stack-48);
    /* #10827: center the single SVG chevron in the fixed circle, as the round icon pills in
       DesktopGameRow.razor.css do. This places one icon inside one control; it lays out no
       children, so no primitive applies. padding 0 drops the UA's asymmetric 1px 6px. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--meb-space-stack-none);
    cursor: pointer;
    transition: opacity var(--meb-motion-fast), transform var(--meb-motion-fast);
}

    [b-q0l6r9ftzg] .similar-articles-nav:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    [b-q0l6r9ftzg] .similar-articles-nav:disabled {
        cursor: not-allowed;
        opacity: var(--meb-opacity-muted);
    }

[b-q0l6r9ftzg] .similar-articles-heading {
    color: var(--meb-blog-text-heading);
    font-size: var(--meb-blog-font-size-heading);
    font-weight: var(--meb-font-weight-bold);
    margin: var(--meb-space-stack-none);
}

/* .similar-articles-grid — Grid Columns="3" primitive owns column layout */

[b-q0l6r9ftzg] .similar-article-card {
    /* block: grid-item blockification removes need for explicit display */
    text-decoration: none;
    color: inherit;
    border: var(--meb-border-width-sm) solid var(--meb-blog-border-card);
    border-radius: var(--meb-radius-md);
    overflow: hidden; /* §4.1 */
    background: var(--meb-blog-surface-article);
    transition: box-shadow var(--meb-motion-fast);
    position: relative; /* §4.1 — establishes context for date badge absolute positioning */
}

    [b-q0l6r9ftzg] .similar-article-card:hover {
        box-shadow: var(--meb-blog-shadow-card);
    }

/* ── Colour-band variants (ADO #7955 #4 — propagated from CardThemeKey) ──
   Each related-articles card emits `similar-article-card bl-card--<variant>`
   via BlogCardVariantResolver.GetCardColorClass(post), so the post's color
   is the same wherever it appears (listing + carousel). All 6 palette
   variants are reachable; the prior 4-cycle (`% 4`) is retired.
   Per-variant color is restated on .card-tag and .similar-article-title below
   so each variant's --meb-blog-card-{variant}-text token wins over any inherited
   color rule. ADO #8005: coral/sky/pink moved from white to navy text and now
   pass AA against their saturated mid-tone backgrounds; only plum still ships
   white text (passes AA against its dark purple). */
[b-q0l6r9ftzg] .similar-article-card.bl-card--sky   { background: var(--meb-blog-card-sky-background);   color: var(--meb-blog-card-sky-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--coral { background: var(--meb-blog-card-coral-background); color: var(--meb-blog-card-coral-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--mint  { background: var(--meb-blog-card-mint-background);  color: var(--meb-blog-card-mint-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--gold  { background: var(--meb-blog-card-gold-background);  color: var(--meb-blog-card-gold-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--plum  { background: var(--meb-blog-card-plum-background);  color: var(--meb-blog-card-plum-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--pink  { background: var(--meb-blog-card-pink-background);  color: var(--meb-blog-card-pink-text); }

[b-q0l6r9ftzg] .similar-article-card.bl-card--sky   .card-tag,
[b-q0l6r9ftzg] .similar-article-card.bl-card--sky   .similar-article-title { color: var(--meb-blog-card-sky-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--coral .card-tag,
[b-q0l6r9ftzg] .similar-article-card.bl-card--coral .similar-article-title { color: var(--meb-blog-card-coral-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--mint  .card-tag,
[b-q0l6r9ftzg] .similar-article-card.bl-card--mint  .similar-article-title { color: var(--meb-blog-card-mint-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--gold  .card-tag,
[b-q0l6r9ftzg] .similar-article-card.bl-card--gold  .similar-article-title { color: var(--meb-blog-card-gold-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--plum  .card-tag,
[b-q0l6r9ftzg] .similar-article-card.bl-card--plum  .similar-article-title { color: var(--meb-blog-card-plum-text); }
[b-q0l6r9ftzg] .similar-article-card.bl-card--pink  .card-tag,
[b-q0l6r9ftzg] .similar-article-card.bl-card--pink  .similar-article-title { color: var(--meb-blog-card-pink-text); }

/* ── Date badge (top-left overlay) ──────────────────────────────────────── */
/* #7856-B: related-card date pill now uses the dedicated blog-related token
   for the pill background and blog.text.meta for the text — was leaking
   generic surface-card + text-default which mixed unrelated semantic surfaces
   into the blog detail. */
[b-q0l6r9ftzg] .card-date-badge {
    position: absolute; /* §4.1 */
    top: var(--meb-space-stack-sm);
    left: var(--meb-space-inline-sm);
    background: var(--meb-blog-surface-related-card-datepill);
    color: var(--meb-blog-text-meta);
    border-radius: var(--meb-radius-pill);
    padding: var(--meb-space-stack-xxs) var(--meb-space-inline-sm);
    font-size: var(--meb-blog-font-size-caption);
    font-weight: var(--meb-font-weight-semibold);
    z-index: 1; /* §4.1 — sits above the thumb image */
}

/* ── Card body (tag + title) ─────────────────────────────────────────────── */
[b-q0l6r9ftzg] .card-body {
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-12) var(--meb-space-stack-12);
}

/* ── Tag label ───────────────────────────────────────────────────────────── */
[b-q0l6r9ftzg] .card-tag {
    display: block; /* approved exception: makes tag sit on its own line */
    font-size: var(--meb-blog-font-size-caption);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-text-default);
    margin-bottom: var(--meb-space-stack-xs);
    opacity: var(--meb-opacity-soft);
}

[b-q0l6r9ftzg] .similar-article-thumb {
    width: 100%;
    height: auto; /* beats the width/height attrs so aspect-ratio governs the box */
    aspect-ratio: 16 / 9; /* §4.1 */
    object-fit: cover; /* §4.1 */
    display: block; /* approved exception: img gap prevention */
}

[b-q0l6r9ftzg] .similar-article-title {
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-12) var(--meb-space-stack-12);
    font-size: var(--meb-blog-font-size-toc-link);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-blog-text-on-page);
    line-height: var(--meb-blog-lineheight-card-title);
}

/* #10960 narrow desktop (768-1100px): the in-content 728x90 ad units sit inside the main column
   (viewport minus the 240px TOC and gaps). The slot is sized by --ad-width (728px), whose
   min-content made .main-body ~1048px wide and the whole page scroll sideways.
   BlogLayout gives .main-body a definite width (width: 100%), so contain: inline-size only stops
   the column's content from sizing its ancestors upward; the max-width cap
   then keeps the slot (house creative scales via object-fit: contain) inside the column. */
@media (max-width: 1100px) {
    [b-q0l6r9ftzg] .article-main-column {
        contain: inline-size; /* approved exception: column width comes from the Inline, never from its content */
    }

    [b-q0l6r9ftzg] .article-main-column .adsterra-slot,
    [b-q0l6r9ftzg] .article-main-column .gam-ad-container {
        max-width: 100%; /* approved exception: ad slot must never exceed its column */
    }
}
/* _content/LiveEventBingo.Shared/Shared/MobileBlogDetails.razor.rz.scp.css */
/* CT-05/T6637 compliance: all visual values sourced from blog.* and system tokens.
   Layout primitives own structural layout. Only §4.1 properties carry raw values.
   Scoped to .article-root.mobile — replaces global body overrides with root-element scope.
   Approved exceptions noted inline. */

/* ── Page root ─────────────────────────────────────────────────────────── */
.article-root.mobile[b-utrk2rbxsz] {
    background: var(--meb-blog-surface-page);
    color: var(--meb-blog-text-on-page);
    font-family: var(--meb-font-family-primary);
    min-height: 100vh; /* viewport-relative — no token equivalent */
    -webkit-font-smoothing: antialiased;  /* browser hint — CSS keyword, not a raw value */
    -moz-osx-font-smoothing: grayscale;
}

/* ── Hero strip ─────────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .article-hero-container {
    background: var(--meb-blog-surface-hero);
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-md) var(--meb-space-stack-md);
}

/* ── Hero image ─────────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .article-hero {
    width: 100%;
}

[b-utrk2rbxsz] .article-hero picture,
[b-utrk2rbxsz] .article-hero img {
    display: block; /* approved exception: img inline-element gap prevention */
    width: 100%;
    height: auto;
    object-fit: cover; /* §4.1 */
    margin: var(--meb-space-stack-none) auto;
    max-height: 40vh; /* viewport-relative art constraint */
    /* #10983 (U3): mobile-display is 800px wide; 800 x 1.35 / DPR 2 = 540, so cap the painted width at 520px
       (upscale 1.30 at DPR 2, ceiling 540; holds for landscape and square sources, portrait and DPR 3 are #11007). Narrower columns are unchanged; wider mobile-shell screens centre via margin auto. */
    max-width: min(100%, 520px);
    border-radius: var(--meb-radius-10);
}

/* ── Article header ─────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .article-header {
    padding: var(--meb-space-stack-12) var(--meb-space-stack-none) var(--meb-space-stack-md);
    width: 100%;
}

/* ── Back link ──────────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .back-chip {
    font-size: var(--meb-blog-font-size-small);
    color: var(--meb-blog-text-back);
    text-decoration: none;
    opacity: var(--meb-opacity-muted);
    /* #10971: WCAG 2.5.8 24px minimum hit area (44px is advisory); inline-block keeps the text where it was. */
    display: inline-block;
    min-height: 24px;
}

    [b-utrk2rbxsz] .back-chip:hover {
        opacity: 1;
    }

/* ── Article title ──────────────────────────────────────────────────────── */
/* #7855-B: hero role per Frozen Detail v1.2 §5. Family inherits Poppins from BlogLayout. */
[b-utrk2rbxsz] .article-title {
    font-size: var(--meb-blog-font-size-role-hero-mobile);
    font-weight: var(--meb-blog-text-role-hero-weight);
    line-height: var(--meb-blog-text-role-hero-lineheight);
    margin: var(--meb-space-stack-sm) var(--meb-space-stack-none);
    color: var(--meb-blog-text-title);
    text-align: center;
    word-break: break-word; /* CSS keyword — not a raw value */
}

[b-utrk2rbxsz] .article-subtitle {
    font-size: var(--meb-font-size-body-mobile);
    line-height: var(--meb-blog-lineheight-subtitle);
    color: var(--meb-blog-text-subtitle);
    margin-bottom: var(--meb-space-stack-sm);
    text-align: center;
}

/* article-meta is an Inline primitive — only visual tokens here
   #7855-B: meta role per Frozen Detail v1.2 §5. Family inherits Outfit from BlogLayout. */
[b-utrk2rbxsz] .article-meta {
    color: var(--meb-blog-text-meta);
    font-size: var(--meb-blog-font-size-role-meta-mobile);
    font-weight: var(--meb-blog-text-role-meta-weight);
    line-height: var(--meb-blog-text-role-meta-lineheight);
}

/* #7856-B: article-level date pill now uses blog.surface.datepill +
   blog.text.meta per Frozen Detail v1.2 §5 — mirror of the desktop swap. */
[b-utrk2rbxsz] .article-meta .date {
    background: var(--meb-blog-surface-datepill);
    color: var(--meb-blog-text-meta);
    border-radius: var(--meb-radius-pill);
    padding: var(--meb-space-stack-xxs) var(--meb-space-inline-10);
    font-size: var(--meb-blog-font-size-caption);
    font-weight: var(--meb-font-weight-semibold);
}

[b-utrk2rbxsz] .disclaimer-note {
    font-size: var(--meb-blog-font-size-small);
    color: var(--meb-blog-text-back);
    opacity: var(--meb-opacity-muted);
}

    [b-utrk2rbxsz] .disclaimer-note a {
        color: inherit;
    }

/* ── Ad band ────────────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .ad-band {
    padding: var(--meb-space-stack-md) var(--meb-space-stack-none);
}

/* ── Article body ───────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .article-content {
    padding: var(--meb-space-stack-sm) var(--meb-space-stack-none) var(--meb-space-stack-xl);
    color: var(--meb-blog-text-body);
    background: transparent;
}

[b-utrk2rbxsz] .article-section {
    margin: var(--meb-blog-space-section-mobile) var(--meb-space-stack-none);
    width: 100%;
    padding: var(--meb-space-stack-none) var(--meb-space-inline-md);
}

/* ── Section heading ────────────────────────────────────────────────────── */
/* #7855-B: section role per Frozen Detail v1.2 §5. Family inherits Poppins from BlogLayout. */
[b-utrk2rbxsz] .section-title {
    font-size: var(--meb-blog-font-size-role-section-mobile);
    font-weight: var(--meb-blog-text-role-section-weight);
    line-height: var(--meb-blog-text-role-section-lineheight);
    margin: var(--meb-space-stack-xs) var(--meb-space-stack-none) var(--meb-space-stack-sm);
    color: var(--meb-blog-text-section-title);
    word-break: break-word; /* CSS keyword — not a raw value */
    /* left-aligned to match design — removed prior center alignment */
}

/* ── Section figure ─────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .section-figure {
    margin: var(--meb-space-stack-none) var(--meb-space-stack-none) var(--meb-space-stack-sm);
    background: var(--meb-blog-surface-figure-container);
    border: var(--meb-border-width-sm) solid var(--meb-blog-border-figure-container);
    border-radius: var(--meb-radius-10);
    overflow: hidden; /* §4.1 — clips img corners to container radius */
}

/* #10983 (U3): same 520px cap as the hero (800 x 1.35 / DPR 2 = 540). The figure is capped and centred; the border hugs
   landscape images (all 800 wide); portrait images letterbox inside it as before (#11007). Video figures keep their own aspect reservation (blog-section-variants.css). */
[b-utrk2rbxsz] .section-figure:not(.section-video) {
    max-width: min(100%, 520px);
    margin-inline: auto;
}

    [b-utrk2rbxsz] .section-figure img {
        width: 100%;
        height: auto;
        display: block; /* approved exception: img gap prevention */
        max-height: 50vh; /* viewport-relative art constraint */
        object-fit: contain; /* §4.1 */
        margin: var(--meb-space-stack-none) auto;
    }

/* ── Caption ────────────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .caption {
    font-size: var(--meb-blog-font-size-caption);
    color: var(--meb-blog-text-caption);
    margin-top: var(--meb-space-stack-xs);
}

/* ── Section body copy ──────────────────────────────────────────────────── */
/* #7855-B: body role per Frozen Detail v1.2 §5. Family inherits Outfit from BlogLayout.
   color: inherit so per-variant section colour (set on .article-section--{variant})
   flows into the body — see DesktopBlogDetails.razor.css for the rationale. */
[b-utrk2rbxsz] .section-copy {
    font-size: var(--meb-blog-font-size-role-body-mobile);
    font-weight: var(--meb-blog-text-role-body-weight);
    line-height: var(--meb-blog-text-role-body-lineheight);
    color: inherit;
}

/* ── Tags row ───────────────────────────────────────────────────────────── */
[b-utrk2rbxsz] .tags-row {
    padding: var(--meb-space-stack-12) var(--meb-space-stack-none) var(--meb-space-stack-20);
}

    [b-utrk2rbxsz] .tags-row .tag {
        background: var(--meb-blog-surface-tag);
        color: var(--meb-blog-text-tag);
        border: var(--meb-border-width-sm) solid var(--meb-blog-border-tag);
        border-radius: var(--meb-radius-pill);
        padding: var(--meb-space-stack-xxs) var(--meb-space-inline-10);
        font-size: var(--meb-blog-font-size-caption);
    }

/* ── TOC region (CT-02) ─────────────────────────────────────────────────── */
[b-utrk2rbxsz] .article-toc {
    border-left: var(--meb-border-width-lg) solid var(--meb-blog-border-toc);
    padding: var(--meb-space-stack-10) var(--meb-space-inline-14);
    margin: var(--meb-space-stack-md) var(--meb-space-stack-none);
    background: var(--meb-blog-surface-toc);
}

/* #7855-C: TOC heading "Contents" adopts blog.text.role.toc per Frozen Detail v1.2 §5.
   Mobile shell does not render the TOC sidebar today (PB_BLOG_08 asserts the no-sidebar
   contract); rule kept for parity so a future mobile-TOC ship inherits the role typography. */
[b-utrk2rbxsz] .toc-heading {
    font-size: var(--meb-blog-font-size-role-toc-mobile);
    font-weight: var(--meb-blog-text-role-toc-weight);
    line-height: var(--meb-blog-text-role-toc-lineheight);
    text-transform: uppercase;
    letter-spacing: var(--meb-blog-letter-spacing-toc);
    color: var(--meb-blog-text-toc-heading);
    margin: var(--meb-space-stack-none) var(--meb-space-stack-none) var(--meb-space-stack-xs);
}

[b-utrk2rbxsz] .toc-list {
    margin: var(--meb-space-stack-none);
    padding-left: var(--meb-space-inline-md);
}

[b-utrk2rbxsz] .toc-item {
    margin: var(--meb-space-stack-xxs) var(--meb-space-stack-none);
}

[b-utrk2rbxsz] .toc-link {
    font-size: var(--meb-font-size-body-sm-mobile);
    color: var(--meb-blog-text-toc-link);
    text-decoration: none;
}

    [b-utrk2rbxsz] .toc-link:hover {
        text-decoration: underline;
    }

/* CT-02: H3 sub-section heading modifier
   #7855-B: subsection role per Frozen Detail v1.2 §5 — maintains the h2→h3
   size step now that .section-title is on the role-section token. */
[b-utrk2rbxsz] .section-title--h3 {
    font-size: var(--meb-blog-font-size-role-subsection-mobile);
    font-weight: var(--meb-blog-text-role-subsection-weight);
    line-height: var(--meb-blog-text-role-subsection-lineheight);
}

/* CT-02 T6618 / Frozen Blog Detail UI/UX v1.2 §5 — Section style variants.
   All 5 v6 variants (Highlight, Sky, Mint, Coral, Ink) share the same comic-style
   chrome on mobile -- same border / shadow / radius as desktop; only the padding
   is tightened.  Mobile does NOT participate in image-side-by-side layouts: the
   Razor enforces text-first stacking regardless of Left/Right placement, so no
   --image-left / --image-right styles are emitted here. */
/* CT-02 T6618 — Variant treatment moved to the shared non-scoped stylesheet at
   LiveEventBingo.Shared/wwwroot/css/blog/blog-section-variants.css (#7870).
   Mobile padding override is expressed there via a @media (max-width: 767px)
   block that carries the prior tighter --meb-space-stack-12 / --meb-space-inline-md
   sizing. Add new variant arms to the shared CSS, not here. */

/* ── Similar Articles (CT-10 T6585) ─────────────────────────────────────── */
[b-utrk2rbxsz] .similar-articles-heading {
    color: var(--meb-blog-text-heading);
    font-size: var(--meb-blog-font-size-heading);
    font-weight: var(--meb-font-weight-bold);
    margin: var(--meb-space-stack-none);
}

/* .similar-articles-stack — Stack primitive owns vertical column layout */

[b-utrk2rbxsz] .similar-article-card {
    /* block: grid/stack child blockification removes need for explicit display */
    text-decoration: none;
    color: inherit;
    border: var(--meb-border-width-sm) solid var(--meb-blog-border-card);
    border-radius: var(--meb-radius-md);
    overflow: hidden; /* §4.1 */
    background: var(--meb-blog-surface-article);
    padding: var(--meb-space-stack-sm);
}

[b-utrk2rbxsz] .similar-article-thumb {
    width: 100%;
    height: auto; /* beats the width/height attrs so aspect-ratio governs the box */
    aspect-ratio: 16 / 9; /* §4.1 */
    object-fit: cover; /* §4.1 */
    display: block; /* approved exception: img gap prevention */
    border-radius: var(--meb-radius-sm) var(--meb-radius-sm) var(--meb-space-stack-none) var(--meb-space-stack-none);
}

[b-utrk2rbxsz] .similar-article-title {
    font-size: var(--meb-font-size-body-sm-mobile);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-blog-text-on-page);
    line-height: var(--meb-blog-lineheight-card-title);
}

/* ADO #7955 #4 -- per-card color propagated from CardThemeKey via
   BlogCardVariantResolver. Same authority + token set as the listing + desktop
   related-articles. Title color is restated in per-variant selectors below so
   each variant's --meb-blog-card-{variant}-text token wins over inherited rules.
   ADO #8005: coral/sky/pink moved from white to navy text; only plum still
   ships white text (passes AA against its dark purple background). */
[b-utrk2rbxsz] .similar-article-card.bl-card--sky   { background: var(--meb-blog-card-sky-background);   color: var(--meb-blog-card-sky-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--coral { background: var(--meb-blog-card-coral-background); color: var(--meb-blog-card-coral-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--mint  { background: var(--meb-blog-card-mint-background);  color: var(--meb-blog-card-mint-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--gold  { background: var(--meb-blog-card-gold-background);  color: var(--meb-blog-card-gold-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--plum  { background: var(--meb-blog-card-plum-background);  color: var(--meb-blog-card-plum-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--pink  { background: var(--meb-blog-card-pink-background);  color: var(--meb-blog-card-pink-text); }

/* ADO #7987: per-variant restate now covers both .similar-article-title AND .card-tag
   to match the Desktop precedent at DesktopBlogDetails.razor.css:394-405. Previously
   Mobile only restated .similar-article-title, so the carousel's card-tag shipped its
   default colour even on mint / recoloured-gold variants — a parity gap caught by the
   Sonnet Explore pass on this PR. */
[b-utrk2rbxsz] .similar-article-card.bl-card--sky   .card-tag,
[b-utrk2rbxsz] .similar-article-card.bl-card--sky   .similar-article-title { color: var(--meb-blog-card-sky-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--coral .card-tag,
[b-utrk2rbxsz] .similar-article-card.bl-card--coral .similar-article-title { color: var(--meb-blog-card-coral-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--mint  .card-tag,
[b-utrk2rbxsz] .similar-article-card.bl-card--mint  .similar-article-title { color: var(--meb-blog-card-mint-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--gold  .card-tag,
[b-utrk2rbxsz] .similar-article-card.bl-card--gold  .similar-article-title { color: var(--meb-blog-card-gold-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--plum  .card-tag,
[b-utrk2rbxsz] .similar-article-card.bl-card--plum  .similar-article-title { color: var(--meb-blog-card-plum-text); }
[b-utrk2rbxsz] .similar-article-card.bl-card--pink  .card-tag,
[b-utrk2rbxsz] .similar-article-card.bl-card--pink  .similar-article-title { color: var(--meb-blog-card-pink-text); }