/* ==========================================
   THE AWAKENING — Progressive enhancement
   Mobile is the default in styles.css.
   These min-width queries scale UP to tablet/desktop.
========================================== */

/* ---------- TABLET (640px+) ---------- */
@media(min-width:640px){
  .foryou-grid,.experience-grid,.modules-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .footer-grid{
    grid-template-columns:1.4fr 1fr 1fr;
  }
  .footer-bottom{
    flex-direction:row;
    justify-content:space-between;
  }
}

/* ---------- SMALL DESKTOP / LARGE TABLET (900px+) ---------- */
@media(min-width:900px){
  :root{
    --space-xl:7rem;
    --space-lg:4rem;
  }

  .navbar{padding:4px 0;}
  .nav-btn{padding:14px 28px;font-size:13px;}

  .hero-content{padding:0;}
  .hero p{max-width:560px;}

  .intro .content{width:min(720px,85%);}

  .about .story-grid{
    grid-template-columns:1fr 1fr;
    gap:70px;
    direction:rtl;
  }
  .about .story-grid > *{direction:ltr;}
  .story-full-img{height:clamp(380px,45vw,620px);}
  .story .story-copy p{max-width:640px;}

  .modules-grid{grid-template-columns:repeat(3,1fr);}

  .foryou-grid{grid-template-columns:1fr 1fr;gap:30px;}

  .experience-grid{grid-template-columns:repeat(3,1fr);}

  .faq-question{font-size:19px;}
}

/* ---------- DESKTOP (1200px+) ---------- */
@media(min-width:1200px){
  .hero h1{font-size:68px;}
  .hero p{font-size:18px;}
}