/* =========================================================
   ARQUBIQ grid — single source of truth
   =========================================================

   Every page loads this before its own stylesheet. Column count, side
   margin and gutter are defined here and nowhere else, so the page edge
   lines up whether the visitor is on the homepage, a guide, a service
   page or a comparison page.

   Tiers:
     >= 1600px   16 columns
     1025-1599   12 columns
     721-1024     8 columns
     <= 720       4 columns

   Content is capped at --grid-max and centred. --grid-edge is the distance
   from the viewport edge to the first column once that cap applies, which
   is what full-bleed sections align against.

   Do not redefine --cols, --margin or --gutter in a page stylesheet. That
   is what made the margins diverge in the first place. Page stylesheets
   that use their own name for the side margin should alias it instead:

       :root { --pad: var(--margin); }
   ========================================================= */

:root {
  --cols: 12;
  --margin: 5.5vw;
  --gutter: clamp(16px, 1.6vw, 28px);
  --grid-max: 1600px;
  --grid-edge: max(var(--margin), calc((100vw - var(--grid-max)) / 2 + var(--margin)));
}

/* Wide desktop — 16 columns.
   The side margin stays on the same 5.5vw ramp as the 12-column tier: the
   extra width buys finer column subdivision, not a wider gutter to the edge. */
@media (min-width: 1600px) {
  :root {
    --cols: 16;
  }
}

/* Tablet — 8 columns. */
@media (max-width: 1024px) {
  :root {
    --cols: 8;
    --margin: clamp(28px, 5vw, 52px);
    --gutter: clamp(12px, 2vw, 20px);
  }
}

/* Phone — 4 columns. Not a shrunk desktop. */
@media (max-width: 720px) {
  :root {
    --cols: 4;
    --margin: clamp(18px, 5.5vw, 24px);
    --gutter: 12px;
  }
}