/* ============================================================
   STEADY — Responsive styles (mobile, tablet, small laptop)
   Mobile-first friendly overrides layered on style.css
   ============================================================ */

/* ---------- small laptops / tablets (landscape) ---------- */
@media (max-width: 1200px){
  .container{width:94%;}
}

@media (max-width: 1080px){
  .focus-grid{grid-template-columns:repeat(2,1fr);}
  .gbody-grid{grid-template-columns:repeat(3,1fr);}
  .welcome-card{padding:30px;}
  .hero h1{font-size:clamp(30px,4.6vw,50px);}
}

/* ---------- tablets (portrait) + small desktops ---------- */
@media (max-width: 960px){
  /* Mobile drawer navigation */
  .nav-links{
    position:fixed;top:0;right:-320px;width:min(320px,84vw);height:100vh;height:100dvh;z-index:2000;
    background:var(--navy-900);flex-direction:column;align-items:flex-start;
    padding:110px 30px 40px;gap:6px;box-shadow:-20px 0 60px rgba(7,31,54,.5);
    transition:right .5s var(--ease);overflow-y:auto;
  }
  .nav-links.open{right:0;}
  /* drawer scrim */
  .nav-scrim{
    position:fixed;inset:0;z-index:1500;background:rgba(7,31,54,.5);
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease);
  }
  .nav-scrim.show{opacity:1;visibility:visible;}
  .nav-link{width:100%;color:#fff;font-size:17px;padding:13px 16px;border-radius:10px;}
  .nav-link::after{display:none;}
  .nav-link.active,.nav-link:hover{background:rgba(255,255,255,.1);color:var(--teal-bright);}
  .nav-cta{margin:18px 0 0;justify-content:center;width:100%;}
  .nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2100;}
  .nav-toggle span{width:26px;height:2.6px;margin:3.2px 0;}
  .nav-toggle.open span:nth-child(1){transform:translateY(8.4px) rotate(45deg);background:#fff;}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-8.4px) rotate(-45deg);background:#fff;}

  /* Scrolled state: white drawer to match the white desktop navbar */
  .navbar.scrolled .nav-links{
    background:#fff;box-shadow:-20px 0 60px rgba(7,31,54,.18);
    border-left:1px solid var(--line);
  }
  .navbar.scrolled .nav-links .nav-link{color:var(--navy-800);}
  .navbar.scrolled .nav-links .nav-link.active,
  .navbar.scrolled .nav-links .nav-link:hover{background:var(--sky);color:var(--navy);}
  .navbar.scrolled .nav-links .nav-cta{color:#fff;}
  /* X icon visible on the white drawer */
  .navbar.scrolled .nav-toggle.open span:nth-child(1),
  .navbar.scrolled .nav-toggle.open span:nth-child(3){background:var(--navy);}

  .welcome-grid,.contact-grid,.news-wrap{grid-template-columns:1fr;}
  .welcome-art{order:2;}
  .welcome-card{order:1;}
  .about-lists{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .news-cards{gap:14px;}
  .about-block{padding:26px 22px;}
}

/* ---------- tablets portrait small / large phones ---------- */
@media (max-width: 768px){
  .section{padding:60px 0;}
  .gbody-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .form-row{grid-template-columns:1fr;}
  .hero{padding:115px 0 64px;text-align:center;}
  .hero-actions,.hero-stats{justify-content:center;}
  .hero-badge{margin-left:auto;margin-right:auto;}
  .hero h1{max-width:100%;font-size:clamp(28px,7vw,40px);}
  .hero .lead{max-width:100%;margin-left:auto;margin-right:auto;font-size:16px;}
  .hero-stats{gap:22px;margin-top:44px;}
  .stat .num{font-size:24px;}
  .hero-ornament{opacity:.32;}
  .welcome-photo img{aspect-ratio:4/4.6;}
  .contact-cards{gap:14px;}
  .c-form{padding:30px 24px;}
  .news-panel{padding:34px 26px;}
  .member-info{padding:38px 16px 22px;}
  .sec-head{margin-bottom:40px;}
  .footer-top{padding:56px 0 40px;}
}

/* ---------- phones ---------- */
@media (max-width: 600px){
  .focus-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .footer-contact{grid-column:1;}
  .gbody-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .member-info h3{font-size:16px;}
  .member-role{font-size:11.5px;}
  .hero-actions{flex-direction:column;width:100%;}
  .hero-actions .btn{width:100%;justify-content:center;}
  .brand img{height:46px;}
  .nav-logo-name{font-size:16px;}
  .nav-logo-sub{font-size:10px;}
  .btn{padding:13px 22px;font-size:15px;}
  .values-list li,.about-lists li,.about-block p,.news-card p{font-size:14.5px;}
  .footer .brand img{height:52px;}
}

/* ---------- small phones ---------- */
@media (max-width: 420px){
  .gbody-grid{grid-template-columns:1fr;}
  .c-form{padding:24px 18px;}
  .section{padding:52px 0;}
  .hero{padding:104px 0 56px;}
  .hero-stats{flex-direction:column;align-items:center;gap:18px;}
  .stat .num{font-size:22px;}
  .to-top{right:16px;bottom:18px;width:48px;height:48px;}
  .about-block{padding:22px 18px;}
}

/* ---------- landscape phones ---------- */
@media (max-height: 520px) and (orientation: landscape){
  .hero{min-height:auto;padding:110px 0 60px;}
  .hero h1{font-size:clamp(24px,5vw,34px);}
  .hero-stats{margin-top:30px;}
  .hero-ornament{display:none;}
}

/* ---------- reduce hover-only lift on touch devices ---------- */
@media (hover: none){
  .focus-card:hover,.member-card:hover,.news-card:hover{transform:none;box-shadow:var(--shadow-sm);}
  .focus-card:hover .focus-icon{background:var(--sky);color:var(--navy);box-shadow:none;}
  .btn-primary:hover,.btn-dark:hover{transform:none;}
  .to-top:hover{transform:none;}
}