/* Basso Global Partners — responsive layer.
   Additive only. Desktop (>1024px) is untouched; everything here lives
   inside max-width media queries. Original design had no breakpoints. */

/* Hamburger button (created by enhance.js) — hidden on desktop */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:9px;
  background:transparent; border:none; cursor:pointer;
  margin-left:auto;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background:var(--navy); border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
#mainNav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#mainNav.open .nav-toggle span:nth-child(2){opacity:0}
#mainNav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ───────────── Tablet / small desktop ───────────── */
@media (max-width:1024px){
  .section{padding:60px 40px}
  .esg-band{padding:44px 40px}
  .two-col-intro{grid-template-columns:1fr;gap:22px;align-items:start}
  .hero h1{font-size:52px}
  .hero-content{padding:0 48px}

  .pillars-grid{grid-template-columns:repeat(2,1fr)}
  .pillars-grid .pillar-card:nth-child(2){border-right:none}
  .pillars-grid .pillar-card:nth-child(1),
  .pillars-grid .pillar-card:nth-child(2){border-bottom:1px solid var(--border)}

  .team-preview-grid{grid-template-columns:repeat(3,1fr)}
  .params-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .diff-grid{grid-template-columns:1fr}
  .diff-item{border-right:none !important}

  .team-grid{grid-template-columns:repeat(2,1fr) !important}
  #advisorGrid{grid-template-columns:repeat(2,1fr) !important}

  /* Locations: uniform office grid → 3 columns on tablet */
  .locations-grid{grid-template-columns:repeat(3,1fr)}
}

/* ───────────── Phones ───────────── */
@media (max-width:760px){
  /* Nav → hamburger */
  #mainNav{padding:0 18px !important;justify-content:space-between !important}
  #mainNav > div:not(.nav-links){position:static !important;left:auto !important}
  .nav-toggle{display:flex}

  #mainNav .nav-links{
    position:fixed;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(11,25,41,0.08);
    box-shadow:0 14px 26px rgba(11,25,41,0.10);
    max-height:0;overflow:hidden;
    transition:max-height .32s ease;
  }
  #mainNav.open .nav-links{max-height:340px}
  #mainNav .nav-links a{padding:15px 24px;font-size:12px;border-bottom:1px solid rgba(11,25,41,0.05)}

  /* Login anchor carries inline position:absolute;right:40px — pull it back
     into nav flow so it sits left of the hamburger, not on top of it. */
  #mainNav .nav-login{position:static !important;right:auto !important;margin-left:auto;font-size:11px;padding:7px 14px}
  #mainNav .nav-toggle{margin-left:12px}
}

@media (max-width:640px){
  .section{padding:44px 22px}
  .section-title{font-size:32px}
  .hero{min-height:480px}
  .hero-content{padding:0 22px}
  .hero h1{font-size:40px}
  .hero-sub{font-size:15px}
  .hero-cta{gap:12px}
  .hero-sm{height:auto !important;min-height:280px;padding-bottom:32px}
  .hero-sm h1{font-size:34px !important}

  .stats-bar{grid-template-columns:1fr}
  .stat-item{border-right:none;border-bottom:1px solid rgba(201,168,76,0.14);padding:26px 24px}
  .stat-item:last-child{border-bottom:none}

  .pillars-grid{grid-template-columns:1fr}
  .pillar-card{border-right:none !important;border-bottom:1px solid var(--border)}
  .pillar-card:last-child{border-bottom:none}

  .team-preview-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .params-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .team-grid,#advisorGrid{grid-template-columns:1fr !important}
  .locations-grid{grid-template-columns:1fr}

  .snapshot-cta{flex-direction:column;gap:16px;align-items:flex-start}
  .divider-cta{flex-direction:column;gap:16px;align-items:flex-start;padding:28px 22px}
  .esg-band{flex-direction:column;gap:18px;padding:40px 22px}

  .strategy-pillar-header{padding:22px;gap:16px}
  .strategy-pillar-body{padding:0 22px 26px 22px !important}
  .three-col{grid-template-columns:1fr}

  .contact-grid{grid-template-columns:1fr;gap:36px}
  .form-row{grid-template-columns:1fr}

  footer{padding:32px 22px}
  .inline-bio-panel{grid-template-columns:1fr !important;gap:22px !important;padding:28px 22px !important}
  .bio-photo{width:110px !important;height:110px !important;margin-bottom:14px !important}
  .team-bio-panel.show{grid-template-columns:1fr;gap:24px}

  /* Full-width bands carry inline …80px padding (inline beats CSS),
     which overflows on phones. Override by matching the inline value. */
  [style*="padding:28px 80px"]{padding:24px 22px !important;flex-wrap:wrap !important;gap:10px !important}
  [style*="padding:64px 80px"]{padding:48px 22px !important}
  [style*="padding:32px 80px"]{padding:28px 22px !important}
  [style*="padding:28px 80px"] a[style*="font-size:22px"]{font-size:18px !important;word-break:break-word}
}