/**
 * CTA section (.fx-cta)
 *
 * Reusable call-to-action sektion brugt på landingssider på tværs af sitet.
 * Mørk baggrund (#2d2f31), hvid pill-knap, ét samlet vandret layout på desktop.
 * Stables vertikalt på mobil med fuld-bredde knap.
 *
 * Bruger globale tokens fra tokens.css (--fx-*) og .fx-btn utility.
 */

.fx-cta {
	padding: var(--fx-section-py) var(--fx-gutter);
	background: #2d2f31;
}

.fx-cta__container {
	max-width: var(--fx-max-content);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	/* Afstand tekst ↔ knap: PC 96px / tablet 48px / mobil 24px
	 * (matcher sitewide 2-kolonne gap-konvention). */
	gap: 96px;
}

.fx-cta__text {
	text-align: left;
	/* Bredde: PC 60% / tablet 50% / mobil 100% (se media queries). */
	flex: 0 0 60%;
	max-width: 60%;
	min-width: 0;
}

/* Samme skala som øvrige sektioners h2 (tokens.css — var(--fx-h2) m.fl.). */
.fx-cta .fx-cta__title {
	color: #fff;
	font-size: var(--fx-h2);
	line-height: var(--fx-h2-lh);
	letter-spacing: var(--fx-h2-ls);
	font-weight: 700;
	margin: 0 0 10px;
}

.fx-cta__subtitle {
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	max-width: 640px;
}

.fx-cta__actions {
	/* Fylder resten af rækken efter .fx-cta__text (60%/50%). */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 12px;
	align-self: flex-start;
	justify-content: flex-end;
}

.fx-cta .fx-cta__button {
	background: #fff;
	color: var(--fx-text);
	border: 0;
	border-radius: 999px;
	padding: 18px 60px;
	min-height: auto;
	font-size: 16px;
	font-weight: 600;
}

/* Tablet: mindre horisontal padding + container-gap */
@media (max-width: 1024px) {
	.fx-cta__container {
		gap: 48px;
	}
	.fx-cta__text {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.fx-cta .fx-cta__button {
		padding: 18px 30px;
	}
}

.fx-cta .fx-cta__button:hover,
.fx-cta .fx-cta__button:focus {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

/* Mobil: tekst øverst, knap fuld-bredde i bunden */
@media (max-width: 767px) {
	.fx-cta__container {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}
	.fx-cta__text {
		text-align: left;
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
	}
	.fx-cta__actions {
		flex: 1 1 100%;
		width: 100%;
		align-self: stretch;
		justify-content: stretch;
	}
	.fx-cta__actions .fx-cta__button {
		width: 100%;
		justify-content: center;
		padding: 18px 30px;
	}
	.fx-cta__subtitle { font-size: 16px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.fx-cta__subtitle { font-size: 17px; }
}