/*
 * Engagement stages.
 *
 * 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 here rather than two — the section, the stage card, and the
 * emphasised stage card — each measured for its own ink in PHP. That is what
 * lets the emphasised card be dark on a light section, light on a dark one, or
 * brand green on either, without a "this one is the dark one" assumption
 * anywhere in this file.
 */

@layer bertex-components {

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

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

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

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

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

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

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

	/*
	 * The timeline gets slightly more room than the claim. The claim is a
	 * heading and a paragraph; the timeline is four cards that each need to
	 * hold a sentence without going to five lines.
	 */
	.btxc-stages__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: 1fr 1.15fr;
		align-items: center;
		gap: var(--btx-spacing-xl, 3.25rem);
	}

	/* ── The claim ─────────────────────────────────────────────────────── */

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

	.btxc-stages__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-stages-quiet);
	}

	.btxc-stages__heading {
		margin: 0;

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

	.btxc-stages__body {
		margin: 0;

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

	/* ── The quote ─────────────────────────────────────────────────────── */

	.btxc-stages__quote {
		margin: var(--btx-spacing-xs, 0.5rem) 0 0;

		display: flex;
		align-items: center;
		gap: var(--btx-spacing-m, 0.875rem);
	}

	.btxc-stages__portrait-frame {
		flex: none;
		width: 3.375rem;
		height: 3.375rem;
		overflow: hidden;
		border-radius: var(--btx-border-radius-round, 9999px);
	}

	.btxc-stages__portrait {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.btxc-stages__quote-copy {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xxs, 0.2rem);
		min-width: 0;
	}

	/*
	 * The quotation marks are drawn, not typed. The <blockquote> already tells
	 * anything not looking at the page that this is a quotation, so the marks
	 * are presentation — and drawing them is what stops them being doubled by
	 * an editor who types their own.
	 */
	.btxc-stages__quote-text {
		margin: 0;

		font-size: var(--btx-font-body-s, 0.9375rem);
		font-weight: 600;
		line-height: var(--btx-line-height-body, 1.55);
		color: var(--btxc-stages-ink);
	}

	.btxc-stages__quote-text::before {
		content: "\201C";
	}

	.btxc-stages__quote-text::after {
		content: "\201D";
	}

	.btxc-stages__cite {
		font-size: var(--btx-font-body-xs, 0.9375rem);
		line-height: var(--btx-line-height-body, 1.5);
		color: var(--btxc-stages-quiet);
	}

	.btxc-stages__cite-name::after {
		content: " · ";
	}

	/* Nothing after the name means nothing to separate it from. */
	.btxc-stages__cite-name:last-child::after {
		content: "";
	}

	/* ── The stages ────────────────────────────────────────────────────── */

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

		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
		gap: var(--btx-spacing-m, 1.25rem);
	}

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

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xxs, 0.4rem);

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

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

	/*
	 * The emphasised stage. Its own surface and its own measured ink, so the
	 * three colour properties below are all that change — the type sizes and
	 * spacing are the stage card's and stay shared.
	 */
	.btxc-stages__stage--emphasis {
		background: var(--btxc-stages-emphasis-bg);
		color: var(--btxc-stages-emphasis-ink);
	}

	.btxc-stages__when {
		margin: 0;

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

	.btxc-stages__stage--emphasis .btxc-stages__when {
		color: var(--btxc-stages-emphasis-quiet);
	}

	.btxc-stages__stage-title {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-s, 1.375rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.2);
		color: inherit;
	}

	.btxc-stages__stage-body {
		margin: 0;

		font-size: var(--btx-font-body-s, 0.9375rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-stages-card-quiet);
	}

	.btxc-stages__stage--emphasis .btxc-stages__stage-body {
		color: var(--btxc-stages-emphasis-quiet);
	}

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

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

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

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