/* ============================================================
   SIGNATURE BARISTA TRAINING ACADEMY
   Responsive / media-query overrides
   Base styles + tokens live in style.css — this file only
   adjusts layout at smaller breakpoints and powers the
   mobile nav open/close state toggled by main.js.
============================================================ */

/* ---- Mobile nav (drives on/off with main.js adding .nav-open) ---- */
@media (max-width: 980px){
  .container{padding:0 22px;}

  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(320px, 82vw);
    background:rgba(11,10,8,.98);
    backdrop-filter:blur(16px);
    border-left:1px solid var(--hairline-strong);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:26px;
    padding:40px 36px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    z-index:1001;
  }
  .nav-links.nav-open{transform:translateX(0);}
  .nav-links a{font-size:1rem;}

  .nav-right{gap:12px;}

  /* backdrop behind the mobile menu */
  .nav-scrim{
    position:fixed;inset:0;background:rgba(0,0,0,.5);
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);z-index:1000;
  }
  .nav-scrim.nav-open{opacity:1;pointer-events:auto;}

  .nav-toggle.is-active span{background:transparent;}
  .nav-toggle.is-active span::before{transform:rotate(45deg) translate(4px,4px);}
  .nav-toggle.is-active span::after{transform:rotate(-45deg) translate(4px,-4px);}
}

/* ---- Large tablet / small desktop ---- */
@media (max-width: 1080px){
  .hero-grid{grid-template-columns:1fr;gap:50px;}
  .hero-visual{max-width:420px;margin:0 auto;}
  .trainer-grid{grid-template-columns:1fr;gap:44px;}
  .trainer-portrait{max-width:380px;margin:0 auto;aspect-ratio:4/4.6;}
  .lab-grid{grid-template-columns:1fr;gap:44px;}
  .about-grid{grid-template-columns:1fr;gap:44px;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
  .course-grid{grid-template-columns:1fr 1fr;}
  .course-grid .course-card.featured{grid-column:1 / -1;}
}

/* ---- Tablet ---- */
@media (max-width: 860px){
  section{padding:88px 0;}
  .trust-panel{grid-template-columns:repeat(2,1fr);}
  .trust-item{border-right:none;border-bottom:1px solid var(--hairline);}
  .trust-item:nth-child(2n){border-right:none;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .journey-track{grid-template-columns:1fr 1fr;gap:36px 22px;}
  .journey-track::before{display:none;}
  .gallery-grid{columns:2;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .course-grid{grid-template-columns:1fr;}
}

/* ---- Phone ---- */
@media (max-width: 620px){
  .container{padding:0 18px;}
  section{padding:70px 0;}
  .h1{font-size:clamp(2.1rem,9vw,3rem);}
  .h2{font-size:clamp(1.6rem,7vw,2.2rem);}
  .hero{padding:120px 0 70px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{width:100%;}
  .why-grid{grid-template-columns:1fr;}
  .journey-track{grid-template-columns:1fr;}
  .gallery-grid{columns:1;}
  .footer-grid{grid-template-columns:1fr;gap:34px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .cta-band .btn-row{flex-direction:column;align-items:stretch;}
  .lang-toggle{order:2;}
  .nav-right{gap:10px;}
  .trust{margin-top:-40px;}
  .trust-item{padding:20px 18px;}
}