/* cards.css — the practice cards, and the two-up pairs.

   REBUILT 2026-09-09. Three things were wrong and one of them was a design smell
   rather than a bug:

     - The cards sat on #f9fafc against a white page with no border and no shadow, so
       they were very nearly invisible. There was no elevation in the whole system
       because "no shadows, absent rather than invented".
     - Every card carried a filled button, so the six practice cards presented SIX
       competing primary calls to action in one section. That is noise, not choice.
     - Uneven title wrapping and ragged button widths left the bottom edge of each row
       looking broken.

   The card treatments are deliberately NOT all the same. Giving every group of
   content an identical rounded box with an identical soft shadow is the commonest
   generated-design tell, so:

     .gnt-cards--three  practice cards: a border, no shadow, quiet text-link action
     .gnt-cards--two    the sell/buy pair: a photograph, real elevation, filled button

   Radius follows hierarchy as well — radius-sm on a card, radius-md on a media
   panel — rather than one value applied to everything. */

.gnt-cards {
	display: grid;
	gap: var(--space-6);
}

.gnt-cards--two   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.gnt-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --wide is a GRID modifier only, and it is always written alongside --three so every
   treatment rule below still applies: the border, the quiet text-link action, the
   flush baseline. It exists for a set of four practice cards, where --three alone
   strands the fourth on a row of its own above 1024px, and --two is not the answer
   because that modifier also brings the pair's elevation and h2 titles.

   0,2,0, so it beats the 0,1,0 --three rules inside the media queries at the foot of
   this file. That is why the 767 override below has to be written out again; the 1024
   one does not, because it asks for the two columns this rule already sets. */
.gnt-cards--three.gnt-cards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --narrow is the same idea in the other direction: four columns, which is what a set
   of eight wants — 4+4, no short row. Both modifiers are grid only, both are always
   written alongside --three, and both are 0,2,0 so they clear the media queries at the
   foot of this file. --narrow has to restate BOTH of those, because --three asks for
   two columns at 1024 and one at 767 and this rule outweighs each. */
.gnt-cards--three.gnt-cards--narrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gnt-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--color-surface-page);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: border-color var(--duration-base) var(--easing-standard);
}

.gnt-card:hover {
	border-color: var(--color-border-strong);
}

/* On the raised ground a white card with a grey border reads correctly; on white it
   would be a border with no fill difference, so the fill flips. */
.gnt-section--raised .gnt-card {
	background-color: var(--color-surface-page);
}

.gnt-card__media {
	order: -1;
	margin: 0;
}

/* Two selectors, and the second is not redundant — see the note below it. */
.gnt-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	/* margin-top:auto on the action pushes it to the bottom, so a row of cards has a
	   flush baseline even when the titles wrap to different depths. */
	flex: 1 1 auto;
	padding: var(--space-7);
}

/* THE GROW HAS TO BE RESTATED AT 0,2,0, measured 2026-09-11.

   Elementor gives every container `flex-grow: var(--flex-grow)` off `.e-con`, which is
   0,1,0 — the same specificity as `.gnt-card__body` above, and its stylesheet loads
   after ours. Source order decides a tie, so the rule above lost and the body computed
   flex-grow:0: it sized to its content and stopped, leaving dead space between it and
   the foot of the card the grid had already stretched.

   That is invisible until two cards in a row differ in height. On /listings/ it was 30px
   in the one card whose title fits on a single line, which read as a ragged row of
   actions and looked like margin-top:auto failing. margin-top:auto was fine; there was
   no free space for it to claim, because the box it lives in was never the full height.

   0,2,0 clears `.e-con` outright rather than depending on load order. No !important:
   CLAUDE.md's order of preference is a higher-specificity selector first, and this is
   what that looks like. */
.gnt-card .gnt-card__body {
	flex-grow: 1;
}

.gnt-card__title {
	margin: 0;
	font-size: var(--text-h3);
	line-height: var(--text-h3-lh);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-heading);
	text-wrap: balance;
}

.gnt-card__text {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	color: var(--color-text-muted);
}

/* ------------------------------------------- the quiet action on a practice card */

/* Six filled buttons in one section is the problem; six links is not. This restyles
   the button widget the page already contains, so the fix needs no page rebuild — the
   content and the link are untouched, only the presentation changes.

   0,4,0, which clears both the kit's 0,2,0 and buttons.css's own 0,3,0 primary rule. */
.gnt-cards--three .gnt-card .elementor-element.gnt-btn .elementor-button {
	/* Was 0, which rendered a 19px-tall tap target at every width. The link styling is
	   deliberate and stays; 24px is the WCAG 2.2 SC 2.5.8 floor, not an aesthetic
	   choice. These links are isolated one-per-card, so they arguably passed under the
	   spacing exception -- this stops the argument rather than relying on winning it.
	   Hit area only: the text is centred in the box, so it moves by 2.5px. */
	min-height: 24px;
	margin-top: var(--space-2);
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--blue-600);
	box-shadow: none;
	text-align: left;
	justify-content: flex-start;
	/* The underline is the affordance now that the fill is gone. Offset so it does not
	   collide with the descenders. */
	text-decoration: underline;
	text-decoration-color: var(--color-border-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.gnt-cards--three .gnt-card .elementor-element.gnt-btn .elementor-button:hover {
	background-color: transparent;
	color: var(--blue-500);
	text-decoration-color: var(--blue-500);
	box-shadow: none;
}

/* The action sits at the foot of the card whatever the copy above it does. */
.gnt-cards--three .gnt-card .elementor-element.gnt-btn {
	margin-top: auto;
	padding-top: var(--space-2);
}

/* ------------------------------------------------------- the two-up pair */
/* These keep a real button, because there are only two of them and they are the
   section's whole purpose. They also get elevation, which the practice cards do not. */

.gnt-cards--two .gnt-card {
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.gnt-cards--two .gnt-card__body {
	padding: var(--space-8);
	gap: var(--space-4);
}

.gnt-cards--two .gnt-card__title {
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	letter-spacing: var(--text-h2-ls);
}

.gnt-cards--two .gnt-card__text {
	font-size: var(--text-body-lg);
	line-height: var(--text-body-lg-lh);
}

.gnt-cards--two .elementor-element.gnt-btn {
	margin-top: var(--space-2);
}

/* Kept for the prototype, which alternates the media side on the pair. The built
   homepage deliberately does not use it — the mirrored two-up was the scraped
   frame's most recognisable device. See bin/pages/home.mjs. */
.gnt-card--media-last .gnt-card__media {
	order: 1;
}

@media (max-width: 1024px) {
	.gnt-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gnt-cards--three.gnt-cards--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gnt-cards--two   { grid-template-columns: minmax(0, 1fr); }
	.gnt-card__body   { padding: var(--space-6); }
}

@media (max-width: 767px) {
	.gnt-cards--three { grid-template-columns: minmax(0, 1fr); }
	.gnt-cards--three.gnt-cards--wide { grid-template-columns: minmax(0, 1fr); }
	.gnt-cards--three.gnt-cards--narrow { grid-template-columns: minmax(0, 1fr); }
	.gnt-cards--two .gnt-card__body { padding: var(--space-6); }
}