/* ============================================================
   MEA INSTITUTE — RESPONSIVE / MOBILE STYLES
   assets/css/responsive.css

   Breakpoints:
   - 1280px: Side rail disappears on publication
   - 1024px: Hamburger replaces nav, 2-column grids
   - 768px:  Tablet adjustments
   - 480px:  Single column, mobile-first
   ============================================================ */


/* ─── 1280px — LARGE DESKTOP ───────────────────────────────── */

@media (max-width: 1280px) {

  /* Publication sidebar collapses */
  .pub-layout {
    grid-template-columns: 1fr;
  }

  .pub-sidebar {
    position: static;
    order: -1;
  }

  .pub-sidebar__section {
    display: inline-block;
    margin-right: var(--space-md);
    border-bottom: none;
    border-right: var(--hairline);
    padding-right: var(--space-md);
    padding-bottom: 0;
    vertical-align: top;
  }

  .pub-sidebar__section:last-child {
    border-right: none;
  }
}


/* ─── 1024px — TABLET LANDSCAPE / HAMBURGER ────────────────── */

@media (max-width: 1024px) {

  /* HEADER: show hamburger, hide desktop nav */
  .site-nav__toggle {
    display: flex;
    position: relative;
    z-index: calc(var(--z-modal) + 1);
  }

  .site-nav__menu {
    display: none;
  }

  .site-header__actions,
  .site-header__utility {
    gap: var(--space-xs);
  }

  .site-header__donate-btn {
    display: none;
  }

  /* CIRIC ships two header CTAs where MEA had one donate button. The drawer
     carries both, so the secondary ("Explore our work") goes away here and the
     remaining one shrinks to sit beside the hamburger inside the 88px bar. */
  .site-header__cta--ghost {
    display: none;
  }

  .site-header__cta {
    height: 38px;
    padding: 0 1rem;
    font-size: 0.6875rem;
  }
  
  .site-header__inner {
    gap: var(--space-sm);
  }

  /* Body scroll lock — position: fixed required for iOS Safari */
  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
  }

  /* Close button inside the drawer topbar — hamburger-line X style */
  .mea-mobile-drawer__close {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
  }

  .mea-mobile-drawer__close .hamburger-line {
    background: var(--color-navy);
    width: 22px;
    height: 2px;
    transition: all var(--transition-base);
  }

  .mea-mobile-drawer__close .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .mea-mobile-drawer__close .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .mea-mobile-drawer__close .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* ─── Mobile Drawer (full-screen, slides from top) ──────── */
  .mea-mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    z-index: 9999;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  body.nav-open .mea-mobile-drawer {
    transform: translateY(0);
  }

  /* Top bar: logo left, hamburger-X floats top-right */
  .mea-mobile-drawer__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--container-pad);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
    flex: none;
  }

  .mea-mobile-drawer__logo {
    display: inline-flex;
    align-items: center;
  }

  .mea-mobile-drawer__logo img {
    height: 44px;
    width: auto;
    display: block;
  }

  .mea-mobile-drawer__topbar-spacer {
    width: 48px;
    height: 48px;
  }

  /* Single CTA: Support Us, navy fill */
  .mea-mobile-drawer__cta-row {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md) var(--container-pad);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
    flex: none;
  }

  .mea-mobile-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    font-family: var(--font-base);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-navy);
    color: var(--color-white);
    border: 1.5px solid var(--color-navy);
    border-radius: var(--radius-sm);
    text-decoration: none;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .mea-mobile-drawer__cta:hover,
  .mea-mobile-drawer__cta:focus-visible {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
  }

  /* Nav menu */
  .mea-mobile-drawer__nav {
    flex: 1;
    padding: 0 var(--container-pad);
  }

  .mea-mobile-drawer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mea-mobile-drawer__item {
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
  }

  .mea-mobile-drawer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-navy);
    text-align: left;
    text-decoration: none;
    line-height: 1.4;
  }

  .mea-mobile-drawer__chevron {
    flex: none;
    color: var(--color-navy);
    transition: transform 220ms ease;
  }

  .mea-mobile-drawer__item--has-sub.is-expanded .mea-mobile-drawer__chevron {
    transform: rotate(180deg);
  }

  .mea-mobile-drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-md);
    display: none;
  }

  .mea-mobile-drawer__item--has-sub.is-expanded .mea-mobile-drawer__sub {
    display: block;
  }

  .mea-mobile-drawer__sub li a {
    display: block;
    padding: 10px 0 10px var(--space-md);
    font-family: var(--font-base);
    font-size: 0.9375rem;
    font-weight: 400;
    color: rgba(var(--color-primary-rgb), 0.7);
    text-decoration: none;
    line-height: 1.4;
  }

  .mea-mobile-drawer__sub li a:hover,
  .mea-mobile-drawer__sub li a:focus-visible {
    color: var(--color-navy);
  }

  /* Social icons row at bottom */
  .mea-mobile-drawer__social {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: var(--space-lg) var(--container-pad) calc(var(--space-lg) + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
    flex: none;
  }

  .mea-mobile-drawer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--color-navy);
    border-radius: 50%;
    color: var(--color-navy);
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .mea-mobile-drawer__social a:hover,
  .mea-mobile-drawer__social a:focus-visible {
    background: var(--color-navy);
    color: var(--color-white);
  }

  /* Research layout: sidebar stacks above results */
  .research-layout {
    grid-template-columns: 1fr;
  }

  .research-filters {
    position: static;
  }

  /* Sticky filter bar: stack search below selects on narrow screens */
  .research-filter-bar__row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .research-filter-bar__chips,
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }
  
  .research-filter-bar__chips::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .research-search-form,
  .filter-search {
    width: 100%;
    max-width: 100%;
  }

  .research-select {
    max-width: none;
  }

  /* Events & Media Split */
  .events-media-split__grid {
    grid-template-columns: 1fr !important;
  }

  /* Research results: 2 columns still */
  .research-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Experts: 3 columns */
  .experts-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Team department: 3 columns */
  .team-department__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Value grid / pillars: 2 columns */
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Metrics: wrap on smaller screens */
  .metrics-band__grid {
    flex-wrap: wrap;
  }

  .metrics-band__item {
    flex: 1 1 200px;
  }

  /* Stats: 2 columns */
  .stats-grid {
    flex-wrap: wrap;
  }

  .stat-item {
    flex: 1 1 45%;
  }

  /* About people: 2 columns */
  .about-people__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Centre detail: single column */
  .centre-layout {
    grid-template-columns: 1fr;
  }

  .centre-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .centre-sidebar__box {
    flex: 1;
    min-width: 240px;
  }

  /* Expert profile */
  .expert-profile__layout {
    grid-template-columns: 1fr;
  }

  /* Split editorial: single column */
  .split-editorial {
    grid-template-columns: 1fr;
  }

  .split-editorial__image--overlap {
    margin-right: 0;
    margin-left: 0;
  }

  .split-editorial--reverse .split-editorial__image--overlap {
    margin-right: 0;
    margin-left: 0;
  }

  /* Newsletter band: single column */
  .newsletter-band__inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}


/* ─── 768px — TABLET PORTRAIT ──────────────────────────────── */

@media (max-width: 768px) {

  /* ── CIRIC landing / team sections ──────────────────────────────── */
  .ciric-section {
    padding-block: var(--space-xl);
  }

  .ciric-hero {
    padding-block: var(--space-2xl);
  }

  .ciric-hero__title {
    font-size: clamp(2.75rem, 12vw, 4.5rem);
  }

  .ciric-hero__fullname {
    font-size: var(--text-md);
  }

  .ciric-hero__tagline {
    font-size: var(--text-base);
  }

  .ciric-section__heading {
    font-size: var(--text-xl);
  }

  .ciric-section__intro {
    margin-bottom: var(--space-lg);
    font-size: var(--text-base);
  }

  .ciric-pillars__grid {
    gap: var(--space-md);
  }

  .ciric-team__grid {
    gap: var(--space-lg);
  }

  .ciric-member {
    grid-template-columns: 108px 1fr;
    gap: var(--space-md);
  }

  .ciric-member__photo img,
  .ciric-member__photo-fallback {
    width: 108px;
    height: 108px;
  }

  /* Reduce section padding */
  .hero--page,
  .hero--text,
  .hero {
    min-height: 360px;
    padding: var(--space-2xl) 0;
  }

  .hero--home {
    min-height: 360px;
    max-height: none;
  }

  /* Careers + Our Team page heroes: reduce height on tablet */
  .careers-hero,
  .page-hero {
    min-height: 340px;
    padding: var(--space-2xl) 0;
  }

  /* Reduce vertical section padding */
  .featured-research,
  .centres-preview,
  .pc-directory,
  .about-page,
  .about-people,
  .brand-pillars,
  .media-section-block,
  .events-preview,
  .media-spotlight,
  .contact-page,
  .careers-page,
  .donate-page,
  .team-page,
  .experts-page,
  .research-page,
  .expert-profile__body,
  .expert-pubs,
  .centre-detail,
  .centre-related-pubs,
  .leadership-page,
  .pub-body,
  .positioning-block,
  .newsletter-signup,
  .newsletter-band,
  .support-banner,
  .support-band,
  .mission-vision,
  .careers-values,
  .careers-positions,
  .careers-join,
  .donate-section,
  .donate-faq,
  .regional-programmes,
  .spontaneous-applications,
  .search-results-page {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  /* Hero typography scale down */
  .hero--home__headline {
    font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
  }

  .hero--home__subheadline {
    font-size: var(--text-md);
  }

  .hero__headline {
    font-size: var(--text-2xl);
  }

  .hero__actions,
  .hero--home__actions {
    flex-direction: column;
    align-items: center;
  }

  /* Media spotlight */
  .media-spotlight__grid {
    grid-template-columns: 1fr;
  }

  .media-spotlight__sidebar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-lg);
  }

  /* Policy centres text: stack on tablet */
  .centres-text__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .centres-text__divider {
    display: none;
  }

  .centres-text__intro {
    max-width: none;
  }

  /* Events: stack on tablet */
  .hp-events__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Media: stack on tablet */
  .hp-media__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Homepage grids: 2 columns */
  .positioning-block__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .research-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .research-filter-bar {
    box-shadow: none;
  }

  .research-filter-bar__inner {
    gap: var(--space-xs);
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .research-filter-bar__chips {
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  .research-chip {
    height: 28px;
    padding: 0 0.875rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }

  .research-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    min-height: 42px;
    padding: 0.75rem 0.875rem;
    font-family: var(--font-base);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-navy);
    background: var(--color-sand-bg);
    border: 1px solid var(--color-warmgrey-40);
    border-radius: 0;
    cursor: pointer;
  }

  .research-filter-toggle__label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .research-filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-navy);
    border-radius: 999px;
  }

  .research-filter-toggle.is-active {
    border-color: var(--color-navy);
    background: rgba(var(--color-primary-rgb), 0.04);
  }

  .research-filter-panel {
    display: none;
  }

  .research-filter-panel.is-open {
    display: block;
  }

  .research-filter-bar__row {
    padding-top: var(--space-sm);
  }

  .centres-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  /* Card gaps: 16px on tablet */
  .research-results-grid,
  .experts-grid,
  .about-people__grid,
  .events-preview__list,
  .media-grid,
  .donate-cards {
    gap: var(--space-sm);
  }

  /* Centres directory: 2 columns on tablet */
  .pc-directory__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 40px;
  }

  /* Regional programmes: single column */
  .regional-programmes__grid {
    grid-template-columns: 1fr;
  }

  /* Experts: 2 columns */
  .experts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Team department: 2 columns */
  .team-department__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Expert card photo: 96px diameter on mobile */
  .expert-card__photo-wrap {
    width: 96px;
    height: 96px;
  }

  .expert-tabs {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  /* Expert profile */
  .expert-profile__header-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .expert-profile__photo-wrap {
    width: 140px;
    height: 140px;
  }

  .expert-profile__social {
    justify-content: center;
  }

  /* Leadership */
  .leadership-card {
    grid-template-columns: 120px 1fr;
    gap: var(--space-lg);
  }

  /* Mission/Vision: stack */
  .mission-vision__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .mission-vision__divider {
    display: none;
  }

  /* About people: 2 columns */
  .about-people__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pillars: 2 columns */
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Value grid: 2 columns */
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact: single column */
  .contact-body {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .donate-cards {
    grid-template-columns: 1fr;
  }

  /* Event card: stack */
  .event-card {
    flex-direction: column;
  }

  .event-card__image {
    width: 100%;
  }

  /* Media grid: single column */
  .media-grid {
    grid-template-columns: 1fr;
  }

  .media-card--featured {
    grid-column: auto;
  }

  .podcast-item {
    grid-template-columns: 1fr;
  }

  /* Policy centres, events, media: tighter mobile padding */
  .centres-text,
  .hp-events,
  .hp-media {
    padding: var(--space-2xl) 0;
  }

  .centres-text__columns {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .centres-text__heading,
  .hp-events__heading,
  .hp-media__heading {
    font-size: var(--text-xl);
  }

  .hp-events__image-slot {
    height: 200px;
  }

  .hp-media__cover {
    height: 180px;
  }

  .hp-media__episode-thumb {
    width: 60px;
    height: 60px;
  }

  /* Research results: single column */
  .research-results-grid {
    grid-template-columns: 1fr;
  }

  .research-filter-bar__chips {
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }

  .research-filter-bar__selects {
    width: 100%;
    gap: 0.75rem;
  }

  .research-select {
    flex-basis: 100%;
    max-width: none;
  }

  .research-search-form {
    max-width: none;
  }

  .research-active-filters {
    gap: 0.45rem;
  }

  .research-active-filters__label {
    width: 100%;
    margin-right: 0;
  }

  .research-active-filters__clear {
    margin-left: 0;
  }

  /* Events preview: 2 columns */
  .events-preview__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Newsletter */
  .newsletter-signup__inner {
    grid-template-columns: 1fr;
  }

  /* Footer: single column, everything centred */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .site-footer__tagline,
  .site-footer__address {
    max-width: 100%;
  }

  .site-footer__social {
    justify-content: center;
  }

  /* Social icons bigger on mobile */
  .social-icon {
    width: 36px;
    height: 36px;
  }

  .social-icon svg {
    width: 17px;
    height: 17px;
  }

  /* Nav: two groups side by side */
  .site-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .site-footer__nav-group {
    align-items: center;
  }

  .site-footer__nav-list {
    align-items: center;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
  }

  .site-footer__copyright {
    text-align: center;
  }

  /* Support banner: stack */
  .support-banner__inner {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .support-banner__actions {
    flex-direction: column;
    width: 100%;
  }

  .support-banner__actions .btn {
    text-align: center;
  }

  /* Pub sidebar: reflow */
  .pub-sidebar__section {
    display: block;
    border-right: none;
    padding-right: 0;
    border-bottom: var(--hairline);
    padding-bottom: var(--space-md);
  }

  /* Regional spotlight */
  .regional-spotlight__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
  }

  /* Metrics */
  .metrics-band__number {
    font-size: clamp(2.5rem, 7vw, 3.5rem);
  }
}


/* ─── 480px — MOBILE ───────────────────────────────────────── */

@media (max-width: 480px) {

  /* Tighter container padding + a shorter bar: 88px of chrome is a lot of a
     phone viewport. Every sticky offset (drawer topbar, reading progress)
     reads the same tokens, so they follow automatically. */
  :root {
    --container-pad: 1.25rem;
    --header-height: 64px;
    --header-height-scrolled: 56px;
  }

  .site-header__logo {
    min-width: 0;
  }

  /* Below 480px the header bar cannot hold both marks and the hamburger, so
     the parent mark drops out of the BAR only. It is still on the page — in
     the drawer topbar and in the footer — so the affiliation never disappears
     on mobile. */
  .brand-lockup--header .brand-lockup__rule,
  .brand-lockup--header .brand-lockup__parent {
    display: none;
  }

  .brand-lockup--header .brand-lockup__self img {
    height: 40px;
  }

  .site-header.scrolled .brand-lockup--header .brand-lockup__self img {
    height: 34px;
  }

  /* The drawer topbar has the full width of the viewport — keep both. */
  .brand-lockup--drawer {
    gap: var(--space-sm);
  }

  .brand-lockup--drawer .brand-lockup__self img {
    height: 34px;
  }

  .brand-lockup--drawer .brand-lockup__parent img {
    height: 26px;
  }

  .brand-lockup--drawer .brand-lockup__rule {
    height: 22px;
  }

  /* Footer: stack the two marks so neither has to shrink to fit. */
  .brand-lockup--footer {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .brand-lockup--footer .brand-lockup__rule {
    display: none;
  }

  .brand-lockup--footer .brand-lockup__self img {
    height: 60px;
  }

  .brand-lockup--footer .brand-lockup__parent img {
    height: 40px;
  }

  /* No room for a CTA next to the logo and the hamburger — the drawer has it. */
  .site-header__cta {
    display: none;
  }

  /* ── CIRIC landing / team sections ──────────────────────────────── */
  .ciric-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-lg);
  }

  .ciric-hero__ctas .btn,
  .ciric-section__more .btn,
  .ciric-events__invite .btn,
  .ciric-team__back .btn {
    width: 100%;
  }

  .ciric-pillars__grid {
    grid-template-columns: 1fr;
  }

  .ciric-team__grid--compact {
    grid-template-columns: 1fr;
  }

  .ciric-member {
    grid-template-columns: 1fr;
  }

  .ciric-member__photo img,
  .ciric-member__photo-fallback {
    width: 96px;
    height: 96px;
  }

  .ciric-chip {
    font-size: var(--text-xs);
    padding: 0.45em 0.85em;
  }

  .ciric-newsletter__form {
    flex-direction: column;
    align-items: stretch;
  }

  .ciric-newsletter__form .btn {
    width: 100%;
  }

  .ciric-contact__direct {
    flex-direction: column;
    gap: 0.25rem;
  }

  .ciric-events__empty {
    padding: var(--space-lg) var(--space-md);
  }

  /* Card media: 3/2 of a full-width card is most of a phone screen. */
  .pub-card__image,
  .pub-card__image-fallback {
    aspect-ratio: 16 / 9;
  }

  /* Hero adjustments */
  .hero--home__headline {
    font-size: var(--text-2xl);
  }

  .page-hero__title,
  .hero--page__title,
  .hero--text__title {
    font-size: var(--text-xl);
  }

  /* Careers + Our Team page heroes: compact on mobile */
  .careers-hero,
  .page-hero {
    min-height: 260px;
    padding: var(--space-xl) 0;
  }

  .careers-hero__scroll-cue {
    display: none;
  }

  /* Regional programme cards: tighter padding, no text overflow */
  .regional-programmes__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .regional-card {
    padding: var(--space-md);
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .regional-card__title {
    font-size: var(--text-lg, 1.375rem);
  }

  .hero--home__actions,
  .hero__actions,
  .hero--page__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero--home__actions .btn,
  .hero__actions .btn,
  .hero--page__actions .btn {
    width: 100%;
    text-align: center;
  }

  /* All grids: single column */
  .research-grid {
    grid-template-columns: 1fr;
  }

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

  .pc-directory__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .pc-intro {
    padding: var(--space-2xl) 0;
  }

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

  .about-people__grid {
    grid-template-columns: 1fr;
  }

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

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

  .team-department__grid {
    grid-template-columns: 1fr;
  }

  /* Card gaps: 16px mobile */
  .research-grid,
  .centres-grid,
  .experts-grid,
  .about-people__grid,
  .pillars-grid,
  .value-grid,
  .team-department__grid,
  .events-preview__list,
  .media-grid {
    gap: var(--space-sm);
  }

  /* Stats: 2 columns stays */
  .stat-item {
    flex: 1 1 45%;
  }

  .metrics-band__item {
    flex: 1 1 45%;
  }

  /* Vertical hairlines removed on single column */
  .value-grid__item+.value-grid__item::before,
  .pillar-card+.pillar-card::before {
    display: none;
  }

  .value-grid__item {
    padding: var(--space-md) 0;
    border-bottom: var(--hairline);
  }

  .value-grid__item:last-child {
    border-bottom: none;
  }

  .pillar-card {
    padding: var(--space-md) 0;
    border-bottom: var(--hairline);
  }

  .pillar-card:last-child {
    border-bottom: none;
  }

  /* Leadership card: stack vertically */
  .leadership-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .leadership-card__photo-wrap {
    width: 100%;
    max-width: 200px;
    margin-inline: auto;
  }

  /* Expert filters: stack */
  .expert-filters {
    flex-direction: column;
  }

  .expert-filter-select {
    width: 100%;
  }

  /* Trending tile links: stack */
  .trending-tile__links {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Events preview: single column */
  .events-preview__list {
    grid-template-columns: 1fr;
  }

  /* Newsletter: stack input + button */
  .newsletter-signup__form,
  .newsletter-band__form {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .newsletter-signup__input,
  .newsletter-band__input {
    border-right: 1px solid var(--color-warmgrey-60);
  }

  .newsletter-signup__btn,
  .newsletter-band__btn {
    width: 100%;
    justify-content: center;
  }

  /* Regional spotlight: stack */
  .regional-spotlight__regions {
    flex-direction: column;
    gap: var(--space-md);
  }

  .regional-spotlight__divider {
    display: none;
  }

  /* Job listing: stack */
  .job-listing {
    flex-direction: column;
    gap: var(--space-md);
  }

  .job-listing__aside {
    align-items: flex-start;
    text-align: left;
  }

  /* Support band: buttons stack */
  .support-band__actions {
    flex-direction: column;
    align-items: center;
  }

  .support-band__actions .btn {
    width: 100%;
    text-align: center;
  }

  /* Error page */
  .error-404__code {
    font-size: 5rem;
  }

  .error-404__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Donate section (contact page): tighter padding + centered content
     so cards fit narrow Android viewports (≈360px) without overflow */
  .donate-section {
    overflow-x: hidden;
  }

  .donate-cards {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .donate-card {
    padding: var(--space-md);
    text-align: center;
  }

  .donate-card__title,
  .donate-card__desc {
    text-align: center;
  }

  .donate-card .btn {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    margin-inline: auto;
    padding: 0.75rem var(--space-sm);
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  /* Footer: tighten spacing */
  .site-footer {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
  }

  .site-footer__inner {
    gap: var(--space-lg);
  }

}


/* ─── 1024px — NEW TEMPLATE RESPONSIVE ────────────────────── */

@media (max-width: 1024px) {

  /* Publication article layout: single column */
  .pub-layout--article {
    grid-template-columns: 1fr;
  }

  .pub-side-rail {
    position: static;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: var(--hairline);
    margin-bottom: var(--space-lg);
  }

  .pub-side-rail__toc {
    flex: 1;
    min-width: 200px;
  }

  .pub-side-rail__share {
    flex-shrink: 0;
  }

  .pub-side-rail__back-top {
    display: none;
  }

  /* Expert split header: stack */
  .expert-header__inner {
    flex-direction: column;
  }

  .expert-header__photo {
    width: 100%;
    max-height: 400px;
  }

  /* Centre hero: stack */
  .centre-hero__inner {
    flex-direction: column;
  }

  .centre-hero__watermark {
    position: absolute;
    right: var(--container-pad);
    top: 50%;
    transform: translateY(-50%);
  }

  /* Centre grids */
  .centre-publications__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .centre-experts__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Expert grids */
  .expert-publications__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .expert-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Event header: image stays beside body but tightens */
  .event-header__grid {
    gap: var(--space-xl);
  }

  /* Event body: sidebar a touch narrower */
  .event-body__grid {
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
  }

  /* Related event grids */
  .event-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Terms TOC: hide on smaller screens */
  .terms-body__layout {
    grid-template-columns: 1fr;
  }

  .terms-toc {
    position: static;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: var(--hairline);
  }

  /* Search result grids */
  .search-group__results--publication {
    grid-template-columns: repeat(2, 1fr);
  }

  .search-group__results--expert {
    grid-template-columns: repeat(3, 1fr);
  }

  .search-group__results--policy_centre {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Publication related grid */
  .pub-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─── 768px — NEW TEMPLATE RESPONSIVE ─────────────────────── */

@media (max-width: 768px) {

  /* Updated templates padding reduction */
  .pub-header,
  .pub-endmatter,
  .expert-bio,
  .expert-publications,
  .expert-related,
  .centre-description,
  .centre-themes,
  .centre-publications,
  .centre-experts,
  .event-header,
  .event-body,
  .event-speakers,
  .event-related,
  .event-register-cta,
  .job-body,
  .search-results,
  .terms-body {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  /* Expert header: smaller photo */
  .expert-header__photo {
    max-height: 300px;
  }

  .expert-header__name {
    font-size: var(--text-xl);
  }

  .expert-header__labels {
    gap: 0.35rem;
  }

  /* Event header: stack image above body */
  .event-header__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .event-header__media {
    aspect-ratio: auto;
    height: 280px;
  }

  .event-header__title {
    font-size: var(--text-2xl);
  }

  /* Event body: sidebar stacks above prose, releases sticky */
  .event-body__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .event-rail {
    position: static;
    gap: var(--space-md);
  }

  /* Speakers: tighter row */
  .event-speaker {
    grid-template-columns: 80px 1fr;
    gap: var(--space-md);
  }

  .event-speaker__photo {
    width: 80px;
    height: 80px;
  }

  /* Related grids: 2-col then stacks at 480px */
  .event-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Centre/Expert grids: 2-column */
  .centre-publications__grid,
  .pub-related__grid {
    grid-template-columns: 1fr;
  }

  .centre-experts__grid,
  .expert-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .expert-publications__grid {
    grid-template-columns: 1fr;
  }

  /* Search grids */
  .search-group__results--publication,
  .search-group__results--policy_centre,
  .search-group__results--event,
  .search-group__results--media_episode {
    grid-template-columns: 1fr;
  }

  .search-group__results--expert {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Job header meta */
  .job-header__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  /* 404 */
  .error-404__links {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Pub header byline */
  .pub-header__authors-row {
    flex-wrap: wrap;
  }

  .pub-header__utility {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* Expert card photo */
  .expert-card__photo-wrap {
    width: 120px;
    height: 120px;
  }
}


/* ─── 480px — NEW TEMPLATE RESPONSIVE ─────────────────────── */

@media (max-width: 480px) {

  /* All new grids: single column */
  .centre-experts__grid,
  .expert-related__grid,
  .event-related__grid,
  .search-group__results--expert {
    grid-template-columns: 1fr;
  }

  /* Event header tighter on mobile */
  .event-header {
    padding-top: var(--space-md);
  }

  .event-header__title {
    font-size: var(--text-xl);
  }

  /* Speakers: stack photo above body, centred */
  .event-speaker {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-sm);
  }

  .event-speaker__photo {
    margin-inline: auto;
    width: 88px;
    height: 88px;
  }

  /* Related header: stack title + see-more */
  .event-related__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Expert header social: wrap */
  .expert-header__social {
    flex-wrap: wrap;
  }

  /* Publication newsletter form: stack */
  .pub-newsletter__form {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .pub-newsletter__input {
    border-right: 1px solid var(--color-warmgrey-40);
  }

  /* Search form: full width */
  .search-form {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .search-form__input {
    border-right: 1px solid var(--color-warmgrey-40);
  }

  .search-form__submit {
    width: 100%;
    height: 44px;
  }

  /* Search empty links */
  .search-empty__links {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Expert card: smaller */
  .expert-card__photo-wrap {
    width: 96px;
    height: 96px;
  }
}


/* ─── ABOUT / VISION / STRATEGY / CAREERS-COMMUNITY RESPONSIVE ─ */

@media (max-width: 1024px) {
  .strategy-dl__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .careers-community__values {
    gap: var(--space-lg) var(--space-xl);
  }

  /* Priorities grid: 3-up → 2-up */
  .priorities-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Story excerpt: equal columns */
  .story-excerpt__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  /* About Research: 3-up → 2-up, then last card wraps */
  .about-research__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Emissary strip: stack CTA beneath copy */
  .about-research__emissary {
    grid-template-columns: 1fr;
    padding: var(--space-lg);
    gap: var(--space-md);
  }

  /* Youth band: mandala smaller so content still reads */
  .youth-band__mandala {
    width: 460px;
    height: 460px;
    transform: translate(-40%, -50%);
  }
}

@media (max-width: 768px) {
  .about-hero,
  .mission-statement,
  .story-excerpt,
  .about-research,
  .priorities-grid,
  .youth-band,
  .vision-narrative,
  .strategy-dl,
  .careers-community {
    padding: var(--space-2xl) 0;
  }

  .story-excerpt__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .story-excerpt__media {
    max-width: 480px;
    margin: 0 auto;
    padding-right: 24px;
    padding-bottom: 24px;
  }

  .story-excerpt__copy {
    max-width: none;
  }

  .about-hero {
    min-height: 360px;
  }

  .mission-statement__heading,
  .about-research__heading,
  .priorities-grid__heading,
  .vision-narrative__heading,
  .careers-community__heading,
  .youth-band__heading {
    font-size: var(--text-xl);
  }

  .vision-narrative__pullquote blockquote {
    font-size: var(--text-xl);
  }

  .careers-community__values {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Priorities grid: full stack */
  .priorities-grid__list {
    grid-template-columns: 1fr;
  }

  /* About Research: full stack */
  .about-research__grid {
    grid-template-columns: 1fr;
  }

  /* Youth band: mandala further reduced, stats wrap */
  .youth-band__inner {
    justify-content: flex-start;
  }

  .youth-band__mandala {
    width: 360px;
    height: 360px;
    opacity: 0.10;
  }

  .youth-band__stats {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Priority-card caption: slightly smaller type */
  .priority-card__title {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .strategy-dl__card {
    padding: var(--space-lg);
  }

  .strategy-dl__cta {
    width: 100%;
  }

  .about-hero__heading {
    font-size: 2rem;
  }

  .youth-band__actions .youth-band__cta {
    width: 100%;
  }
}


/* ─── PRINT STYLES ────────────────────────────────────────── */

@media print {

  .site-header,
  .site-nav,
  .site-nav__toggle,
  .mobile-nav,
  .reading-progress,
  .support-banner,
  .support-band,
  .newsletter-signup,
  .newsletter-band,
  .site-footer,
  .hero__actions,
  .hero--home__actions,
  .hero--page__actions,
  .pub-hero__actions,
  .pub-header__utility,
  .pub-side-rail__share,
  .pub-side-rail__back-top,
  .pub-newsletter,
  .event-hero__actions,
  .event-register-cta,
  .research-filters,
  .filter-bar,
  .error-404__actions,
  .expert-header__social,
  .expert-card__social,
  .pub-header__share {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .pub-layout {
    grid-template-columns: 1fr;
  }

  .expert-profile__layout {
    grid-template-columns: 1fr;
  }

  .centre-layout {
    grid-template-columns: 1fr;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}

/* ============================================================
   EVENTS & MEDIA ARCHIVES + SINGLE EPISODE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .episode-related__grid { grid-template-columns: repeat(2, 1fr); }

  /* Sidebar drops below the reading column */
  .episode-body__grid {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
  }
  .episode-rail { position: static; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--hairline); }

  .media-show__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .media-show__aside { order: -1; max-width: 360px; }
}

@media (max-width: 768px) {
  .page-hero--archive { min-height: 0; padding: var(--space-xl) 0; }

  .archive-filter-bar__inner { flex-direction: column; align-items: stretch; }
  .archive-filter-bar__selects { width: 100%; }
  .research-select { flex: 1 1 calc(50% - var(--space-sm)); max-width: none; }
  .archive-filter-bar__search { margin-left: 0; max-width: none; }

  /* Events: two-row layout, hide thumbnail (desktop-only per spec) */
  .event-row {
    grid-template-columns: 72px 1fr;
    gap: var(--space-md);
  }
  .event-row__thumb { display: none; }
  .event-row__day { font-size: var(--text-2xl); }

  /* Coming this month: narrower date column */
  .coming-item {
    grid-template-columns: 88px 1fr;
    gap: var(--space-md);
  }
  .coming-item__day { font-size: var(--text-2xl); }

  /* Episode rows: collapse date into body, shrink cover */
  .episode-row {
    grid-template-columns: 72px 1fr;
    gap: var(--space-md);
    align-items: start;
  }
  .episode-row__date {
    display: block;
    grid-column: 2;
    grid-row: 2;
    font-size: var(--text-xs);
    margin-top: 0.25rem;
  }
  .episode-row__body { grid-column: 2; grid-row: 1; }
  .episode-row__cover { grid-column: 1; grid-row: 1 / 3; }
  .episode-row__excerpt { -webkit-line-clamp: 1; line-clamp: 1; }
  .episode-related__grid { grid-template-columns: 1fr; }

  .episode-hero { padding: var(--space-2xl) 0; }
  .episode-prose { font-size: var(--text-md); }

  .episode-guests__row { gap: var(--space-lg); justify-content: center; }
}

@media (max-width: 480px) {
  .event-row { grid-template-columns: 56px 1fr; gap: var(--space-sm); }
  .event-row__day { font-size: var(--text-xl); }
  /* A free-text "when" would wrap badly in 56px, so the date sits above the row. */
  .coming-item { grid-template-columns: 1fr; gap: var(--space-sm); }
  .coming-item__when--empty { display: none; }
  .episode-guest { width: 140px; }
}

/* ── Zakat World Map (page-ciric-zakat-map.php) ── */
@media (max-width: 900px) {
  .zakat-help { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 768px) {
  .zakat-legend__item--gap { margin-left: 0; }
  .zakat-toolbar { justify-content: flex-start; }
  .zakat-filters { grid-template-columns: 1fr 1fr; }
  .zakat-filters__field--search,
  .zakat-filters__reset { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .zakat-filters { grid-template-columns: 1fr; }
  .zakat-panel__title { font-size: var(--text-lg); }
  /* The search box is full width here, and so is its list. */
  .zakat-suggest__list { left: 0; min-width: 0; max-width: none; }
  .zakat-badges--wide .zakat-badge { grid-template-columns: 1fr; gap: 0.15rem; }
  .zakat-help__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Zakat World Map: country page (single-zakat_country.php) ── */
@media (max-width: 768px) {
  .zakat-facts__row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .zakat-asnaf__item { grid-template-columns: 1fr auto; row-gap: var(--space-xs); }
  .zakat-asnaf__name { grid-column: 1 / -1; }
  .zakat-table th,
  .zakat-table td { padding-inline: var(--space-xs); }
}