/* ============================================================
   Sivar Sarkawt — Portfolio · Shared responsive layer
   Media-query-only overrides. All base inline styles paint
   first (desktop-first); these refine layout for tablet & phone.
   Loaded from every page's <helmet>; targets the shared chrome
   and the grid signatures common to all pages.

   NOTE: attribute selectors match VALUE fragments only (e.g.
   [style*="240px 1fr"]) so they survive CSSOM re-serialization
   of inline styles regardless of colon spacing.
   ============================================================ */

/* Never allow a stray element to force horizontal scroll */
html, body { max-width: 100%; overflow-x: clip; }
[data-theme] { overflow-x: clip; }

/* ---------------------------------------------------------------
   TABLET  (≤1024px) — vertical nav rail still visible, so keep the
   left gutter wide enough to clear it; trim the right gutter.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  [data-theme] > section { padding-left: 64px !important; padding-right: 40px !important; }
}

/* ---------------------------------------------------------------
   SMALL TABLET / LARGE PHONE  (≤820px) — collapse the wide
   two-column "content + visual" layouts to a single column, thin
   out 3/4-up card & stat grids to 2-up, and unpin the tall
   scroll-driven sections. Rail still visible.
   --------------------------------------------------------------- */
@media (max-width: 820px) {
  /* two-column content grids → single column */
  [style*="1.15fr 0.85fr"], [style*="1.12fr 0.88fr"], [style*="1.08fr 0.92fr"],
  [style*="1.05fr 0.95fr"], [style*="1.04fr 0.96fr"], [style*="1.02fr 0.98fr"],
  [style*="1fr 1.05fr"], [style*="1.05fr 1fr"], [style*="1fr 1.12fr"],
  [style*="0.92fr 1.08fr"], [style*="0.85fr 1.15fr"], [style*="0.8fr 1.2fr"],
  [style*="240px 1fr"], [style*="300px 1fr"], [style*="340px 1fr"], [style*="200px 1fr"],
  [style*="minmax(220px"],
  [style*="1fr auto 1.05fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: clamp(22px, 5vw, 44px) !important;
  }

  /* map + side-panel grid (TorNET trip replay): stack, and give the map a
     real height since its inner map fills 100% of an otherwise-auto row */
  [style*="1fr 320px"] { grid-template-columns: 1fr !important; max-height: none !important; }
  [style*="1fr 320px"] > div:first-child { height: min(72vw, 380px) !important; }

  /* 3 & 4-up card / stat grids → 2-up */
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* tall scroll-pinned 2-D sections: unpin and let them flow so nothing is
     clipped inside a 100vh sticky window. (The home-page 3-D server section
     stays pinned — handled in its own page styles.) */
  [style*="300vh"], [style*="320vh"] { height: auto !important; }
  [style*="300vh"] > [style*="sticky"],
  [style*="320vh"] > [style*="sticky"] {
    position: static !important; height: auto !important;
    min-height: 0 !important; overflow: visible !important;
    padding-left: 64px !important; padding-right: 40px !important;
  }
}

/* ---------------------------------------------------------------
   PHONE  (≤600px) — retire the fixed side rails (the secure-console
   + scroll cover navigation), tighten the top corners, single-column
   everything, and shrink vertical rhythm.
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  /* section gutters */
  [data-theme] > section { padding-left: 20px !important; padding-right: 20px !important; }
  /* trim the big vertical rhythm on ordinary (non-hero) sections */
  [data-theme] > section:not([style*="100vh"]) {
    padding-top: 84px !important; padding-bottom: 84px !important;
  }
  /* unpinned sticky wrappers carried their own 120px gutter */
  [style*="300vh"] > [style*="sticky"],
  [style*="320vh"] > [style*="sticky"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* every multi-column grid → single column */
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(2,1fr)"], [style*="repeat(2, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- chrome: hide the vertical nav rail + social rail ---- */
  [data-theme] > nav { display: none !important; }
  [data-theme] > div:has(> a[aria-label="GitHub"]) { display: none !important; }

  /* pull logo + theme toggle into tighter corners */
  [data-theme] > a[aria-label="Home"] { top: 14px !important; left: 14px !important; }
  [data-theme] > button[aria-label="Toggle theme"] { top: 14px !important; right: 14px !important; }
}