/**
 * Forsiden
 *
 * Hero-banneret, kategorifliserne og karusellerne. Kun forsiden bruger dem.
 *
 * Udskilt fra style.css 14. september 2026. Grunden staar i
 * claude/arbejdsdeling.md: to Claude-chats arbejder i den samme mappe, og
 * produktsidens CSS naaede at blive slettet to gange af en samtidig
 * hel-fil-skrivning af style.css. Et omraade i sin egen fil kan ikke rammes
 * af den slags.
 *
 * Filen haenger paa tp-style som afhaengighed og indlaeses KUN paa de sider
 * der bruger den. Tokens, knapper, header og footer bliver i style.css --
 * det er dem der holder siderne ens.
 *
 * @package temporaryplanet
 */

/* ==========================================================================
   Forsiden
   Genopbygget efter live-forsiden. Se inc-forside.php for hvad der er
   flyttet hvorhen.
   ========================================================================== */

.tp-forside { padding-block: var(--r5) var(--r6); }

/* --- Hero-banneret -------------------------------------------------------
   Ét billede med teksten ovenpaa, som paa Nexora. Hoejden kommer fra
   aspect-ratio og ikke fra indholdet, saa billedet kan placeres absolut
   uden at hoejde og indhold afhaenger af hinanden.

   Billedet er 1600x1042 (1,54:1). Ved 16/9 (1,78:1) beskaeres der lidt
   foroven og forneden; object-position holder motivet i den oeverste
   halvdel. Paa mobil bliver rammen staaende (4/5), og gradienten drejer
   nedad, for en gradient fra venstre efterlader ingen laesbar plads naar
   spalten er 340 px bred.
   ------------------------------------------------------------------------ */

.tp-hero {
	position: relative;
	margin-bottom: var(--r6);
	aspect-ratio: 16 / 9;
	display: flex; align-items: center;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--flade-dyb);
}
.tp-hero-foto {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 38%;
}
.tp-hero::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(
		to right,
		rgba(14, 15, 16, .94) 0%,
		rgba(14, 15, 16, .78) 34%,
		rgba(14, 15, 16, .22) 66%,
		rgba(14, 15, 16, 0) 100%
	);
}
.tp-hero-indhold {
	position: relative; z-index: 1;
	padding: clamp(1.5rem, 4.5vw, 3.5rem);
	max-width: 34rem;
}
.tp-hero-over {
	margin: 0 0 var(--r2);
	font-size: var(--t-s); font-weight: 700;
	letter-spacing: var(--sp-mikro); text-transform: uppercase; color: var(--messing);
}
.tp-hero-titel {
	margin: 0 0 var(--r3);
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(30px, 5.2vw, 58px); line-height: .98;
	text-transform: uppercase; letter-spacing: var(--sp-anton);
	color: #fff;
}
.tp-hero-brod {
	margin: 0 0 var(--r4);
	color: var(--ink); max-width: 34ch;
}

@media (max-width: 819px) {
	.tp-hero { aspect-ratio: 4 / 5; align-items: flex-end; }
	.tp-hero-foto { object-position: 50% 28%; }
	.tp-hero::after {
		background: linear-gradient(
			to top,
			rgba(14, 15, 16, .96) 0%,
			rgba(14, 15, 16, .86) 46%,
			rgba(14, 15, 16, .30) 78%,
			rgba(14, 15, 16, 0) 100%
		);
	}
	.tp-hero-indhold { max-width: none; }
	.tp-hero-brod { max-width: none; }

	/* Luften over heroen skal vaere den samme som i siderne (--r3). Der stod
	   64 px: .site-content giver --r4 og .tp-forside --r5 oven i hinanden.
	   Kun paa forsiden -- andre sider skal beholde deres luft under
	   headeren, for de starter med en overskrift og ikke et billede. */
	.tp-forside { padding-top: 0; }
	.tp-forside .site-content { padding-top: var(--r3); }
}



/* Karrusellen er flyttet til style.css. Den bruges baade her og paa
   produktsiden, saa den er en faelles byggeklods og hoerer i basen. */

/* --- Kategorifliser -----------------------------------------------------
   Seks fliser i tre spalter -- to raekker. Paa mobil én spalte.

   Teksten ligger i ÉN blok med ÉN polstring. Foer stod navnet og tallet som
   to soeskende i flisens egen flexboks, hver med sin padding og tallet
   oveni med en margin-left: navnet fik 16 px foroven som ingen kunne se
   (flisen er bundstillet), tallet fik 32 px fra venstre kant, og de to stod
   paa samme linje i hver sin stoerrelse. Nu er det en blok med navnet over
   tallet og 24 px hele vejen rundt.
   ------------------------------------------------------------------------ */

.tp-fliser { display: grid; gap: var(--r3); grid-template-columns: repeat(3, 1fr); }
/* To spalter hele vejen ned. Én spalte gav seks fliser i en soejle paa
   naesten 900 px -- man skulle rulle forbi hele kategorioversigten for at
   naa den foerste karrusel. To i hver raekke giver tre raekker. */
@media (max-width: 899px) { .tp-fliser { grid-template-columns: repeat(2, 1fr); } }

.tp-flise {
	position: relative; display: flex; align-items: flex-end;
	aspect-ratio: 4 / 3; overflow: hidden;
	border: 1px solid var(--kant); border-radius: var(--radius);
	background: var(--flade-dyb);
}
.tp-flise img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .6;
	transition: transform .3s ease, opacity .3s ease;
}
.tp-flise:hover img { transform: scale(1.04); opacity: .75; }
/* Kanten loefter sig som paa produktkortet. Foer gjorde den det kun paa
   kortene, saa to kortflader i samme gitter svarede forskelligt paa musen. */
.tp-flise:hover { border-color: var(--kant-staerk); }
.tp-flise::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(14,15,16,.9) 25%, rgba(14,15,16,0) 70%);
}
.tp-flise-tekst {
	position: relative; z-index: 1;
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 2px;
	padding: var(--r4);
}
.tp-flise-navn {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1;
	text-transform: uppercase; color: #fff;
	/* "Maling & Tilbehoer" skal kunne braekke uden at loebe ud af flisen. */
	overflow-wrap: anywhere;
}
.tp-flise-tal { font-size: var(--t-s); color: var(--daempet); }

/* Efter basisreglerne og ikke foer dem: en media query har ingen ekstra
   specificitet, saa .tp-flise { aspect-ratio: 4/3 } laengere nede ville
   vinde paa raekkefoelge alene. Maalt: flisen blev ved med at vaere 123 px
   hoej paa 375 px. */
@media (max-width: 559px) {
	/* 4:3 bliver til en 123 px hoej strimmel naar flisen kun er 164 px bred,
	   og "Maling & Tilbehoer" over to linjer plus vareantallet fylder 116 af
	   dem. Kvadratisk giver hoejden tilbage uden at goere fliserne bredere. */
	.tp-flise { aspect-ratio: 1 / 1; }
	.tp-flise-tekst { padding: var(--r3); }
	.tp-flise-navn { font-size: var(--t-xl); }
	.tp-flise-tal { font-size: var(--t-xs); }
}

/* --- Hero-tekstens indtoning ---------------------------------------------
   Selve blokken flytter sig ikke -- kun dens fire linjer, én ad gangen.
   Uden den foerste regel ville baade blokken OG boernene stige, og saa
   bevaeger teksten sig dobbelt saa langt som alt andet paa siden.

   Fotoet er ikke med. Det er sidens LCP-element; se "Indtoning" i
   style.css.
   ------------------------------------------------------------------------ */
html.tp-anim .tp-hero-indhold[data-tp-ind] {
	opacity: 1; transform: none; transition: none;
}
html.tp-anim .tp-hero-indhold > * {
	opacity: 0; transform: translateY(14px);
	/* Knapfarverne skal staa i listen. `transition` er en kortform og
	   erstatter hele egenskaben: uden dem mistede hero-knappen sin
	   farveovergang paa hover, fordi denne regel vejer mere end
	   knapreglen. Samme fejl som paa produktkortene, maalt 18/9. */
	transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1),
	            background-color var(--overgang), border-color var(--overgang), color var(--overgang);
}
html.tp-anim .tp-hero-indhold.tp-vist > * { opacity: 1; transform: none; }
html.tp-anim .tp-hero-indhold.tp-vist > :nth-child(2) { transition-delay: .08s; }
html.tp-anim .tp-hero-indhold.tp-vist > :nth-child(3) { transition-delay: .16s; }
html.tp-anim .tp-hero-indhold.tp-vist > :nth-child(4) { transition-delay: .24s; }

/* --- Luften ned til footeren ---------------------------------------------
   Der stod 128 px: .tp-sektion har margin-bottom: var(--r6), og .tp-forside
   har padding-bottom: var(--r6) ovenpaa. To afstande i forlaengelse af
   hinanden, ikke én.

   Margenen fjernes IKKE i basen. .tp-sektion blev flyttet dertil ved
   CSS-splittet 14/9 og bruges nu ogsaa af produktsiden -- en aendring der
   ville tage dem med. Her nulstilles den kun paa forsidens sidste sektion,
   hvor paddingen alligevel overtager.
   ------------------------------------------------------------------------ */
.tp-forside .site-main > .tp-sektion:last-child { margin-bottom: 0; }