/* ==========================================================================
 * Forsidens hero.
 * LCP er overskriften, ikke et billede — dekorationen er ren CSS.
 * ========================================================================== */

.tg-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 8vw, 6.5rem);
	overflow: hidden;
	isolation: isolate;
}

/* Perspektivisk gitter som antydning af en vej. */
.tg-hero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(var(--tg-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--tg-grid-line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 60% at 60% 30%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 60% at 60% 30%, #000 0%, transparent 78%);
}

/* --------------------------------------------------------- Baggrundsfoto */

/*
 * Skolevognen fylder højre side. Teksten står til venstre, hvor sløret nedenfor
 * holder fladen ren.
 *
 * Ingen mask-image her. To maskelag kræver mask-composite, som opfører sig
 * forskelligt på tværs af motorer (-webkit-mask-composite bruger helt andre
 * nøgleord end standarden) — og resultatet var et billede der forsvandt.
 * Al formgivning sker i stedet i ::after-sløret nedenfor, som er almindelige
 * gradienter og opfører sig ens overalt.
 */
.tg-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--tg-hero-photo);
	background-size: cover;
	background-position: 74% 55%;
	opacity: .9;
	filter: saturate(.95);
	transform: scale(1.06);
	animation: tg-hero-drift 28s var(--tg-ease) infinite alternate;
}

/* Lys tilstand: mørk tekst på lys flade tåler mindre billede bagved. */
:root[data-theme="light"] .tg-hero__photo { opacity: .55; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .tg-hero__photo { opacity: .55; }
}

/*
 * Smalle skærme: heroen bliver høj og smal, så "cover" på et 16:9-foto
 * beskærer hårdt ind i højre side — dér ligger kun bygningens træbeklædning.
 * Flyt fokuspunktet ind på bilen, og lad sløret lægge sig nedefra i stedet
 * for fra venstre, nu hvor teksten ligger oven på billedet frem for ved siden af.
 */
@media (max-width: 61.99rem) {
	.tg-hero__photo {
		background-position: 56% 60%;
		opacity: .7;
	}
	:root[data-theme="light"] .tg-hero__photo { opacity: .42; }
	@media (prefers-color-scheme: light) {
		:root:not([data-theme]) .tg-hero__photo { opacity: .42; }
	}

	.tg-hero--has-photo::after {
		background:
			linear-gradient(to bottom,
				color-mix(in srgb, var(--tg-bg-base) 82%, transparent) 0%,
				color-mix(in srgb, var(--tg-bg-base) 70%, transparent) 42%,
				color-mix(in srgb, var(--tg-bg-base) 88%, transparent) 72%,
				var(--tg-bg-base) 100%),
			radial-gradient(80% 60% at 50% 30%, var(--tg-accent-tint), transparent 70%);
	}
}

/*
 * Slør bag teksten. Når fotoet er fremtrædende, skal overskrift og manchet
 * stadig have fuld kontrast — derfor et lag der er tæt i venstre side og
 * forsvinder ud mod bilen, plus et strejf af accentfarve der binder fotoet
 * sammen med paletten.
 */
.tg-hero--has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		/* Bunden toner ned i sidens baggrund, så heroen glider ind i næste sektion. */
		linear-gradient(to bottom,
			transparent 0%,
			transparent 58%,
			color-mix(in srgb, var(--tg-bg-base) 72%, transparent) 84%,
			var(--tg-bg-base) 100%),
		/* Venstre side holdes tæt, så overskrift og manchet har fuld kontrast. */
		linear-gradient(to right,
			var(--tg-bg-base) 0%,
			color-mix(in srgb, var(--tg-bg-base) 94%, transparent) 24%,
			color-mix(in srgb, var(--tg-bg-base) 70%, transparent) 42%,
			color-mix(in srgb, var(--tg-bg-base) 28%, transparent) 60%,
			transparent 76%),
		radial-gradient(70% 90% at 88% 40%, var(--tg-accent-tint), transparent 70%);
}

@keyframes tg-hero-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.10) translate3d(-1.2%, -1%, 0); }
}

/* ------------------------------------------------------------- Indhold */

/*
 * Enkeltspaltet. Teksten fylder venstre side og slipper billedet fri i højre,
 * i stedet for at konkurrere med en kortspalte.
 */
.tg-hero__inner { max-width: 100%; }

.tg-hero__content { max-width: 34rem; }
@media (min-width: 62rem) { .tg-hero__content { max-width: 40rem; } }

/*
 * Blødt slør bag tekstsøjlen, så overskrift og manchet har fuld kontrast
 * uanset hvor lyst billedet er bagved.
 */
.tg-hero--has-photo .tg-hero__content {
	position: relative;
	isolation: isolate;
}
.tg-hero--has-photo .tg-hero__content::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -12% -22% -14% -40%;
	pointer-events: none;
	background: radial-gradient(
		70% 62% at 34% 50%,
		var(--tg-bg-base) 0%,
		color-mix(in srgb, var(--tg-bg-base) 78%, transparent) 46%,
		transparent 78%);
}

/* Teksten gøres robust i sig selv, så billedet kan stå kraftigt. */
.tg-hero--has-photo .tg-hero__lede {
	color: var(--tg-text-strong);
	text-shadow: 0 1px 12px var(--tg-bg-base), 0 1px 3px var(--tg-bg-base);
}
.tg-hero--has-photo .tg-hero__title {
	text-shadow: 0 2px 18px color-mix(in srgb, var(--tg-bg-base) 85%, transparent);
}
.tg-hero--has-photo .tg-eyebrow {
	text-shadow: 0 1px 10px var(--tg-bg-base);
}

.tg-hero__title {
	font-size: var(--tg-fs-1000);
	margin-bottom: var(--tg-space-5);
}
.tg-hero__title .tg-gradient-text { display: block; }

.tg-hero__lede { margin-bottom: 0; }

/* ------------------------------------------------------- Tilmeldingerne */

/*
 * Sidens eneste primære handling, placeret i bunden af heroen. To spor —
 * førstegangselever og generhververe — og ikke andet, så valget står skarpt.
 */
.tg-hero__actions {
	display: grid;
	gap: var(--tg-space-4);
	margin-top: clamp(3rem, 8vw, 5.5rem);
}
@media (min-width: 48rem) {
	.tg-hero__actions { grid-template-columns: 1fr 1fr; max-width: 52rem; }
}

.tg-hero__action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tg-space-5);
	padding: var(--tg-space-5) var(--tg-space-6);
	border-radius: var(--tg-radius-xl);
	border: 1px solid var(--tg-border-strong);
	background: color-mix(in srgb, var(--tg-bg-base) 72%, transparent);
	backdrop-filter: blur(14px);
	text-decoration: none;
	color: var(--tg-text);
	transition: transform var(--tg-dur) var(--tg-ease-out),
		border-color var(--tg-dur) var(--tg-ease),
		background-color var(--tg-dur) var(--tg-ease);
}
.tg-hero__action:hover {
	transform: translateY(-3px);
	border-color: var(--tg-accent);
	background: color-mix(in srgb, var(--tg-bg-base) 86%, transparent);
	color: var(--tg-text);
}

/* Det første spor er det, de fleste skal have — marker det som primært. */
.tg-hero__action:first-child {
	background: var(--tg-grad-accent);
	border-color: transparent;
	box-shadow: var(--tg-glow);
	color: #fff;
}
.tg-hero__action:first-child:hover { color: #fff; }
.tg-hero__action:first-child .tg-hero__action-body span { color: rgba(255, 255, 255, .82); }
.tg-hero__action:first-child .tg-hero__action-arrow { color: #fff; }

.tg-hero__action-body { display: grid; gap: .2rem; }
.tg-hero__action-body strong {
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-500);
	font-weight: 650;
	color: currentColor;
}
.tg-hero__action-body span {
	font-size: var(--tg-fs-300);
	line-height: 1.45;
	color: var(--tg-text-muted);
}

.tg-hero__action-arrow {
	flex: none;
	color: var(--tg-text-muted);
	transition: transform var(--tg-dur-fast) var(--tg-ease);
}
.tg-hero__action:hover .tg-hero__action-arrow { transform: translateX(4px); }