/* ============================================================
   Tangelo Robotics — responsive + mobile-nav layer
   Loaded by every page (after its inline base <style>).
   Pages are authored with inline styles, so overrides use
   !important. Targeting is via hook classes (tg-*) added to the
   markup — NOT inline-style substring matching, because the DC
   runtime re-serialises inline styles (spaces after colons,
   repeat(4,1fr) -> repeat(4, 1fr)) which would break [style*=].
   The one exception, [style*="44px"], is safe: bare length
   tokens survive serialisation unchanged.
   ============================================================ */

/* ---------- MOBILE NAV: hamburger (pure-CSS checkbox toggle) ---------- */
.tg-burger{
  display:none;                      /* hidden on desktop */
  align-items:center; justify-content:center;
  width:44px; height:44px; margin:0 -8px 0 0;
  border-radius:9px; cursor:pointer; color:#17150F;
  -webkit-tap-highlight-color:transparent;
}
.tg-burger svg{ display:block; }
.tg-ico-close{ display:none; }
.tg-navcb:checked ~ .tg-burger .tg-ico-menu{ display:none; }
.tg-navcb:checked ~ .tg-burger .tg-ico-close{ display:block; }

@media (max-width: 900px){
  .tg-burger{ display:inline-flex; }

  /* the desktop link row becomes a full-width dropdown panel,
     anchored to the sticky <header> (top:100%) */
  .tg-nav{
    position:absolute !important; top:100% !important; left:0; right:0;
    display:none !important;
    flex-direction:column !important; align-items:stretch !important;
    gap:0 !important;
    background:#F1EDE3; border-bottom:1px solid #E2DBCC;
    box-shadow:0 22px 34px rgba(20,16,11,0.14);
    padding:6px 22px 18px !important;
  }
  .tg-navcb:checked ~ .tg-nav{ display:flex !important; }

  .tg-nav > a{
    padding:15px 4px !important; font-size:16.5px !important;
    color:#17150F !important; border-bottom:1px solid #E2DBCC;
  }
  .tg-nav > a:last-child{               /* the "Talk to a specialist" CTA */
    display:block; text-align:center; margin-top:14px;
    background:#EC6A16 !important; color:#17150F !important;
    border-radius:4px !important; padding:15px 18px !important;
    border-bottom:none;
  }
}

/* ---------- HEADING SCALE ---------- */
@media (max-width: 900px){
  .tg-page h1{ font-size:40px !important; line-height:1.03 !important; }
  .tg-page h2{ font-size:30px !important; line-height:1.14 !important; }
}
@media (max-width: 560px){
  .tg-page h1{ font-size:32px !important; }
  .tg-page h2{ font-size:25px !important; }
}

/* ---------- GRID COLLAPSERS (hook classes) ---------- */
@media (max-width: 900px){
  .tg-hero{ grid-template-columns:1fr !important; }         /* home hero 2-col -> stacked */
  .tg-g2{ grid-template-columns:1fr !important; gap:34px !important; }  /* text+image / form / cases */
  .tg-g3{ grid-template-columns:1fr !important; gap:14px !important; }  /* 3 pillars */
  .tg-g4{ grid-template-columns:1fr 1fr !important; }       /* 4-up (metrics / why / cards) -> 2-up */

  .tg-g5{ grid-template-columns:1fr !important; border-top:none !important; } /* 5-step process -> stacked */
  .tg-g5 > div{
    border-right:none !important; border-top:2px solid #17150F;
    padding:18px 2px 20px !important;
  }

  .tg-foot{ grid-template-columns:1fr 1fr !important; gap:30px 24px !important; }
  .tg-foot > div:first-child{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .tg-cards{ grid-template-columns:1fr !important; }        /* industry image cards -> full-width */
  .tg-foot{ grid-template-columns:1fr !important; }
}

/* ---------- IMAGE BANDS: shorter on mobile ---------- */
@media (max-width: 900px){
  .tg-hero-media{ min-height:300px !important; }
  .tg-band{ min-height:auto !important; }
}
@media (max-width: 560px){
  .tg-bandpad{ padding-top:66px !important; padding-bottom:66px !important; }
}

/* ---------- SIDE GUTTERS ----------
   Every 44px horizontal gutter (nav bar, sections, footer, hero copy).
   Safe as a substring: the bare "44px" token survives DC re-serialisation. */
@media (max-width: 560px){
  .tg-page [style*="44px"]{ padding-left:22px !important; padding-right:22px !important; }
}
@media (max-width: 380px){
  .tg-page [style*="44px"]{ padding-left:16px !important; padding-right:16px !important; }
}