@charset "UTF-8";
/* ==========================================================================
   AL SA'EED HUMANITARIAN FOUNDATION — Responsive rules
   --------------------------------------------------------------------------
   Mobile-first base styles live in style.css; this file steps the layout
   down through the tested breakpoints:
   1440 · 1200 · 1100 (nav switch) · 992 · 768 · 576 · 480 · 400 · 360 · 320
   ========================================================================== */


/* ==========================================================================
   Large desktop refinements
   ========================================================================== */
@media (max-width:1280px){
  .mega{width:min(42rem,calc(100vw - 3rem));}
}

@media (max-width:1200px){
  .nav-link{padding-inline:.625rem;font-size:.90625rem;}
  .header__cta{margin-left:var(--s-2);}
  .footer__grid{gap:2rem 2.25rem;}
}


/* ==========================================================================
   1100px — switch from desktop navigation to the mobile panel
   ========================================================================== */
@media (max-width:1100px){
  .primary-nav,
  .header__cta{display:none;}
  .nav-burger{display:inline-flex;}
  .header__inner{justify-content:space-between;}
}

@media (min-width:1101px){
  /* The mobile panel never participates in the desktop layout */
  .mobile-nav,
  .nav-overlay{display:none;}
}


/* ==========================================================================
   992px — tablets landscape
   ========================================================================== */
@media (max-width:992px){
  :root{--header-h:76px;}

  .topbar__meta{display:none;}
  .topbar__inner{justify-content:center;}
  .topbar__tagline{text-align:center;}

  .editorial,
  .split,
  .split--wide-left,
  .split--wide-right{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3rem);}
  .split .media-frame{max-width:640px;}

  /* Image always leads on narrow layouts, regardless of source order */
  .split--media-first .split__media{order:-1;}

  .purpose__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .purpose__item{padding:var(--s-6) var(--s-5);border-left:0;border-top:1px solid var(--border);}
  .purpose__item:first-child,
  .purpose__item:nth-child(2){border-top:0;}
  .purpose__item:first-child,
  .purpose__item:nth-child(3){padding-left:0;}
  .purpose__item:nth-child(2),
  .purpose__item:last-child{padding-right:0;}

  .prog-card--lg,
  .prog-card--sm{grid-column:span 6;}

  .mv__grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7);}

  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gallery__item--lg{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10;}

  .contact-grid,
  .value-grid,
  .pathway-grid,
  .principle-grid,
  .objective-grid,
  .leader-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer__brand-col{grid-column:1 / -1;}
  .footer__desc{max-width:52ch;}
}


/* ==========================================================================
   768px — tablets portrait / large phones
   ========================================================================== */
@media (max-width:768px){
  /* Keep the bottom clearance the slider controls sit in */
  .hero__inner{min-height:auto;padding-block:clamp(3.5rem,12vh,5rem) clamp(6rem,16vh,7rem);}
  /* Narrow screens see a tighter, more central part of each slide */
  .hero-slide__media img{object-position:50% 34%;}
  .hero-slide--pos-left img{object-position:38% 36%;}
  .hero-slide--pos-right img{object-position:62% 34%;}
  .hero__content{max-width:100%;}
  .hero__text{max-width:100%;}
  .hero__note{max-width:100%;}

  .page-hero__inner{padding-block:clamp(2.5rem,7vw,3.5rem);}

  .prog-card--lg,
  .prog-card--sm{grid-column:span 12;}
  .prog-card .media--4x3,
  .prog-card .media--3x2{aspect-ratio:16/10;}

  .value-list{grid-template-columns:minmax(0,1fr);}
  .form-grid{grid-template-columns:minmax(0,1fr);}

  .pullquote{margin-block:var(--s-7);padding-left:var(--s-5);}
  .media-frame::before{inset:auto auto -.875rem -.875rem;}

  .section-head{margin-bottom:var(--s-7);}

  .footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:var(--s-3);}
}


/* ==========================================================================
   576px — phones
   ========================================================================== */
@media (max-width:576px){
  .value-grid,
  .pathway-grid,
  .principle-grid,
  .objective-grid,
  .leader-grid,
  .contact-grid,
  .gallery,
  .purpose__grid{grid-template-columns:minmax(0,1fr);}
  .gallery__item--lg{grid-column:span 1;aspect-ratio:4/3;}

  .purpose__item{padding:var(--s-5) 0;border-top:1px solid var(--border);}
  .purpose__item:first-child{border-top:0;padding-top:0;}
  .purpose__item:nth-child(2){border-top:1px solid var(--border);}
  .purpose__item:last-child{padding-bottom:0;}

  .footer__grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7);}
  .footer__brand-col{grid-column:auto;}

  /* Full-width, comfortably tappable buttons */
  .actions{gap:var(--s-3);}
  .actions .btn{width:100%;}
  .cta-band .actions .btn{width:100%;}

  .leader{padding:var(--s-6) var(--s-5);}
  .form-card{padding:var(--s-5) var(--s-4);}
  .location-card{grid-template-columns:minmax(0,1fr);}
  .value-list__item{grid-template-columns:minmax(0,1fr);gap:var(--s-3);}

  .mobile-nav{width:100%;}
  .mobile-nav__footer .btn{width:100%;}
}


/* ==========================================================================
   480px — small phones
   ========================================================================== */
@media (max-width:480px){
  :root{--header-h:72px;}

  .brand__mark{width:44px;height:44px;}
  .site-header.is-scrolled .brand__mark{width:40px;height:40px;}
  .brand__name{font-size:.875rem;}
  .brand__sub{font-size:.625rem;letter-spacing:.1em;}
  .brand{gap:.5rem;}

  .topbar{font-size:.75rem;}
  .topbar__tagline svg{display:none;}

  .media--3x2,
  .media--4x3{aspect-ratio:4/3;}
  .media--portrait{aspect-ratio:4/5;}

  .pullquote{padding-left:var(--s-4);border-left-width:3px;}
  .approach li{gap:var(--s-3);}
  .highlight-panel{padding:var(--s-5) var(--s-4);}
}


/* ==========================================================================
   400px and below — 390 / 375 / 360 / 320
   ========================================================================== */
@media (max-width:400px){
  :root{
    --gutter:1.125rem;
    --fs-display:clamp(1.9375rem,1.3rem + 3vw,2.25rem);
  }

  .brand__mark{width:40px;height:40px;}
  .site-header.is-scrolled .brand__mark{width:38px;height:38px;}
  .brand__name{font-size:.8125rem;letter-spacing:-.02em;}
  .brand__sub{font-size:.5938rem;}
  .nav-burger{width:42px;height:42px;}

  .hero h1,.hero__title{letter-spacing:-.02em;}
  .hero__inner{padding-block:3rem 5.5rem;}

  .btn{padding-inline:1.125rem;font-size:.90625rem;}
  .value,
  .pathway,
  .objective,
  .principle,
  .contact-block{padding:var(--s-5) var(--s-4);}

  .mobile-nav__link{font-size:1rem;}
  .to-top{width:42px;height:42px;}
}

@media (max-width:340px){
  .brand__text{display:none;}
  .brand__mark{width:42px;height:42px;}
}


/* ==========================================================================
   Tall-screen and orientation refinements
   ========================================================================== */
@media (max-width:992px) and (orientation:landscape){
  .hero__inner{min-height:auto;padding-block:3.5rem 6rem;}
}

@media (min-width:1440px){
  :root{--container:1280px;}
}

@media (min-width:1800px){
  .hero__inner{min-height:min(76vh,820px);}
}


/* ==========================================================================
   Without JavaScript the panel navigation cannot open, so the
   full menu is presented inline instead.
   ========================================================================== */
@media (max-width:1100px){
  .no-js .nav-burger{display:none;}
  .no-js .mobile-nav{
    position:static;width:100%;transform:none;visibility:visible;
    box-shadow:none;border-top:1px solid var(--border);
  }
  .no-js .mobile-nav__head{display:none;}
  .no-js .mobile-sub{display:block;}
}