/* ============================================================
   Mobile / tablet reflow layer.

   The site was authored at a fixed 1440px with structural grids
   set as inline styles in JSX, so most of this layer overrides
   inline values (hence !important). Inline styles serialize into
   the style attribute, which lets us target them by substring - 
   e.g. [style*="grid-template-columns"] catches every inline grid
   without touching twelve component files.
   ============================================================ */

/* ---------- Tablet and below ---------- */
@media (max-width: 1024px) {
  .container { padding-left: 24px; padding-right: 24px; }
}

/* ---------- Phones / small tablets: single column ---------- */
@media (max-width: 900px) {

  /* Every inline multi-column grid collapses to one column. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Tiles that span an explicit number of columns fill the row instead. */
  [style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* Editorial gutters authored for 1440px are far too large at 390px. */
  [style*="gap: 96px"] { gap: 28px !important; }
  [style*="gap: 64px"] { gap: 24px !important; }
  [style*="gap: 48px"] { gap: 20px !important; }
  [style*="gap: 40px"] { gap: 20px !important; }

  /* Negative margins were used to hand-tune desktop alignment between
     two columns. Once stacked they pull content over its neighbour. */
  [style*="margin-top: -"] { margin-top: 0 !important; }

  /* Fixed pixel widths/heights that would overflow the viewport. */
  [style*="max-width: 380px"],
  [style*="max-width: 660px"],
  [style*="max-width: 640px"],
  [style*="max-width: 720px"] { max-width: 100% !important; }

  /* Wide flex rows (stat rows, meta rows, footer rows) wrap. */
  [style*="justify-content: space-between"] { flex-wrap: wrap; }

  /* Section padding: 96–120px verticals compress. */
  [style*="padding: 96px 0"] { padding: 48px 0 !important; }
  [style*="padding: 120px 0"] { padding: 56px 0 !important; }
  [style*="padding: 80px 0"] { padding: 40px 0 !important; }
  [style*="padding: 72px 0"] { padding: 36px 0 !important; }

  /* ---- Nav: wordmark + wrapped links, no fixed height ---- */
  nav[style] {
    height: auto !important;
    padding: 14px 20px !important;
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 10px !important;
    row-gap: 10px !important;
  }
  nav[style] > div:nth-child(2) {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 14px 18px !important;
  }
  nav[style] > div:last-child { display: none !important; }

  /* ---- Skills page ---- */
  .skill-grid { grid-template-columns: 1fr !important; }
  .skill-card:not(.open),
  .skill-card.open { grid-column: 1 / -1 !important; }
  .skill-panel-inner,
  .skill-panel-inner.has-pair { display: block !important; }
  .demo-pair { grid-template-columns: 1fr !important; }
  .demo-frame { height: auto !important; max-height: 420px; }
  .ig-strip { flex-wrap: wrap; justify-content: center; }
  .cert-row { flex-wrap: wrap; justify-content: center; }

  /* ---- Case study gallery ---- */
  .case-gallery { grid-template-columns: 1fr !important; }
  .case-gallery-tile { width: 100% !important; }

  /* ---- Sales page orbit: static side-by-side, no 3D ---- */
  .tornado-stage,
  .tornado-world { height: auto !important; transform: none !important; animation: none !important; }
  .tornado-world { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
  .tornado-item {
    position: static !important;
    transform: none !important;
    animation: none !important;
    width: 46% !important;
  }

  /* ---- Display type: keep the editorial scale but stop overflow ---- */
  .t-display-mega { font-size: clamp(34px, 11vw, 60px) !important; }
  h1[style], h2[style] { overflow-wrap: break-word; }

  /* Media that must never exceed the viewport. */
  img, video, iframe { max-width: 100%; }

  /* Footer columns stack. */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  footer [style*="text-align: right"] { text-align: left !important; }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 560px) {
  .container { padding-left: 18px; padding-right: 18px; }
  [style*="font-size: 56px"] { font-size: 36px !important; }
  [style*="font-size: 48px"] { font-size: 32px !important; }
  .tornado-item { width: 70% !important; }
}

/* Touch: hit targets stay tappable. */
@media (hover: none) and (max-width: 900px) {
  a, button { min-height: 44px; }
  nav[style] a { min-height: 0; }
}