/* OBJECT etc – Grid (seksjoner og ruter)
   Mål, farger og fonter endres i style.css (variablene som starter med --grid-).
   Alt skalerer med skjermen: verdiene i style.css gjelder på 1366 px.
   Skjermer: PC ≥ 1025 px, tablet 768–1024 px, mobil ≤ 767 px. */

/* ---------- Seksjon ---------- */
.hand-seksjon {
	/* luften måles fra bildekanten, som står en kant inn i ruten */
	padding-top: calc(var(--grid-seksjon-luft) - var(--grid-kant));
}
.hand-seksjon--forste {
	padding-top: var(--grid-forste-luft);
}
/* Bildetekst i nederste rad: luften måles fra teksten i stedet */
.hand-seksjon--bildetekst-nederst {
	padding-bottom: calc(var(--grid-bildetekst-luft) + var(--grid-str-tittel) * 0.73);
}
.hand-seksjon__innhold {
	box-sizing: content-box;
	max-width: var(--grid-maks);
	margin: 0 auto;
	padding: 0 var(--grid-sidemarg);
}
.hand-seksjon__tittel {
	margin: 0 0 var(--grid-tittel-luft);
	padding-left: var(--grid-kant); /* på linje med bildekanten */
	font-family: var(--grid-font);
	font-weight: 500;
	font-size: var(--grid-str-seksjonstittel);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--grid-farge-tekst);
	text-box: trim-both cap alphabetic; /* mål fra bokstavene, ikke luften rundt */
}

/* ---------- Grid ---------- */
.hand-grid-ramme {
	container-type: inline-size;
}
.hand-grid {
	--kol: var(--kol-valgt, 4);
	--celle: calc((100cqw - (var(--kol) - 1) * var(--grid-gap)) / var(--kol));
	display: grid;
	grid-template-columns: repeat(var(--kol), minmax(0, 1fr));
	grid-auto-rows: var(--celle);
	column-gap: var(--grid-gap);
	row-gap: var(--grid-gap);
}

/* ---------- Rute ----------
   Hver rute får variabler per skjerm (--pc-…, --t-…, --m-…):
   b/h/k/r = bredde, høyde, kolonne, rad · just = bildetekst-justering ·
   mp/mbg/fit/blend = produktvisning · ts/tf/pl/mt = undertekst størrelse, farge, plassering, luft.
   Her velges PC-verdiene; tablet og mobil bytter dem lenger ned. */
.rute {
	--b: var(--pc-b, 1);
	--hh: var(--pc-h, 1);
	--k: var(--pc-k);
	--r: var(--pc-r);
	--just: var(--pc-just, left);
	--mp: var(--pc-mp, 0);
	--mbg: var(--pc-mbg, var(--grid-farge-laster));
	--fit: var(--pc-fit, cover);
	--blend: var(--pc-blend, normal);
	--ts: var(--pc-ts, var(--grid-str-undertekst-stor));
	--tf: var(--pc-tf, var(--grid-farge-tekst));
	--pl: var(--pc-pl, flex-start);
	--mt: var(--pc-mt, 0px);

	grid-column: var(--k, auto) / span var(--b);
	grid-row: var(--r, auto) / span var(--hh);
	position: relative;
	min-width: 0;
	padding: var(--grid-kant);
}
.rute--tom {
	background: var(--grid-farge-tom);
}

/* Bilde: fyller ruten innenfor kanten, aldri strukket */
.rute__figur {
	position: relative;
}
.rute__media {
	position: relative;
	height: calc(var(--hh) * var(--celle) + (var(--hh) - 1) * var(--grid-gap) - 2 * var(--grid-kant));
	padding: var(--mp);              /* produkt: luft rundt bildet */
	background: var(--mbg);          /* produkt: grå flate · ellers lys tone mens bildet lastes */
	overflow: hidden;
	isolation: isolate;
}
.rute__media picture {
	display: block;
	width: 100%;
	height: 100%;
}
.rute__bilde {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--fit);          /* fyll: cover · produkt: contain */
	mix-blend-mode: var(--blend);    /* produkt: hvit bakgrunn i bildet blir grå */
}

/* Bildetekst: henger under bildet, tar ikke plass i gridet */
.rute__bildetekst {
	position: absolute;
	top: calc(100% + var(--grid-bildetekst-luft));
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0;
	font-family: var(--grid-font);
	font-weight: 400;
	font-size: var(--grid-str-tittel);
	line-height: 1.2;
	text-align: var(--just);
	text-transform: uppercase;
	color: var(--grid-farge-tekst);
	text-box: trim-both cap alphabetic;
}

/* Bildetekst under produktruter */
.rute--produkt .rute__bildetekst {
	font-size: var(--grid-str-produkttekst);
}
/* Tekstrute: teksten står innenfor kanten, bokstavtoppen på linje med bildekanten */
.rute__innhold {
	display: flex;
	flex-direction: column;
	justify-content: var(--pl);
	height: 100%;
}
.rute__tittel {
	margin: 0;
	font-family: var(--grid-font);
	font-weight: 400;
	font-size: var(--grid-str-tittel);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--grid-farge-tekst);
	text-box: trim-both cap alphabetic;
}
.rute__tekst {
	margin: var(--mt) 0 0;
	font-family: var(--grid-font);
	font-weight: 300;
	font-size: var(--ts);
	line-height: 1.2;
	color: var(--tf);
	text-box: trim-both cap alphabetic;
}

/* Lenke: gjør hele ruten klikkbar */
.rute__lenke {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ---------- Hover (bare med mus) ---------- */
.rute__hover {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--grid-hover-farge);
	opacity: 0;
	transition: opacity var(--grid-hover-varighet) var(--bev-kurve);
	pointer-events: none;
}
.rute__hover span {
	font-family: var(--grid-font);
	font-weight: 400;
	font-size: var(--grid-str-hover);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grid-farge-tekst);
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	transform: translateY(6px);
	transition: transform var(--grid-hover-varighet) var(--bev-kurve);
}
.rute--tekst .rute__innhold {
	transition: opacity var(--grid-hover-varighet) var(--bev-kurve);
}
@media (hover: hover) and (pointer: fine) {
	.rute--lenke:hover .rute__hover { opacity: 1; }
	.rute--lenke:hover .rute__hover span { transform: none; }
	.rute--tekst.rute--lenke:hover .rute__innhold { opacity: 0.55; }
}

/* ---------- Bevegelse ----------
   Klassen hand-js settes av skriptet. Uten skript vises alt som vanlig. */
/* Kommer inn ovenfra når man blar opp */
.hand-js .hand-seksjon__tittel.over,
.hand-js .rute.over {
	transform: translateY(calc(-1 * var(--bev-avstand)));
}
   .hand-js .hand-seksjon__tittel,
.hand-js .rute {
	opacity: 0;
	transform: translateY(var(--bev-avstand));
	transition:
		opacity var(--bev-varighet) var(--bev-kurve) var(--forsinkelse, 0s),
		transform var(--bev-varighet) var(--bev-kurve) var(--forsinkelse, 0s);
}
.hand-js .hand-seksjon__tittel.vis,
.hand-js .rute.vis {
	opacity: 1;
	transform: none;
}
/* Bildene toner inn når de er lastet */
.hand-js .rute__bilde {
	opacity: 0;
	transition: opacity var(--bev-bilde-varighet) var(--bev-kurve);
}
.hand-js .rute__bilde.lastet {
	opacity: 1;
}
/* Respekter «redusert bevegelse» */
/* Bildene avdekkes nedenfra innenfor rammen (--bev-avdekk) */
.bev-avdekk .rute .rute__media {
	clip-path: inset(100% 0 0 0);
	transition: clip-path var(--bev-avdekk-varighet) var(--bev-kurve) var(--forsinkelse, 0s);
}
.bev-avdekk .rute.over .rute__media {
	clip-path: inset(0 0 100% 0); /* ovenfra når man blar opp */
}
.bev-avdekk .rute.vis .rute__media {
	clip-path: inset(0 0 0 0);
}

/* Parallakse inni bildene (--bev-parallakse). Rammen står stille. */
.bev-parallakse .rute:not(.rute--produkt) .rute__bilde {
	height: calc(100% + 2 * var(--bev-parallakse));
	margin-top: calc(-1 * var(--bev-parallakse));
	transform: translate3d(0, var(--plx, 0px), 0);
	will-change: transform;
}

/* Sideoverganger (--bev-overgang-varighet) */
.hand-js body > :not(.navbar) {
	animation: hand-side-inn var(--bev-overgang-varighet) var(--bev-kurve) backwards;
}
@keyframes hand-side-inn {
	from { opacity: 0; }
}
.forlater body > :not(.navbar) {
	opacity: 0;
	transition: opacity var(--bev-overgang-varighet) var(--bev-kurve);
}

/* Hero-teksten bokstav for bokstav (--bev-hero) */
.hand-js .hero__tekst {
	visibility: hidden;
	animation: hand-vis 0s 2s forwards; /* sikkerhet: vises uansett etter 2 s */
}
.hand-js.bev-hero .hero__tekst,
.hand-js.hero-av .hero__tekst {
	visibility: visible;
}
@keyframes hand-vis {
	to { visibility: visible; }
}
.bev-hero .hero-ord {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.bev-hero .hero-b {
	display: inline-block;
	transform: translateY(105%);
	opacity: 0;
	transition:
		transform var(--bev-hero-varighet) var(--bev-kurve) var(--hb, 0s),
		opacity var(--bev-hero-varighet) var(--bev-kurve) var(--hb, 0s);
}
.hero-klar .hero-b {
	transform: none;
	opacity: 1;
}

/* Myk scrolling (Lenis) */
html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-stopped {
	overflow: clip;
}
.lenis.lenis-smooth iframe {
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.hand-js .hand-seksjon__tittel,
	.hand-js .rute,
	.hand-js .rute__bilde,
	.rute__hover,
	.rute__hover span {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.rute__hover { opacity: 0; }
	.rute--lenke:hover .rute__hover { opacity: 1; }
	.hand-js body > :not(.navbar) { animation: none; }
	.hand-js .hero__tekst { visibility: visible; animation: none; }
}

/* Innhold som bare gjelder noen skjermer */
.dv { display: none; }

/* ---------- PC ---------- */
@media (min-width: 1025px) {
	.skjul-pc { display: none !important; }
	.dv-pc { display: revert; }
}

/* ---------- Tablet: 3 kolonner ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.hand-grid--kol-4 { --kol: 3; }
	.rute {
		--b: var(--t-b, 1);
		--hh: var(--t-h, 1);
		--k: var(--t-k);
		--r: var(--t-r);
		--just: var(--t-just, left);
		--mp: var(--t-mp, 0);
		--mbg: var(--t-mbg, var(--grid-farge-laster));
		--fit: var(--t-fit, cover);
		--blend: var(--t-blend, normal);
		--ts: var(--t-ts, var(--grid-str-undertekst-stor));
		--tf: var(--t-tf, var(--grid-farge-tekst));
		--pl: var(--t-pl, flex-start);
		--mt: var(--t-mt, 0px);
	}
	.skjul-t { display: none !important; }
	.dv-t { display: revert; }
	/* rutene bytter plass, så bildetekster får egen luft */
	.hand-grid--har-bildetekst { row-gap: calc(var(--grid-gap) + var(--grid-tekstlinje)); }
}

/* ---------- Mobil: 2 kolonner ---------- */
@media (max-width: 767px) {
	.hand-grid:not(.hand-grid--kol-1) { --kol: 2; }
	.rute {
		--b: var(--m-b, 1);
		--hh: var(--m-h, 1);
		--k: var(--m-k);
		--r: var(--m-r);
		--just: var(--m-just, left);
		--mp: var(--m-mp, 0);
		--mbg: var(--m-mbg, var(--grid-farge-laster));
		--fit: var(--m-fit, cover);
		--blend: var(--m-blend, normal);
		--ts: var(--m-ts, var(--grid-str-undertekst-stor));
		--tf: var(--m-tf, var(--grid-farge-tekst));
		--pl: var(--m-pl, flex-start);
		--mt: var(--m-mt, 0px);
	}
	.skjul-m { display: none !important; }
	.dv-m { display: revert; }
	.hand-grid--har-bildetekst { row-gap: calc(var(--grid-gap) + var(--grid-tekstlinje)); }
}