/*
 * Engagement rhythm.
 *
 * 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.
 *
 * Ink is computed in PHP against whatever background was picked and arrives as
 * `--btxc-rhythm-ink` / `--btxc-rhythm-quiet`. The defaults below are the paper
 * case, which is what a component with no background at all sits on.
 *
 * The section defaults to navy in the schema, so on a default insert those two
 * properties resolve to the light pair rather than these.
 */

@layer bertex-components {

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

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

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

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

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

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

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

	.btxc-rhythm__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-lg, 2rem);
	}

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

	.btxc-rhythm__header {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: end;
		gap: var(--btx-spacing-xl, 3rem);
	}

	.btxc-rhythm__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-rhythm-ink);
	}

	.btxc-rhythm__intro {
		margin: 0;

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

	/* ── Rows ──────────────────────────────────────────────────────────── */

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

		display: flex;
		flex-direction: column;
	}

	/*
	 * Four columns: marker, title, detail, tail. The title column is narrower
	 * than the detail column on purpose — the title is a phrase and the detail
	 * is a sentence, and giving them equal room makes the title wrap while the
	 * detail runs short.
	 *
	 * The hairline is on the top of every row plus the bottom of the last, so
	 * the sequence is closed at both ends without a rule between the header and
	 * the first row doing double duty.
	 */
	.btxc-rhythm__row {
		display: grid;
		/*
		 * 6.5rem on the marker, not 4.5: the column has to hold a written
		 * marker as well as a derived one, and "Weeks 3–8" in a mono face is
		 * wider than "W/03". Too narrow and it wraps to two lines, which
		 * breaks the alignment the rules exist to create.
		 */
		grid-template-columns: 6.5rem minmax(0, 1.05fr) minmax(0, 1.5fr) 1.75rem;
		align-items: center;
		gap: var(--btx-spacing-lg, 1.75rem);

		position: relative;
		padding-block: var(--btx-spacing-m, 1.625rem);

		/* Graphic, not type: judged against the 3:1 floor. Mixed from the
		 * section's own ink so it follows a light background as readily as a
		 * dark one. */
		border-top: 1px solid color-mix(in srgb, var(--btxc-rhythm-ink) 20%, transparent);
	}

	.btxc-rhythm__row:last-child {
		border-bottom: 1px solid color-mix(in srgb, var(--btxc-rhythm-ink) 20%, transparent);
	}

	/*
	 * The marker. Tabular figures so M/01 and M/10 occupy the same width and
	 * the title column does not shift when the list passes nine.
	 */
	.btxc-rhythm__marker {
		font-size: var(--btx-font-body-xs, 0.875rem);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.04em;
		line-height: var(--btx-line-height-heading, 1.2);
		color: var(--btxc-rhythm-accent, currentColor);
	}

	.btxc-rhythm__title {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-m, 1.5rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.25);
		text-wrap: pretty;
		color: var(--btxc-rhythm-ink);
	}

	/*
	 * `!important`, and not decoration — see the long note in
	 * service-menu/style.css. theme.json's unlayered link colour rule outranks
	 * every cascade layer, and this section is dark by default, so without it
	 * the row titles take a light-mode link colour on navy.
	 */
	.btxc-rhythm__link {
		color: inherit !important;
		text-decoration: none;
	}

	.btxc-rhythm__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.btxc-rhythm__body {
		margin: 0;

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

	.btxc-rhythm__tail {
		justify-self: end;

		font-size: var(--btx-font-body-lg, 1.25rem);
		line-height: 1;
		color: var(--btxc-rhythm-accent, currentColor);

		transition: transform 0.18s ease;
	}

	.btxc-rhythm__row--linked:hover .btxc-rhythm__arrow {
		transform: translateX(0.2em);
	}

	.btxc-rhythm__row--linked:hover .btxc-rhythm__link {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.btxc-rhythm__row:has(.btxc-rhythm__link:focus-visible) {
		outline: 2px solid var(--btxc-rhythm-ink);
		outline-offset: -2px;
	}

	.btxc-rhythm__link:focus-visible {
		outline: none;
	}

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

	/*
	 * Below the breakpoint the four columns become two: the marker keeps its
	 * own column so the sequence stays scannable down the left edge, and title
	 * and detail stack in the second. The tail goes with the title's row.
	 */
	@media (width < 62rem) {
		.btxc-rhythm__header {
			grid-template-columns: minmax(0, 1fr);
			align-items: start;
			gap: var(--btx-spacing-m, 1rem);
		}

		.btxc-rhythm__row {
			grid-template-columns: 5.5rem minmax(0, 1fr) 1.5rem;
			align-items: start;
			gap: var(--btx-spacing-xs, 0.5rem) var(--btx-spacing-m, 1.25rem);
		}

		.btxc-rhythm__marker {
			grid-row: span 2;
			padding-top: 0.35rem;
		}

		.btxc-rhythm__body {
			grid-column: 2 / span 2;
		}
	}

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

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

		.btxc-rhythm__title {
			font-size: var(--btx-font-heading-s, 1.25rem);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-rhythm__tail {
			transition: none;
		}

		.btxc-rhythm__row--linked:hover .btxc-rhythm__arrow {
			transform: none;
		}
	}
}