/* atlasgo-grid-button-fix.css : grid + button tidy only. No colour, font, copy, image or order change.
   Load LAST in <head> (after style.css and the page's inline <style>). Tested 1440/1200/1024/768/390. */

/* A. Nav broke between 641 and 900px (links + CTA wrapped to 2-3 lines, CTA 86x76 at 768, logo touched links;
      home, about, case). Reuse the existing hamburger menu up to 900px (only on pages that have the button). */
@media(min-width:641px) and (max-width:900px){
  nav#nav:has(.hamburger) .nav-links{display:none}
  nav#nav .hamburger{display:block}
  nav#nav:has(.hamburger) .nav-links.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:rgba(7,12,16,.95);backdrop-filter:blur(40px);padding:1.5rem;gap:1rem;border-bottom:1px solid var(--border)}
}
/* B. Nav inset (64px) did not match the 1200px container (content edge at 120px at 1440), home/about/case >=1344px. */
nav#nav{padding-inline:max(clamp(1.5rem,5vw,4rem),calc((100% - 1200px)/2))}

/* C. Home "ind-grid" 2+1 orphan card at 641-900px (768: 2 cards, 1 lone card). Last card spans the row. */
@media(min-width:641px) and (max-width:900px){.ind-grid>:last-child:nth-child(odd){grid-column:1/-1}}
/* D. Home timeline wrapped 3+2 with space-between at 768 (row 2 pushed to both edges, x=54 / 516). Centre the rows. */
@media(max-width:900px){.timeline{justify-content:center}}
/* E. Home timeline at 390: steps 140px wide, left-aligned (centre 110 vs page centre 195). One step per row. */
@media(max-width:640px){.timeline .tl-step{flex:0 0 100%}}

/* F. Stacked buttons had unequal widths at 390 (home hero 167 vs 197, product pages 210 vs 205). Same width. */
@media(max-width:560px){.hero-btns .btn{flex:1 1 100%;justify-content:center}}
@media(max-width:720px){.actions .btn{flex:1 1 220px;max-width:340px}}
/* F2. Product pages: hero buttons were 210 vs 205 wide (desktop) and 50 vs 48 high (all widths). Equal columns and height. */
.actions .btn{min-height:50px}
@media(min-width:721px){.actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%;margin-inline:auto}}

/* G. About content column was 1120px, nav/footer container is 1200px (content 160-1280 vs 120-1320 at 1440). */
.ab-wrap{max-width:1200px}
/* H. About side padding 16px at <=640, nav/footer use 24px (about, 390). */
@media(max-width:640px){.ab-main{padding-left:1.5rem;padding-right:1.5rem}}
/* I. Case article edge at 24px vs nav/footer inset 38px at 768 (case page, 641-900px). */
@media(max-width:900px){.cs-wrap{padding-inline:clamp(1.5rem,5vw,4rem)}}

/* J. Tap targets under 44px at 390. min-height 44 plus a negative block margin keeps the layout where it was. */
@media(max-width:640px){
  /* home, about, case: header */
  nav#nav .nav-logo{min-height:44px}
  .hamburger{min-width:44px;min-height:44px;margin-right:-10px}
  nav#nav .nav-links.open a{display:flex;align-items:center;min-height:44px}
  nav#nav .nav-links.open{gap:0}
  .hero-play{min-height:44px}
  .pillar .learn{min-height:44px;margin-block:-12px}
  /* footer (home, about, case) */
  .ft-brand .nav-logo{min-height:44px;margin-block:-10px}
  .ft-col li{margin-bottom:0}
  .ft-col a,.ft-col .ft-link{display:flex;align-items:center;min-height:44px}
  .ft-col .ft-link{width:100%;text-align:left}
  .ft-socials a{width:44px;height:44px}
  .ft-links a{display:flex;align-items:center;min-height:44px;min-width:44px;margin-block:-11px}
  /* about + case body links */
  nav.ab-crumbs a{display:inline-flex;align-items:center;min-height:44px;margin-block:-13px}
  .ab-socials a{min-height:44px;margin-block:-9px}
  .ab-card a.big{display:flex;align-items:center;min-height:44px;margin-block:-7px}
  .cs-press a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-block:-8px}
  /* product pages: brand, player buttons, site link, footer links (language pill: hit area only) */
  .top .brand{min-height:44px}
  .ic{width:44px;height:44px;flex:none}
  .lang button{position:relative}
  .lang button::after{content:"";position:absolute;inset:-9px -2px}
  a.site{display:inline-flex;align-items:center;min-height:44px;margin-block:-16px}
  footer nav a{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px}
}