/* ==================================================================== Grid Maker Pro — Responsive device-class tier (2026-06-09) -------------------------------------------------------------------- Adds device-class behaviour ON TOP of the existing tuned defaults. It introduces NEW breakpoints only; it never rewrites the mid-range (laptop / tablet / phone) layout that already works. Tiers · Big screen / TV ≥1600 · ≥1920 · ≥2400 fill the canvas, widen non-prose frames, and scale type up for viewing distance. · Tablet 600–1024 intermediate grid columns so wide tablets don't show lonely single columns. · Small mobile ≤380 tighter gutters so the reading column reclaims width; wide media stays scrollable. Cascade note This file is linked LAST in (app/layout.tsx). The legacy /assets/gmp.css is linked inside page on some templates, so it loads AFTER this file. To make sure these big-screen overrides win against gmp.css's same-specificity base rules (e.g. `.container`), every geometry override is prefixed with `html` — one extra element of specificity that is order-independent. Root `font-size` scaling is naturally order-independent. The hero tool (public/grid-tool.html) is a self-contained iframed app with its own internal layout + cache-busted ?v=N — it is intentionally NOT touched here. ==================================================================== */ /* ──────────────────────────────────────────────────────────────────── 1 · BIG SCREEN / TV — typographic scale-up for viewing distance -------------------------------------------------------------------- Bumping the root font-size scales every rem-based size (type, spacing, clamp() bounds) together. Because the editorial reading measure is set in `ch`, larger type also slightly shortens characters-per-line — the prose stays comfortable instead of stretching. Kept gentle (max 18px) so display headings don't balloon. Respects users who set a larger base size: we only step up, never below the inherited 100%. ──────────────────────────────────────────────────────────────────── */ @media (min-width: 1728px) { html { font-size: 106.25%; } /* 17px */ } @media (min-width: 2240px) { html { font-size: 112.5%; } /* 18px */ } /* ──────────────────────────────────────────────────────────────────── 2 · BIG SCREEN — widen NON-PROSE frames so they fill the canvas -------------------------------------------------------------------- `.container` carries card grids, tool heroes, comparison strips, hub mosaics, marketing sections — none of which suffer from extra width. The editorial reading frame (`.gmp-layout-with-toc`) is widened far more conservatively in §3 to protect the prose measure. ──────────────────────────────────────────────────────────────────── */ @media (min-width: 1600px) { html .container { max-width: 1320px; } html .container-narrow { max-width: 820px; } html .gmp-index-wrap { max-width: 1440px; } } @media (min-width: 1920px) { html .container { max-width: 1440px; } html .gmp-index-wrap { max-width: 1560px; } } @media (min-width: 2400px) { html .container { max-width: 1560px; } html .gmp-index-wrap { max-width: 1680px; } } /* ──────────────────────────────────────────────────────────────────── 3 · BIG SCREEN — editorial reading frame (leaf / pillar / guide) -------------------------------------------------------------------- `.gmp-layout-with-toc` = main reading column (1fr) + 220px sticky ToC, capped at --w-content (1100px). Widen it only enough to lift it off the "thin ribbon in an ocean of white" look, while a defensive cap keeps the body copy itself near a 74ch measure (the figures, tables, decision matrices and galleries inside it are free to use the fuller width). ──────────────────────────────────────────────────────────────────── */ @media (min-width: 1600px) { html .gmp-layout-with-toc { max-width: 1180px; gap: var(--s-8); } } @media (min-width: 1920px) { html .gmp-layout-with-toc { max-width: 1260px; } } @media (min-width: 2400px) { html .gmp-layout-with-toc { max-width: 1340px; } } /* Keep running text in a comfortable measure even as the frame widens. Scoped to the leaf reading column + big screens only, so it can never affect the mid-range layout. Block-level prose only — never cards, figures, tables or grid children. */ @media (min-width: 1600px) { html .gmp-layout-with-toc > * > p, html .gmp-layout-with-toc > * > ul, html .gmp-layout-with-toc > * > ol, html .gmp-layout-with-toc > * > blockquote { max-width: 74ch; } } /* ──────────────────────────────────────────────────────────────────── 4 · TABLET — intermediate grid columns (600–1024) -------------------------------------------------------------------- The gm-* card rows collapse 3-col → 1-col at ≤880, which leaves a tall single-file stack on portrait tablets and large phones in landscape. Give them a 2-col rhythm in that band instead. (`.gm-children` already has its own 2-col step, so it is left alone.) ──────────────────────────────────────────────────────────────────── */ @media (min-width: 600px) and (max-width: 880px) { html .gm-steps, html .gm-bento, html .gm-related { grid-template-columns: 1fr 1fr; gap: var(--s-5); } } /* ──────────────────────────────────────────────────────────────────── 5 · SMALL MOBILE — reclaim horizontal width (≤380) -------------------------------------------------------------------- At 360–380px the standard 2rem side gutter eats a lot of a narrow viewport. Trim it so the reading column breathes, and make sure long unbreakable strings / wide media never force a horizontal scroll. ──────────────────────────────────────────────────────────────────── */ @media (max-width: 380px) { html .container, html .container-narrow, html .container-prose { padding-left: var(--s-4); padding-right: var(--s-4); } html .gmp-section { padding-left: var(--s-4); padding-right: var(--s-4); } } /* ──────────────────────────────────────────────────────────────────── 6 · OVERFLOW SAFETY NET (all sizes) -------------------------------------------------------------------- Backstop for the global `overflow-x: clip`: keep replaced/media elements and wide tables inside their box so nothing forces the page wider than the viewport. Cheap, non-visual, defensive. ──────────────────────────────────────────────────────────────────── */ html img, html svg, html video, html canvas, html iframe { max-width: 100%; } html pre, html code { overflow-wrap: anywhere; }