/**
 * Package choice cards — a package/tier picker step in a Gravity Forms wizard.
 *
 * Package selection is drawn as a grid of image cards. That is Gravity Forms'
 * native `image_choice` field, so the layout, the selected state, the
 * responsive grid and the no-image placeholder are all GF's. Populate the
 * choices from the package CPT with a `kd-packages-<group>` field class —
 * see inc/gravity-forms.php.
 *
 * Scoped to the FIELD TYPE rather than to one form or one band on purpose: any
 * image-choice field on this site should be a 12px card, not a 100px pill. A
 * narrower scope would leave the next one rendering as an ellipse.
 *
 * ONE correction is needed, and this file is only that correction.
 *
 * The theme sets `inputBorderRadius: 100` (KDS_GF_INPUT_RADIUS) in `gform_default_styles`, which is
 * right: the starter's text inputs are 100px pills. But GF reuses the SAME
 * `--gf-ctrl-radius` token for the image-choice CARD, so a 200×232 card was
 * rendering as an ellipse with its label sitting inside the curve.
 *
 * Re-pointing the variable on the image-choice field alone keeps the pill
 * inputs pill-shaped and gives cards the 12px card radius
 * (--kd-radius-md). It is a custom-property override on a DESCENDANT of the
 * wrapper GF writes its inline block to, so it wins without competing on
 * specificity and without `!important`.
 */

.gform_wrapper .gfield--type-image_choice {
	--gf-ctrl-radius: var(--kd-radius-md);
}

/*
 * GF sizes image-choice cards with a FIXED `--gf-field-img-choice-size` (200px),
 * which reads as under-filled on a phone: at 375px the cards left ~145px of dead
 * space beside them. Two 200px cards cannot sit side by side at this width
 * anyway, so below this width one full-width card per row is the only layout
 * that isn't half-empty.
 *
 * 600px matches the breakpoint `partners.css` and `logo-strip.css`
 * already use. GF itself has NO breakpoint here — image-choice
 * cards are a fixed width that simply wraps — so there is no GF boundary to
 * align to, and the theme's own convention wins.
 *
 * Starter default, not a designer-specified layout: adjust per project.
 */
@media (max-width: 600px) {
	.gform_wrapper .gfield--type-image_choice {
		--gf-field-img-choice-size: 100%;
	}
}

/*
 * ── Desktop card grid ────────────────────────────────────────────────────────
 * GF lays image-choice out as a wrap-flex row of rigid cards: a fixed
 * `--gf-field-img-choice-size` (200px) applied to `.gchoice` as inline-size AND
 * min/max-inline-size together, plus `align-self: start`. Two consequences:
 * cards cannot be resized by the custom property alone, and a wrapping label
 * ("Gold Package — $1000") makes its own card taller than its neighbours.
 *
 * Grid fixes both: columns are explicit, and grid items stretch to the row
 * height by default. `align-self: stretch` undoes GF's `start`; the 2px border
 * lives on `.gchoice` itself, so stretching it stretches the visible card.
 *
 * ── Everything hangs off --kd-pkg-cols ───────────────────────────────────────
 * The column count drives the track list, the grid width AND the centring
 * offset, so changing layout is a one-line override — see the four-card rule.
 *
 * Card size is the constant, not the container. The 2-up layout inside the
 * 595px form column lands on ~292px and reads well, so 3-up matches it by
 * WIDENING the grid rather than shrinking the card. The grid breaks out of the
 * form column symmetrically with a negative inline margin; the band has ~305px
 * of slack either side of the 595px column at 1440, so 3 x 292 + 2 x 12 = 900
 * fits with room to spare.
 *
 * ── On card counts, and why there is only ONE exception ──────────────────────
 * CSS has no balanced-row primitive: you cannot say "distribute N items as
 * evenly as possible". `auto-fit`/`auto-fill` fill greedily, so they give 3+1
 * for four items just as a fixed 3 does. But with three columns as the default,
 * only ONE count reads badly:
 *
 *   1→1  2→2  3→3  4→3+1 ✗  5→3+2  6→3+3  7→3+3+1  8→3+3+2
 *
 * Four is the only orphan worth correcting, so it gets a single quantity query
 * rather than a growing pile of per-count rules. `:first-child:nth-last-child(4)`
 * matches only when the row holds exactly four children — safe here because
 * every child of `.gfield_radio` is a `.gchoice`, nothing else.
 *
 * Specificity: `.gform_wrapper.gform-theme--framework` (0,4,0) deliberately
 * outranks GF's own (0,3,0) so this wins on specificity rather than load order,
 * which a plugin update could otherwise flip. No `!important`.
 *
 * Breakpoints: 600px is the existing one-card-per-row floor. The 1100px step is
 * where the 900px grid still clears the band padding — below it the grid stays
 * inside the 595px column at ~190px cards rather than colliding with the edge.
 */
@media (min-width: 601px) {
	/* Hosted on the wizard PAGE, not the grid: the Next button lives in
	   `.gform_page_footer`, a sibling of the field, so it can only inherit the
	   column count from a shared ancestor. The grid and width rules carry var()
	   fallbacks (3 cols, GF gap), so a single-page form with an image-choice
	   field — no `.gform_page` — still gets a grid. */
	.gform_wrapper.gform-theme--framework
		.gform_page:has(.gfield--type-image_choice) {
		--kd-pkg-cols: 3;
		--kd-pkg-gap: var(--gf-field-img-choice-gap, 12px);
	}

	/* Exactly four cards: 2x2 here (tablet) — never 3 + 1 orphan. Desktop puts
	   all four on ONE row (rule in the 1100px block below); phones keep 2x2
	   (≤600px block at the end). House decision. */
	.gform_wrapper.gform-theme--framework
		.gform_page:has(.gchoice:first-child:nth-last-child(4)) {
		--kd-pkg-cols: 2;
	}

	.gform_wrapper.gform-theme--framework
		.gfield--type-image_choice
		.gfield_radio {
		display: grid;
		grid-template-columns: repeat(var(--kd-pkg-cols, 3), minmax(0, 1fr));
		gap: var(--kd-pkg-gap, var(--gf-field-img-choice-gap, 12px));
	}

	.gform_wrapper.gform-theme--framework .gfield--type-image_choice .gchoice {
		align-self: stretch;
		inline-size: auto;
		min-inline-size: 0;
		max-inline-size: none;
	}
}

/* Break OUT of the 595px form column so cards reach their target size instead
   of being squeezed by it.

   Applied to the whole FIELD (legend + description + grid) and to the page
   footer, not just the grid: otherwise "Select Your Package", "Every
   partnership includes…" and the Next button stay on the form column's edge
   while the cards start ~152px to their left, and nothing lines up. All four
   now share one left edge.

   The footer rule is guarded by `:has(.gfield--type-image_choice)` so only the
   package step widens — steps 2 and 3 have no cards and keep the normal column.
   Same --kd-pkg-cols drives width and centring for both. */
@media (min-width: 1100px) {
	.gform_wrapper.gform-theme--framework .gfield--type-image_choice,
	.gform_wrapper.gform-theme--framework
		.gform_page:has(.gfield--type-image_choice)
		.gform_page_footer {
		--kd-pkg-card: 18.25rem; /* 292px — matches the 2-up size */
		/* Ideal width, then a hard cap so the breakout can never outgrow the
		   band. At 1100 the band has ~917px inside and the ideal is 900 — 8px
		   either side, which one padding change would eat. The cap makes it
		   shrink gracefully instead of clipping. 14rem is about the band's two
		   paddings at this size; 100vw includes the scrollbar, so it errs
		   narrow, which is the safe direction. */
		--kd-pkg-w: min(
			calc(
				var(--kd-pkg-cols, 3) * var(--kd-pkg-card) +
					(var(--kd-pkg-cols, 3) - 1) *
					var(--kd-pkg-gap, var(--gf-field-img-choice-gap, 12px))
			),
			calc(100vw - 14rem)
		);

		inline-size: var(--kd-pkg-w);
		margin-inline: calc((100% - var(--kd-pkg-w)) / 2);
	}

	/* Four cards on desktop: one row of four (4 x 292 + 3 x 12 = 1204px, capped
	   by --kd-pkg-w's 100vw guard on narrower desktops). Same quantity query as
	   the 2x2 rule, so 3, 5, 6… cards are unaffected. */
	.gform_wrapper.gform-theme--framework
		.gform_page:has(.gchoice:first-child:nth-last-child(4)) {
		--kd-pkg-cols: 4;
	}
}

/* Four cards on phones: 2x2 instead of four full-width cards stacked (house
   decision). Other counts keep the one-card-per-row floor above. */
@media (max-width: 600px) {
	.gform_wrapper.gform-theme--framework
		.gform_page:has(.gchoice:first-child:nth-last-child(4))
		.gfield--type-image_choice
		.gfield_radio {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gf-field-img-choice-gap, 12px);
	}

	.gform_wrapper.gform-theme--framework
		.gform_page:has(.gchoice:first-child:nth-last-child(4))
		.gfield--type-image_choice
		.gchoice {
		align-self: stretch;
		inline-size: auto;
		min-inline-size: 0;
		max-inline-size: none;
	}
}