/* How It Works — gold-tint surface from foundation (saturated gold on step-number circles only). */

/* Centred heading — eyebrow + title + 100px rule (gold-500 on tint — readable) */
.ibv-section-three-step__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ibv-space-md);
	margin-block-end: var(--ibv-space-2xl);
}

.ibv-section-three-step__eyebrow {
	font-size: var(--ibv-fs-small);
	font-weight: var(--ibv-font-weight-regular);
	color: var(--ibv-color-text);
	margin: 0;
}

.ibv-section-three-step__title {
	font-family: var(--ibv-font-display);
	font-optical-sizing: auto;
	font-size: var(--ibv-fs-h1);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-tight);
	letter-spacing: 0;
	margin: 0;
	color: var(--ibv-color-text);
}

/* Step grid */
.ibv-section-three-step__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ibv-space-lg);
}

@media (min-width: 56rem) {
	.ibv-section-three-step__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ibv-section-three-step__grid:has( > :nth-child(2):last-child ) {
		grid-template-columns: repeat(2, 1fr);
	}

	.ibv-section-three-step__grid:has( > :only-child ) {
		grid-template-columns: minmax( 0, 24rem );
		justify-content: center;
	}
}

/* Step card — off-white card sits well on the default tint-gold surface;
   on the page-background surface (booking confirmation) the cards
   need pure white for contrast against the off-white page bg. */
.ibv-step-card {
	background: var(--ibv-color-off-white);
	border-radius: var(--ibv-radius-md);
	padding: 3rem 3.6875rem; /* 48px / 59px — Figma */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ibv-space-md);
	box-shadow: var(--ibv-shadow-sm);
}

.ibv-step-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem; /* 64px — Figma circle size */
	height: 4rem;
	border-radius: 50%;
	background: var(--ibv-color-gold-500);
	color: var(--ibv-color-link); /* forest-green-deep */
	font-family: var(--ibv-font-display);
	font-optical-sizing: auto;
	font-size: 1.875rem; /* 30px — Figma value */
	font-weight: var(--ibv-font-weight-regular);
	line-height: 1;
	letter-spacing: 0;
	margin: 0;
}

.ibv-step-card__title {
	font-family: var(--ibv-font-display);
	font-optical-sizing: auto;
	font-size: var(--ibv-fs-h3);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-snug);
	letter-spacing: 0;
	margin: 0;
	color: var(--ibv-color-text);
}

.ibv-step-card__text {
	font-size: var(--ibv-fs-small);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-text);
}

.ibv-step-card__text p:first-child {
	margin-block-start: 0;
}

.ibv-step-card__text p:last-child {
	margin-block-end: 0;
}

.ibv-section-three-step.ibv-section--surface-bg .ibv-step-card {
	background: var(--ibv-color-white);
}