/* ===========================================================================
   cta-centered-rule — centred prefooter, hand-set headline over a ruled stack
   ---------------------------------------------------------------------------
   Scope: .vbs-cta-centered-rule
   Depends on: css/tokens.css, css/base.css

   The structure is a printed colophon: an ornament, a two-line hand-set
   headline, one paragraph, then the actions demoted to a ruled index — each
   row a full-measure hairline with the label at the left margin and the arrow
   at the right. Nothing is a button, on purpose; the page ends quietly.

   Contains no literal colour, font, size, radius, shadow or duration.
   ========================================================================= */

.vbs-cta-centered-rule__inner {
	max-inline-size: 52rem;
	margin-inline: auto;
}

/* --- head ----------------------------------------------------------------- */
.vbs-cta-centered-rule__head { text-align: center; }

.vbs-cta-centered-rule__mark {
	display: block;
	margin-inline: auto;
	color: var(--vb-color-accent);
}

.vbs-cta-centered-rule__eyebrow { margin-block-start: clamp(1.25rem, 3vw, 2rem); }

.vbs-cta-centered-rule__title { margin-block-start: clamp(1.25rem, 3vw, 1.75rem); }

/* Hand-set: each line is its own block so the break never falls where the
   measure happens to run out. If a preset's display face is wide enough to
   force a wrap, the line simply wraps under itself — the pair still reads. */
.vbs-cta-centered-rule__line { display: block; }

.vbs-cta-centered-rule__lead {
	margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-inline: auto;
	max-inline-size: 38rem;
}

/* --- ruled action index ---------------------------------------------------
   Top rule on the list, bottom rule on every row: the stack closes itself
   without a stray element, and it survives Brutalist's 2px hairline. */
.vbs-cta-centered-rule__list {
	margin-block-start: clamp(2.75rem, 6vw, 4.5rem);
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
	text-align: start;
}

.vbs-cta-centered-rule__item {
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-cta-centered-rule__link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: clamp(0.875rem, 3vw, 1.75rem);
	padding-block: clamp(1.125rem, 2.5vw, 1.6rem);
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}

.vbs-cta-centered-rule__index {
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-small);
	line-height: 1;
	color: var(--vb-color-mute);
	font-variant-numeric: tabular-nums;
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}

.vbs-cta-centered-rule__text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-inline-size: 0;
}

/* From the tablet step the meta swings out to sit opposite the label, which
   is what turns the row into an index entry rather than a stacked card. */
@media (min-width: 44rem) {
	.vbs-cta-centered-rule__text {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 1.5rem;
	}
}

.vbs-cta-centered-rule__label {
	transition: color var(--vb-dur-base) var(--vb-ease-out-soft);
}

.vbs-cta-centered-rule__meta { flex: none; }

.vbs-cta-centered-rule__arrow {
	flex: none;
	color: var(--vb-color-mute);
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft),
	            color var(--vb-dur-base) var(--vb-ease-out-soft);
}

.vbs-cta-centered-rule__link:hover .vbs-cta-centered-rule__label,
.vbs-cta-centered-rule__link:hover .vbs-cta-centered-rule__index { color: var(--vb-chroma-ink); }
.vbs-cta-centered-rule__link:hover .vbs-cta-centered-rule__arrow {
	color: var(--vb-chroma-ink);
	transform: translateX(0.4rem);
}

/* --- colophon ------------------------------------------------------------- */
.vbs-cta-centered-rule__foot {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.vbs-cta-centered-rule__foot-link {
	color: var(--vb-color-ink);
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
	padding-block-end: 0.1em;
	transition: border-color var(--vb-dur-base) var(--vb-ease-out-soft),
	            color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-cta-centered-rule__foot-link:hover {
	color: var(--vb-color-accent);
	border-block-end-color: currentColor;
}