/* ==========================================================================
   Widget — Centered CTA
   Figma nodes 59:80 (navy + wave pattern) and 69:233 (photo + navy overlay). One
   layout, two backdrops: heading, supporting copy and one button stacked down
   the middle.
   ========================================================================== */

.o-centered-cta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--o-space-lg);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Copy
   The shared heading block already centres itself and caps its measure; here
   it only needs the comp's larger, uppercase heading and its own bottom margin
   removed, because the gap above owns that spacing.
   -------------------------------------------------------------------------- */
.o-section--centered-cta .o-section-heading {
	margin-bottom: 0;
}

/*
 * The gap under an eyebrow is a step up from the shared 14px: at this size and
 * leading the caps sit high in the line box, and 14px reads as touching.
 */
.o-section--centered-cta .o-section-heading__title {
	margin-top: var(--o-space-md);
	font-size: var(--o-fs-h1); /* 32 -> 48. The comps sit at 48 and 54. */
	font-weight: var(--o-fw-semibold);
	line-height: 1.08; /* 58 on 54, per the Book a Tour comp */
	text-transform: uppercase;
	text-wrap: balance;
}

/* Neither comp has an eyebrow, so with none the title starts at the padding edge. */
.o-section--centered-cta .o-section-heading__title:first-child {
	margin-top: 0;
}

/*
 * The colour is deliberate: over a photograph — or over the pattern — the
 * supporting copy has to hold its own against whatever is behind it, so it
 * stays full-strength rather than dropping to the scheme's muted secondary
 * tone. Both comps draw it that way.
 */
.o-section--centered-cta .o-section-heading__intro {
	margin-top: 1.5rem; /* 24, between the comps' 40 and 24 */
	color: var(--o-text);
	font-size: var(--o-fs-body-lg);
	line-height: 1.5; /* 27 on 18 */
	text-wrap: pretty;
}

/* Copy width. The default measure is what breaks the comp heading over two lines. */
.o-centered-cta--copy-narrow .o-section-heading {
	max-width: 34rem;
}

.o-centered-cta--copy-measure .o-section-heading {
	max-width: 46rem;
}

.o-centered-cta--copy-wide .o-section-heading {
	max-width: 60rem;
}

/* --------------------------------------------------------------------------
   Button
   The shared .o-btn at the comps' larger label size: 18px, 1px of tracking,
   40/20 padding.
   -------------------------------------------------------------------------- */
.o-centered-cta__actions {
	position: relative;
	z-index: 1;
}

.o-centered-cta__btn {
	padding: 1.25rem 2.5rem;
	font-size: var(--o-fs-body-lg);
	letter-spacing: 0.056em; /* 1px at 18px */
}

/* --------------------------------------------------------------------------
   The wave pattern
   The shared .o-pattern (components.css), covering the band evenly corner to
   corner - no fade, unlike the Bottom CTA, where it bleeds in from one edge.
   Black at 12% darkens the navy the way the comp does; the Pattern colour and
   Pattern strength controls override these two values.
   -------------------------------------------------------------------------- */
.o-centered-cta__pattern {
	--o-pattern-ink: #000000;
}

.o-centered-cta__pattern::before {
	opacity: 0.12;
}

/* --------------------------------------------------------------------------
   Narrow screens
   The heading loses its uppercase tracking advantage once it wraps to four or
   five lines, so the gap tightens to keep the block reading as one unit.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.o-centered-cta {
		gap: var(--o-space-md);
	}

	.o-centered-cta__btn {
		padding: 1rem 1.75rem;
		font-size: var(--o-fs-body);
	}
}