/* ============================================================
   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:
     1100px → 1024px → 1023px → 980px → 960px → 900px → 860px
     → 768px → 767px → 700px → 680px → 640px → 600px → 540px
     → 520px → 480px → 420px
   ============================================================ */


/* ============================================================
   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 normal flow so the
     universal max-width:100% rule above doesn't apply. Cap them explicitly
     to the viewport so they can't trigger horizontal scroll on mobile. */
  .site-overlay,
  .header-search-overlay {
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    width: 100vw;
    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
     when the carousel hits its scroll boundary (the main iOS drag-bleed cause).
     NOTE: .events-grid and .pub2-layout are NOT carousels at this breakpoint —
     they are still regular grids. They get overflow-x:auto only inside the
     ≤640px block below where they convert to flex carousels. Applying
     overflow-x:auto here caused browsers to use max-content sizing, making
     them wider than 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 ──────────────────────────────────────────
     Each homepage section (stats/map, publications, events, podcasts, videos)
     has no overflow clipping — any element inside that's slightly wider than
     the viewport would bleed into body's scroll area.
     overflow-x: clip (unlike overflow-x: hidden) does NOT create a scroll
     container, so iOS has nothing to rubber-band into. It purely clips pixels
     that exceed the section edge. Intentional horizontal scrollers (.events-grid
     etc.) are nested inside and manage their own overflow-x: auto scroll.
     The .home-hero and .newsletter-section already have overflow:hidden so they
     are excluded here. footer-inner is also wrapped so sections only.
     overflow-x: hidden is declared first as a fallback for Safari < 16, which
     does not recognise 'clip' and falls back to 'visible' without it. Carousels
     nested inside (.events-grid etc.) manage their own overflow-x:auto and are
     not blocked by the parent being hidden.                                      */
  .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; }
}

/* 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)); }
}

/* 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 */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
  /* Brand and contact both span full row so neither gets squeezed into 1/3 width */
  .footer-col--brand   { grid-column: 1 / -1; }
  .footer-col--contact { grid-column: 1 / -1; }
}


/* ============================================================
   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; }
}

/* Publication single */
@media (max-width: 1023px) {
  .pub-layout { grid-template-columns: 1fr 260px; gap: 2rem; }
}

/* 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 */
  .ev-info-card__date-block { padding: 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: hide arrow on small screens to save space */
  .ev-person-card { grid-template-columns: 44px 1fr auto; }
  .ev-person-card__avatar-wrap { width: 44px; height: 44px; }

  /* 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; }
}

@media (max-width: 479px) {
  .ev-person-card__arrow { display: none; }
  .ev-person-card { grid-template-columns: 40px 1fr; }
  .ev-person-card__avatar-wrap { width: 40px; height: 40px; }

  /* 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.8rem;
    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: 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-carousel-outer { padding: 0 1rem; }
  .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-header__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .wwa-split         { grid-template-columns: 1fr; }
  .wwa-resource-grid { grid-template-columns: 1fr; }
}

/* Jobs archive */
@media (max-width: 1023px) {
  .jobs-header__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Video archive */
@media (max-width: 1023px) {
  .vid-header__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .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; }
  .header-menu-toggle { display: inline-flex; }
  .site-header__brand-inner { min-height: 70px; }
  .site-brand__mark { width: 36px; height: 36px; }
  .site-brand__name { font-size: 0.92rem; }
  .content-grid--3, .stats-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid--feature { grid-template-columns: 1fr; }

  /* ── 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; }
  .publications-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); } }

/* 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-podcast-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-who-cols { column-count: 1; }
  .about-pillars { grid-template-columns: 1fr; }
  .about-people-grid { grid-template-columns: repeat(2, 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; }
  /* Vision quote: slightly smaller */
  .about-vision { padding: 3.5rem 0; }
}

/* 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-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; }
  .pub-filter__search-btn { padding: 0 0.9rem; font-size: 0.82rem; }
  .pub-filter__chip { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
  .pub-filter__toggle { font-size: 0.82rem; padding: 0.35rem 0.75rem; }
}

/* 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.78rem; }
}

/* 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 */
  .pcast-card__title { font-size: 0.82rem; }
  .pcast-card__badge { font-size: 0.67rem; }
  .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.8rem; }
  .ep-slider-btn { width: 36px; height: 36px; }
  .ep-slider-fade { width: 40px; }
}

/* Experts / People archive */
@media (max-width: 767px) {
  .experts-filter__search-row { flex-wrap: wrap; }
  .experts-filter__search-btn { width: 100%; justify-content: center; }
  .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__mark { width: 30px; height: 30px; }
  .site-brand__name { font-size: 0.82rem; }
  .content-grid--2, .content-grid--3, .stats-grid__items { grid-template-columns: 1fr; }
  /* 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
   ============================================================ */

/* Step 1 — 1100px: reduce featured block to free waveform space */
@media (max-width: 1100px) {
  .hap-featured { width: 270px; }
}

/* 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-controls { padding: 0 0.75rem; gap: 0.5rem; }
  .hap-play-pause { width: 50px; height: 50px; }
}


/* ============================================================
   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;
  }

  /* 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%);
  }

  /* Accent: narrow it to match the shallower mobile diagonal */
  .hap-accent { width: 40px; align-self: stretch; }

  /* 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;
  }
  .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;
  }

  .hap-meta {
    padding: 0 0.5rem 0 0.125rem;
    gap: 0.25rem;
  }
  .hap-time   { font-size: 0.7rem; }
  .hap-volume { width: 24px; height: 24px; }
  .hap-speed  { font-size: 0.72rem; }

  /* Hero reserves space: Row 1 ≈ 78px + Row 2 ≈ 50px + 4px border = 132px */
  .home-hero { padding-bottom: 136px; }

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

  /* ── Hero: fix content bottom-padding mismatch ───────────────────────
     Desktop uses 126px bar height; mobile bar is 136px.
     Also compact the gap and top-padding to save vertical space.       */
  .hero-slide__content {
    padding-block-start: 1.5rem;
    padding-block-end: calc(136px + 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.72rem; 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: 50%;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    box-shadow: 0 3px 10px rgba(243, 91, 28, 0.45);
  }
  .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) {
  .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; }

  /* Hide speed toggle — saves ~28px on the narrowest row */
  .hap-speed { display: none; }

  .hap-meta { gap: 0.2rem; padding: 0 0.375rem 0 0.1rem; }
  .hap-time { font-size: 0.65rem; }
  .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; }
  /* Volume icon takes too much space at this width; keep time only */
  .hap-volume { display: none; }
}

/* 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. */
  .events-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    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;
  }
  .events-grid::-webkit-scrollbar { display: none; }
  .events-grid .event-card {
    scroll-snap-align: start;
    width: 100%;
    min-width: 0;
  }
  .events-carousel-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 #f15a24, 2px 17px 0 0 #f15a24; }
  .event-circle__day { font-size: 2.75rem; }

  /* Publications: horizontal snap carousel — one item per slide.
     Same grid approach as events-grid: grid-auto-columns:100% is resolved
     against the container's explicit width, not its content, so slides never
     push the container wider than the viewport. */
  .pub2-layout {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    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;
    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: var(--ari-radius);
  }
  .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.875rem; }
  /* 500px gives the hero enough room for the full content stack
     (badge + 4-line title + author/date + 136px audio bar + gaps).
     The old 360px value was too small and caused overflow clipping. */
  .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.78rem; }
  .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 */
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-col--contact { grid-column: 1 / -1; }
}

/* 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: 52px; height: 52px; }
  .topic-card__icon svg { width: 28px; height: 28px; }
  .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; }
}

/* Write with ARI — mobile */
@media (max-width: 640px) {
  .wwa-header  { padding: 2.5rem 0 2rem; }
  .wwa-body    { padding: 1.5rem 0 2.5rem; }
  .wwa-section { gap: 1rem; }
  .wwa-icon-circle { width: 48px; height: 48px; }
}

/* 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) {
  .jobs-header { padding: 2.5rem 0 2rem; }
  /* 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 #f3f4f6;
    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-header { padding: 2.5rem 0 2rem; }
  .vid-header__title { font-size: 1.75rem; }
  .vid-search-form { flex-direction: column; }
  .vid-search-btn { width: 100%; justify-content: center; }
  .vid-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .vid-filter-group { flex: 1 1 calc(50% - 0.3rem); }
}

/* 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; }
  .spage-bar { flex-direction: column; align-items: stretch; }
  .spage-bar__input-wrap { border-radius: 8px; }
  .spage-bar__submit { border-radius: 8px; justify-content: center; }
  .spage-filters { gap: 0.5rem; }
}


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

/* Program single */
@media (max-width: 600px) {
  .prog-hero { min-height: 320px; padding-bottom: 2rem; }
  .prog-pub-grid,
  .prog-project-grid,
  .prog-event-grid,
  .prog-podcast-grid,
  .prog-video-grid { grid-template-columns: 1fr; }
  /* Podcast cards: landscape on mobile single-column */
  .prog-pcast-card__wrap { aspect-ratio: 4/3; }
  /* 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-section { padding: 3rem 0; }
  .about-section--who { padding: 4rem 0; }
  .about-memoriam { padding: 3rem 0; }
  .about-vision__quote { font-size: 1.1rem; }
  .about-funding { padding: 3rem 0; }
}

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


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

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


/* ============================================================
   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; }
}

/* Experts / People archive */
@media (max-width: 480px) {
  .experts-az-nav__letter { font-size: 0.75rem; }
  .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-hero__inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .nl-hero { padding: 2.75rem 0 2.5rem; }
  .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; }
}

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

/* ============================================================
   FELLOWSHIP DETAIL PAGE — responsive
   ============================================================ */

@media (max-width: 860px) {
  .fd-fellows-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
  }
}

@media (max-width: 640px) {
  .fd-body { max-width: 100%; }
  .fd-fellows-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .fd-hero__title { font-size: 1.5rem; }
  .fd-quote__text { font-size: 1rem; }
  .fd-cover__img { max-height: 260px; }
}

@media (max-width: 420px) {
  .fd-fellow__avatar { width: 56px; height: 56px; }
}

/* ============================================================
   ANNUAL FELLOWSHIPS PAGE — responsive
   ============================================================ */

/* Featured card: stack on tablet */
@media (max-width: 900px) {
  .fellowships-card--featured {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .fellowships-card--featured .fellowships-card__img-wrap {
    aspect-ratio: 16/6;
    min-height: 0;
  }
  .fellowships-card--featured .fellowships-card__body {
    padding: 1.5rem 2rem;
  }
}

/* Grid: 2 columns on tablet */
@media (max-width: 860px) {
  .fellowships-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Grid: single column on mobile */
@media (max-width: 600px) {
  .fellowships-grid {
    grid-template-columns: 1fr;
  }
  .fellowships-card--featured .fellowships-card__body {
    padding: 1.25rem;
  }
  .fellowships-card--featured .fellowships-card__title {
    font-size: 1.2rem;
  }
}