/*
 * Case figures.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * The ink is measured in PHP against the surface named by `scheme` and arrives
 * as `--btxc-figures-*`. Nothing here names a colour token for type.
 *
 * `panel` is deliberately the same surface treatment as spec-panel and
 * promise-panel — a lift off whatever is behind it rather than a colour of its
 * own, so it survives the hero changing its background. The three appear in the
 * same slot on sibling pages and must stay in step on the 7% / 16% mix and the
 * radius; the long version of that argument is in promise-panel/style.css.
 */

@layer bertex-components {

	.btxc-figures {
		--btxc-figures-ink: var( --btx-color-text-bg-1, #f9fafb );
		--btxc-figures-quiet: var( --btx-color-text-bg-2, #d3e1f7 );
		--btxc-figures-heading: var( --btxc-figures-quiet );
		--btxc-figures-accent: var( --btxc-figures-ink );

		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-s, 1.25rem );

		color: var( --btxc-figures-ink );
	}

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make: the design system publishes a heading family and a body family and
	 * no third. See the note in booking-panel/style.css.
	 */
	.btxc-figures__heading {
		margin: 0;

		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.8125rem );
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var( --btxc-figures-heading );
	}

	/* ── The grid ──────────────────────────────────────────────────────── */

	/*
	 * `auto-fit` with a floor, so four figures are a row on a wide band and two
	 * rows of two in a hero's second column, with nothing set. The explicit
	 * column counts below are for the cases where that guess is wrong — a
	 * narrow panel that has to break 2×2 at a width where four still fit.
	 */
	.btxc-figures__grid {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
		gap: var( --btx-spacing-s, 1.375rem );
	}

	.btxc-figures--cols-2 .btxc-figures__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.btxc-figures--cols-3 .btxc-figures__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.btxc-figures--cols-4 .btxc-figures__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	/*
	 * The pair, flipped. <dt> is emitted first because the HTML spec requires
	 * it inside a group; the value reads above the label, so `order` does the
	 * flip rather than the markup lying about which is which.
	 */
	.btxc-figures__item {
		margin: 0;

		display: flex;
		flex-direction: column;
		gap: var( --btx-spacing-xxxs, 0.25rem );
		min-width: 0;
	}

	.btxc-figures__value {
		order: -1;
		margin: 0;

		font-family: var( --btx-font-heading-family, "Outfit", sans-serif );
		font-size: var( --btx-font-heading-lg, 2.25rem );
		font-weight: 700;
		line-height: 1;
		/*
		 * "$310 → $1,140" is a long figure and it wraps at the spaces around
		 * the arrow, which is the right place. This is only here so a single
		 * unbroken token — a long currency figure in a narrow strip cell —
		 * breaks rather than pushing the cell wider than its column.
		 */
		overflow-wrap: break-word;
		color: var( --btxc-figures-ink );
	}

	/*
	 * One figure of the set, painted. The accent is checked against the surface
	 * in PHP and dropped if it would not read, so this is never the reason a
	 * number is illegible.
	 */
	.btxc-figures__value--accent {
		color: var( --btxc-figures-accent );
	}

	/*
	 * The label is quiet by hue, never by being hard to read: the ink it takes
	 * is the measured second tier for this surface, which clears the reading
	 * bar by design.
	 */
	.btxc-figures__label {
		margin: 0;

		font-size: var( --btx-font-body-xs, 0.875rem );
		line-height: var( --btx-line-height-body, 1.45 );
		text-wrap: pretty;
		color: var( --btxc-figures-quiet );
	}

	/* ── panel ─────────────────────────────────────────────────────────── */

	.btxc-figures--panel {
		padding: var( --btx-spacing-lg, 1.875rem );

		background: color-mix( in srgb, currentColor 7%, transparent );
		border: 1px solid color-mix( in srgb, currentColor 16%, transparent );
		border-radius: var( --btx-border-radius-lg, 0.875rem );
	}

	/* ── strip ─────────────────────────────────────────────────────────── */

	/*
	 * One framed band with hairline rules between the cells. The rules are the
	 * grid gap showing the border colour through, which is why the grid itself
	 * carries the background — a border per cell would double up at every
	 * join and need a :last-child exception at each breakpoint.
	 *
	 * The hairline is a graphic, judged against the 3:1 floor rather than a
	 * reading contrast, so a 16% mix of the ink is deliberate and correct.
	 */
	.btxc-figures--strip .btxc-figures__grid {
		gap: 1px;

		background: color-mix( in srgb, currentColor 16%, transparent );
		border: 1px solid color-mix( in srgb, currentColor 16%, transparent );
		border-radius: var( --btx-border-radius-lg, 0.875rem );
		overflow: hidden;
	}

	/*
	 * Each cell paints the surface behind it so the 1px gaps read as rules.
	 * `--btxc-figures-surface` is the section's own ground, which only the
	 * arrangement knows — so it is set at the point of use with the two house
	 * cases as fallbacks, and an arrangement on a third colour sets it.
	 */
	.btxc-figures--strip .btxc-figures__item {
		padding: var( --btx-spacing-s, 1.625rem );
		background: var( --btxc-figures-surface, var( --btx-color-primary-1-dark-40, #000432 ) );
	}

	.btxc-figures--strip.btxc-figures--light .btxc-figures__item {
		background: var( --btxc-figures-surface, var( --btx-color-text-bg-1, #f9fafb ) );
	}

	.btxc-figures--strip .btxc-figures__value {
		font-size: var( --btx-font-heading-m, 1.875rem );
	}

	/* ── cards ─────────────────────────────────────────────────────────── */

	.btxc-figures--cards .btxc-figures__item {
		padding: var( --btx-card-spacing, 1.375rem );

		border: 1px solid color-mix( in srgb, currentColor 18%, transparent );
		border-radius: var( --btx-border-radius-lg, 0.75rem );
	}

	.btxc-figures--cards .btxc-figures__value {
		font-size: var( --btx-font-heading-m, 1.875rem );
	}

	.btxc-figures--cards .btxc-figures__label {
		font-size: var( --btx-font-body-s, 0.9375rem );
	}

	/* ── Narrow ────────────────────────────────────────────────────────── */

	@media ( width < 48rem ) {
		.btxc-figures--panel {
			padding: var( --btx-spacing-m, 1.375rem );
		}

		/*
		 * Four forced columns is four unreadable columns on a phone. The
		 * explicit counts exist to override the auto guess on a wide screen,
		 * so they hand back to it here rather than each needing its own rule.
		 */
		.btxc-figures--cols-3 .btxc-figures__grid,
		.btxc-figures--cols-4 .btxc-figures__grid {
			grid-template-columns: repeat( auto-fit, minmax( 8rem, 1fr ) );
		}

		.btxc-figures__value {
			font-size: var( --btx-font-heading-m, 1.75rem );
		}
	}
}