/* =====================================================================
   FINAL MOBILE PASS — loaded last, so it only tightens things on phones.
   Goal: app-like compact screens. Only the hero banner is full-width;
   cards, photos and lists are small. Desktop is untouched.
   ===================================================================== */

/* ---------- Phones (<= 640px) ---------------------------------------- */
@media (max-width: 640px) {
  :root { font-size: 15px; }
  body { font-size: .95rem; }
  .container { padding-inline: 14px; }

  /* Rhythm: smaller section gaps and headings */
  .section { padding: 26px 0; }
  .section-head { margin-bottom: 16px; }
  .section-head .eyebrow { font-size: .72rem; }
  .section-title { font-size: 1.28rem; margin-bottom: 6px; }
  .section-sub { font-size: .85rem; }
  .section-cta { margin-top: 16px; }
  .btn { padding: .5em 1.05em; font-size: .86rem; min-height: 40px; }
  .btn-block { min-height: 42px; }

  /* Quick card: lighter, trust points become one tight list */
  .quick-card { padding: 14px; gap: 12px; }
  .btn-emergency { padding: 11px 12px; }
  .quick-trust { gap: 6px; }
  .quick-trust li { padding: 0; }
  .quick-trust span { display: none; }
  .quick-trust strong { font-size: .8rem; }
  .quick-title { font-size: 1.05rem; margin-bottom: 6px; }
  .quick-join { font-size: .84rem; }
  .ready-line { font-size: .82rem; margin-bottom: 6px; }
  .group-chips { gap: 6px; }

  /* About: small picture, not a full-width block */
  .about-grid { gap: 14px; }
  .about-visual { max-width: 180px; margin-inline: auto; }
  .about-badge { display: none; }
  .about-photo, .about-art { aspect-ratio: 1 / 1; border-radius: 16px; }
  .check-list li { font-size: .88rem; }

  /* Services / process: compact 2-column tiles */
  .service-card p, .service-card .card-text { font-size: .8rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .service-card h3 { font-size: .92rem; margin-bottom: 4px; }
  .step p { font-size: .78rem; }
  .step-no { font-size: 1.6rem; top: 10px; right: 12px; }
  .step-icon { width: 38px; height: 38px; font-size: 1rem; margin-bottom: 8px; }

  /* Projects & blog: small thumbnail + text rows (like an app feed) */
  .grid-list { grid-template-columns: 1fr !important; gap: 10px; }
  .grid-list > .card { grid-column: auto !important; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch; border-radius: 14px; box-shadow: none; }
  .grid-list .card-media { aspect-ratio: auto; height: 100%; min-height: 92px; border-radius: 0; }
  .grid-list .card-media .badge { display: none; }
  .grid-list .card-body { padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .grid-list .card-title { font-size: .92rem; margin-bottom: 4px; }
  .grid-list .card-text { -webkit-line-clamp: 2; font-size: .78rem; margin-bottom: 4px; }
  .grid-list .tag-list, .grid-list .card-link { display: none; }
  .grid-list .card-meta { margin-bottom: 4px; font-size: .7rem; }

  /* Testimonials */
  .t-slider { height: 300px; }

  /* Team: three small round-ish tiles per row */
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .team-photo { max-height: 104px; }
  .team-social { display: none; }
  .team-card .card-body { padding: 8px 6px 10px; }
  .team-card h3, .team-card .card-title { font-size: .8rem; margin-bottom: 2px; }
  .team-role { font-size: .7rem; }

  /* Gallery: small square thumbnails */
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .g-item { border-radius: 10px; }
  .g-link { aspect-ratio: 1 / 1; }
  .g-item figcaption, .g-cap { display: none; }

  /* CTA + logos */
  .cta-band { padding: 18px 0; }
  .cta-inner { padding: 18px; gap: 12px; }
  .cta-inner h2 { font-size: 1.1rem; }
  .cta-inner p { font-size: .84rem; }

  /* Donor system screens */
  .dn-form .dn-group { padding: 10px 12px 2px; border-radius: 12px; margin-bottom: 12px; }
  .dn-card { padding: 12px; border-radius: 14px; margin-bottom: 12px; }
  .dn-card h3 { font-size: .98rem; }
  .form-input, .form-textarea, select.form-input { font-size: 16px; padding: 8px 12px; min-height: 40px; border-radius: 12px; } /* 16px stops iOS zoom */
  .form-group { margin-bottom: 10px; }
  .form-label { font-size: .8rem; margin-bottom: 3px; }
  .form-error { min-height: 0; margin-top: 3px; font-size: .76rem; }
  .form-error:empty { display: none; }
  .dn-hint { font-size: .76rem; margin: 3px 0 8px; }
  .dn-check { font-size: .85rem; margin-bottom: 10px; gap: 8px; }
  .dn-alert { padding: 9px 12px; font-size: .84rem; margin-bottom: 10px; }
  .dn-lead { font-size: .85rem; margin-bottom: 12px; }
  .dn-switch { font-size: .84rem; margin-top: 10px; }
  .dn-narrow { max-width: none; }
  .dn-avatar { width: 52px; height: 52px; font-size: 1.3rem; }
  .dn-avatar-lg { width: 62px; height: 62px; }
  .dn-donor { gap: 10px; }
  .dn-chip { padding: 4px 9px; font-size: .78rem; }
  .dn-code { font-size: 1.25rem; }
  .page-banner { padding: 18px 0 16px; }
  .page-banner-title { font-size: 1.15rem; margin-bottom: 4px; }
  .breadcrumb, .page-banner nav { font-size: .78rem; }

  /* Inputs must be >= 16px on phones or iOS zooms the page on focus
     (atpara.css/app.css set smaller sizes with higher specificity) */
  .dn-form .form-input, .dn-form select.form-input,
  .feed-search-box input, .feed-search-dates .form-input, .dn-track-row .form-input { font-size: 16px; }

  /* Footer */
  .footer-grid { gap: 18px 12px; }
}

/* ---------- Bottom navigation: 5 tabs, red button truly centred -------- */
@media (max-width: 768px) {
  .bottom-nav { padding: 4px 2px calc(5px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav a, .bottom-nav button { padding: 4px 1px; font-size: .64rem; min-height: 46px; gap: 2px; }
  .bottom-nav i { font-size: 1.05rem; }
  .bottom-nav .bn-sos i { width: 48px; height: 48px; margin-top: -24px; font-size: 1.15rem; }
  .bottom-nav span { text-align: center; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Very small phones (<= 360px) ------------------------------ */
@media (max-width: 360px) {
  .grid-list > .card { grid-template-columns: 76px minmax(0, 1fr); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav a, .bottom-nav button { font-size: .6rem; }
}

/* ---------- Tablets: keep tidy 2-column rhythm ------------------------ */
@media (min-width: 641px) and (max-width: 991px) {
  .section { padding: 48px 0; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}