/* ============================================================
   RESPONSIVE.CSS: ARI v2 Theme
   ============================================================
   All breakpoint / @media rules for the theme, extracted from
   components.css.  This file is enqueued AFTER components.css
   (depends on ari-v2-components) so cascade order is preserved.

   Breakpoints are ordered largest → smallest:
     1920px → 1600px → 1100px → 1024px → 1023px → 980px → 960px
     → 900px → 860px → 768px → 767px → 700px → 680px → 640px
     → 600px → 540px → 520px → 480px → 420px
   ============================================================ */


/* ============================================================
   Extra-large screens (≥1600px)
   Widens the shared container and rebalances section grids so
   content doesn't look stretched/empty on very wide viewports.
   ============================================================ */

@media (min-width: 1600px) {
  :root {
    --ari-max-width: 1480px;
  }

  /* Section rhythm: a bit more breathing room between sections */
  .home-section { padding: clamp(3rem, 6vw, 7rem) 0; }

  /* Student Prize winners: horizontal cards read poorly at full container width */
  .sprize-winners > .u-container { max-width: 1240px; margin-inline: auto; }
  /* Block version: the panel keeps the page width, only the list is capped. */
  .ari-prize-winners .sprize-winners-list { max-width: 1240px; }

  /* Publications: feature card gets more weight over the list */
  .pub2-layout { grid-template-columns: 2.4fr 1fr; gap: 1.5rem; }

  /* Events & podcasts: more generous gaps, cap card width so
     individual cards don't become oversized */
  .events-grid { gap: 2.5rem; }
  .pcast-grid { gap: 1.75rem; max-width: 1500px; }
  .pcast-grid .pcast-card { max-width: 480px; width: 100%; }

  /* Videos: give the main video real cinematic presence */
  .videos-layout { grid-template-columns: 5fr 2fr; gap: 2.5rem; }
  /* ...but the 5fr column times a 1480px container makes the 4:3 thumbnail's
     aspect-ratio-driven height balloon far past the two-item stack beside
     it, leaving a large empty gap under the stack (same class of problem
     as the map below). Cap the box height instead of letting aspect-ratio
     dictate it here: .video-play-btn__thumb already uses object-fit:cover,
     so it just crops a bit tighter rather than distorting. */
  .video-featured__thumb-wrap { max-height: min(56vh, 560px); }


  /* MENA map: more headroom for the interactive map + related panel.
     Width-driven sizing makes the map taller than the viewport on very wide
     screens. From here up, cap the wrapper height and lock it to the SVG ratio
     (viewBox 193:108) with aspect-ratio, so the box shrinks on both axes
     instead of leaving a small map floating in a mostly empty bar
     (margin-inline:auto re-centers the narrower box). */
  .country-map {
    margin-top: 3rem;
    margin-inline: auto;
    aspect-ratio: 193 / 108;
    max-height: min(74vh, 820px);
  }
  .mena-map-svg { width: 100%; height: 100%; }

}

/* ============================================================
   min-width: 1350px; Mega-menu XL column expansion
   Prevents multi-row overflow when viewport > ~1300px:
   programs bumps to 5 columns (5 items → 1 row),
   topics bumps to 6 columns (12 items → 2 rows).
   ============================================================ */
@media (min-width: 1350px) {
  .programs-mega__grid { grid-template-columns: repeat(5, 1fr); }
  .topics-mega__grid   { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Desktop header utility cluster: search and language links read as one
   compact control instead of separate elements floating in the brand row. */
@media (min-width: 981px) {
  .header-actions {
    gap: 0.5rem;
    padding-block: 0.25rem;
    padding-inline: 0.25rem 0.45rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0;
    background: rgba(255,255,255,0.025);
  }
  .header-search-trigger {
    width: 2.25rem;
    height: 2.25rem;
    border-color: transparent;
    background: rgba(255,255,255,0.045);
  }
  .header-actions__sep {
    height: 1rem;
    margin-inline: 0.1rem;
    background: rgba(255,255,255,0.14);
  }
  .lang-switch__list li { margin-inline-start: 0.65rem; }
  .lang-switch__link {
    padding-block: 0.35rem;
    color: rgba(255,255,255,0.68);
  }
}

@media (min-width: 1920px) {
  :root {
    --ari-max-width: 1600px;
  }

  /* 4K/ultra-wide: tighten the cap further so the map doesn't dominate the
     viewport even though there's plenty of width to spare. */
  .country-map { max-height: min(68vh, 760px); }
  .video-featured__thumb-wrap { max-height: min(50vh, 520px); }
}


/* ============================================================
   Global overflow containment (mobile)
   Prevents any element from creating a horizontal scroll or
   causing content to bleed past the viewport edge on drag.
   Intentional horizontal scrollers (.events-grid, .pcast-grid,
   .pub2-layout, .videos-layout, .ep-slider__track) opt back in
   via their own overflow-x: auto rules below.
   ============================================================ */

@media (max-width: 980px) {
  /* Hard-cap every element's width to the viewport.
     Use 100% (not 100vw) so elements are constrained to their containing block
     rather than the raw viewport width, which includes the scrollbar gutter on
     Android/desktop browsers and would allow elements to be ~15px wider than
     the visible area. Full-bleed sections (hero, newsletter) opt back in below. */
  *,
  *::before,
  *::after {
    max-width: 100%;
  }

  /* Full-bleed wrappers span the viewport, not just their parent */
  .home-hero,
  .newsletter-section,
  .site-header,
  .primary-menu-drawer {
    max-width: 100vw;
  }

  /* Fixed overlays: position:fixed takes them out of flow, so the universal
     max-width:100% rule above does not apply. Cap them with left/right anchors
     rather than width:100vw, which can exceed the visual viewport on RTL mobile
     browsers and cause physical-right overflow that overflow-x:clip does not
     contain for fixed elements. Both already have position:fixed; inset:0 in
     components.css, so left:0 + right:0 + width:auto gives exactly the viewport
     width. */
  .site-overlay,
  .header-search-overlay {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    max-height: 100vh;
    overflow: hidden;
    height: 100vh;
  }

  /* Flex/grid children must shrink rather than overflow their track */
  .shell,
  .u-container,
  .site-header,
  .site-header__brand-inner,
  .site-header__nav-row,
  .site-main,
  .footer-grid,
  [class*="-layout"],
  [class*="-grid"],
  [class*="-inner"],
  [class*="-wrap"] {
    min-width: 0;
  }

  /* Section heading must shrink below its longest word so the flex row
     never overflows the container (the see-all link has flex-shrink:0). */
  .home-section__title { min-width: 0; }

  /* Images and embeds must never exceed their container */
  img,
  video,
  iframe,
  embed,
  object,
  svg {
    max-width: 100%;
    height: auto;
  }

  /* Re-allow overflow on intentional horizontal scroll containers.
     overscroll-behavior-x: contain stops the swipe passing to the page at the
     scroll boundary (the main iOS drag-bleed cause).
     .events-grid and .pub2-layout are still plain grids at this breakpoint;
     they get overflow-x:auto only in the ≤640px block below, where they become
     flex carousels. Applying it here made browsers use max-content sizing and
     widen them past the viewport. */
  .pcast-grid,
  .videos-layout,
  .ep-slider__track {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* Episode slider viewport must clip its track */
  .ep-slider__viewport { overflow: hidden; }

  /* Audio bar episode dropdown: cap width so it can't bleed off-screen */
  .hap-ep-list {
    width: min(320px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }

  /* Hero nav: on mobile swipe handles navigation: show dots, hide desktop controls */
  .hero-dot    { opacity: 1; }
  .hero-arrow  { display: none; }
  .hero-counter { display: none; }

  /* ── Section-level containment ──────────────────────────────────────────
     Homepage sections (stats/map, publications, events, podcasts, videos) have
     no overflow clipping, so an element slightly wider than the viewport would
     bleed into the body scroll area. overflow-x: clip, unlike hidden, creates
     no scroll container, so iOS has nothing to rubber-band into. Nested
     scrollers (.events-grid etc.) manage their own overflow-x: auto.
     .home-hero and .newsletter-section already have overflow:hidden and are
     excluded.
     overflow-x: hidden is declared first as a fallback for Safari < 16, which
     does not recognise 'clip'. */
  .home-section,
  .home-section--surface,
  .home-section--dark {
    overflow-x: hidden; /* Safari < 16 fallback */
    overflow-x: clip;   /* preferred: no scroll container created */
  }
}


/* ============================================================
   max-width: 1100px
   ============================================================ */

/* Programs archive */
@media (max-width: 1100px) {
  .prog-arc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* Programs archive: projects note, text and link on one row on wide screens */
@media (min-width: 1200px) {
  .prog-cross-cutting--top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .prog-cross-cutting--top .prog-cross-cutting__link {
    margin-top: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Program single */
@media (max-width: 1100px) {
  .prog-layout { grid-template-columns: 1fr 280px; gap: 2rem; }
  .prog-layout--full { grid-template-columns: 1fr; }
}

/* About Us page */
@media (max-width: 1100px) {
  .about-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-partners-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Topics landing page (grid already 4-col at desktop; no change needed at 1100px) */

/* Student Prize page (winners list is a flex column, no grid override needed) */


/* ============================================================
   max-width: 1024px
   ============================================================ */

/* Footer: single stacked column from here down. A 2-col grid left
   .footer-col--nav (Menu) alone in the first column with an empty second track
   beside it (dead space on the right on iPad). */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Menu column's 2-column list stays 2 columns down to phone widths (per the
   2026-09 footer redesign mockup), not just tablet: .footer-col--menu has
   the full-width .footer-grid track to itself from 1024px down (see above),
   so there's enough room even at narrow phone widths. */


/* ============================================================
   max-width: 1023px
   ============================================================ */

/* Programs archive */
@media (max-width: 1023px) {
  .prog-arc-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* Publications archive */
@media (max-width: 1023px) {
  .pub-arc-grid { grid-template-columns: repeat(2, 1fr); }
  .pub-archive__header-inner { grid-template-columns: 1fr; gap: 1rem; }
}

/* Press Room */
@media (max-width: 1023px) {
  .media-cov-grid,
  .media-cov-archive .media-cov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-cov-filters {
    grid-template-columns: 1fr auto;
  }
  .media-cov-filters__types {
    grid-column: 1 / -1;
  }
  .press-gallery__page--count-7 {
    aspect-ratio: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, clamp(130px, 18vw, 175px));
    grid-auto-rows: clamp(130px, 18vw, 175px);
  }
  .press-gallery__page--count-7 .press-gallery__item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
  .press-gallery__page--count-7 .press-gallery__item:nth-child(1),
  .press-gallery__page--count-7 .press-gallery__item:nth-child(7) { grid-column: span 2; }
}

/* Publication single */
@media (max-width: 1023px) {
  .pub-layout { grid-template-columns: 1fr 260px; gap: 2rem; }
  /* Listen card in the narrow 260px sidebar. */
  .ari-listen { padding-inline: 0.85rem; }
  .ari-listen__play { width: 2.9rem; height: 2.9rem; }
  .ari-listen__controls { gap: 0.3rem; }
  .ari-listen__pill { padding-inline: 0.55rem; }
  .ari-listen__divider { display: none; }
}

/* Podcast series archive */
@media (max-width: 1023px) {
  /* 2-col tablet, portrait cards still look great */
  .pcast-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .pcast-player__inner { grid-template-columns: 1fr; }
  .pcast-player__divider { display: none; }
  .pcast-player__episode-col { min-width: 0; }
  .pcast-desc__inner { grid-template-columns: 1fr; }
  /* Episode slider: slightly narrower cards on tablet */
  .ep-slider__item { flex: 0 0 280px; width: 280px; }
  /* Always show arrows on touch devices (no hover) */
  .ep-slider-btn { opacity: 1; pointer-events: auto; }
}

/* Event single */
@media (max-width: 1023px) {
  /* On tablet: sidebar moves below the main column */
  .ev-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ev-sidebar { position: static; }

  /* Info card: date block stays horizontal, with the tablet-down padding kept
     proportional to the roomier desktop value (1.5rem). */
  .ev-info-card__date-block { padding: 1.25rem; gap: 1rem; }
  .ev-info-card__date-cal   { width: 56px; min-height: 64px; }
  .ev-info-card__date-day   { font-size: 1.7rem; }
}

@media (max-width: 767px) {
  .ev-single { padding: 1.5rem 0 3rem; }
  .ev-title   { font-size: 1.5rem; margin-bottom: 1.25rem; }

  /* Person card: smaller avatar on tablet */
  .ev-person-card__avatar-wrap { width: 60px; height: 60px; }

  /* Description collapsed height slightly shorter on mobile */
  .ev-description-wrap.is-collapsed .ev-description-content { max-height: 160px; }

  /* Info card rows slightly tighter */
  .ev-info-card__row { padding: 0.6rem 1rem; }
  .ev-info-card__register-btn { padding: 0.8rem 1rem; }
  .ev-info-card__partners { padding: 0 1rem 0.9rem; }
  .ev-info-card__partners-label { padding: 0.65rem 1rem 0.3rem; }
  .ev-info-card__types { padding: 0.75rem 1rem; }

  /* Single-event tabs: tighter on mobile */
  .ev-stab-nav__btn { font-size: 0.84rem; padding-block: 0.8rem; padding-inline-end: 1.25rem; }
  .ev-stab-nav__btn + .ev-stab-nav__btn { padding-inline-start: 1.25rem; }
  .ev-stab-panels { padding-top: 1.4rem; }
}

/* Person grid: collapse to single column on small phones */
@media (max-width: 540px) {
  .ev-person-list { grid-template-columns: 1fr; }
  .ev-person-card { padding: 1rem; }
  .ev-person-card__avatar-wrap { width: 56px; height: 56px; margin-bottom: 0.75rem; }
}

@media (max-width: 479px) {
  /* Single-event tabs: stretch across full width on small phones */
  .ev-stab-nav__btn {
    flex: 1;
    justify-content: center;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
    gap: 0.3rem;
  }
  .ev-stab-nav__btn + .ev-stab-nav__btn { padding-inline-start: 0.5rem; }
}

/* Events archive */
@media (max-width: 1023px) {
  .ev-header__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .ev-upcoming-grid { grid-template-columns: repeat(2, 1fr); }
  .ev-past-grid     { grid-template-columns: repeat(2, 1fr); }
  .ev-tab { padding: 0.875rem 1.1rem; font-size: 0.84rem; }
}

/* Experts / People archive */
@media (max-width: 1023px) {
  .experts-header__inner  { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 900px) {
  .people-experts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .people-experts-grid    { grid-template-columns: 1fr; }
  .expert-card--lg        { padding: 1rem 0.5rem; gap: 1rem; }
  .expert-card--lg .expert-card__avatar-wrap { width: 64px; height: 64px; }
  .expert-card--lg .expert-card__name       { font-size: 1rem; }
  .expert-card--lg .expert-card__occupation { font-size: 0.82rem; }
}

/* Single Expert / People */
@media (max-width: 1023px) {
  .people-intro { grid-template-columns: auto 1fr; }
  .people-intro__social { grid-column: 1 / -1; }
  .people-contribs-grid { grid-template-columns: repeat(2, 1fr); }
  .people-video-slide { flex: 0 0 calc(50% - 0.625rem); }
  .pv-arrow--prev { left: 0.25rem; }
  .pv-arrow--next { right: 0.25rem; }
}

/* Write with ARI */
@media (max-width: 1023px) {
  .wwa-split         { grid-template-columns: 1fr; }
  .wwa-resource-grid { grid-template-columns: 1fr; }
}

/* Video archive */
@media (max-width: 1023px) {
  .vid-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   max-width: 980px
   ============================================================ */

/* Header / global layout */
@media (max-width: 980px) {
  /* Hamburger is visible: hide nav row entirely so we never have both */
  .site-header__utility { display: none; }
  .site-header__nav-row { display: none; }
  .header-newsletter-cta { display: none; }
  /* Explicitly keep the brand row and hamburger visible on mobile */
  .site-header__brand-row { display: block; }
  .header-menu-toggle { display: inline-flex; }
  .site-header__brand-inner { min-height: 70px; }
  .site-brand__logo { height: 36px; }
  /* Lockup shrinks before the search / language / menu buttons are pushed off-screen */
  .site-brand { flex-shrink: 1; min-width: 0; }
  .site-brand__logo { min-width: 0; object-fit: contain; object-position: left center; }

  /* ── Mobile header overrides ────────────────────────────────────────
     The base .site-header rule (components.css) now uses position:fixed
     globally.  Only the overrides that differ on mobile live here.

     z-index 205 > drawer (200) > overlay (190) so the hamburger button
     in the fixed header stays tappable while the drawer is open.
     The search overlay stays above all of them at 280.                  */
  .site-header {
    z-index: 205;
  }

  /* Mobile header is shorter (no utility or nav rows) so the fallback
     padding is 70px; JS overwrites --ari-header-height at runtime.     */
  body {
    padding-top: var(--ari-header-height, 70px);
  }

  /* Drawer: slide in below the fixed header so it never obscures the
     hamburger / × button that lives in the header row.                  */
  .primary-menu-drawer {
    inset-block-start: var(--ari-header-height, 70px);
  }
}

/* Homepage grids */
@media (max-width: 980px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .country-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* stays 3-col until 640px */
  .pcast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos-layout { grid-template-columns: 1fr; }
  .pub2-layout { grid-template-columns: 1fr; }
  .pub2-feat { min-height: 320px; }
}

/* Search page */
@media (max-width: 980px) {
  .spage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================
   max-width: 960px
   ============================================================ */

/* Topics mega-menu */
@media (max-width: 960px) { .topics-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ============================================================
   max-width: 900px
   ============================================================ */

/* Programs mega-menu */
@media (max-width: 900px) { .programs-mega__grid { grid-template-columns: repeat(2, 1fr); } }

/* About Us page (Who We Are): drop the sticky heading column, stack instead */
@media (max-width: 900px) {
  .about-who__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .about-who__head { position: static; top: auto; }
}

/* Program single */
@media (max-width: 900px) {
  .prog-layout,
  .prog-layout--full { grid-template-columns: 1fr; }
  .prog-layout--full .prog-content { max-width: 100%; }
  .prog-sidebar { position: static; }
  .prog-pub-grid,
  .prog-event-grid,
  .prog-video-grid { grid-template-columns: repeat(2, 1fr); }
  /* On tablet: collapse to 2-col even grid, drop the alternating spans */
  .prog-body .gallery,
  .prog-body .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 180px;
  }
  .prog-body .gallery-item,
  .prog-body .wp-block-gallery .wp-block-image,
  .prog-body .wp-block-gallery li { grid-column: span 1 !important; }
}


/* ============================================================
   max-width: 860px
   ============================================================ */

/* About Us page */
@media (max-width: 860px) {
  .about-mission-head { grid-template-columns: 1fr; gap: 2rem; }
  .about-pillars { grid-template-columns: 1fr; }
  .about-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* In Memoriam: stack photo above text */
  .about-memoriam__inner { grid-template-columns: 1fr; gap: 2rem; }
  .about-memoriam__photo { aspect-ratio: 4 / 3; }
  .about-memoriam__photo--placeholder { min-height: 220px; }
  /* History phases: 1 column */
  .about-phases { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Funding: stack */
  .about-funding__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Topics grid: 2 columns on tablet (portrait tiles need more width) */
  .topics-grid:not(.topics-grid--list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* List view: keep at 1 col, reduce thumbnail */
  .topics-grid--list .topic-card__visual { height: 80px; }
  .topics-grid--list .topic-card__bg { width: 90px; }
}

/* Student Prize page */
@media (max-width: 860px) {
  .sprize-hero__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .sprize-hero { padding: 2.75rem 0 2.5rem; }
  .sprize-content { max-width: 100%; }
  .sprize-content .ari-faq { margin-top: 1.75rem; }
  /* sprize-winners-list is flex column, no grid override */
}


/* ============================================================
   max-width: 768px
   ============================================================ */

/* Programs mega-menu */
@media (max-width: 768px) { .programs-mega { display: none; } }

/* Topics mega-menu */
@media (max-width: 768px) { .topics-mega { display: none; } }

/* Publications mega-menu */
@media (max-width: 768px) { .pub-mega { display: none; } }

/* Country-related cards */
@media (max-width: 768px) {
  .country-related__cards { grid-template-columns: repeat(2, 1fr); }
}

/* Single video */
@media (max-width: 768px) {
  .svid-player__play-btn svg { width: 60px; height: 60px; padding: 16px 14px 16px 19px; }
  .svid-related-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   max-width: 767px
   ============================================================ */

/* Publications archive */
@media (max-width: 767px) {
  .pub-arc-grid { grid-template-columns: 1fr; }
  .pub-cat-section__inner { grid-template-columns: 1fr; }
  .pub-cat-section--reversed .pub-cat-section__img-col { order: unset; }
  .pub-cat-section--reversed .pub-cat-section__text-col { order: unset; }
  /* On mobile the main row wraps: search takes full width, then toggle + submit on next line */
  .pub-filter__main-row { flex-wrap: wrap; }
  .pub-filter__main-row .pub-filter__search-wrap { flex: 1 1 100%; }
  .pub-filter__toggle { height: 2.5rem; font-size: 0.82rem; }
  .pub-filter__search-btn { padding: 0 0.9rem; font-size: 0.82rem; height: 2.5rem; }
  .pub-filter__chip-btn { font-size: 0.8125rem; padding: 0.3rem 0.6rem; }
  .pub-filter__chips-row { gap: 0.35rem; }
}

/* Press Room */
@media (max-width: 767px) {
  .media-cov-grid,
  .media-cov-archive .media-cov-grid { grid-template-columns: 1fr; }
  .media-cov-archive__content {
    padding-block: 1.5rem 3.5rem;
  }
  .media-cov-filters {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
  }
  .media-cov-filters__types {
    grid-column: auto;
  }
  .media-cov-filters__types legend {
    width: 100%;
    margin: 0 0 0.25rem;
  }
  .media-cov-filters__year {
    justify-content: space-between;
  }
  .media-cov-filters__year select {
    min-width: 8rem;
  }
  .media-cov-archive .media-cov-card {
    min-height: 17rem;
  }
  .media-cov-newsletter {
    flex-wrap: wrap;
    padding: 1.25rem;
  }
  .media-cov-newsletter__form {
    flex: 1 1 100%;
  }
  .media-cov-newsletter__email {
    min-width: 0;
    flex: 1 1 auto;
  }
  .press-room__section--media { padding-block: 2rem 3rem; }
  .press-room__section--media .press-room__section-title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    margin-bottom: 1.5rem;
  }
  .press-gallery__page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(120px, 35vw, 180px);
    gap: 0.5rem;
  }
  .press-gallery__page--count-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, clamp(120px, 35vw, 180px));
    grid-auto-rows: clamp(120px, 35vw, 180px);
  }
  .press-gallery__page--count-7 .press-gallery__item:nth-child(n) { grid-column: auto; }
  .press-gallery__page--count-7 .press-gallery__item:nth-child(1) { grid-column: 1 / -1; }
  .press-gallery__page--count-1 .press-gallery__item:last-child,
  .press-gallery__page--count-3 .press-gallery__item:last-child,
  .press-gallery__page--count-5 .press-gallery__item:last-child { grid-column: 1 / -1; }
  .press-gallery .press-room__section-title {
    font-size: clamp(1.75rem, 8vw, 2rem);
    margin-bottom: 1.25rem;
  }
  .press-gallery-lightbox { gap: 0.5rem; padding: 1rem; }
  .press-gallery-lightbox__nav { width: 38px; height: 38px; }
  .press-gallery-lightbox__nav svg { width: 1.15rem; height: 1.15rem; }
  .press-gallery-lightbox__close { top: 0.5rem; right: 0.5rem; width: 38px; height: 38px; }
  .press-room__section-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .press-cta { flex-wrap: wrap; }
  .press-cta__btn { flex: 1 1 100%; justify-content: center; }
  .consult-form { grid-template-columns: 1fr; }
  .consult-form__submit { width: 100%; }
}

/* Publication single */
@media (max-width: 767px) {
  .pub-layout { grid-template-columns: 1fr; }
  .pub-sidebar { position: static; }
  .pub-hero { min-height: 320px; }
  .pub-dl-bar__title { font-size: 0.8125rem; }
  /* AI voice reader: browser-voice fallback panel wraps instead of
     overflowing on narrow screens. */
  .pub-audio__browser-player { flex-wrap: wrap; row-gap: 0.5rem; }
  .pub-audio__browser-status { flex: 1 1 100%; }
  /* Listen card: sidebar is full width here; larger touch targets. */
  .ari-listen__pill { min-height: 2.75rem; padding-inline: 1rem; }
}

/* Podcast series archive */
@media (max-width: 767px) {
  /* 2-col on wide phones, slightly smaller gap */
  .pcast-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  /* Scale down card text on small screens (base sizes are tuned for the
     larger desktop card; keep the same hierarchy, just smaller) */
  .pcast-card__body { padding: 1.1rem 1rem; gap: 0.45rem; }
  .pcast-card__series-num { font-size: 0.9rem; }
  .pcast-grid .pcast-card.pcast-card--series .pcast-card__title,
  .pcast-grid .pcast-card.pcast-card--other .pcast-card__title { font-size: 1.05rem; }
  .pcast-card__meta { font-size: 0.8125rem; }
  .pcast-hero { min-height: 280px; }
  .pcast-player__controls { gap: 0.5rem; padding: 0.65rem 1rem; }
  .pcast-waveform { min-width: 60px; }
  /* Episode slider on phones */
  .ep-slider-section { padding: 1.75rem 0 2rem; }
  .ep-slider-head__title { font-size: 1.2rem; }
  .ep-slider__item { flex: 0 0 230px; width: 230px; }
  .ep-slider__body { padding: 2rem 0.65rem 0.7rem; }
  .ep-slider__title { font-size: 0.8125rem; }
  .ep-slider-btn { width: 36px; height: 36px; }
  .ep-slider-fade { width: 40px; }
}

/* Experts / People archive */
@media (max-width: 767px) {
  .experts-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   max-width: 700px
   ============================================================ */

/* Header / global layout */
@media (max-width: 700px) {
  .site-header__brand-inner { min-height: 60px; }
  .site-brand__logo { height: 30px; }
  /* Update body padding fallback to match smaller brand row */
  body { padding-top: var(--ari-header-height, 60px); }
  .primary-menu-drawer { inset-block-start: var(--ari-header-height, 60px); }
}

/* ── Admin-bar fix for all mobile viewports (≤782px) ───────────────────────
   WordPress outputs this in <head> via _admin_bar_bump_cb():
     html { margin-top: 46px !important; }   (at max-width: 782px)
   This shifts the entire document down 46px. Combined with the fixed header
   still at top: 46px, it creates a 46px white (body-bg) gap between the
   header bottom and the first content block.
   Since #wpadminbar is permanently off-screen on mobile (top: -46px), we can
   safely cancel both the html margin and the header top offset here.         */
@media screen and (max-width: 782px) {
  html {
    margin-top: 0 !important;
  }
  .admin-bar .site-header {
    top: 0;
  }
}


/* ============================================================
   max-width: 680px
   ============================================================ */

/* Single Issue */
@media (max-width: 680px) {
  .issue-hero__desc { font-size: 0.925rem; }
  .issue-people-grid { grid-template-columns: repeat(2, 1fr); }
  .issue-people-grid--partners { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   Audio player bar: responsive compaction
   ============================================================ */

/* Podcast-series episode player: carry the same scale through desktop widths. */
@media (min-width: 1101px) and (max-width: 1366px) {
  .pcast-hero .hero-audio-bar--episodes {
    --hap-control-gap: 8px;
    --hap-meta-font-size: 0.875rem;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-featured {
    width: clamp(450px, calc(100vw - 800px), 521px);
  }
  .pcast-hero .hero-audio-bar--episodes .hap-ep-btn {
    font-size: 17px;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-featured__title {
    font-size: 18px;
    line-height: 1.2;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-accent { width: 28px; }
  .pcast-hero .hero-audio-bar--episodes .hap-waveform {
    min-width: 150px;
    margin-inline: 12px;
    gap: 2px;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-meta {
    gap: var(--hap-control-gap);
    padding-inline-end: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  }
  .pcast-hero .hero-audio-bar--episodes .hap-time {
    width: auto;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-speed {
    margin-inline-start: 0;
  }
}

/* Intermediate desktop widths: the full 1440px measurements otherwise leave
   the waveform with only a few bars around 1200–1366px. Scale the fixed-width
   pieces fluidly while preserving the desktop control sizes and one-row layout. */
@media (min-width: 1101px) and (max-width: 1366px) {
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) {
    --hap-control-gap: 8px;
    --hap-meta-font-size: 0.875rem;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured {
    width: clamp(450px, calc(100vw - 800px), 521px);
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__label {
    font-size: 17px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__title {
    font-size: 18px;
    line-height: 1.2;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-accent {
    width: 28px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-controls {
    gap: var(--hap-control-gap);
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-waveform {
    min-width: 150px;
    margin-inline: 12px;
    gap: 2px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-meta {
    gap: var(--hap-control-gap);
    padding-inline-end: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-time {
    width: auto;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-speed {
    margin-inline-start: 0;
  }
}

/* Step 1 (1100px): reduce featured block to free waveform space */
@media (max-width: 1100px) {
  .hap-featured { width: calc(390px + max(4vw, calc((100vw - var(--ari-max-width)) / 2))); }
  .hap-featured__label { font-size: 16px; }
  .hap-featured__title { font-size: 17px; }
  .hap-controls { gap: 10px; padding-inline: 0.75rem; }
  .hap-skip { width: 42px; height: 42px; }
  .hap-play-pause { width: 56px; height: 56px; }
  .hap-time,
  .hap-speed { font-size: 16px; }
  .hap-meta { gap: 12px; padding-right: max(4vw, calc((100vw - var(--ari-max-width)) / 2)); }

  .pcast-hero .hero-audio-bar--episodes {
    --hap-secondary-control-size: 40px;
    --hap-primary-control-size: 52px;
    --hap-secondary-icon-size: 16px;
    --hap-primary-icon-size: 20px;
    --hap-control-gap: 8px;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-featured {
    width: calc(330px + max(4vw, calc((100vw - var(--ari-max-width)) / 2)));
    padding-inline-start: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  }
  .pcast-hero .hero-audio-bar--episodes .hap-featured__title { font-size: 17px; }
  .pcast-hero .hero-audio-bar--episodes .hap-accent { width: 24px; }
  .pcast-hero .hero-audio-bar--episodes .hap-waveform { gap: 2px; }
  .pcast-hero .hero-audio-bar--episodes .hap-meta {
    padding-inline-end: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  }

  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) {
    --hap-secondary-control-size: 40px;
    --hap-primary-control-size: 52px;
    --hap-secondary-icon-size: 16px;
    --hap-primary-icon-size: 20px;
    --hap-control-gap: 8px;
    --hap-meta-font-size: 0.875rem;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured {
    width: calc(330px + max(4vw, calc((100vw - var(--ari-max-width)) / 2)));
    padding-inline-start: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__label {
    font-size: 16px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__title {
    font-size: 17px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-accent { width: 24px; }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-controls { gap: var(--hap-control-gap); }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-waveform {
    margin-inline: 12px;
    gap: 2px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-meta {
    gap: var(--hap-control-gap);
    padding-inline-end: max(4vw, calc((100vw - var(--ari-max-width)) / 2));
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-time { width: auto; }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-speed { margin-inline-start: 0; }
}

/* Step 2 (860px): shrink all fixed elements so waveform always has room */
@media (max-width: 860px) {
  .hap-featured {
    width: 190px;
    padding: 0 2.75rem 0 1rem; /* right: 2.75rem clears the 44px diagonal zone */
  }
  .hap-accent   { width: 58px; }
  .hap-featured__label { font-size: 0.8125rem; margin-bottom: 0.25rem; }
  .hap-featured__title { font-size: 0.85rem; line-height: 1.25; }
  .hap-controls { padding: 0 0.75rem; gap: 0.5rem; }
  .hap-play-pause { width: 50px; height: 50px; }
  .hap-skip { width: 32px; height: 32px; }
  .hap-skip svg { width: 14px; height: 14px; }
  .hap-time,
  .hap-speed { font-size: 0.8125rem; }
  .hap-meta { gap: 0.625rem; }

  .pcast-hero .hero-audio-bar--episodes {
    --hap-secondary-control-size: 32px;
    --hap-primary-control-size: 48px;
    --hap-secondary-icon-size: 14px;
    --hap-primary-icon-size: 19px;
    --hap-control-gap: 0.5rem;
    --hap-meta-font-size: 13px;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-featured {
    --hap-featured-corner: 18px;
    width: clamp(260px, 42vw, 340px);
    height: 102px;
    padding: 0 2.75rem 0 1rem;
    justify-content: center;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-ep-btn { font-size: 13px; }
  .pcast-hero .hero-audio-bar--episodes .hap-featured__title {
    font-size: 13px;
    line-height: 1.15;
    -webkit-line-clamp: 4;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-accent { width: 16px; }
  .pcast-hero .hero-audio-bar--episodes .hap-waveform { margin-inline: 6px; }
  .pcast-hero .hero-audio-bar--episodes .hap-bar:nth-child(even) { display: none; }
  .pcast-hero .hero-audio-bar--episodes .hap-meta { padding-inline-end: 1rem; }

  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) {
    --hap-secondary-control-size: 32px;
    --hap-primary-control-size: 48px;
    --hap-secondary-icon-size: 14px;
    --hap-primary-icon-size: 19px;
    --hap-control-gap: 0.5rem;
    --hap-meta-font-size: 13px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured {
    --hap-featured-corner: 18px;
    width: 190px;
    height: 102px;
    padding: 0 2.75rem 0 1rem;
    justify-content: center;
    border-top-right-radius: 0;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__label {
    font-size: 13px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__title {
    font-size: 14px;
    line-height: 1.25;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-accent { width: 16px; }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-controls { gap: 0.5rem; }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-skip svg {
    width: 14px;
    height: 14px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-waveform { margin-inline: 6px; }
  /* Sample the 80-point desktop waveform down to 40 visible bars on compact
     layouts. Keeping alternating indices preserves proportional progress. */
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-bar:nth-child(even) {
    display: none;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-meta {
    gap: 0.625rem;
    padding-inline-end: 1rem;
  }
}


/* ============================================================
   max-width: 640px
   ============================================================ */

/* Homepage hero audio bar (mobile two-row layout) */
@media (max-width: 640px) {
  /* Wrap into two stacked rows */
  .hero-audio-bar {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    padding-inline: 0;
  }

  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) {
    --hap-secondary-control-size: 26px;
    --hap-primary-control-size: 44px;
    --hap-secondary-icon-size: 12px;
    --hap-primary-icon-size: 18px;
    --hap-control-gap: 0.375rem;
    --hap-meta-font-size: 13px;
    height: auto;
    /* Stay hidden (unlike the episodes variant below): this static variant
       has no #hap-ep-list dropdown that needs to escape the clip, and
       overflow:visible here let .hap-featured's diagonal ::after edge and
       rounded corner spill past the bar's box on the left at narrow widths. */
    overflow: hidden;
  }

  .pcast-hero .hero-audio-bar--episodes {
    --hap-secondary-control-size: 26px;
    --hap-primary-control-size: 44px;
    --hap-secondary-icon-size: 12px;
    --hap-primary-icon-size: 18px;
    --hap-control-gap: 0.375rem;
    --hap-meta-font-size: 13px;
    height: auto;
    overflow: visible;
  }

  .pcast-hero .hero-audio-bar--episodes .hap-featured {
    --hap-featured-corner: 12px;
    --hap-featured-diagonal: 18px;
    flex: 1 0 calc(100% - 40px);
    width: auto;
    height: auto;
    min-height: 52px;
    justify-content: center;
    padding: 0.55rem 1.5rem 0.5rem 1rem;
    border-top-right-radius: 0;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-ep-btn {
    font-size: 13px;
    margin-bottom: 5px;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-featured__title {
    font-size: 17px;
    line-height: 1.25;
    -webkit-line-clamp: 3;
  }
  body.rtl .pcast-hero .hero-audio-bar--episodes .hap-featured {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-accent { width: 40px; }
  .pcast-hero .hero-audio-bar--episodes .hap-controls {
    padding: 0.3rem 0.375rem 0.3rem 0.5rem;
    gap: var(--hap-control-gap);
  }
  .pcast-hero .hero-audio-bar--episodes .hap-waveform {
    height: 34px;
    margin-inline: 0;
    gap: 1px;
  }
  .pcast-hero .hero-audio-bar--episodes .hap-meta {
    padding: 0 0.5rem 0 0.125rem;
    gap: 0.25rem;
  }
  .pcast-hero__content {
    padding-block: 1rem calc(168px + 2rem);
  }
  .pcast-hero { min-height: 320px; }

  /* Row 1: featured + accent fill the full row.
     flex-basis calc(100% - 56px) guarantees the wrap fires; basis 0 would let
     all five items onto one line before flex-grow applied, collapsing controls. */
  .hap-featured {
    flex: 1 0 calc(100% - 40px);
    width: auto;
    height: auto;
    min-height: 52px;
    padding: 0.55rem 1.5rem 0.5rem 1rem; /* right pad clears the 18px mobile diagonal */
    /* Desktop cut is 44px over 126px height ≈ 19°.
       Mobile row-1 height ≈ 52px → tan(19°) × 52 ≈ 18px to keep the same angle. */
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 18px) 100%, 0% 100%);
  }

  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured {
    --hap-featured-corner: 12px;
    --hap-featured-diagonal: 18px;
    flex: 1 0 calc(100% - 40px);
    width: auto;
    height: auto;
    min-height: 52px;
    /* Hard cap: label (1 line) + line-clamped title (2 lines) can still push
       past min-height on long titles/tight width: without a ceiling here,
       row 1 grows the whole (height:auto) bar past what .home-hero reserves
       below it, so the orange block bleeds upward into the hero image above.
       max-height + overflow:hidden clips any overshoot inside this box
       instead of growing the row, keeping the diagonal design unchanged. */
    max-height: 90px;
    overflow: hidden;
    justify-content: center;
    padding: 0.55rem 1.5rem 0.5rem 1rem;
    border-top-right-radius: 0;
    clip-path: none;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__label {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 5px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured__title {
    font-size: 17px;
    line-height: 1.25;
  }
  body.rtl .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-featured {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    clip-path: none;
  }

  /* Accent: narrow it to match the shallower mobile diagonal */
  .hap-accent { width: 40px; align-self: stretch; }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-accent { width: 40px; }

  /* Row 2: controls + waveform + meta.
     flex-basis 0 + flex-grow 1 lets each sub-item use only what it needs,
     with .hap-waveform (flex:1) absorbing leftover space. */
  .hap-controls,
  .hap-waveform,
  .hap-meta { flex-shrink: 0; }

  .hap-controls {
    padding: 0.3rem 0.375rem 0.3rem 0.5rem;
    gap: 0.375rem;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-controls {
    padding: 0.3rem 0.375rem 0.3rem 0.5rem;
    gap: 0.375rem;
  }
  .hap-play-pause { width: 44px; height: 44px; }
  .hap-skip       { width: 26px; height: 26px; }

  .hap-waveform {
    flex: 1 1 0;       /* grow into remaining row space; shrink if needed */
    min-width: 40px;   /* always keep at least a sliver of waveform visible */
    height: 34px;
    gap: 1px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-waveform {
    height: 34px;
    margin-inline: 0;
    gap: 1px;
  }

  .hap-meta {
    padding: 0 0.5rem 0 0.125rem;
    gap: 0.25rem;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) .hap-meta {
    padding: 0 0.5rem 0 0.125rem;
    gap: 0.25rem;
  }
  .hap-time   { font-size: 0.8125rem; }
  .hap-volume { width: 24px; height: 24px; }
  .hap-speed  { font-size: 0.8125rem; }

  /* Hero reserves space: Row 1 (capped at 90px, see .hap-featured max-height
     above) + Row 2 (~54px) + slack for border/rounding = 150px. Keep this
     comfortably above the bar's real height: row 1 varies by a few px with how
     the line-clamped title wraps, and a tight margin let the orange row-1 block
     bleed past .home-hero into the hero image at some widths. */
  .home-hero { padding-bottom: 150px; }

  /* Navigation dots float above the two-row mobile bar */
  .hero-dots--above-bar  { bottom: calc(150px + 0.9rem); }
  .hero-counter--above-bar { bottom: calc(150px + 0.9rem); }

  /* ── Hero: fix content bottom-padding mismatch ───────────────────────
     Desktop uses 126px bar height; mobile bar reserves 150px.
     Also compact the gap and top-padding to save vertical space.       */
  .hero-slide__content {
    padding-block-start: 1.5rem;
    padding-block-end: calc(150px + 1.25rem);  /* matches actual mobile bar */
    gap: 0.625rem;
  }
  /* Title: remove the 20ch cap on mobile so the text uses full container
     width, reducing line-wraps and shrinking the title's total height.
     Font is already at the clamp minimum (1.625rem) on phones, so we
     nudge it a touch smaller for very long titles like the one shown.   */
  .hero-slide__title {
    font-size: clamp(1.3rem, 5.5vw, 1.625rem);
    max-width: 100%;
    letter-spacing: -0.015em;
  }
  /* Compact badge and meta so the content stack fits in less vertical px */
  .hero-slide__badge { font-size: 0.8125rem; padding: 0.2rem 0.7rem; }
  .hero-slide__meta  { font-size: 0.82rem; gap: 0.5rem; }
  .hero-slide__avatar { width: 30px; height: 30px; }

  /* ── Newsletter float: shrink to icon-only on mobile ────────────────
     The full-width pill sits at top-right of the hero and competes
     visually with the title on narrow viewports. Collapse the text node
     (font-size: 0 doesn't affect the SVG's own width/height attributes)
     and reshape the button into a small circular icon.
     The aria-label on the <a> preserves full screen-reader context.    */
  .hero-newsletter-float {
    font-size: 0;
    line-height: 0;
    gap: 0;
    padding: 0.5rem;
    border-radius: 0;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    box-shadow: none;
  }
  .hero-newsletter-float svg { width: 18px; height: 18px; flex-shrink: 0; }
}


/* ── Audio bar: narrow phones (≤ 480px) ─────────────────────────────────── */
/* At 480px and below the meta row (time + vol + speed) totals ~120px.
   We slim controls and hide non-essential meta to keep the waveform visible. */
@media (max-width: 480px) {
  .pcast-hero .hero-audio-bar--episodes {
    --hap-secondary-control-size: 22px;
    --hap-primary-control-size: 40px;
    --hap-secondary-icon-size: 12px;
    --hap-primary-icon-size: 18px;
    --hap-control-gap: 0.25rem;
    --hap-meta-font-size: 13px;
  }
  .home-hero .hero-audio-bar:not(.hero-audio-bar--episodes) {
    --hap-secondary-control-size: 22px;
    --hap-primary-control-size: 40px;
    --hap-secondary-icon-size: 12px;
    --hap-primary-icon-size: 18px;
    --hap-control-gap: 0.25rem;
    --hap-meta-font-size: 13px;
  }
  .hap-controls {
    padding: 0.25rem 0.25rem 0.25rem 0.375rem;
    gap: 0.25rem;
  }
  .hap-play-pause { width: 40px; height: 40px; }
  .hap-skip       { width: 22px; height: 22px; }

  /* Phone volume is controlled by the device. Hide it with playback speed so
     the complete time value and waveform remain visible on the same row. */
  .hap-speed,
  .hap-volume { display: none; }

  .hap-meta { gap: 0.2rem; padding: 0 0.375rem 0 0.1rem; }
  .hap-time { font-size: 0.8125rem; }
  .hap-volume { width: 22px; height: 22px; }

  .hap-waveform { gap: 1px; }
}

/* ── Audio bar: very small phones (≤ 360px) ─────────────────────────────── */
/* On 320–360px devices even the skip buttons crowd the waveform. Hide them. */
@media (max-width: 360px) {
  .hap-skip { display: none; }
  .hap-controls { padding: 0.25rem 0.25rem 0.25rem 0.375rem; gap: 0; }
}

/* Homepage grids */
@media (max-width: 640px) {
  /* Events: horizontal snap carousel (one card at a time).
     Grid instead of flex: grid-auto-columns resolves against the container's
     declared width (not content), so tracks never expand the container itself.
     Flex with flex-basis:100% has a known Safari/Chrome bug where the container
     grows to fit all children before overflow is applied. */
  /* Direct wrapper around the scroll container. overflow:hidden here is the
     nearest containing block for the grid, so offscreen cards are clipped
     before they can affect the page scroll width. */
  /* position:relative creates a stacking context so overflow:hidden reliably
     clips the scroll container's overflow on all mobile browsers. */
  .events-carousel-wrap { overflow: hidden; width: 100%; position: relative; }
  .events-grid {
    display: grid;
    /* Reset the desktop explicit template (repeat(3,1fr)) so implicit columns
       controlled by grid-auto-columns take over. Without this reset, all 3 cards
       fit inside the 3 explicit 1fr tracks and grid-auto-columns never fires. */
    grid-template-columns: none;
    grid-auto-flow: column;
    /* gap:0 keeps each column track exactly 100% wide so scrollLeft === i * offsetWidth:
       any non-zero gap shifts card i by i*gap and breaks dot-nav and snap. */
    grid-auto-columns: 100%;
    gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
  }
  .events-grid::-webkit-scrollbar { display: none; }
  .events-grid .event-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .events-carousel-dots { display: flex; }

  /* Country-related: one-card snap carousel (mirrors events-grid pattern).
     Override the 2-col (≤768px) and 1-col (≤520px) grid rules set above. */
  .cr-cards-wrap { overflow: hidden; width: 100%; position: relative; }
  .country-related__cards {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1rem; /* only horizontal gap; vertical spacing is inside each card */
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
  }
  .country-related__cards::-webkit-scrollbar { display: none; }
  .country-related__cards .cr-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .cr-cards-dots { display: flex; }

  /* Scale event-circle to 170px; recalculate dot positions for ring radius 83px */
  .event-circle { width: 170px; height: 170px; }
  .event-circle__inner { width: 138px; height: 138px; }
  /* Recalculated ::before for 170px wrapper, ±12° spacing (282°/270°/258°):
     middle (270°) → left:-1px top:82px  |  upper/lower shadows: 2px ±17px */
  .event-circle::before { left: -1px; top: 82px; box-shadow: 2px -17px 0 0 var(--ari-color-accent), 2px 17px 0 0 var(--ari-color-accent); }
  .event-circle__day { font-size: 2.75rem; }

  /* Publications: horizontal snap carousel, one item per slide.
     flex, not grid: .pub2-feat has only absolutely-positioned children, so it
     contributes zero intrinsic size. With grid-auto-columns:100% inside an
     overflow-x:auto container, Chromium resolved that track's percentage
     against zero and collapsed the featured slide to 0px (the carousel opened
     on the 2nd article and dot 1 did not match slide 1). flex:0 0 100% avoids
     this; .videos-layout below uses the same pattern for .video-featured. */
  .pub2-layout {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-bottom: 1rem;
  }
  .pub2-layout::-webkit-scrollbar { display: none; }
  /* Three targets, all made into full-width carousel slides:
     .pub2-feat  : always a direct child (featured card)
     .pub2-list  : direct child BEFORE JS runs (wrapper holding all list items)
     .pub2-item  : direct child AFTER JS runs (theme.js moves each item out of
                   .pub2-list and appends them directly to .pub2-layout so each
                   item becomes its own snap slide; .pub2-list is then removed) */
  .pub2-layout > .pub2-feat,
  .pub2-layout > .pub2-list,
  .pub2-layout > .pub2-item {
    scroll-snap-align: start;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }
  /* Pre-JS list wrapper: stack items vertically and clip any internal bleed */
  .pub2-layout > .pub2-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-x: hidden;
  }
  /* Restyle each item as a full-width card (covers both pre-JS inside .pub2-list
     and post-JS as direct children of .pub2-layout) */
  .pub2-layout .pub2-item {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    border-bottom: none;
  }
  .pub2-layout .pub2-item .pub2-item__img-wrap {
    width: 100%;
    height: 200px;
    border-radius: 0;
  }
  .pub2-layout .pub2-item .pub2-item__title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 1rem;
  }
  .pub2-carousel-dots { display: flex; }

  /* Podcasts: horizontal snap carousel */
  .pcast-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-bottom: 1rem;
  }
  .pcast-grid::-webkit-scrollbar { display: none; }
  .pcast-grid .pcast-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: 100%;
    min-height: 300px;
  }
  .pcast-carousel-dots { display: flex; }

  /* Videos: horizontal snap carousel */
  .videos-layout {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-bottom: 1rem;
  }
  .videos-layout::-webkit-scrollbar { display: none; }
  .videos-layout > .video-featured,
  .videos-layout > .video-small {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: 100%;
    min-width: 0;
  }
  .videos-carousel-dots { display: flex; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .country-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* keep 3-col on mobile */
  .podcast-cards { grid-template-columns: 1fr; }
  .newsletter-form__row { flex-direction: column; padding: 0.5rem; }
  .newsletter-form__btn { width: 100%; justify-content: center; padding: 0.75rem; }
  /* 500px gives the hero enough room for the full content stack
     (badge + 4-line title + author/date + 136px audio bar + gaps). */
  .home-hero { min-height: 500px; }

  /* Section heads: the "see-all" link has flex-shrink:0 + white-space:nowrap so it
     cannot shrink. On very narrow viewports (320 px) the title + gap + link can
     exceed the container (≈ 311 px needed, 294 px available for a heading like
     "Latest Publications"). Wrapping moves the link to a second line and keeps
     both elements fully visible without any overflow. */
  .home-section__head {
    flex-wrap: wrap;
    gap: 0.5rem 1rem; /* row-gap 0.5rem, column-gap 1rem */
  }
}

/* ── Hero: extra compaction for phones ≤ 390px ─────────────────────────── */
/* At widths below 390px (SE-size, Galaxy A-series) the title can still wrap
   to 4+ lines. These rules shave a few more pixels so content stays inside
   the 500px hero without scrolling or clipping.                            */
@media (max-width: 390px) {
  .home-hero { min-height: 520px; }   /* a touch taller to keep breathing room */
  .hero-slide__content {
    padding-block-start: 1.25rem;
    padding-block-end: calc(136px + 1rem);
    gap: 0.5rem;
  }
  .hero-slide__title {
    font-size: clamp(1.2rem, 5.5vw, 1.3rem);
  }
  .hero-slide__meta { font-size: 0.8125rem; }
  .hero-slide__avatar { width: 26px; height: 26px; }
}


/* MENA map: zoom controls + hint visible on touch/mobile */
@media (hover: none), (max-width: 768px) {
  .map-zoom-controls { display: flex; }
  .map-mobile-hint   { display: flex; }
  /* Larger tap targets for small countries on mobile */
  .mena-map-svg .mena-country { stroke-width: 1; }
}

/* The SVG has will-change:transform which promotes it to a GPU compositing
   layer. On iOS, composited children can escape an ancestor overflow:hidden
   boundary at the OS level, causing a ghost bleed on rubber-band scroll.
   isolation:isolate creates a new stacking context that keeps the composited
   layer clipped inside .country-map regardless of OS compositing behavior.
   Applied at 980px (full mobile breakpoint) rather than 768px so touch
   devices above 768px (iPad Mini landscape, etc.) are also protected. */
@media (hover: none), (max-width: 980px) {
  .country-map {
    isolation: isolate;
  }
}
/* On very small screens give the map more height so countries are larger */
@media (max-width: 480px) {
  .country-map { min-height: 220px; }
  .mena-map-svg { min-height: 220px; }
}

/* Footer: tighter gap than the 1024px single-column base above. */
@media (max-width: 640px) {
  .footer-grid { gap: 1.75rem; }
  .footer-icon-menu__list { gap: 0.5rem; }
  .footer-bar__inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* Event single */
@media (max-width: 640px) {
  .ev-meta-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .ev-register-btn { width: 100%; justify-content: center; }
  .ev-hero-img-wrap { aspect-ratio: 4 / 3; }
}

/* Events archive */
@media (max-width: 640px) {
  .ev-upcoming-grid { grid-template-columns: 1fr; }
  .ev-past-grid     { grid-template-columns: 1fr; }
  .ev-circ { width: 128px; height: 128px; }
  .ev-circ__day { font-size: 2rem; }
  .ev-tab { padding: 0.75rem 1rem; font-size: 0.82rem; gap: 0.4rem; }
  .ev-tab svg { width: 13px; height: 13px; }
  .ev-tab__count { display: none; } /* too cramped on small screens */
}

/* Single Expert / People */
@media (max-width: 640px) {
  .people-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .people-avatar, .people-avatar--initials { margin-top: -60px; width: 120px; height: 120px; }
  .people-intro__social { justify-content: center; }
  .people-contribs-grid { grid-template-columns: 1fr; }
  .people-video-slide { flex: 0 0 calc(85% - 0.625rem); }
}

/* Topics landing page (mobile) */
@media (max-width: 640px) {
  /* 1 column at 480px and below, 2 col between 480-640 already from tablet rule */
  .topics-grid:not(.topics-grid--list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .topic-card__visual { aspect-ratio: 4 / 5; } /* slightly less tall on mobile */
  .topic-card__icon { width: 80px; height: 80px; }
  .topic-card__icon svg { width: 38px; height: 38px; }
  .topic-card__icon-img { width: 42px; height: 42px; }
  .topic-card__name { font-size: 0.9rem; }
  .topic-card__badge { top: 0.6rem; inset-inline-end: 0.6rem; }
  .topics-bar__controls { gap: 0.5rem; }
  .topics-cta-strip__inner { flex-direction: column; align-items: flex-start; }
  .topics-cta-strip__btn { width: 100%; justify-content: center; }
  .topics-sub-intro__inner { flex-direction: column; }
}
@media (max-width: 400px) {
  .topics-grid:not(.topics-grid--list) { grid-template-columns: 1fr; }
}

/* Programs archive (mobile) */
@media (max-width: 640px) {
  .prog-arc-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .prog-arc-card__desc { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Write with ARI (mobile) */
@media (max-width: 640px) {
  .wwa-body    { padding: 1.5rem 0 2.5rem; }
  /* Both section sizing tokens in one place: the icon circle, the flex gap and
     the no-icon indent all follow from these. */
  .wwa-page    { --wwa-icon-size: 48px; --wwa-icon-gap: 1rem; }
  .wwa-section { padding: 1.75rem 0; }
  .wwa-banner  { margin-bottom: 1.5rem; }
  .wwa-resource-card { padding: 1.5rem 1.25rem; }
  .wwa-editor-content { padding-top: 1.75rem; }
}

/* Jobs archive */
@media (max-width: 900px) {
  /* Shrink thumbnail a bit on tablet */
  .job-row__main { grid-template-columns: 96px 1fr auto; gap: 1.25rem; }
  .job-row__thumb { width: 96px; min-height: 72px; }
  .job-row__thumb-img { min-height: 72px; }
  .job-row__thumb-placeholder { min-height: 72px; }
}

@media (max-width: 640px) {
  /* Stack: thumbnail row (full-width) → content → button */
  .job-row__main {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem 1rem;
    align-items: start;
  }
  /* Thumbnail spans first column, content spans second */
  .job-row__thumb {
    width: 80px;
    min-height: 60px;
    grid-row: 1;
    grid-column: 1;
    align-self: start;
  }
  .job-row__thumb-img    { min-height: 60px; }
  .job-row__thumb-placeholder { min-height: 60px; }
  .job-row__content {
    grid-row: 1;
    grid-column: 2;
  }
  /* Button spans full width below */
  .job-row__action {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
  }
  .job-row__apply-btn { width: 100%; justify-content: center; }
  .job-row:hover { padding-left: 0.25rem; }
}

/* Single Job */
@media (max-width: 640px) {
  .sjob-meta { flex-direction: column; gap: 1.25rem; }
  .sjob-meta__item {
    border-right: none;
    border-bottom: 1px solid var(--ari-light-grey);
    padding: 0 0 1.25rem;
    margin-right: 0;
  }
  .sjob-meta__item:last-child { border-bottom: none; padding-bottom: 0; }
  .sjob-apply__btn { max-width: 100%; }
}

/* Video archive */
@media (max-width: 640px) {
  .vid-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Archive header component */
@media (max-width: 1023px) {
  /* Stack to single column on tablet */
  .archive-header__inner { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 640px) {
  .archive-header { padding: 2rem 0 0; }
  .archive-header__inner { padding-bottom: 2rem; }
  .archive-header__title { font-size: 1.75rem; }
}

/* Search page */
@media (max-width: 640px) {
  .spage-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   max-width: 600px
   ============================================================ */

/* Program single */
.prog-tabs__scroll-cue { display: none; }

@media (max-width: 600px) {
  .prog-hero { min-height: 320px; padding-bottom: 2rem; }
  .issue-hero--flat { min-height: 0; padding: 2.25rem 0 1.75rem; }
  .prog-tabs .u-container { position: relative; }
  .prog-tabs__scroll-cue {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 2;
    width: 3rem;
    padding: 0;
    border: 0;
    background: linear-gradient(to right, rgba(245, 245, 245, 0), var(--ari-off-white) 72%);
    cursor: pointer;
    --ari-text-accent: var(--ari-ink);
  }
  .prog-tabs__scroll-cue[hidden] { display: none; }
  .prog-tabs__scroll-cue::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.9rem;
    width: 0.55rem;
    height: 0.55rem;
    border-block-start: 2px solid rgba(17, 17, 17, 0.58);
    border-inline-end: 2px solid rgba(17, 17, 17, 0.58);
    pointer-events: none;
    transform: translateY(-50%) rotate(45deg);
  }
  .rtl .prog-tabs__scroll-cue,
  [dir="rtl"] .prog-tabs__scroll-cue {
    inset-inline: 0 auto;
    background: linear-gradient(to left, rgba(245, 245, 245, 0), var(--ari-off-white) 72%);
    --ari-text-accent: var(--ari-ink);
  }
  .rtl .prog-tabs__scroll-cue::before,
  [dir="rtl"] .prog-tabs__scroll-cue::before {
    inset-inline: 0.9rem auto;
    transform: translateY(-50%) rotate(-135deg);
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .prog-tabs__scroll-cue::before { animation: prog-tabs-scroll-cue 1.6s ease-in-out infinite; }
  .rtl .prog-tabs__scroll-cue::before,
  [dir="rtl"] .prog-tabs__scroll-cue::before { animation-name: prog-tabs-scroll-cue-rtl; }

  @keyframes prog-tabs-scroll-cue {
    0%, 100% { transform: translate(-2px, -50%) rotate(45deg); }
    50% { transform: translate(3px, -50%) rotate(45deg); }
  }

  @keyframes prog-tabs-scroll-cue-rtl {
    0%, 100% { transform: translate(2px, -50%) rotate(-135deg); }
    50% { transform: translate(-3px, -50%) rotate(-135deg); }
  }
}

@media (max-width: 600px) {
  .prog-pub-grid,
  .prog-project-grid,
  .prog-event-grid,
  .prog-video-grid { grid-template-columns: 1fr; }
  .prog-cross-cutting { padding: 1.25rem; }
  /* Mobile: 2-col even grid, shorter rows */
  .prog-body .gallery,
  .prog-body .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 130px;
  }
}


/* ============================================================
   max-width: 540px
   ============================================================ */

/* About Us page */
@media (max-width: 540px) {
  .about-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
  .about-partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .about-mission-lens { padding: 1.5rem; }
  .about-mission-lens::before { inset: 0.75rem; }
  .about-mission-lens__item { grid-template-columns: 2.25rem 1fr; gap: 0.85rem; }
  .about-mission-lens__num { width: 2.1rem; height: 2.1rem; }
  .about-vision__quote { font-size: 1.75rem; }
  .about-shifts__item { grid-template-columns: 2rem 1fr; gap: 0.85rem; }
}

/* Student Prize page */
@media (max-width: 540px) {
  .sprize-winner-card { grid-template-columns: 100px 1fr; }
  .sprize-quote { padding: 1.25rem 1.1rem; }
}
@media (max-width: 400px) {
  .sprize-winner-card { grid-template-columns: 1fr; }
  .sprize-winner-card__img-wrap { aspect-ratio: 16/7; }
}


/* ============================================================
   max-width: 520px
   ============================================================ */


/* ============================================================
   max-width: 480px
   ============================================================ */

/* Podcast series archive */
@media (max-width: 480px) {
  /* Single column on small phones, portrait card fills nicely */
  .pcast-grid { grid-template-columns: 1fr; }
  /* Episode slider: slightly narrower on small phones, still portrait */
  .ep-slider__item { flex: 0 0 200px; width: 200px; }
  .ep-slider__body { padding: 1.75rem 0.6rem 0.65rem; }
  .ep-slider__title { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* Experts / People archive */
@media (max-width: 480px) {
  .experts-az-nav__letter { font-size: 0.8125rem; }
  .experts-az-nav__sep { padding: 0 0.1rem; }
}

/* Single video */
@media (max-width: 480px) {
  .svid-related-grid { grid-template-columns: 1fr; }
  .svid-title { font-size: 1.3rem; }
}


/* ============================================================
   max-width: 420px
   ============================================================ */

/* Single Issue */
@media (max-width: 420px) {
  .issue-people-grid,
  .issue-people-grid--partners { grid-template-columns: 1fr; }
}

/* ============================================================
   NEWSLETTERS PAGE (responsive)
   ============================================================ */

@media (max-width: 960px) {
  .nl-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nl-subscribe__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 640px) {
  .nl-archive-grid { grid-template-columns: 1fr; }
  .nl-archive-card__inner { min-height: 120px; padding: 1.5rem 1.25rem 1.25rem; }
  .nl-issue__link { grid-template-columns: 1fr auto; }
  .nl-issue__date { display: none; }
  .nl-archive-body { max-width: 100%; }
  .nl-form-card { padding: 1.75rem 1.25rem; }
  .nl-archives-cue { flex-wrap: wrap; padding: 0.75rem 1rem; }
  .nl-archives-cue__text strong { display: block; margin-left: 0; }
}

@media (max-width: 480px) {
  .nl-archive-card__year { font-size: 2.25rem; }
}

/* ============================================================
   FELLOWSHIP DETAIL PAGE (responsive)
   ============================================================ */

/* auto-fill grid handles column count naturally; only adjust gaps/padding */
@media (max-width: 760px) {
  .fd-fellows-grid { gap: 1rem; }
}

@media (max-width: 640px) {
  .fd-body { max-width: 100%; margin-inline: 0; }
  .fd-fellows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  .fd-fellow { padding: 1.25rem 0.75rem 1rem; }
  .fd-hero__title { font-size: 1.5rem; }
  .fd-quote__text { font-size: 1rem; }
  .fd-cover { max-height: 360px; padding: 1.25rem 0; }
  .fd-cover__img { max-height: 300px; }
  .fd-intro h2 { font-size: 1.2rem; margin-top: 2em; }
  .fd-intro h3 { font-size: 1rem; }
}

@media (max-width: 420px) {
  .fd-fellows-grid { grid-template-columns: 1fr; }
  .fd-fellow__avatar { width: 80px; height: 80px; }
  .fd-fellow__avatar--placeholder { width: 80px; height: 80px; }
}

/* ============================================================
   ANNUAL FELLOWSHIPS PAGE (responsive)
   ============================================================ */

/* About section: collapse to single column on tablet */
@media (max-width: 860px) {
  .fellowships-about__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* About section: tighten quote on mobile */
@media (max-width: 768px) {
  .fellowships-quote {
    padding: 1.25rem 1.5rem;
  }
  .fellowships-quote__text {
    font-size: 1rem;
  }
}

/* ── Live-search overlay: mobile adjustments ─────────────────────────────── */
@media (max-width: 640px) {
  /* On small screens the shell fills most of the viewport below the header */
  .header-search-overlay {
    align-items: flex-start;
    padding-top: var(--ari-header-height, 60px);
  }

  .header-search-overlay__shell {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: calc(100vh - var(--ari-header-height, 60px));
  }

  .search-live__input {
    font-size: 1rem;
  }

  /* Slightly smaller thumbnail on mobile */
  .search-live__item-thumb {
    width: 44px; height: 44px;
  }

  /* Wrap submit button below input on very small screens */
  .search-live__submit {
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
  }
}

/* ── Newsletter popup ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .newsletter-popup-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .newsletter-popup {
    max-width: 100%;
    max-height: calc(100vh - 2rem);
    border-radius: 0;
    padding: 2rem 1.25rem 1.5rem;
  }
}

/* ── Newsletter bar ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .newsletter-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .newsletter-bar__text { text-align: center; }
  .newsletter-bar__actions { justify-content: center; }
  .newsletter-bar__cta { flex: 1; }
}

/* ── Partners archive grid ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* ── Campaign Timeline block (ari-v2/campaign-timeline) ───────────────── */
/* Selectors repeat .campaign-timeline so they outrank the block's own
   stylesheet regardless of which file loads last. */
@media (max-width: 640px) {
  .campaign-timeline.campaign-timeline--horizontal .campaign-timeline__item {
    flex-basis: min(80vw, 18rem);
  }
  .campaign-timeline.campaign-timeline--vertical .campaign-timeline__list {
    padding-inline-start: 1.5rem;
  }
  .campaign-timeline.campaign-timeline--vertical .campaign-timeline__marker {
    inset-inline-start: -1.5rem;
  }
  .campaign-timeline.campaign-timeline--vertical .is-highlight .campaign-timeline__marker {
    inset-inline-start: calc(-1.5rem - 2px);
  }
  .campaign-timeline.campaign-timeline--vertical .campaign-timeline__item + .campaign-timeline__item {
    margin-block-start: var(--ari-space-5);
  }
}
@media (min-width: 48rem) {
  /* Vertical timeline: date in a column beside the milestone, content in the other. */
  .campaign-timeline.campaign-timeline--vertical .campaign-timeline__card {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    column-gap: var(--ari-space-5);
    row-gap: var(--ari-space-2);
    align-items: start;
  }
  .campaign-timeline.campaign-timeline--vertical .campaign-timeline__date {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-block-start: 0.2rem;
  }
  .campaign-timeline.campaign-timeline--vertical .campaign-timeline__card > :not(.campaign-timeline__date) {
    grid-column: 2;
  }
}
@media (max-width: 640px) {
  .campaign-resource-downloads {
    padding: var(--ari-space-4);
  }
  .campaign-resource-downloads__link {
    padding: var(--ari-space-3) var(--ari-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-timeline .campaign-timeline__control { transition: none; }
}

/* ── Campaign Embedded Media block (ari-v2/campaign-media) ────────────── */
@media (max-width: 640px) {
  .campaign-media .campaign-media__frame--video .campaign-media__play {
    width: 3.25rem;
    height: 3.25rem;
  }
  .campaign-media .campaign-media__frame--video .campaign-media__facade-title {
    padding: var(--ari-space-5) var(--ari-space-3) var(--ari-space-2);
    font-size: var(--ari-text-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-media .campaign-media__play { transition: none; }
  .campaign-media .campaign-media__facade:hover .campaign-media__play,
  .campaign-media .campaign-media__facade:focus-visible .campaign-media__play { transform: none; }
}

/* ── Campaign layout sections (assets/css/campaign-layouts.css) ───────── */
@media (max-width: 640px) {
  .wp-block-group.campaign-cta {
    padding: var(--ari-space-5);
  }
  .wp-block-columns.campaign-figures {
    gap: var(--ari-space-4);
  }
  .wp-block-quote.campaign-quote {
    padding-inline-start: var(--ari-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.prog-body, .editor-styles-wrapper) .wp-block-button .wp-block-button__link { transition: none; }
}

/* ── Page modules: Call to Action, Key Figures, Highlighted Quote ── */
@media (max-width: 900px) {
  .ari-call-to-action .ari-call-to-action__panel {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.72fr);
  }
  .ari-call-to-action .ari-call-to-action__content {
    padding: var(--ari-space-6);
  }
}
@media (max-width: 640px) {
  .ari-call-to-action .ari-call-to-action__panel {
    grid-template-columns: 1fr;
  }
  .ari-call-to-action .ari-call-to-action__content {
    padding: var(--ari-space-6) var(--ari-space-5);
  }
  .ari-call-to-action .ari-call-to-action__heading {
    font-size: var(--ari-scale-h2-mobile);
  }
  .ari-call-to-action .ari-call-to-action__actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .ari-call-to-action .ari-call-to-action__button-row,
  .ari-call-to-action .ari-call-to-action__button {
    width: 100%;
  }
  .ari-call-to-action .ari-call-to-action__visual {
    min-height: 17rem;
  }
  .ari-call-to-action .ari-call-to-action__browser {
    width: min(82%, 23rem);
    min-height: 13rem;
    inset-block-start: 9%;
    inset-inline-start: 9%;
    padding: 3.4rem 1.4rem 1.4rem;
  }
  .ari-call-to-action .ari-call-to-action__browser-picture {
    height: 4.5rem;
  }
  .ari-call-to-action .ari-call-to-action__chart-card,
  .ari-call-to-action .ari-call-to-action__people-card {
    width: 4rem;
    height: 4rem;
  }
  .ari-call-to-action .ari-call-to-action__chart-card::before {
    inset: 0.75rem;
    transform: scale(0.78);
    transform-origin: center;
  }
  .ari-call-to-action .ari-call-to-action__people-card::before,
  .ari-call-to-action .ari-call-to-action__people-card::after {
    transform: scale(0.78);
    transform-origin: center;
  }
  figure.ari-highlighted-quote {
    padding-inline-start: var(--ari-space-4);
  }
  figure.ari-highlighted-quote blockquote p {
    font-size: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ari-call-to-action .ari-call-to-action__button { transition: none; }
}

/* ── Key Figures block (ari-v2/key-figures) ──────────────────────────── */
/* Four figures in a mid-width column: 2 x 2 instead of 3 + 1. */
.ari-key-figures { container-type: inline-size; }
@container (min-width: 30rem) and (max-width: 56rem) {
  .ari-key-figures .ari-key-figures__list:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Cards block (ari-v2/cards) and image slideshow ───────────────────── */
/* Five cards at 3 columns: 3 + 2 with the last row filling the width, no orphan gap. */
@media (min-width: 981px) {
  .ari-cards[style*="--ari-cards-columns:3"] .ari-cards__list:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ari-cards[style*="--ari-cards-columns:3"] .ari-cards__list:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }
  .ari-cards[style*="--ari-cards-columns:3"] .ari-cards__list:has(> :nth-child(5):last-child) > :nth-child(n+4) {
    grid-column: span 3;
  }
}
@media (max-width: 980px) {
  .ari-cards .ari-cards__list {
    grid-template-columns: repeat(min(var(--ari-cards-columns, 3), 2), minmax(0, 1fr));
  }
  /* Publication List block (ari-v2/publication-list) */
  .ari-publication-list .ari-publication-list__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .ari-publication-list .ari-publication-list__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .ari-cards .ari-cards__list {
    grid-template-columns: 1fr;
  }
  .ari-cards .ari-cards__card {
    padding: var(--ari-space-5, 1.5rem);
  }
  /* Image slideshow (ari-v2/image-slideshow, [gallery layout="slideshow"]) */
  .ari-slideshow .ari-slideshow__nav {
    width: 2.5rem;
    height: 2.5rem;
  }
  .ari-slideshow .ari-slideshow__nav--prev {
    inset-inline-start: var(--ari-space-2, 0.5rem);
  }
  .ari-slideshow .ari-slideshow__nav--next {
    inset-inline-end: var(--ari-space-2, 0.5rem);
  }
  .ari-slideshow .ari-slideshow__nav svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .ari-slideshow .ari-slideshow__count,
  .ari-slideshow .ari-slideshow__fullscreen {
    inset-block-start: var(--ari-space-2, 0.5rem);
  }
  .ari-slideshow .ari-slideshow__count {
    inset-inline-start: var(--ari-space-2, 0.5rem);
    font-size: 0.75rem;
  }
  .ari-slideshow .ari-slideshow__fullscreen {
    inset-inline-end: var(--ari-space-2, 0.5rem);
    width: 2.25rem;
    height: 2.25rem;
  }
  .ari-slideshow .ari-slideshow__thumb {
    width: 4.75rem;
  }
}

/* 404 page (404.php): stack search and browse links on small screens. */
@media (max-width: 767px) {
  .not-found__body { grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem 3rem; }
}

/* Cookie consent banner: stack text and buttons on small screens. */
@media (max-width: 760px) {
  .cookie-consent__inner { flex-direction: column; align-items: stretch; gap: 0.875rem; }
  .cookie-consent__actions { width: 100%; }
  .cookie-consent__btn { flex: 1; }
}