/*
 * Fit compare.
 *
 * 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.
 *
 * Three surfaces — the section and each card — measured for their own ink in
 * PHP. Each card carries its values on its own style attribute under the same
 * `--btxc-fitc-card-*` names, so the rules below are written once.
 */

@layer bertex-components {

	/* ── Shell ─────────────────────────────────────────────────────────── */

	.btxc-fitc {
		--btxc-fitc-bg: transparent;
		--btxc-fitc-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-fitc-quiet: var(--btx-color-primary-1-light-40, #2e4578);

		box-sizing: border-box;
		width: 100%;

		background: var(--btxc-fitc-bg);
		color: var(--btxc-fitc-ink);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
	}

	.btxc-fitc--width-wide {
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
	}

	.btxc-fitc--width-full {
		max-width: none;
	}

	.btxc-fitc__inner {
		box-sizing: border-box;
		max-width: var(--btx-max-width, 1440px);
		margin-inline: auto;
		padding: var(--btx-section-spacing, 5rem) var(--btx-spacing-xl, 3rem);

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xl, 2rem);
	}

	/* ── Header ────────────────────────────────────────────────────────── */

	/* The same bottom-aligned heading-and-intro line service-menu uses. */
	.btxc-fitc__header {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		gap: var(--btx-spacing-xl, 3rem);
	}

	.btxc-fitc__heading {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-xl, 2.25rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.1);
		letter-spacing: -0.02em;
		text-wrap: pretty;
		color: var(--btxc-fitc-ink);
	}

	.btxc-fitc__intro {
		margin: 0;

		font-size: var(--btx-font-body-m, 1.0625rem);
		line-height: var(--btx-line-height-body, 1.65);
		color: var(--btxc-fitc-quiet);
	}

	/* ── Cards ─────────────────────────────────────────────────────────── */

	.btxc-fitc__cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
		gap: var(--btx-spacing-lg, 1.5rem);
	}

	.btxc-fitc__card {
		--btxc-fitc-card-bg: transparent;
		--btxc-fitc-card-ink: var(--btxc-fitc-ink);
		--btxc-fitc-card-quiet: var(--btxc-fitc-quiet);
		--btxc-fitc-accent: var(--btxc-fitc-card-ink);

		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 0.875rem);

		padding: var(--btx-card-spacing, 1.875rem);

		background: var(--btxc-fitc-card-bg);
		color: var(--btxc-fitc-card-ink);
		border: 1px solid color-mix(in srgb, var(--btxc-fitc-card-ink) 14%, transparent);
		border-radius: var(--btx-border-radius-lg, 0.75rem);
	}

	/*
	 * The accent, as a rule across the top and nothing else on the card in
	 * that colour but the list markers — both graphics, neither type. See the
	 * note at the top of component.php.
	 */
	.btxc-fitc__card--accent {
		border-top: 4px solid var(--btxc-fitc-accent);
	}

	.btxc-fitc__title {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-m, 1.625rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.2);
		color: var(--btxc-fitc-card-ink);
	}

	.btxc-fitc__body {
		margin: 0;

		font-size: var(--btx-font-body-m, 1.0625rem);
		line-height: var(--btx-line-height-body, 1.7);
		color: var(--btxc-fitc-card-quiet);
	}

	.btxc-fitc__list {
		margin: 0;
		padding: 0;
		list-style: none;

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.625rem);
	}

	/*
	 * The dash is drawn rather than typed, so it never lands in a copied
	 * selection or a screen reader's output — the list is already a list.
	 */
	.btxc-fitc__item {
		display: flex;
		gap: var(--btx-spacing-xs, 0.5rem);

		font-size: var(--btx-font-body-s, 1rem);
		line-height: var(--btx-line-height-body, 1.55);
		color: var(--btxc-fitc-card-quiet);
	}

	.btxc-fitc__item::before {
		content: "\2014";
		flex: none;
		color: var(--btxc-fitc-accent);
	}

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

	@media (width < 56rem) {
		.btxc-fitc__header {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--btx-text-spacing, 1rem);
		}
	}

	@media (width < 40rem) {
		.btxc-fitc__inner {
			padding: var(--btx-spacing-xxl, 4rem) var(--btx-spacing-m, 1.25rem);
			gap: var(--btx-spacing-lg, 1.5rem);
		}

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