/* =====================================================================
   Grace Life Foundation — Responsive Breakpoints
   Base styles in style.css/header.css are laid out for large desktop.
   This file layers overrides down to small phones.

   Breakpoint scale:
     ≥1440px        Large desktop (default, no override needed)
     1201–1439px    Laptop
     981–1200px     Small laptop / tablet landscape
     721–980px      Tablet
     561–720px      Large phone / small tablet portrait
     ≤560px         Phone
     ≤380px         Small / older phones
   ===================================================================== */

/* ---------- Laptop ---------- */
@media (max-width: 1440px){
  .container{ padding: 0 26px; }
}

/* ---------- Small laptop / tablet landscape ---------- */
@media (max-width: 1200px){
  .hero{ padding: 90px 0 110px; }
  .hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
  .stats-grid{ grid-template-columns: repeat(3,1fr); }
  .program-grid{ grid-template-columns: repeat(2,1fr); }
  .program-icon{ width: 100%; height: 220px; }
  .program-icon-program{ width: 240px; height: 240px; }
  .testimonial-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px){
  .container{ padding: 0 22px; }
  .hero .container{ grid-template-columns: 1fr; }
  .hero{ text-align:center; padding: 70px 0 90px; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ max-width: 220px; order:-1; margin-bottom: 10px; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .program-grid{ grid-template-columns: repeat(2,1fr); }
  .program-card-program{ grid-template-columns: 1fr; text-align:center; }
  .program-icon-program{ width: 100%; max-width:320px; height:220px; margin: 0 auto; }
  .testimonial-grid{ grid-template-columns: 1fr 1fr; }
  .blog-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-wrap{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .values-grid{ grid-template-columns: 1fr; }
  .post-image, .post-video{ width:70%; height:auto; margin-left:0; }
  .cta-band{ padding: 50px 30px; }
}

/* ---------- Large phone / small tablet portrait ---------- */
@media (max-width: 720px){
  .logo{ margin-left:0; font-size:1.05rem; }
  .logo-image{ width:40px; height:40px; }
  .nav-links{
    position:fixed; top:50px; left:0; right:0; background: var(--paper);
    flex-direction:column; align-items:flex-start; padding: 20px 28px;
    border-bottom: 2px solid var(--line); 
    max-height: calc(100vh - 70px);
     overflow-y:auto;
    transform: translateY(-130%); transition: transform .3s ease; gap: 4px;
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ padding: 12px 0 10px; width:100%; font-size:1.1rem; }
  .hamburger{ display:flex; margin-top:10px; }
  .nav-cta .btn-dark span.long{ display:none; }

  .hero h1{ font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }

  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:18px; }
  .stat-card{ padding: 22px 12px; }
  .program-grid{ grid-template-columns: 1fr; }
  .program-icon{ width:100%; height:200px; }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .blog-grid{ grid-template-columns: 2fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:30px 18px; }
  .footer-bottom{ text-align:center; justify-content:center; }
  .cta-band{ padding: 40px 24px; margin: 0 16px; border-radius: 20px; }
  .section{ padding: 60px 0; }
  .section-tight{ padding: 50px 0; }
  .page-hero{ padding: 56px 0 46px; }
  .values-grid{ gap:12px; }
  .account-card-wrapper{ grid-template-columns: 1fr; }
  .modal-card{ padding: 28px 22px; }
  .post-image, .post-video{ width:100%; }
  .footer-col p{font-size: 0.8rem; padding-left:40px;}
}

/* ---------- Phone ---------- */
@media (max-width: 560px){
  .container{ padding: 0 18px; }
  .eyebrow{ font-size:0.7rem; }
  .btn{ padding: 13px 22px; font-size:0.9rem; }
  .hero{ padding: 56px 0 70px; }
  .hero-visual{ max-width: 170px; }
  .hero-visual-inner .num{ font-size:2.1rem; }
  .stats-grid{ grid-template-columns: 1fr 1fr; gap:14px; }
  .stat-ring{ width:76px; height:76px; }
  .program-grid{ gap:18px; }
  .program-icon-program{ height:180px; }
  .blog-grid{ grid-template-columns: 2fr; }
  .testimonial-card{ padding:16px; }
  .contact-info-card{ padding: 26px; }
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .footer-logo{ justify-content:center; }
  .social-row{ justify-content:center; }
  .cta-band h2{ font-size:1.5rem; }
  .modal-card{ max-height: 90vh; }
  .account-number-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .scroll-top{ right:16px; bottom:16px; width:42px; height:42px; }
}

/* ---------- Small / older phones ---------- */
@media (max-width: 380px){
  .container{ padding: 0 14px; }
  .hero h1{ font-size: 1.7rem; }
  .stats-grid{ grid-template-columns: 1fr; }
  .nav-cta{ gap:10px; }
  .cta-band{ padding: 32px 18px; }
  .program-icon-program{ height:160px; }
  .blog-grid{ grid-template-columns: 2fr; }

}

/* ---------- Reduced motion (accessibility, not just device size) ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}