/****** FILE: themes/gamry/css/pages/CategoryLandingPage.css *****/
/* ===================================================================
   CategoryLandingPage — v2 blue design (QCM, Add-Ons, Cells, Software)
   Cards reuse the shared .rd-card* styles from redesign.css.
   =================================================================== */

/* Page canvas set explicitly — see the note in PotentiostatsLandingPage.css. Without a
   background here the LEGACY rule `body { background:#e7f3fb }` (layout.css:2) showed through as
   a pale blue on the four category landings, while every other redesigned page was --gm-bg
   off-white. .rd-cat and .rd-pot were the only two redesigned templates missing this. */
.rd-cat { font-family: 'IBM Plex Sans', sans-serif; color: var(--gm-ink); background: var(--gm-bg, #fbfbfa); }

/* header */
.rd-cat-head { border-bottom: 1px solid var(--gm-border); background: #fff; padding: 26px 40px 34px; }
.rd-cat-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
/* Measure history: 44em -> 56em -> 76em -> uncapped. These two pages are the only category
   landings with substantial intro copy (QCM 4337 chars, Software 2534); Cells (133) and Add-Ons (91)
   never reach any limit, so they are unaffected throughout.
   The cap is now removed. At 76em (1216px) the intro stopped at x=1256 on a 1920 viewport while the
   card grid below it ran to x=1880 — 624px of empty page to its right (304px at 1600), which read as
   a ragged, unfinished right edge because everything else on the page reached the content boundary.
   With no cap the intro fills the row instead, stopping only where the "N products" label begins.

   flex: 1 1 0 — basis ZERO, not auto — so the column grows into whatever the row has spare rather
   than claiming its content width and shoving that label onto its own line. With the default `auto`
   basis the label lost its place at 1280 and below and reappeared bottom-left under the intro:
   flex-wrap decides wrapping from the item's content-based hypothetical size, so flex-shrink never
   got the chance to resolve it. A zero basis removes that size from the calculation entirely.
   min-width 22em keeps a floor: above it the two share the row (down to ~520px), below it the label
   wraps deliberately rather than being squeezed against a hyphenating column.

   Wrapped in min() because a bare 22em never relaxes. A flex item's min-width is a hard floor, so
   below ~400px this column stayed 352px wide inside a 272px row and pushed the whole page out --
   scrollWidth 376 on all four category landings at every viewport under 400px, which is +56px at
   320 and +1px at 375, so it failed on ordinary phones and not just the narrow edge (WCAG 2.1
   SC 1.4.10). The constant 376 is the tell: an over-long word overflows by an amount that varies
   with the viewport, a fixed floor does not. min(22em, 100%) resolves to 22em wherever the row is
   at least that wide -- so the wrapping behaviour above is untouched -- and to the row's own width
   below it, which is narrower than 22em only after the label has already wrapped away. */
.rd-cat-head-main { flex: 1 1 0; min-width: min(22em, 100%); }

/* Columns on every category landing, not scoped to one page.
   `columns: 32em` sets a column WIDTH, not a count, so the count follows the viewport and the
   measure stays put: 3 columns at 1920, 2 from ~1280, 1 below that. On QCM that takes the line from
   203 characters to 64; Software runs 63-70. The two short pages (Cells 133 chars, Add-Ons 91)
   resolve to a single column, so the rule is a no-op there and needs no exception.

   This was Software-only at first, on two objections to QCM that measurement did not support:
     - "its headings orphan across the break" — they do not. 0 of 5 headings end up separated from
       the content that follows them, at 1920/1600/1440/1280/1024. That came from an earlier look at
       the narrower capped layout, not from this one.
     - "columns roughly halve the block height" — they do not, on either page. Columns trade width
       for height about 1:1: halving the column width doubles the text's height, and splitting it
       back into two columns returns it to roughly where it started. Software went 589 -> 568px,
       QCM 1137 -> 941px at 1920 and not at all at 1280. Height is not what this buys.

   What it buys is line length, which is the whole point. The one real cost stands: Software's block
   is ~570-690px so it sits inside a screen and both columns are read together, while QCM's is
   940-1500px, so you reach the bottom of one column and scroll back up for the next. That is worth
   accepting at 203 characters a line; it would not be worth it at 70. */
.rd-cat-intro { columns: 32em; column-gap: 48px; }
.rd-cat-intro p { break-inside: avoid; }
.rd-cat-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; color: var(--gm-ink); margin: 0 0 12px; text-wrap: balance; }
.rd-cat-intro { font-size: 17px; line-height: 1.6; color: var(--gm-body); }
.rd-cat-intro p { margin: 0 0 12px; color: var(--gm-body); }
.rd-cat-intro p:last-child { margin-bottom: 0; }
.rd-cat-count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-muted); padding-bottom: 6px; white-space: nowrap; }

/* grid */
.rd-cat-gridwrap { padding: 40px 40px 56px; }
.rd-cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr)); gap: 24px; }
.rd-cat-card { display: flex; flex-direction: column; }
.rd-cat-card .rd-card-body { display: flex; flex-direction: column; flex: 1; }
.rd-cat-card .rd-card-title { font-size: 17px; }
.rd-cat-card .rd-card-link { margin-top: auto; }

@media (max-width: 700px) {
	.rd-cat-head { padding: 22px 24px 28px; }
	.rd-cat-gridwrap { padding: 32px 24px 44px; }
}