/* ==========================================================================
   Nehemiah Trust Pakistan — responsive overrides (mobile-first breakpoints)
   Loaded after style.css.
   ========================================================================== */

/* ---- Large laptops ------------------------------------------------------- */
@media (max-width: 1080px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .prog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 920px) {
  .nav, .header__cta { display: none; }
  .nav-toggle { display: grid; }

  /* Single-column hero: centre the text column and the media so nothing
     hugs the left with empty space on the right. */
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__content { margin-left: auto; margin-right: auto; text-align: center; }
  .hero__content .eyebrow::before { display: none; }
  .hero__actions, .hero__trust { justify-content: center; }
  .hero__media { max-width: 460px; margin-left: auto; margin-right: auto; }
  .hero__img--main { margin-left: auto; margin-right: auto; max-width: 320px; }

  .about__grid { grid-template-columns: 1fr; gap: 56px; }
  .about__media { max-width: 520px; margin-left: auto; margin-right: auto; }

  .impact__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }

  .cta-banner__box { grid-template-columns: 1fr; gap: 24px; }
  .cta-banner__actions { justify-content: flex-start; }

  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; }

  .contact-layout, .partner-cta-layout, .donate-layout { grid-template-columns: 1fr; gap: 36px; }
  .options-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --gutter: 18px; }

  .topbar { display: none; }
  .brand__tag { display: none; }
  .brand__logo { height: 40px; }

  .quick-programs { margin-top: -60px; }
  .quick-grid { grid-template-columns: 1fr; gap: 16px; }

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

  .hero { padding-bottom: 96px; }
  .hero__statcard { left: 0; top: 16px; padding: 12px 14px; }
  .hero__statcard b { font-size: 1.2rem; }
  .hero__img--sub { width: 150px; bottom: -24px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1; }

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

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-grid .g-item.wide { grid-column: span 1; }
  .gallery-grid .g-item.tall { grid-row: span 1; }

  /* Footer: centre the stacked single-column layout on mobile. */
  .footer { text-align: center; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__brand .brand { justify-content: center; }
  .footer__about { margin-left: auto; margin-right: auto; max-width: 440px; }
  .footer__social { justify-content: center; }
  .footer__contact li { justify-content: center; }
  .footer__links a:hover { padding-left: 0; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .field-row { grid-template-columns: 1fr; }
  .options-grid { grid-template-columns: 1fr; }
  .form-card { padding: 22px; }
}

/* ---- Small mobile -------------------------------------------------------- */
@media (max-width: 400px) {
  .section-title { font-size: 1.6rem; }
  .hero__title { font-size: 2.05rem; }
  .btn { padding: 12px 20px; }
}