/* ============================================================
   JP News (جهينة نيوز) — design4 «الشبكة» (4a square · 4b rounded) — home.css
   The reference's zone model: named zone layouts (wide-centre,
   rail, 7-3, balanced-3, 6-4) made of column stacks, each stack a
   sequence of small containers. Section label = category bar +
   small label. Ads at the zone seams as red placeholders; AD-04
   lives inside a column.
   ============================================================ */

/* ------------------------------------------------------------
   AD SLOTS — linked figure with a desktop-size responsive creative
   ------------------------------------------------------------ */
.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--space-md);
}

.ad-link {
    display: block;
    inline-size: min(100%, var(--ad-max-inline-size, 970px));
    color: inherit;
}

.ad-figure {
    margin: 0;
}

.ad-frame {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--color-ad-bg);
    border: 1px solid var(--color-ad-border);
    color: var(--color-ad-text);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-align: center;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--ad-aspect-ratio, 970 / 250);
    max-inline-size: 100%;
    border-radius: var(--radius-card);
}

.ad-image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.ad-size-d {
    position: absolute;
    inset-block-end: var(--space-sm);
    inset-inline-start: 50%;
    z-index: 1;
    display: block;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-ad-bg);
    border: 1px solid var(--color-ad-border);
    border-radius: var(--radius-card);
    transform: translateX(50%);
}

.ad-caption {
    padding-block-start: var(--space-xs);
    font-family: var(--font-secondary);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: start;
}

.ad-billboard,
.ad-infeed {
    --ad-max-inline-size: 970px;
    --ad-aspect-ratio: 970 / 250;
}

.ad-leaderboard {
    --ad-max-inline-size: 970px;
    --ad-aspect-ratio: 970 / 90;
}

.ad-halfpage {
    --ad-max-inline-size: 300px;
    --ad-aspect-ratio: 300 / 600;
}

/* The band above the header — the reference's dark ad band */
.ad-band {
    background-color: var(--color-band);
    color: var(--color-band-text);
}

/* AD-04 inside a column */
.ad-in-column {
    padding-block: 0;
    align-items: stretch;
}

.ad-in-column .ad-frame {
    margin-inline: auto;
}

/* ------------------------------------------------------------
   «آخر الأخبار» WIRE — the latest-news scroller (2026-09-21),
   in the slot the «الأكثر تداولاً» strip used to hold.
   Adapted from design1a: its .lead-rail sat VERTICALLY beside an
   8-column lead; this slot is a full-width horizontal strip, so
   the rows run inline and the rolling mechanism is the one from
   design1a's ticker. Read as LATEST, not breaking: the label is
   an ink stamp with a clock, every row carries a time, and the
   red is left to the bottom ribbon.
   Motion: transform only, so no layout work per frame.
   ------------------------------------------------------------ */
.latest-wire {
    border-block-end: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.latest-wire-inner {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    min-block-size: 48px;
}

.latest-wire-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    padding-inline: var(--space-md);
    margin-inline-start: calc(-1 * var(--space-md));
    /* the stamp bleeds to the container edge */
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.latest-wire-label .icon-sm {
    flex-shrink: 0;
}

.latest-wire-viewport {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* The roll starts AFTER the web fonts have had their swap window. The
   keyframes translate by a percentage of the track's own width, so a width
   change mid-roll would jump the strip sideways; holding still for the
   first 2s means the swap reflow happens while nothing is moving, and the
   reader gets a beat to read the first headlines before they move. */
.latest-wire-track {
    display: flex;
    inline-size: max-content;
    animation: latest-wire-roll 90s linear 2s infinite;
}

/* 0 → +50%: the duplicate list slides into the first list's starting
   position, so the loop is seamless and the strip is never empty.
   The track glides toward the physical right, which is RTL reading order. */
@keyframes latest-wire-roll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

.latest-wire.is-paused .latest-wire-track,
.latest-wire-viewport:hover .latest-wire-track,
.latest-wire-viewport:focus-within .latest-wire-track {
    animation-play-state: paused;
}

.latest-wire-list {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.latest-wire-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding-inline-end: var(--space-md);
    white-space: nowrap;
}

/* A short rule between stories (client 2026-09-24): with only space between
   them, a time could read as belonging to the story before it. Each item is
   time · headline · rule, so every time sits just after a rule. */
.latest-wire-item::after {
    content: '';
    flex-shrink: 0;
    inline-size: 1px;
    block-size: 16px;
    margin-inline-start: var(--space-md);
    background-color: var(--color-chrome-border);
}

/* The width is PINNED: the digits come from the Latin subset, which is
   not preloaded, so an unpinned time column changes width when the font
   swaps and reflows the whole nowrap row (measured: CLS 0.027 mobile). */
.latest-wire-time {
    flex-shrink: 0;
    /* inline-size: 38px; */
    text-align: start;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.latest-wire-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.latest-wire-link:hover,
.latest-wire-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.latest-wire-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    min-block-size: 44px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    background-color: var(--color-bg);
    /* the rolling rows pass behind it — keep it legible */
    position: relative;
    z-index: 1;
}

.latest-wire-pause:hover {
    color: var(--color-text);
}

.latest-wire-pause .icon-play {
    display: none;
}

.latest-wire.is-paused .icon-pause {
    display: none;
}

.latest-wire.is-paused .icon-play {
    display: block;
}

/* Reduced motion: the wire is STOPPED before a line of JS runs, so a
   reader who asked for less motion never sees it roll. It is stopped
   with animation-play-state, not animation: none, so the pause control
   stays truthful — home.js sets .is-paused to match on load, and a
   reader who then presses play gets the motion they explicitly asked
   for (2.2.2 pause/stop/hide, without lying about the state). */
@media (prefers-reduced-motion: reduce) {
    .latest-wire-track {
        animation-play-state: paused;
    }

    .latest-wire:not(.is-paused) .latest-wire-viewport:not(:hover):not(:focus-within) .latest-wire-track {
        animation-play-state: running;
    }
}

/* ------------------------------------------------------------
   SECTION LABEL — category bar + small label; the label is the link
   ------------------------------------------------------------ */
.section-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-label);
    line-height: 1.3;
    margin-block-end: var(--space-md);
}

.section-label::before {
    content: '';
    inline-size: 4px;
    block-size: 18px;
    background-color: var(--cat, var(--color-accent));
    flex-shrink: 0;
    border-radius: var(--radius-bar, 0);
}

.section-label a {
    display: inline-flex;
    align-items: center;
    /* 44px hit area without changing the label's visual rhythm */
    min-block-size: 44px;
    min-inline-size: 44px;
    margin-block: -8px;
}

.section-label a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* A zone title with a «المزيد» beside it. The link is a SIBLING of the
   heading, never inside it — inside, its text joins the accessible name
   and the heading stops being the section name. */
.section-label-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

.section-label-row .section-label {
    margin-block-end: 0;
}

/* «المزيد» — pushed to the inline end of the label row */
.section-more {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 44px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
}

.section-more:hover,
.section-more:focus-visible {
    color: var(--cat, var(--color-text));
    text-decoration: underline;
    text-underline-offset: 4px;
}

.section-more .icon-directional {
    transform: rotate(90deg);
    /* chevron-down reused as a back-pointing caret in RTL */
}

/* Sub-block heading inside a zone (the three «مواقف وآراء» subcategories,
   2026-09-21). One step under .section-label: same category keyline, a
   hairline under it so three columns read as three separate blocks. */
.section-sub {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: 1.3;
    padding-block-end: var(--space-sm);
    margin-block-end: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
}

.section-sub::before {
    content: '';
    inline-size: 4px;
    block-size: 14px;
    background-color: var(--cat, var(--color-accent));
    flex-shrink: 0;
    border-radius: var(--radius-bar, 0);
}

.section-sub a:hover,
.section-sub a:focus-visible {
    color: var(--cat, var(--color-link-hover));
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* One author owns the whole block («كتبته رئيسة التحرير»), so the portrait
   belongs to the block, not to each card */
.author-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block-end: var(--space-sm);
}

.author-head-portrait {
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-head-text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.author-head-role {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* The rows under an author head carry no portrait of their own.
   Two classes so the rule wins on specificity, not on source order —
   .thumb-link is defined further down this file. */
.thumb-link.thumb-link-plain {
    grid-template-columns: minmax(0, 1fr);
}

/* Large title for the dark band */
.section-title {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-xl);
    line-height: 1.3;
    margin-block-end: var(--space-md);
}

/* ------------------------------------------------------------
   ZONES + NAMED LAYOUTS
   ------------------------------------------------------------ */
.zone {
    padding-block: var(--space-lg);
}

.zone-grid {
    display: grid;
    gap: var(--zone-gap);
    align-items: start;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-inline-size: 0;
}

.stack-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-inline-size: 0;
}

.cluster {
    min-inline-size: 0;
}

/* Mobile-first: everything single column; the lead stack is first
   in the DOM so it is first on a phone */

/* ------------------------------------------------------------
   CARD SPECIES
   ------------------------------------------------------------ */
.card-media {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-media, var(--radius-card));
    /* large media: its own token (4b 16px); thumbs keep --radius-card */
}

.card-media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.ratio-16x9 {
    aspect-ratio: 16 / 9;
}

.ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.ratio-3x2 {
    aspect-ratio: 3 / 2;
}

.ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.card-link {
    display: block;
    min-inline-size: 0;
}

.card-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-card);
    line-height: 1.4;
    margin-block-start: var(--space-sm);
}

.card-lg .card-title {
    font-size: var(--fs-card-lg);
    font-weight: 800;
}

/* Every headline is Almarai (client 2026-09-24: «headlines in two fonts» read as
   inconsistent) — the small cards, thumb rows, hairline rows and the wire used
   IBM Plex 500. Plex stays for body, deks and meta. */
.card-sm .card-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-thumb);
    line-height: 1.55;
}

.card-link:hover .card-title,
.card-link:focus-visible .card-title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.card-dek {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-block-start: var(--space-xs);
}

/* Kickers */
.kicker {
    display: block;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    line-height: 1.4;
    margin-block-end: 2px;
}

.kicker-urgent {
    color: var(--color-accent);
}

.kicker-cat {
    color: var(--cat, var(--color-text));
}

.kicker-pill {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding-inline: 10px;
    border-radius: var(--radius-chip);
    background-color: var(--color-pill-bg);
    color: var(--color-pill-text);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-xs);
    line-height: 1;
}

/* ------------------------------------------------------------
   «خاص بجهينة نيوز» BADGE (2026-09-21) — the ONE badge on the
   page. Selection is carried by data-exclusive="true" on the
   <article>, so it is greppable; this rule only dresses it.
   ONE position everywhere: the top inline-start corner of the
   media on any card that has an image, inline with the kicker
   line on a text-only card. It never shares that corner —
   the decorative «تحليل» float pill that used to live there
   was removed by the same pass.
   ------------------------------------------------------------ */
.badge-exclusive {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding-inline: 10px;
    border-radius: var(--radius-chip);
    background-color: var(--color-badge-exclusive);
    color: var(--color-badge-exclusive-text);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    /* never below the meta step */
    line-height: 1;
    white-space: nowrap;
}

/* On a card with media: the top inline-start corner, same 12px offset
   on every card type. Sits above the scrim, clear of .overlay-text
   (which is anchored to the bottom) and of the category kicker. */
.card-media>.badge-exclusive,
.thumb-media>.badge-exclusive {
    position: absolute;
    z-index: 2;
    inset-inline-start: 12px;
    inset-block-start: 12px;
}

/* On a text-only row the badge rides the kicker line instead */
.headline-row>.badge-exclusive,
.thumb-body>.badge-exclusive {
    margin-block-end: var(--space-xs);
}

/* Overlay card — white text on a bottom scrim, short rule above */
.card-overlay .card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--scrim-full) 0%, var(--scrim-full) 38%, var(--scrim-soft) 72%);
}

.overlay-text {
    position: absolute;
    z-index: 1;
    inset-inline: var(--space-md);
    inset-block-end: var(--space-md);
    color: var(--color-text-inverse);
}

.overlay-rule {
    inline-size: 28px;
    block-size: 3px;
    background-color: var(--color-text-inverse);
    margin-block-end: var(--space-sm);
    border-radius: var(--radius-bar, 0);
}

.overlay-title {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-feature);
    line-height: 1.35;
}

.card-overlay .kicker-pill {
    margin-block-end: var(--space-sm);
}

.card-overlay .card-link:hover .overlay-title,
.card-overlay .card-link:focus-visible .overlay-title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.card-credit {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-align: end;
    margin-block-start: var(--space-xs);
}

/* Text-first lead headline — 32px cap (2026-09-03). Hierarchy is carried
   by the category bar above it, the surrounding air and the extra-bold
   weight, not by size alone */
.lead-headline {
    text-align: center;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-lead);
    line-height: 1.25;
    padding-inline: var(--space-sm);
    padding-block: var(--space-sm) var(--space-md);
}

.lead-headline::before {
    content: '';
    display: block;
    inline-size: 56px;
    block-size: 4px;
    margin-block-end: var(--space-sm);
    margin-inline: auto;
    background-color: var(--cat, var(--color-accent));
    border-radius: var(--radius-bar, 0);
}

.lead-headline a:hover,
.lead-headline a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* Single headline line under the overlay card */
.headline-single {
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--color-border);
}

/* Hairline headline list */
.headline-list {
    display: flex;
    flex-direction: column;
}

.headline-list>li+li {
    border-block-start: 1px solid var(--color-border);
}

.headline-row {
    display: block;
    padding-block: 10px;
    min-block-size: 44px;
}

.headline-text {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--fs-list);
    font-weight: 700;
    line-height: 1.6;
}

.headline-row:hover .headline-text,
.headline-row:focus-visible .headline-text {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.headline-source {
    display: block;
    font-family: var(--font-secondary);
    /* meta — it sits inside .headline-text on ranked rows */
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-block-start: 2px;
}

/* Thumb rows */
.thumb-list {
    display: flex;
    flex-direction: column;
}

.thumb-row+.thumb-row,
.thumb-list>li+li {
    border-block-start: 1px solid var(--color-border);
}

.thumb-link {
    display: grid;
    grid-template-columns: var(--thumb-w, 100px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    padding-block: 10px;
    min-block-size: 44px;
}

.thumb-media {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-card);
}

.thumb-media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.thumb-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-thumb);
    line-height: 1.55;
}

.thumb-link:hover .thumb-title,
.thumb-link:focus-visible .thumb-title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.thumb-meta {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-block-start: 2px;
}

/* Two-up small cards inside a stack */
.two-up {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

/* Facts panel */
.facts-panel {
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-card);
    padding: var(--space-md);
    display: grid;
    gap: var(--space-xs);
}

.facts-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-block-end: var(--space-xs);
}

.fact {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-sm);
    min-block-size: 28px;
}

.fact .icon-sm {
    color: var(--color-text-muted);
}

/* Portrait thumb rows (opinion) */
.portrait-row .thumb-link {
    grid-template-columns: 64px minmax(0, 1fr);
}

.portrait-row .thumb-media {
    border-radius: 50%;
}

.byline {
    display: block;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-meta);
    color: var(--cat, var(--color-text));
    margin-block-end: 2px;
}

/* ------------------------------------------------------------
   «فيديو» GALLERY (2026-09-24) — in the 6-of-10 column that
   «منبر جهينة» held, beside «اختيارات القراء», with the same
   ad slots above (AD-03) and below (AD-05).
   Six cards, and the column count always divides six:
   1 below 576 · 2 at 576–1199 · 3 from 1200.
   Three columns wait for 1200 because the badge card must keep
   the «خاص بجهينة نيوز» chip (top inline-start, 12px + 24px)
   clear of the centred play disc: that needs a poster ≥ 199px
   wide with a 32px disc, and three columns at 992–1199 give
   171–206px.
   A STILL and a LINK: no <iframe>, no <video>, no autoplay, no
   hover preview. The player belongs on the video page.
   ------------------------------------------------------------ */

/* A content type, not a category — the label bar and «المزيد»
   hover take ink, never one of the ten category colours (and
   never the news red, which is reserved for breaking). Each card
   sets its own --cat, so its kicker keeps its category colour. */
.section-video {
    --cat: var(--color-text);
}

.video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.card-video .card-link {
    display: flex;
    flex-direction: column;
    block-size: 100%;
}

/* Full title stays in the DOM; three lines on screen at most */
.card-video .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Play disc. Centred by inset: 0 + margin: auto, which needs no
   translate and therefore nothing to mirror in RTL. The glyph is
   deliberately NOT .icon-directional — transport controls are
   never mirrored, so it points the same way in RTL as in LTR.
   Plate + white edge: on a light poster the plate is the contrast,
   on a dark one the edge is; the glyph on the plate is 19.5:1. */
.video-play {
    position: absolute;
    z-index: 1;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background-color: var(--color-video-plate);
    color: var(--color-video-ink);
    box-shadow: 0 0 0 2px var(--color-video-edge);
    pointer-events: none;
}

.video-play .icon {
    inline-size: 22px;
    block-size: 22px;
}

/* Hover / keyboard focus: the edge thickens — no motion, no colour
   that could be mistaken for a category */
.card-video .card-link:hover .video-play,
.card-video .card-link:focus-visible .video-play {
    box-shadow: 0 0 0 4px var(--color-video-edge);
}

/* Duration — functional metadata, exempt from the badge ruling.
   Bottom inline-end corner on every card: diagonal from the
   badge's top inline-start corner, so the two never meet. */
.video-duration {
    position: absolute;
    z-index: 1;
    inset-inline-end: 12px;
    inset-block-end: 12px;
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding-inline: 8px;
    border-radius: var(--radius-btn);
    background-color: var(--color-video-plate);
    color: var(--color-video-ink);
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

@media (min-width: 576px) {
    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-play {
        inline-size: 32px;
        block-size: 32px;
    }

    .video-play .icon {
        inline-size: 16px;
        block-size: 16px;
    }
}

@media (min-width: 1200px) {
    .video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .video-play {
        inline-size: 36px;
        block-size: 36px;
    }

    .video-play .icon {
        inline-size: 18px;
        block-size: 18px;
    }
}

/* ------------------------------------------------------------
   grid-3 + READERS panel
   ------------------------------------------------------------ */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.readers-panel {
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-card);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.readers-panel .section-label {
    margin-block-end: var(--space-xs);
}

.ranked-list {
    display: flex;
    flex-direction: column;
    counter-reset: rank;
}

.ranked-list>li+li {
    border-block-start: 1px solid var(--color-border);
}

.ranked-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: start;
    padding-block: var(--space-sm);
    min-block-size: 44px;
    counter-increment: rank;
}

.ranked-row::before {
    content: counter(rank);
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-xl);
    line-height: 1.1;
    color: var(--color-text-muted);
    direction: ltr;
}

.ranked-row:hover .headline-text,
.ranked-row:focus-visible .headline-text {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ranked-row .headline-text {
    font-size: var(--fs-thumb);
    line-height: 1.55;
}

/* ------------------------------------------------------------
   DARK ZONE — «المزيد من جهينة»: components re-tokened locally
   ------------------------------------------------------------ */
.zone-dark {
    --color-text: var(--color-band-text);
    --color-text-muted: var(--color-band-muted);
    --color-border: var(--color-band-border);
    --color-link-hover: var(--color-text-inverse);
    --color-bg-alt: var(--color-band-border);
    --color-focus: var(--color-band-text);
    background-color: var(--color-band);
    color: var(--color-band-text);
    padding-block: var(--space-xl) var(--space-lg);
    margin-block-start: var(--space-lg);
}

.zone-dark .kicker-cat {
    color: var(--color-band-muted);
}

.zone-dark .section-title {
    margin-block-end: var(--space-lg);
}

.zone-dark .card-title {
    font-size: var(--fs-card-lg);
    font-weight: 800;
}

/* ------------------------------------------------------------
   BREAKPOINTS — mobile first
   ------------------------------------------------------------ */
@media (min-width: 576px) {

    .zone-grid-wide-centre,
    .zone-grid-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zone-grid-wide-centre>.stack-centre,
    .zone-grid-rail>.stack-centre {
        grid-column: 1 / -1;
    }

    .zone-grid-7-3 {
        grid-template-columns: 1fr;
    }

    .zone-grid-7-3>.col-3 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--zone-gap);
    }

    .zone-grid-balanced-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zone-grid-balanced-3>.cluster:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .zone-grid-balanced-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zone-grid-balanced-3>.cluster:nth-child(3) {
        grid-column: auto;
    }

    .zone-grid-6-4 {
        grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    }
}

@media (min-width: 992px) {
    :root {
        --col-side: 250px;
    }

    .zone-grid-wide-centre {
        grid-template-columns: var(--col-side) minmax(0, 1fr) var(--col-side);
    }

    .zone-grid-rail {
        grid-template-columns: var(--col-side) minmax(0, 1fr) var(--col-rail);
    }

    .zone-grid-wide-centre>.stack-centre,
    .zone-grid-rail>.stack-centre {
        grid-column: 2;
        grid-row: 1;
    }

    .zone-grid-wide-centre>.stack-start,
    .zone-grid-rail>.stack-start {
        grid-column: 1;
        grid-row: 1;
    }

    .zone-grid-wide-centre>.stack-end,
    .zone-grid-rail>.stack-end {
        grid-column: 3;
        grid-row: 1;
    }

    .zone-grid-7-3 {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    }

    .zone-grid-7-3>.col-3 {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .ad-in-column {
        position: sticky;
        inset-block-start: calc(var(--header-height) + var(--space-md));
    }

}

@media (min-width: 1200px) {
    :root {
        --col-side: 300px;
    }

    .stack-centre {
        --thumb-w: 120px;
    }
}

@media (min-width: 1440px) {
    :root {
        --col-side: 324px;
    }
}


@media (max-width: 575px) {
    .zone {
        padding-block: var(--space-md);
    }

    .two-up {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-3 .card-link {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        gap: var(--space-md);
        align-items: start;
    }

    .grid-3 .card-title {
        margin-block-start: 0;
    }

    /* thumb-sized media takes the thumb radius */
    .grid-3 .card-media,
    .three-up .card-media {
        border-radius: var(--radius-card);
    }

    .lead-headline {
        text-align: start;
        padding-inline: 0;
    }

    .lead-headline::before {
        margin-inline: 0;
    }
}

/* ------------------------------------------------------------
   SMALL PIECES the scaffold did not need
   ------------------------------------------------------------ */
.three-up {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.card-kicker {
    margin-block-start: var(--space-sm);
    margin-block-end: 0;
}

.card-kicker+.card-title {
    margin-block-start: 2px;
}

.card-time {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-block-start: var(--space-xs);
}

.thumb-body {
    display: block;
    min-inline-size: 0;
}

.thumb-media {
    display: block;
}

.readers-sub {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.readers-sub .icon-sm {
    color: var(--color-text-muted);
}

.zone-dark .section-title a:hover,
.zone-dark .section-title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 6px;
}

@media (max-width: 575px) {
    .three-up {
        grid-template-columns: 1fr;
    }

    .three-up .card-link {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
        align-items: start;
    }

    .three-up .card-title,
    .three-up .card-kicker {
        margin-block-start: 0;
    }
}

.survey-popup {
    position: fixed;
    inset: 0;
    margin: auto;
    inline-size: min(550px, calc(100% - 32px));
    max-inline-size: none;
    block-size: fit-content;
    max-block-size: calc(100% - 32px);
    overflow: auto;
    padding: clamp(28px, 6vw, 40px);
    border: 1px solid var(--color-border);
    border-block-start: 4px solid var(--color-accent);
    border-radius: var(--radius-card, 12px);
    color: var(--color-text);
    background: var(--color-bg);
    box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
    text-align: center;
    font-family: var(--font-primary);
}

.survey-popup::backdrop {
    background: rgb(13 17 22 / 68%);
    backdrop-filter: blur(3px);
}

.survey-popup[open] {
    animation: survey-popup-enter 220ms ease-out both;
}

.survey-popup-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    display: grid;
    inline-size: 40px;
    block-size: 40px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--color-text-muted);
    background: transparent;
    cursor: pointer;
}

.survey-popup-close:hover,
.survey-popup-close:focus-visible {
    color: var(--color-text);
    background: var(--color-bg-alt);
}

.survey-popup-close svg {
    inline-size: 20px;
    block-size: 20px;
}

.survey-popup-eyebrow {
    display: inline-block;
    margin-block-end: var(--space-sm);
    color: var(--color-accent);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.survey-popup-title {
    margin: 0;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.45;
}

.survey-popup-description {
    margin: var(--space-sm) 0 var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--fs-md);
    line-height: 1.8;
}

.survey-popup-action {
    display: inline-flex;
    min-inline-size: 150px;
    min-block-size: 48px;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: var(--radius-button, 6px);
    color: var(--color-text-inverse);
    background: var(--color-accent-fill);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, transform 160ms ease;
}

.survey-popup-action:hover,
.survey-popup-action:focus-visible {
    background: var(--color-accent-fill-hover);
    transform: translateY(-1px);
}

.survey-popup :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

@keyframes survey-popup-enter {
    from {
        opacity: 0;
        scale: .98;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .survey-popup[open],
    .survey-popup-action {
        animation: none;
        transition: none;
    }
}