/*
 * Fit statement.
 *
 * 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.
 *
 * Two surfaces, each measured for its own ink in PHP: the section and the
 * panel. The panel is the dark one in the design, and nothing in this file
 * assumes that — swap the two backgrounds and the type follows.
 */

@layer bertex-components {

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

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

		/* Falls back to the panel's own ink, so "Automatic" is a real answer
		 * rather than an unset property. */
		--btxc-fit-note: var(--btxc-fit-panel-ink);

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

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

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

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

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

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

		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: var(--btx-spacing-xl, 3rem);
	}

	/* ── Who it is for ─────────────────────────────────────────────────── */

	.btxc-fit__qualify {
		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 1rem);
		min-width: 0;
	}

	.btxc-fit__eyebrow {
		margin: 0;

		font-size: var(--btx-font-body-xs, 0.8125rem);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-fit-quiet);
	}

	.btxc-fit__heading {
		margin: 0;

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

	.btxc-fit__body {
		margin: 0;

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

	/*
	 * The disqualifier reads as body copy, not as a warning. It is persuasive
	 * precisely because it is stated calmly — a red box around it would turn an
	 * admission into a graphic and lose the whole effect.
	 */
	.btxc-fit__exclusion {
		margin: 0;

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

	.btxc-fit__exclusion-lead {
		font-weight: 700;
		color: var(--btxc-fit-ink);
	}

	/* ── What they own ─────────────────────────────────────────────────── */

	.btxc-fit__panel {
		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 1rem);

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

		background: var(--btxc-fit-panel-bg);
		color: var(--btxc-fit-panel-ink);
		border-radius: var(--btx-border-radius-lg, 0.75rem);
	}

	.btxc-fit__panel-title {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-m, 1.75rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.15);
		color: var(--btxc-fit-panel-ink);
	}

	.btxc-fit__panel-body {
		margin: 0;

		font-size: var(--btx-font-body-s, 1rem);
		line-height: var(--btx-line-height-body, 1.7);
		color: var(--btxc-fit-panel-quiet);
	}

	/*
	 * The closing line. Its colour is chosen by an editor and *checked* in PHP
	 * against the panel before it is emitted — a token that cannot carry type
	 * there never reaches this property, and it falls back to the panel ink.
	 * See the note in component.php.
	 */
	.btxc-fit__panel-note {
		margin: 0;

		font-size: var(--btx-font-body-s, 1rem);
		font-weight: 600;
		line-height: var(--btx-line-height-body, 1.7);
		color: var(--btxc-fit-note);
	}

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

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

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

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