/* GridPage — the Calculators & Tools index, for GridPageShell.ss.

   The cards themselves are the shared .rd-card from redesign.css, unchanged, so this index
   matches the category listings rather than inventing a third card. Only the page frame and
   the grid's own measurements live here.

   GridPage.css — which styles the legacy text-on-photograph grid — is blocked in
   GridPageController::init() rather than left to load harmlessly. Two of its rules are
   unscoped enough to reach the new markup (.grid-layout is gone, but its `h2`/`h3` colour
   rules are not all namespaced), and a stylesheet that only half-applies is worse than one
   that does not load. */

.rd-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 34px 24px 72px;
	font-family: var(--gm-font-body, 'IBM Plex Sans', sans-serif);
	color: var(--gm-ink, #16232b);
}

/* ---------------------------------------------------------------- head */

.rd-grid-kicker {
	font-family: var(--gm-font-mono, 'IBM Plex Mono', monospace);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gm-muted, #5f6b72);
	margin-bottom: 10px;
}
.rd-grid-title {
	font-family: var(--gm-font-display, 'Space Grotesk', sans-serif);
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.12;
	font-weight: 700;
	margin: 0 0 18px;
}
.rd-grid-prose { max-width: 72ch; font-size: 16.5px; line-height: 1.65; color: var(--gm-body, #3d4a52); }
.rd-grid-prose > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- cards

   Column count comes from the CMS field, via --rd-grid-cols on the element. It is set to 2
   on this page, and honouring it is not deference for its own sake: an intrinsic
   `auto-fill, minmax(300px, 1fr)` put three of the four calculators across a 1200px frame
   and stranded the fourth alone on the next row.

   Below 900px the count is dropped and the grid becomes intrinsic again, because a
   two-column choice made for a desktop layout says nothing useful about a phone. */

.rd-grid-cards {
	display: grid;
	grid-template-columns: repeat(var(--rd-grid-cols, 2), minmax(0, 1fr));
	gap: 24px;
	margin-top: 30px;
}
@media (max-width: 900px) {
	.rd-grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
}
@media (max-width: 620px) {
	.rd-grid-cards { grid-template-columns: 1fr; }
}

.rd-grid-card { display: flex; flex-direction: column; }
.rd-grid-card .rd-card-body { display: flex; flex-direction: column; flex: 1; }
/* The subtitles here are full sentences, several of them long — the Nernst one runs to 150
   characters — so the description is allowed to breathe and the link is pinned to the
   bottom, keeping the call to action on a common line across a row of uneven cards. */
.rd-grid-card .rd-card-desc { margin-bottom: 16px; }
.rd-grid-card .rd-card-link { margin-top: auto; }

/* A block with no link is not a control. Without this it still looks like a card you can
   click, because .rd-card carries the hover transition. */
.rd-grid-card--nolink { cursor: default; }
.rd-grid-card--nolink:hover { transform: none; box-shadow: none; border-color: var(--gm-border, #e6eaec); }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 720px) {
	.rd-grid { padding: 24px 16px 52px; }
	.rd-grid-cards { gap: 18px; margin-top: 24px; }
}