/*
 * Metric.
 *
 * Placeholder proportions, waiting on the case study design. What is settled:
 * the value reads above its label, and the source order is <dt> then <dd>
 * because that is what a definition list requires — the flip is done here.
 *
 * 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.
 */

@layer bertex-components {
	.btxc-metric {
		box-sizing: border-box;
		display: grid;
		gap: var(--btx-spacing-lg, 1.5rem);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		color: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-metric__item {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xxs, 0.25rem);
		margin: 0;
	}

	/* The label is written first and read second. */
	.btxc-metric__label {
		order: 2;

		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	.btxc-metric__value {
		order: 1;

		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: var(--btx-spacing-xs, 0.5rem);

		margin: 0;
		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		line-height: var(--btx-line-height-heading, 1.2);
	}

	.btxc-metric__note {
		order: 3;

		margin: 0;
		font-size: var(--btx-font-body-xs, 0.75rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	/*
	 * The prior figure is deliberately quiet. It is context for the current one,
	 * not a second headline competing with it.
	 */
	.btxc-metric__before {
		font-size: 0.5em;
		color: var(--btx-color-primary-1-light-40, #2e4578);
		text-decoration: line-through;
	}

	.btxc-metric__arrow {
		font-size: 0.5em;
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	.btxc-metric__now {
		color: var(--btx-color-primary-1, #1a2744);
	}

	/* Layouts ------------------------------------------------------------- */

	.btxc-metric--band {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		padding-block: var(--btx-section-spacing, 3rem);

		border-top: 1px solid var(--btx-color-text-bg-1-dark-40, #d1d3d4);
		border-bottom: 1px solid var(--btx-color-text-bg-1-dark-40, #d1d3d4);
	}

	.btxc-metric--band .btxc-metric__value {
		font-size: var(--btx-font-heading-xxl, 3rem);
	}

	.btxc-metric--inline {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
		gap: var(--btx-spacing-m, 1rem);
	}

	.btxc-metric--inline .btxc-metric__value {
		font-size: var(--btx-font-heading-lg, 1.75rem);
	}

	.btxc-metric__sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}