/* ==========================================================================
   SOJOURN HOUSE — Responsive
   Breakpoints: 1240 · 1100 (nav → mobile) · 1024 · 900 · 768 · 640 · 480 · 360
   Tested at 320 / 375 / 390 / 414 / 430 / 768 / 1024 / 1366 px.
   ========================================================================== */

/* ---------- ≤1240px : tighten outer gutters ---------- */
@media (max-width: 1240px) {
  .container { padding-inline: 24px; }
  .menu-link { padding: 12px 10px; font-size: .82rem; }
}

/* ---------- ≤1100px : switch to mobile navigation ---------- */
@media (max-width: 1100px) {
  :root { --header-h: 74px; }
  .mainnav, .header-cta .btn-outline { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-in { gap: 14px; }
  .brand img { height: 48px; }

  .cols-4, .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .donate-programs { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .funder-row { grid-template-columns: 1fr 1fr; }
  .gallery-strip { grid-template-columns: repeat(3, 1fr); }
  .gallery-strip a:nth-child(2), .gallery-strip a:nth-child(5) { margin-top: 0; }
  .gallery-strip a:nth-child(3) { margin-top: 18px; }
}

/* ---------- ≤1024px : tablet ---------- */
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-rev .split-media { order: 0; }
  .split-body .section-lead { max-width: none; }
  .figure-frame { max-width: 640px; }
  .quote-block { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .newsletter-in { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .check-list.two-col { grid-template-columns: 1fr; }
  .supporter-cols { columns: 1; }
}

/* ---------- ≤900px : large phones / small tablets ---------- */
@media (max-width: 900px) {
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { columns: 3; }
  .stat-band { margin-top: -44px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 22px 22px; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lb-stage { padding: 0 16px; }
  .lb-btn { width: 46px; height: 46px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ---------- ≤768px : phones ---------- */
@media (max-width: 768px) {
  .topbar { display: none; }               /* clean compact mobile header */
  .container { padding-inline: 20px; }
  .hero { min-height: 560px; }
  .hero-media img { object-position: 62% 30%; }   /* keep faces visible on crop */
  .hero-content { max-width: 100%; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .cta-in { flex-direction: column; align-items: flex-start; }
  .gallery-masonry { columns: 2; column-gap: 10px; }
  .g-item { margin-bottom: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-cards, .donate-programs, .funder-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .map-embed iframe { height: 320px; }
  .steps .step { padding-left: 74px; }
  .step::before { left: 20px; }
  .step::after { left: 20px; }
}

/* ---------- ≤640px ---------- */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .header-cta .btn { display: none; }      /* clean mobile header: logo + menu */
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .impact-item { padding-left: 14px; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .logo-card { min-height: 104px; padding: 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .hero-cta .btn { width: 100%; }
  .news-form { flex-direction: column; }
  .news-form .btn { width: 100%; }
  .accordion { border-radius: var(--radius-sm); }
  .acc-btn { padding: 15px 18px; }
  .acc-panel { padding: 0 18px 18px; }
  .quote-attr { flex-wrap: wrap; }
  .download-item { flex-wrap: wrap; }
  .download-item .arrow-link { margin-left: 0; }
}

/* ---------- ≤480px : small phones ---------- */
@media (max-width: 480px) {
  :root { --header-h: 66px; }
  .brand img { height: 42px; }
  .nav-toggle { width: 44px; height: 44px; }
  .hero { min-height: 520px; }
  .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .stat-grid { grid-template-columns: 1fr; }
  .stat { border-left: 0 !important; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .impact-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery-strip a:nth-child(3) { margin-top: 0; }
  .contact-card, .icon-card, .tl-card, .step, .job-card { padding-inline: 20px; }
  .table-wrap { border-radius: var(--radius-sm); }
  table.data th, table.data td { padding: 12px 14px; }
  .mn-head { padding: 14px 16px; }
  .mn-foot { padding-inline: 16px; }
  .back-to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}

/* ---------- ≤360px : smallest common Android ---------- */
@media (max-width: 360px) {
  .container { padding-inline: 16px; }
  .brand img { height: 38px; }
  .btn { padding-inline: 22px; }
  .hero { min-height: 500px; }
  .gallery-masonry { columns: 1; }
}

/* ---------- Short landscape phones ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 460px; }
  .mobile-nav { width: min(420px, 88vw); }
}

/* ---------- Large desktop ---------- */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* ---------- Touch devices: remove hover-only affordances ---------- */
@media (hover: none) {
  .g-item .g-cap { opacity: 1; padding-top: 20px; }
  .icon-card:hover, .photo-card:hover, .donate-card:hover { transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}