/* Centered CTA section — light surface, heading + body + pill button, all centred. */

.cta-centered {
	width: 100%;
	padding-block: clamp(4rem, 8vw, 6.5rem);
	background: var(--color-surface-light);
}

.cta-centered.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Design-review: "en smule mere padding øverst og nederst" på CTA-segmenterne.
   Når CTA'en ligger i et eventit/section (compact = 48px pr. side på desktop),
   nulstiller section.css komponentens egen padding; her lægges lidt luft til
   igen oven i wrapperens, så både den globale pricing-instans og de
   sidespecifikke CTA'er rammes (48px -> 64px pr. side på desktop). */
.eventit-section__inner > .cta-centered {
	padding-block: var(--space-md, 1rem);
}

.cta-centered__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	/* Samme sidemargen som .container/de andre segmenter (1rem pr. side på
	   mobil), så teksten ikke løber helt ud til viewport-kanten. På desktop
	   giver det stadig de 72rem. */
	width: min(calc(100% - 2rem), 72rem);
	max-width: 72rem;
	margin-inline: auto;
	text-align: center;
}

.cta-centered .cta-centered__heading {
	margin: 0;
	color: var(--color-blue-dark);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
	text-wrap: balance;
}

.cta-centered__body {
	margin: 0;
	/* 59rem rammer tre linjer med Montserrat 18px på standard-CTA-teksten
	   (linje 1 måler 57.9rem; 60rem+ ville trække "Lad" op på linje 1). */
	max-width: 59rem;
	color: var(--color-blue-dark);
	font-size: var(--font-size-lead);
	line-height: 1.65;
}

.eventit-section--blue .cta-centered__body,
.eventit-section--blue-white-split .cta-centered__body {
	color: var(--color-on-dark-muted, rgba(255, 255, 255, 0.76));
}

.cta-centered__actions {
	margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

.cta-centered .cta-centered__button {
	min-width: 14rem;
	padding: var(--button-padding-y) 2.5rem;
	background: var(--color-brand-red);
	border: 2px solid var(--color-brand-red);
	border-radius: var(--button-radius);
	color: #fff;
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition: background 180ms ease, border-color 180ms ease;
}

.cta-centered .cta-centered__button:hover,
.cta-centered .cta-centered__button:focus-visible {
	background: var(--color-blue-dark);
	border-color: var(--color-blue-dark);
	color: #fff;
	text-decoration: none;
}

.eventit-section--blue .cta-centered .cta-centered__button:hover,
.eventit-section--blue .cta-centered .cta-centered__button:focus-visible,
.eventit-section--blue-white-split .cta-centered .cta-centered__button:hover,
.eventit-section--blue-white-split .cta-centered .cta-centered__button:focus-visible {
	background: var(--color-white, #fff);
	border-color: var(--color-white, #fff);
	color: var(--color-blue-dark);
}

@media (max-width: 47.9375rem) {
	/* Design-review: 32px CTA-overskrift på mobil. */
	.cta-centered .cta-centered__heading {
		font-size: 2rem;
	}

	/* Design-review: alle brødtekster 14px på mobil (body-tokenet). */
	.cta-centered .cta-centered__body {
		font-size: var(--font-size-body);
	}

	/* Mobil: compact-section er 32px pr. side; lidt ekstra luft (-> 40px). */
	.eventit-section__inner > .cta-centered {
		padding-block: var(--space-xs, 0.5rem);
	}
}

@media (max-width: 39.9375rem) {
	.cta-centered {
		padding-block: 3rem 3.75rem;
	}

	.cta-centered .cta-centered__button {
		width: 100%;
	}
}