/**
 * TEAB Hero – startsidans hero-sektion.
 *
 * Självförsörjande och scoped under .teab-hero. INGET hårdkodat: varje färg läses
 * från en CSS-variabel som modulen kan sätta per instans, annars temat (Astras
 * globala --ast-global-color-*) och först därefter ett brand-literal sista-utväg.
 *
 *   Fallback-kedja, ex: var(--teab-hero-accent, var(--ast-global-color-0, #008A2B))
 *
 * Tre rörelsevarianter (modifierklass på .teab-hero):
 *   --static     Färgbild + toningar, ingen rörelse (lugnast – NCC/Skanska-känsla).
 *   --lightup    Bilden tonar mjukt upp ur mörker vid laddning (diskret "haja till").
 *   --grayscale  Bilden startar svartvit och tänds i färg vid laddning.
 * Valfri, nästan omärklig zoom (--zoom) kan kombineras med alla tre.
 *
 * @package Teab_Moduler
 */

.teab-hero {
	/* Färger: instans → tema (Astra) → brand-literal. */
	--_accent:        var(--teab-hero-accent, var(--ast-global-color-0, #008A2B));
	--_accent-bright: var(--teab-hero-accent-bright, #34AC5C);
	--_night:         var(--teab-hero-night, #0F0F0F);
	--_paper:         var(--teab-hero-paper, #ECECEC);

	/* Typsnitt: ärver temat. Faller tillbaka på "inherit" (= temats renderade
	   typsnitt, t.ex. Archivo via Astra) – INTE system-ui – eftersom
	   --font-ui/--font-display bara finns i HTML-prototyperna, inte på sajten.
	   Sätts --teab-hero-font-* (inställningen "Ladda Archivo") vinner det. */
	--_font-ui:      var(--teab-hero-font-ui, var(--font-ui, inherit));
	--_font-display: var(--teab-hero-font-display, var(--font-display, var(--_font-ui)));

	/* Mått. */
	--_height:     var(--teab-hero-height, 100svh);
	--_min-height: var(--teab-hero-min-height, 600px);
	--_max-width:  var(--teab-hero-max-width, 1480px);
	--_pad-x:      var(--teab-hero-pad-x, 40px);
	--_pad-bottom: var(--teab-hero-pad-bottom, 72px);

	/* Effekt-reglage. */
	--_veil:    var(--teab-hero-veil, 0.7);          /* startmörker för --lightup */
	--_img-pos: var(--teab-hero-img-pos, 50% 50%);
	--_easing:  cubic-bezier(.2, .6, .2, 1);

	/* Toning (scrim): färg + spridning. Spridning = multiplikator (1 = standard,
	   större = toningen når längre in över bilden). */
	--_ov-color:  var(--teab-hero-ov-color, var(--_night));
	--_ov-spread: var(--teab-hero-ov-spread, 1);

	position: relative;
	overflow: hidden;
	height: var(--_height);
	min-height: var(--_min-height);
	max-height: 920px;
	background: var(--_night);
	color: var(--_paper);
	font-family: var(--_font-ui);
}

.teab-hero *,
.teab-hero *::before,
.teab-hero *::after { box-sizing: border-box; }

/* ============ BAKGRUNDSBILD ============ */
.teab-hero__bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.teab-hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: var(--_img-pos);
	display: block;
}

/* Nästan omärklig zoom – ger liv utan att märkas. */
.teab-hero--zoom .teab-hero__bg img {
	transform: scale(1.05);
	animation: teab-hero-zoom 26s ease-in-out infinite alternate;
}
@keyframes teab-hero-zoom {
	from { transform: scale(1.05); }
	to   { transform: scale(1.11); }
}

/* Gråskala → färg: tänds i färg vid laddning. */
.teab-hero--grayscale .teab-hero__bg img {
	filter: grayscale(1) contrast(1.04);
	animation: teab-hero-ignite 1.8s .3s var(--_easing) forwards;
}
.teab-hero--grayscale.teab-hero--zoom .teab-hero__bg img {
	transform: scale(1.05);
	animation: teab-hero-ignite 1.8s .3s var(--_easing) forwards,
	           teab-hero-zoom 26s ease-in-out 1.8s infinite alternate;
}
@keyframes teab-hero-ignite {
	from { filter: grayscale(1) contrast(1.04); }
	to   { filter: grayscale(0) contrast(1); }
}

/* ============ SLÖJA (--lightup) ============ */
/* Svart slöja som tonar mjukt bort – bilden tänds ur mörker, ingen synlig linje. */
.teab-hero__veil {
	position: absolute; inset: 0; z-index: 2;
	background: var(--_night);
	opacity: var(--_veil);
	pointer-events: none;
}
.teab-hero--lightup .teab-hero__veil {
	animation: teab-hero-lightup 1.8s .25s ease forwards;
}
@keyframes teab-hero-lightup {
	from { opacity: var(--_veil); }
	to   { opacity: 0; }
}

/* ============ TONINGAR (scrim) ============ */
/* Svart toning som ger läsbarhet åt texten. Ligger kvar oavsett effekt. */
.teab-hero__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.teab-hero--ov-leftbottom .teab-hero__scrim {
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--_ov-color) 92%, transparent) 0%,
			color-mix(in srgb, var(--_ov-color) 74%, transparent) calc(22% * var(--_ov-spread)),
			color-mix(in srgb, var(--_ov-color) 30%, transparent) calc(48% * var(--_ov-spread)),
			transparent calc(70% * var(--_ov-spread))),
		linear-gradient(180deg,
			transparent calc(50% / var(--_ov-spread)),
			color-mix(in srgb, var(--_ov-color) 68%, transparent) 100%);
}
.teab-hero--ov-bottom .teab-hero__scrim {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--_ov-color) 14%, transparent) 0%,
		color-mix(in srgb, var(--_ov-color) 18%, transparent) calc(42% / var(--_ov-spread)),
		color-mix(in srgb, var(--_ov-color) 82%, transparent) 100%);
}
.teab-hero--ov-none .teab-hero__scrim { background: none; }

/* ============ INNEHÅLL ============ */
.teab-hero__content {
	position: relative; z-index: 5;
	height: 100%;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding-bottom: var(--_pad-bottom);
}
.teab-hero__inner {
	width: 100%; max-width: var(--_max-width);
	margin: 0 auto; padding: 0 var(--_pad-x);
}

.teab-hero__eyebrow {
	font-family: var(--_font-ui); font-weight: 600;
	font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--_accent-bright);
	display: inline-flex; align-items: center; gap: 16px;
}
.teab-hero__eyebrow::before {
	content: ''; display: block; width: 40px; height: 1px;
	background: var(--_accent-bright);
}

.teab-hero__title {
	margin: 26px 0 0;
	font-family: var(--_font-display); font-weight: var(--teab-hero-title-weight, 800);
	font-size: calc(clamp(40px, 5.6vw, 96px) * var(--teab-hero-title-scale, 1));
	line-height: 1.02; letter-spacing: -.025em;
	max-width: 15ch; color: inherit;
}
.teab-hero__accent { display: block; color: var(--_accent-bright); }

/* En-rads-läge: accenten flyter med rubriken i stället för egen rad. */
.teab-hero--title-one .teab-hero__title { max-width: none; }
.teab-hero--title-one .teab-hero__accent { display: inline; }

.teab-hero__lead {
	margin: 24px 0 0; max-width: 54ch;
	font-size: calc(18px * var(--teab-hero-lead-scale, 1)); line-height: 1.55; opacity: .92;
}

.teab-hero__ctas {
	display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px;
}

/* ============ INTONING AV INNEHÅLLET (vid laddning, ej scroll) ============ */
.teab-hero__inner > * {
	opacity: 0; transform: translateY(14px);
	animation: teab-hero-rise .8s var(--_easing) forwards;
}
.teab-hero__inner > *:nth-child(1) { animation-delay: .15s; }
.teab-hero__inner > *:nth-child(2) { animation-delay: .27s; }
.teab-hero__inner > *:nth-child(3) { animation-delay: .39s; }
.teab-hero__inner > *:nth-child(4) { animation-delay: .51s; }
@keyframes teab-hero-rise { to { opacity: 1; transform: none; } }

/* ============ EDITOR-PLATSHÅLLARE ============ */
.teab-hero--empty {
	display: flex; align-items: center; justify-content: center;
	min-height: 320px; padding: 40px;
	border: 1px dashed rgba(236,236,236,.3);
	color: var(--_paper); font-family: var(--_font-ui); text-align: center;
}

/* ============ RESPONSIVT ============ */
@media (max-width: 760px) {
	.teab-hero { --_pad-x: 24px; --_pad-bottom: 52px; }
	/* Full opacitet på mobil – .92 sänkte kontrasten över bild i onödan. */
	.teab-hero__lead { font-size: calc(16px * var(--teab-hero-lead-scale, 1)); opacity: 1; }

	/* Mobil: texten staplas högt (eyebrow + rubrik + ingress + knappar), så
	   toningen måste mörkna redan högt upp och täcka stora delar av höjden –
	   annars ligger rubriken i den ljusare delen av toningen (dålig kontrast,
	   värst över ljusa bildpartier). Kraftigare, högre vertikal gradient.
	   Gäller "vänster + botten" och "endast botten"; "ingen" lämnas orörd. */
	.teab-hero--ov-leftbottom .teab-hero__scrim,
	.teab-hero--ov-bottom .teab-hero__scrim {
		background: linear-gradient(180deg,
			transparent 0%,
			color-mix(in srgb, var(--_ov-color) 42%, transparent) 28%,
			color-mix(in srgb, var(--_ov-color) 72%, transparent) 52%,
			color-mix(in srgb, var(--_ov-color) 92%, transparent) 76%,
			color-mix(in srgb, var(--_ov-color) 99%, transparent) 100%);
	}
}

/* ============ TILLGÄNGLIGHET ============ */
@media (prefers-reduced-motion: reduce) {
	.teab-hero__bg img,
	.teab-hero__veil,
	.teab-hero__inner > * {
		animation: none !important;
		transform: none !important;
	}
	.teab-hero__veil { opacity: 0; }                 /* visa bilden direkt */
	.teab-hero--grayscale .teab-hero__bg img { filter: grayscale(0); }
	.teab-hero__inner > * { opacity: 1; }
}