/* ==========================================================================
   AIU ACADEMY: RESPONSIVE LAYER
   Shared by index.html and about.html (the light redesign).

   Those pages are styled with inline style="" attributes, which media
   queries can't reach, so every rule here targets a hook class added to the
   markup and uses !important to win over the inline value. Desktop layout is
   untouched: nothing outside a media query changes what renders above 1120px,
   except the menu button, which stays hidden there.
   ========================================================================== */

/* Menu button: hidden until the nav no longer fits on one line */
.site-nav-toggle{
  display:none;width:44px;height:44px;padding:0;margin-left:auto;
  border:2px solid #ECE6F7;border-radius:12px;background:#FFFFFF;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.site-nav-toggle span{
  display:block;width:20px;height:2px;border-radius:2px;background:#151521;
  transition:transform .25s ease,opacity .2s ease;
}
.site-nav.is-open .site-nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-nav.is-open .site-nav-toggle span:nth-child(2){opacity:0}
.site-nav.is-open .site-nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Nav: the links + buttons need ~1116px on one line. Below that they used
   to wrap into a three-row block; collapse them behind the menu button. */
@media (max-width:1120px){
  .site-nav{row-gap:0 !important}
  .site-nav-toggle{display:flex}
  .site-nav-links,.site-nav-actions{display:none !important}
  .site-nav.is-open .site-nav-links,
  .site-nav.is-open .site-nav-actions{display:flex !important;flex-basis:100%}
  .site-nav.is-open .site-nav-links{
    flex-direction:column;align-items:stretch !important;gap:0 !important;
    margin-top:12px;border-top:1px solid #ECE6F7;
  }
  .site-nav-links a{padding:14px 4px !important;border-bottom:1px solid #F3EEFF !important}
  .site-nav-links a[aria-current="page"]{border-bottom-color:#F3EEFF !important;color:#7854D4}
  .site-nav.is-open .site-nav-actions{padding:16px 0 6px;justify-content:space-between}
}

@media (max-width:640px){
  .site-logo{width:168px !important}

  .announce{font-size:14px !important}
  .announce > div{padding:8px 16px !important}

  /* Section rhythm: 104px top and bottom is a lot of empty phone screen */
  .sec{padding-top:64px !important;padding-bottom:64px !important}
  .hero-in{padding-top:40px !important;padding-bottom:80px !important;gap:56px !important}
  .about-hero-in{padding-top:28px !important;padding-bottom:72px !important;gap:32px !important}
  .cta-sec{padding-bottom:64px !important}
  .cta-in{padding:56px 24px !important}

  /* Hero photo: the coral "coaching is live" badge sat on top of the
     "Our live in-person intensive" chip. Drop the chip below the badge. */
  .hero-chip{top:62px !important;left:30px !important;font-size:12px !important}

  /* Stats strip: four full-width rows filled a whole screen; use 2 x 2 */
  .stats{grid-template-columns:1fr 1fr !important;gap:24px 16px !important;padding-top:36px !important;padding-bottom:36px !important}
  .stats > div > span:first-child{font-size:36px !important}
  .stats > div > span:last-child{font-size:15px !important}
}

@media (max-width:520px){
  /* Skills list: the price pill (nowrap) pushed past the right edge and got
     clipped. Let it drop under the course name instead. */
  .skill-row{flex-wrap:wrap !important;row-gap:10px !important}
  .skill-row > span:last-child{margin-left:54px}

  /* Footer: "span 2" on a one-column grid creates a phantom second column,
     which pushed the tagline and the Help links off screen. */
  .footer-brand{grid-column:auto !important}
}