/* ==========================================================================
   ASHA Academy — responsive layer (mobile first breakpoints)
   1400 / 1200 / 992 / 768 / 600 / 420
   ========================================================================== */

/* Very large screens: hero stays full-bleed, content stays readable. */
@media (min-width:1600px){
  .asha-hero.hero-large{min-height:740px}
  .asha-section{padding:88px 0}
}

@media (max-width:1240px){
  .container,.container-fluid{padding-inline:24px}
  .mega-inner{padding:24px 24px 16px}
}

@media (max-width:1100px){
  .header-inner{gap:14px}
  .nav > li > a{padding:10px 10px;font-size:14.5px}
  .header-cta-btn{display:none}
}

/* Tablet ---------------------------------------------------------------- */
@media (max-width:992px){
  .asha-section{padding:56px 0}
  .section-header{margin-bottom:32px}

  .card-grid.cols-3,.card-grid.cols-4,
  .course-grid.cols-3,.course-grid.cols-4,
  .asha-gallery.cols-3,.asha-gallery.cols-4{grid-template-columns:repeat(2,1fr)}
  .stats-grid.cols-4{grid-template-columns:repeat(2,1fr)}

  .media-block{grid-template-columns:1fr;gap:28px}
  .media-block.is-reverse .media-block-img{order:0}
  .contact-split{grid-template-columns:1fr}

  /* Off-canvas navigation */
  .main-navigation{margin-left:0}
  .mobile-toggle{display:block}
  .nav{position:fixed;top:0;right:-100%;width:min(340px,88vw);height:100dvh;background:#fff;flex-direction:column;align-items:stretch;padding:76px 0 40px;overflow-y:auto;box-shadow:-6px 0 24px rgba(0,0,0,.18);transition:right .3s ease;z-index:1200;gap:0}
  .nav.open{right:0}
  .nav > li{border-bottom:1px solid #eef1f5;position:relative}
  .nav > li > a{padding:15px 20px;display:block}

  /* Mega menu collapses into a normal accordion on touch screens */
  .mega-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;display:none;background:#f7f9fc}
  .nav > li.submenu-open > .mega-menu{display:block}
  .mega-inner{padding:6px 14px 14px}
  .mega-cols{grid-template-columns:1fr;gap:12px}
  .mega-col{border-bottom:1px solid #e7ecf2;padding-bottom:10px}
  .mega-col-desc{display:none}
  .mega-footer{flex-direction:column;gap:8px;text-align:center}
  .nav .submenu-toggle{display:block;position:absolute;right:6px;top:6px}
}

/* Phone ----------------------------------------------------------------- */
@media (max-width:768px){
  .asha-section{padding:48px 0}
  .container,.container-fluid{padding-inline:18px}

  .top-bar{font-size:12px}
  .top-bar-inner{justify-content:center;gap:10px}
  .top-bar-left{justify-content:center;gap:12px;width:100%}
  .top-bar-right{justify-content:center;width:100%}
  .top-bar .hide-md{display:none}

  .logo img,.custom-logo{max-width:190px;max-height:72px}
  .logo-text .brand{font-size:22px}

  .asha-hero.hero-large,.asha-hero.hero-medium{min-height:440px}
  .asha-hero .hero-content{padding:44px 0}
  .section-buttons .btn{width:100%;justify-content:center}

  .card-grid.cols-2,.card-grid.cols-3,.card-grid.cols-4,
  .course-grid.cols-2,.course-grid.cols-3,.course-grid.cols-4{grid-template-columns:1fr}
  .asha-gallery.cols-2,.asha-gallery.cols-3,.asha-gallery.cols-4{grid-template-columns:repeat(2,1fr)}
  .contact-form-wrap{padding:22px}
  .feature-card{padding:22px}
}

@media (max-width:600px){
  .top-bar .hide-sm{display:none}
  .stats-grid.cols-2,.stats-grid.cols-3,.stats-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .asha-hero h1{font-size:clamp(26px,7vw,34px)}
  .section-header h2{font-size:clamp(23px,6vw,30px)}
}

@media (max-width:420px){
  .top-account{flex-wrap:wrap;justify-content:center}
  .btn-account{padding:6px 12px;font-size:12px}
  .asha-gallery.cols-2,.asha-gallery.cols-3,.asha-gallery.cols-4{grid-template-columns:1fr}
  .stats-grid.cols-2,.stats-grid.cols-3,.stats-grid.cols-4{grid-template-columns:1fr}
}

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

/* Print ------------------------------------------------------------------ */
@media print{
  .top-bar,.header-search,.mobile-toggle,.header-tools,.mega-menu,.asha-section-cta{display:none!important}
  .asha-section{padding:16px 0;break-inside:avoid}
}

/* --------------------------------------------------------------------------
   v2.0.1 — tighter header so nothing wraps between 992px and 1400px
   -------------------------------------------------------------------------- */
@media (max-width:1400px){
  .nav > li > a{padding:10px 11px;font-size:14px}
  .header-inner{gap:16px}
}
@media (max-width:1280px){
  .header-cta-btn{display:none}
  .nav > li > a{padding:10px 9px;font-size:13.5px}
  .top-bar-menu{display:none}
  .logo img,.custom-logo,.asha-default-logo{max-height:64px}
}
@media (max-width:1120px){
  .top-bar .hide-md{display:none}
}
@media (max-width:992px){
  /* Off-canvas menu: links may wrap again, the panel is tall. */
  .nav{flex-wrap:wrap}
  .nav > li > a{white-space:normal;font-size:15px;padding:15px 20px}
  .top-bar-inner{flex-wrap:wrap}
  .top-bar-left,.top-bar-right{flex-wrap:wrap}
  .top-bar-menu{display:none}
  .logo img,.custom-logo,.asha-default-logo{max-height:56px}
}

/* --------------------------------------------------------------------------
   v2.0.1 — one navigation breakpoint (1024px) across every stylesheet
   -------------------------------------------------------------------------- */
@media (min-width:1025px){
  .nav{display:flex;position:static;flex-direction:row;padding:0;background:none;box-shadow:none;height:auto;width:auto;right:auto}
  .mobile-toggle{display:none}
  .header-cta,.header-tools{display:flex}
}
@media (max-width:1024px){
  .mobile-toggle{display:block}
  .header-cta-btn{display:none}
  .nav{position:fixed;top:0;right:-100%;left:auto;width:min(340px,88vw);height:100dvh;background:#fff;flex-direction:column;align-items:stretch;padding:76px 0 40px;overflow-y:auto;box-shadow:-6px 0 24px rgba(0,0,0,.18);transition:right .3s ease;z-index:1200;gap:0;display:flex}
  .nav.open{right:0}
  .nav > li{border-bottom:1px solid #eef1f5;position:relative;width:100%}
  .nav > li > a{padding:15px 20px;display:block;white-space:normal}
  .nav .submenu-toggle{display:block;position:absolute;right:6px;top:6px}
  .nav .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;min-width:0;border-top:0;background:#f7f9fc;padding-left:10px}
  .nav li.submenu-open > .dropdown{display:block}
  .mega-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;display:none;background:#f7f9fc}
  .nav > li.submenu-open > .mega-menu{display:block}
}

/* Slider arrows sit with the dots so they never overlap the hero copy. */
.hero-nav{top:auto;bottom:22px;transform:none;width:40px;height:40px}
.hero-nav.prev{left:auto;right:calc(50% + 58px)}
.hero-nav.next{right:calc(50% - 98px)}
@media (max-width:600px){.hero-nav{display:none}}

/* Hero copy must clear the slider dots on small screens. */
@media (max-width:768px){
  .hero,.hero-slide{min-height:clamp(500px,80vh,640px)}
  .hero-slide{align-items:center;padding:40px 0 78px}
  .hero-dots{bottom:22px}
  .hero-buttons{width:100%}
  .hero-buttons .btn{flex:1 1 auto;justify-content:center}
}