/*
 * /om-oss/ (template-parts/sections/om_oss/topp.php, tro.php, reise.php,
 * verdier.php og folk.php). Spørsmålene bruker trekkspillet fra
 * bransjesidene, og kundeomtalene og avslutningen er de delte seksjonene.
 *
 * Bygger på plattform.css, heltside.css og nettside.css (inc/plattform.php).
 *
 *   .oo-topp      H1 midt på og filmen av heltene i et bredt kort, med
 *                 tallene som glassbrikker oppå
 *   .oo-tro       utsagnet der ordene lyser opp, og tre punkter
 *   .oo-reise     teksten og fakta til venstre, tidslinjen til høyre
 *   .oo-verdier   verdiene som rader
 *   .oo-folk      et kort per person
 */

/* ---------- Toppen ---------- */

.oo-topp {
	padding-block: clamp(44px, 6vw, 96px) clamp(56px, 6vw, 96px);
	background:
		radial-gradient(40% 50% at 84% 18%, #efe7ff 0%, transparent 70%),
		radial-gradient(36% 46% at 8% 30%, #fdeaf3 0%, transparent 70%),
		#fafcf9;
}

.oo-topp-tekst { max-width: 1000px; text-align: center; }
.oo-topp .ns-smuler ol { justify-content: center; }
.oo-topp .pf-pille { margin-bottom: 18px; }
.oo-h1 { font-size: clamp(2.7rem, 1.2rem + 4vw, 5.2rem); line-height: 1.04; }
.oo-knapper { margin-top: 34px; }
.oo-knapper .pf-knapp { gap: 8px; }

.oo-scene-rom { max-width: 1320px; margin-top: clamp(40px, 5vw, 72px); }

.oo-scene {
	position: relative;
	margin: 0;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: 36px;
	background: #e9e6f2;
}

.oo-scene-film { display: block; width: 100%; height: 100%; object-fit: cover; }
.oo-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(10, 15, 31, .32) 100%); pointer-events: none; }

.oo-tall {
	position: absolute;
	left: clamp(16px, 2.4vw, 32px);
	right: clamp(16px, 2.4vw, 32px);
	bottom: clamp(16px, 2.4vw, 32px);
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.oo-tall > div {
	display: flex;
	flex-direction: column-reverse;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 18px;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
}

.oo-tall dd { margin: 0; color: var(--pf-blekk); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.oo-tall dt { margin-top: 6px; color: #4a4a62; font-size: 13px; }

/* Toppen med filmen av heltene fra forsiden til høyre (feltet heltefilm).
   Filmen har samme bakgrunn som toppen (#fafcf9), og kantene tones ut, så
   heltene står rett på siden. Sidene av filmen skjæres bort, så helten i
   midten blir større. */
.oo-topp-rad { display: grid; gap: 8px; align-items: center; }
.oo-topp--film .oo-topp-tekst { max-width: 640px; margin-inline: auto; }

.oo-film { width: 100%; max-width: 560px; margin-inline: auto; }

.oo-film video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	-webkit-mask-image: radial-gradient(closest-side, #000 64%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 64%, transparent 100%);
}

.oo-topp-tall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 36px 0 0; }
/* Tallet står over teksten, og øverst i ruten også når teksten går over to linjer */
.oo-topp-tall > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.oo-topp-tall dd { margin: 0; color: var(--pf-blekk); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.oo-topp-tall dt { margin-top: 6px; color: var(--pf-gra); font-size: 14px; }

@media (max-width: 999px) {
	.oo-film { max-width: 360px; margin-top: -24px; }
	.oo-topp-tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: center; }
	.oo-topp-tall dt { font-size: 13px; line-height: 1.35; }
}

@media (min-width: 1000px) {
	.oo-topp-rad { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
	.oo-topp--film .oo-topp-tekst { margin: 0; text-align: left; }
	.oo-topp--film .ns-smuler ol,
	.oo-topp--film .oo-knapper,
	.oo-topp--film .oo-topp-tall { justify-content: flex-start; }
	.oo-topp--film .pf-ingress { margin-left: 0; }
	.oo-topp-tall { padding-top: 28px; border-top: 1px solid var(--pf-linje); }
}

/* Toppen med laget (feltet lag, 27.10.2026): H1 over hele bredden, der
   ordene kommer inn ett og ett og den uthevede delen får en strek som tegnes
   under. Under står teksten til venstre og lagbildet til høyre: menneskene og
   heltene i fem kolonner som svever litt opp og ned hver sin vei. Flate
   farger og ingen skygger. Med redusert bevegelse står alt stille. */
.oo-topp--lag { overflow: hidden; background: #faf8ff; }
.oo-topp--lag .ns-smuler ol { justify-content: flex-start; }

/* Størrelsen settes med --hh-fs, som i assets/topp/typografi.css */
:root body main h1.pf-h1.oo-h1--lag { --hh-fs: clamp(2.6rem, .7rem + 5.4vw, 5.6rem); --hh-lh: 1.02; }

.oo-h1--lag {
	max-width: 15.5em;
	margin: 0;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.oo-ord { display: inline-block; }

.oo-strek { position: relative; display: inline-block; padding-bottom: .12em; white-space: nowrap; }
.oo-strek svg { position: absolute; left: -.04em; right: -.04em; bottom: -.06em; width: calc(100% + .08em); height: .26em; overflow: visible; }
.oo-strek path { fill: none; stroke: #ff9f43; stroke-width: 5; stroke-linecap: round; }

.oo-lag-rad { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.oo-lag-tekst .oo-h1--lag { margin-bottom: clamp(18px, 2vw, 26px); }
.oo-lag-tekst .pf-ingress { max-width: 34em; margin: 0; text-align: left; }
.oo-topp--lag .oo-knapper { justify-content: flex-start; margin-top: 28px; }
.oo-topp--lag .oo-topp-tall { justify-content: flex-start; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--pf-linje); }

/* Lagbildet */
.oo-lag { margin: 0; }
.oo-lag-vegg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.oo-lag-kolonne { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.oo-lag-kolonne:nth-child(2) { margin-top: 44px; }
.oo-lag-kolonne:nth-child(3) { margin-top: 14px; }
.oo-lag-kolonne:nth-child(4) { margin-top: 58px; }
.oo-lag-kolonne:nth-child(5) { margin-top: 26px; }

.oo-lag-flis {
	position: relative;
	display: grid;
	place-items: end center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 22px;
	background: var(--flate, #ebe3ff);
}

.oo-lag-bilde { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform .6s var(--pf-myk); }
.oo-lag-flis--foto .oo-lag-bilde { object-fit: cover; object-position: 50% 18%; }
.oo-lag-flis--helt .oo-lag-bilde { width: 82%; height: auto; margin-bottom: 14%; }
.oo-lag-flis:hover .oo-lag-bilde { transform: scale(1.05); }


.oo-lag-merke {
	position: absolute;
	top: 7px;
	left: 7px;
	padding: 3px 7px;
	border-radius: 999px;
	background: #fff;
	color: #6d28d9;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.oo-lag-merke--snart { color: #c2410c; }

.oo-lag-navn {
	position: absolute;
	left: 50%;
	bottom: 7px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fff;
	color: var(--pf-blekk);
	font-size: 11.5px;
	font-weight: 800;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity .25s ease, transform .25s ease;
}

.oo-lag-flis:hover .oo-lag-navn { opacity: 1; transform: translate(-50%, 0); }

.oo-lag-tekst-under { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; color: var(--pf-gra); font-size: 14.5px; }
.oo-lag-tekst-under b { color: var(--pf-blekk); font-weight: 800; }

@media (min-width: 1000px) {
	.oo-lag-rad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	/* H1 står i venstre kolonne, så den er mindre enn over hele bredden */
	:root body main h1.pf-h1.oo-h1--lag { --hh-fs: clamp(2.6rem, .9rem + 3.1vw, 4.3rem); }
}

@media (max-width: 599px) {
	:root body main h1.pf-h1.oo-h1--lag { --hh-fs: clamp(2.3rem, 1.2rem + 5vw, 2.9rem); }
	.oo-lag-vegg,
	.oo-lag-kolonne { gap: 7px; }
	.oo-lag-flis { border-radius: 14px; }
	.oo-lag-kolonne:nth-child(2) { margin-top: 26px; }
	.oo-lag-kolonne:nth-child(3) { margin-top: 8px; }
	.oo-lag-kolonne:nth-child(4) { margin-top: 34px; }
	.oo-lag-kolonne:nth-child(5) { margin-top: 16px; }
	.oo-lag-merke { top: 4px; left: 4px; padding: 2px 5px; font-size: 8.5px; }
	.oo-topp--lag .oo-topp-tall { text-align: left; }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	/* Ordene i H1 kommer inn ett og ett, og streken tegnes til slutt */
	.oo-h1--lag .oo-ord { animation: oo-ord-inn .9s var(--pf-myk) calc(.08s + var(--o) * .07s) both; }
	.oo-strek path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: oo-strek-tegn .9s cubic-bezier(.65, 0, .35, 1) calc(.3s + var(--o) * .07s) forwards; }

	/* Kolonnene svever hver sin vei, heltene vugger litt i tillegg */
	.oo-lag-kolonne { animation: oo-sveve 9s ease-in-out calc(var(--k) * -1.7s) infinite; }
	.oo-lag-kolonne:nth-child(even) { animation-name: oo-sveve-motsatt; }
	.oo-lag-flis--helt .oo-lag-bilde { animation: oo-vugg 4.5s ease-in-out calc(var(--k) * -.9s) infinite; transform-origin: 50% 90%; }
	.oo-lag-flis--helt:hover .oo-lag-bilde { animation-play-state: paused; }
}

@keyframes oo-ord-inn { from { opacity: .12; transform: translateY(.42em) rotate(2deg); } }
@keyframes oo-strek-tegn { to { stroke-dashoffset: 0; } }
@keyframes oo-sveve { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes oo-sveve-motsatt { 0%, 100% { transform: translateY(-12px); } 50% { transform: translateY(6px); } }
@keyframes oo-vugg { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg) translateY(-3px); } }

/* ---------- Hvorfor vi finnes ---------- */

.oo-tro { padding-top: 0; }
.oo-utsagn-rom { height: 200vh; }
.oo-utsagn-bredde { max-width: 1040px; }

.oo-punkter {
	/* Trekkes litt opp mot utsagnet, som står midt i en skjermhøyde */
	margin-top: calc(-1 * clamp(32px, 9vh, 110px));
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
}

.oo-punkter li {
	padding: clamp(24px, 2.6vw, 34px);
	border: 1px solid #efedf6;
	border-radius: 26px;
	background: #faf9fe;
}

.oo-punkt-ikon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: linear-gradient(135deg, #7c3aed 0%, #c026d3 60%, #ec4899 100%);
	color: #fff;
}

.oo-punkt-ikon svg { width: 22px; height: 22px; }
.oo-punkter .oo-punkt-tittel { --hh-fs: 1.3rem; --hh-lh: 1.25; margin-top: 20px; color: var(--pf-blekk); font-weight: 600; }
.oo-punkter p { margin-top: 8px; color: var(--pf-gra); font-size: 16px; line-height: 1.55; }

/* ---------- Historien ---------- */

.oo-reise { background: linear-gradient(180deg, #f8f6ff 0%, #fff 100%); }

.oo-reise-rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(40px, 7vw, 112px);
}

.oo-reise-tekst { position: sticky; top: 120px; }
.oo-h2 { font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem); }
.oo-reise-avsnitt { max-width: 34rem; margin-top: 20px; color: var(--pf-gra); font-size: 18px; line-height: 1.6; }

.oo-fakta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 34rem; margin: 36px 0 0; }
.oo-fakta > div { padding: 16px 18px; border: 1px solid #ece9f6; border-radius: 16px; background: #fff; }
.oo-fakta dt { color: var(--pf-gra); font-size: 13px; }
.oo-fakta dd { margin: 4px 0 0; color: var(--pf-blekk); font-size: 17px; font-weight: 600; }

.oo-tidslinje { position: relative; display: grid; gap: clamp(40px, 5vw, 64px); padding: 8px 0 8px 52px; }

.oo-tidslinje::before,
.oo-tidslinje::after {
	content: '';
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 11px;
	width: 2px;
	border-radius: 2px;
	background: #e5e0f3;
}

.oo-tidslinje::after {
	background: linear-gradient(180deg, #7c3aed 0%, #c026d3 50%, #ff6a00 100%);
	transform: scaleY(var(--fylt, 0));
	transform-origin: top;
}

.oo-steg { position: relative; }

.oo-steg-prikk {
	position: absolute;
	top: 10px;
	left: -48px;
	z-index: 1;
	width: 18px;
	height: 18px;
	border: 2px solid #d9d3ee;
	border-radius: 50%;
	background: #fff;
	transition: border-color .4s, background-color .4s, box-shadow .4s;
}

.oo-steg.er-naadd .oo-steg-prikk { border-color: #a020f0; background: #a020f0; box-shadow: 0 0 0 6px rgba(160, 32, 240, .14); }

.oo-steg-aar {
	color: #cdc7de;
	font-size: clamp(2.4rem, 1.5rem + 2.2vw, 3.6rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: color .4s;
}

.oo-steg.er-naadd .oo-steg-aar {
	background: linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #ec4899 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.oo-steg .oo-steg-tittel { --hh-fs: 1.35rem; --hh-lh: 1.25; margin-top: 12px; color: var(--pf-blekk); font-weight: 600; }
.oo-steg-tekst { max-width: 30rem; margin-top: 8px; color: var(--pf-gra); font-size: 16px; line-height: 1.55; }

/* ---------- Det vi står for ---------- */

.oo-verdi-liste { max-width: 1100px; border-top: 1px solid #ebe8f2; }

.oo-verdi {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 4vw, 64px);
	padding: clamp(26px, 3vw, 40px) 0;
	border-bottom: 1px solid #ebe8f2;
}

.oo-verdi::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--pf-grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .6s var(--pf-myk);
}

.oo-verdi:hover::after { transform: scaleX(1); }
.oo-verdi .oo-verdi-tittel { --hh-fs: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); --hh-lh: 1.15; color: var(--pf-blekk); font-weight: 600; text-wrap: balance; }
.oo-verdi-tekst { color: var(--pf-gra); font-size: 18px; line-height: 1.55; }

/* ---------- Menneskene bak ---------- */

.oo-folk {
	background:
		radial-gradient(40% 40% at 90% 10%, #f3ecff 0%, transparent 70%),
		radial-gradient(36% 40% at 5% 90%, #fdeef5 0%, transparent 70%),
		#fbfaff;
	scroll-margin-top: 40px;
}

/* Tre i bredden, eller fire på store skjermer når det gir hele rader
   (template-parts/sections/om_oss/folk.php velger) */
.oo-folk-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
@media (min-width: 1100px) {
	.oo-folk-liste--fire { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.oo-person {
	display: flex;
	flex-direction: column;
	padding: 10px;
	border: 1px solid #eeeaf6;
	border-radius: 28px;
	background: #fff;
	transition: transform .35s var(--pf-myk);
}

.oo-person:hover { transform: translateY(-4px); }

.oo-person-bilde {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 20px;
	background: var(--flate);
}

.oo-person-bilde img { display: block; width: auto; height: 92%; max-width: 90%; object-fit: contain; object-position: bottom; transition: transform .5s var(--pf-myk); transform-origin: 50% 100%; }
.oo-person:hover .oo-person-bilde img { transform: scale(1.05); }

/* Fotoene fyller flaten, med hodet og strekene rundt det i øvre del */
.oo-person-bilde.er-foto { align-items: stretch; background: #f4f2ee; }
.oo-person-bilde.er-foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 6%; transform-origin: 50% 40%; }

.oo-person-tekst { display: flex; flex: 1; flex-direction: column; padding: 18px 14px 12px; }
.oo-person .oo-person-navn { --hh-fs: 1.3rem; --hh-lh: 1.2; color: var(--pf-blekk); font-weight: 600; }
.oo-person-navn a { color: inherit; text-decoration: none; }
.oo-person-navn a:hover { text-decoration: underline; text-underline-offset: 3px; }
.oo-person-rolle { margin-top: 4px; color: #6d28d9; font-size: 14px; font-weight: 600; }
.oo-person-bio { margin-top: 10px; color: var(--pf-gra); font-size: 15px; line-height: 1.5; }
.oo-person-fag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.oo-person-fag li { padding: 4px 10px; border-radius: 999px; background: #f5f3fb; color: #4a4a62; font-size: 12px; font-weight: 500; }

/* ---------- Mindre skjermer ---------- */

@media (max-width: 1023px) {
	.oo-scene { aspect-ratio: 16 / 9; }
	.oo-reise-rad { grid-template-columns: minmax(0, 1fr); }
	.oo-reise-tekst { position: static; }
	.oo-folk-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.oo-punkter { grid-template-columns: minmax(0, 1fr); }
	.oo-verdi { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.oo-utsagn-rom { height: 170vh; }
}

@media (max-width: 639px) {
	.oo-scene { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
	.oo-scene::after { display: none; }
	.oo-scene-film { aspect-ratio: 4 / 3; height: auto; border-radius: 24px; }
	.oo-tall { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
	.oo-tall > div { padding: 12px; border-color: var(--pf-linje); background: #fff; }
	.oo-tall dd { font-size: 1.35rem; }
	.oo-tall dt { font-size: 12px; }
	.oo-folk-liste { grid-template-columns: minmax(0, 1fr); }
	.oo-fakta { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.oo-person,
	.oo-person-bilde img,
	.oo-verdi::after { transition: none; }
	.oo-person:hover { transform: none; }
}

/* ======================================================================
   Om oss som Agentic as a Service (26.10.2026): avsløringen, forskjellen
   og heltene (template-parts/sections/om_oss/avsloring.php, skiftet.php
   og helter.php)

   .oo-av       tre linjer som kommer frem en etter en, og overskriften
                som samler dem til en tjeneste
   .oo-skift    byrå, programvare og oss side om side
   .oo-helter   heltene som et lag
   ====================================================================== */

/* ---------- Avsløringen ---------- */

.oo-av { background: #fff; text-align: center; }
.oo-av-rom { max-width: 1040px; }
.oo-av-linjer { display: grid; gap: clamp(14px, 2vw, 24px); margin-top: 10px; }

.oo-av-linje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .2em .45em;
	color: var(--pf-blekk);
	font-family: var(--pf-tittel);
	font-size: clamp(1.9rem, 1.1rem + 3vw, 3.75rem);
	font-weight: 800;
	line-height: 1.08;
	text-wrap: balance;
}

.oo-av-bilde { display: inline-flex; flex: none; align-items: center; height: 1.1em; }

.oo-av-bilde img {
	width: 1.1em;
	height: 1.1em;
	margin-left: -.3em;
	border: .06em solid #fff;
	border-radius: 50%;
	background: #f1eef8;
	object-fit: cover;
}

.oo-av-bilde img:first-child { margin-left: 0; }

/* På store skjermer står bildet foran teksten på samme linje */
@media (min-width: 900px) {
	.oo-av-linje { flex-wrap: nowrap; }
}
.oo-av-bilde--helter img { padding: .1em .06em 0; object-fit: contain; object-position: bottom; }
.oo-av-bilde--helter img:nth-child(1) { background: #ecf4de; }
.oo-av-bilde--helter img:nth-child(2) { background: #ffecdd; }
.oo-av-bilde--helter img:nth-child(3) { background: #e0f4ff; }

.oo-av-app {
	display: grid;
	place-items: center;
	width: 1.1em;
	height: 1.1em;
	border-radius: .3em;
	background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
	color: #fff;
}

.oo-av-app svg { width: .55em; height: .55em; stroke-width: 3; }

.oo-av-h2 { margin-top: clamp(56px, 7vw, 96px); }
.oo-av-forste,
.oo-av-uthevet { display: block; }
.oo-av-forste { color: var(--pf-gra-lys); }
.oo-av-ingress { margin-inline: auto; }

/* ---------- Forskjellen ---------- */

.oo-skift { background: var(--pf-flate); }
.oo-skift-rad { display: grid; gap: 16px; }

.oo-skift-kort {
	position: relative;
	padding: 30px 28px 32px;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: #fff;
}

/* Fast farge, så kortet blir et mørkt kort også i mørk modus */
.oo-skift-kort.er-vaar { border-color: rgba(196, 181, 253, .35); background: #0a0f1f; color: #fff; }

.oo-skift-helter { position: absolute; top: -40px; right: 20px; display: flex; }
/* Heltene over kortet står stille (Nohman, 28.10.2026) */
.oo-skift-helter img { width: 64px; height: auto; margin-left: -16px; }

.oo-skift-navn { color: var(--pf-gra); font-size: 14px; font-weight: 700; }
.oo-skift-tittel { margin-top: 6px; color: var(--pf-blekk); }
.oo-skift-punkter { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pf-linje); }
.oo-skift-punkter li { display: flex; gap: 10px; color: var(--pf-tekst); font-size: 16px; line-height: 1.45; }
.oo-skift-punkter svg { flex: none; margin-top: 4px; color: #b4b4c2; }

.er-vaar .oo-skift-navn { color: #c4b5fd; }
.er-vaar .oo-skift-tittel { color: #fff; }
.er-vaar .oo-skift-punkter { border-top-color: rgba(255, 255, 255, .14); }
.er-vaar .oo-skift-punkter li { color: rgba(255, 255, 255, .9); }
.er-vaar .oo-skift-punkter svg { color: #6ee7b7; }

.oo-skift-lenke { margin-top: 36px; text-align: center; }
.oo-skift-lenke .pf-lenke:hover svg,
.oo-helter-lenke .pf-lenke:hover svg { transform: translateX(3px); }

/* Forskjellen som tabell (feltet tabell): ett spørsmål per rad, og i hver
   celle et merke for ja, delvis eller nei og et kort svar. Vår kolonne har
   lilla flate og ramme og heltene som kikker over. På mobil blir hver rad et
   kort med svarene under hverandre. */
.oo-tabell-rom { margin-top: 8px; }
.oo-tabell { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; padding: 10px; border: 1px solid var(--pf-linje); border-radius: 28px; background: #fff; }
.oo-tabell th,
.oo-tabell td { padding: 18px 20px; border-bottom: 1px solid #efedf5; text-align: left; vertical-align: middle; }
.oo-tabell tbody tr:last-child > * { border-bottom: 0; }
.oo-tabell thead > tr > * { padding-top: 28px; padding-bottom: 20px; border-bottom-color: var(--pf-linje); vertical-align: bottom; }
.oo-tabell-hjorne { width: 24%; }
.oo-tabell-kol { position: relative; }
.oo-tabell-navn { display: block; color: var(--pf-gra); font-size: 13.5px; font-weight: 700; }
.oo-tabell-tittel { display: block; margin-top: 4px; color: var(--pf-blekk); font-size: 18px; font-weight: 800; line-height: 1.25; }
.oo-tabell tbody th { color: var(--pf-blekk); font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.oo-tabell td { color: var(--pf-tekst); font-size: 15px; line-height: 1.45; }

.oo-tabell-celle { display: flex; align-items: flex-start; gap: 10px; }
.oo-tabell-merke { display: grid; flex: none; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; font-size: 14px; }
.oo-tabell-merke svg { stroke-width: 3; }
.oo-tabell-merke--ja { background: #dcf5e8; color: #0a7444; }
.oo-tabell-merke--delvis { background: #fff1d6; color: #b45309; }
.oo-tabell-merke--nei { background: #f1eff5; color: #8d8aa3; }

/* Vår kolonne */
.oo-tabell .er-vaar { border-right: 2px solid #6712fb; border-bottom-color: #e6dcfd; border-left: 2px solid #6712fb; background: #f6f2ff; }
.oo-tabell thead .er-vaar { border-top: 2px solid #6712fb; border-radius: 20px 20px 0 0; }
.oo-tabell tbody tr:last-child .er-vaar { border-bottom: 2px solid #6712fb; border-radius: 0 0 20px 20px; }
.oo-tabell td.er-vaar { color: var(--pf-blekk); font-weight: 700; }
.oo-tabell .er-vaar .oo-tabell-navn { color: #6712fb; }
.oo-tabell .er-vaar .oo-tabell-merke--ja { background: #6712fb; color: #fff; }
.oo-tabell .oo-skift-helter { top: -42px; right: 14px; }

@media (max-width: 819px) {
	.oo-tabell,
	.oo-tabell tbody,
	.oo-tabell tr,
	.oo-tabell th,
	.oo-tabell td { display: block; width: auto; }
	.oo-tabell { padding: 0; border: 0; background: none; }
	.oo-tabell thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.oo-tabell tbody { display: grid; gap: 12px; }
	.oo-tabell tbody tr { padding: 18px; border: 1px solid var(--pf-linje); border-radius: 22px; background: #fff; }
	.oo-tabell tbody th { padding: 0 0 10px; border: 0; font-size: 16.5px; }
	.oo-tabell td { padding: 10px 0; border: 0; border-top: 1px solid #efedf5; }
	.oo-tabell td::before { content: attr(data-kol); display: block; margin-bottom: 6px; color: var(--pf-gra); font-size: 12.5px; font-weight: 700; }
	.oo-tabell td.er-vaar,
	.oo-tabell tbody tr:last-child td.er-vaar { margin: 6px -8px -8px; padding: 12px 14px; border: 0; border-radius: 14px; }
	.oo-tabell td.er-vaar::before { color: #6712fb; }
}

@media (max-width: 999px) {
	.oo-skift-kort.er-vaar { margin-top: 36px; }
}

@media (min-width: 1000px) {
	.oo-skift-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}

/* ---------- Heltene ---------- */

.oo-helter { background: #fff; }
.oo-helt-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.oo-helt {
	position: relative;
	display: flex;
	flex: 0 1 calc(50% - 7px);
	flex-direction: column;
	align-items: center;
	padding: 14px 14px 22px;
	border: 1px solid var(--pf-linje);
	border-radius: 24px;
	background: #fff;
	text-align: center;
	transition: border-color .25s;
}

.oo-helt:hover { border-color: color-mix(in srgb, var(--aksent) 40%, #fff); }

.oo-helt-scene {
	display: grid;
	place-items: end center;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 18px;
	background: var(--flate);
}

.oo-helt-scene img {
	width: 70%;
	height: auto;
	transform: translateY(8%);
	transition: transform .4s var(--pf-myk);
	animation: oo-svev 6s ease-in-out infinite;
}

.oo-helt:nth-child(2n) .oo-helt-scene img { animation-delay: -2s; }
.oo-helt:nth-child(3n) .oo-helt-scene img { animation-delay: -4s; }
.oo-helt:hover .oo-helt-scene img { transform: translateY(3%) scale(1.04); }

.oo-helt-merke {
	position: absolute;
	top: 24px;
	left: 24px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--aksent);
	font-size: 12px;
	font-weight: 800;
}

.oo-helt.er-snart .oo-helt-merke { background: #fef3c7; color: #92400e; }
:root body .oo-helter h3.oo-helt-navn { --hh-fs: 1.35rem; --hh-lh: 1.2; }
.oo-helt-navn { margin-top: 16px; color: var(--pf-blekk); }
.oo-helt-navn a { color: inherit; text-decoration: none; }
.oo-helt-navn a::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }
.oo-helt-navn a:focus-visible { outline: none; }
.oo-helt:has(a:focus-visible) { outline: 3px solid #a020f0; outline-offset: 3px; }
.oo-helt-rolle { margin-top: 2px; color: var(--aksent); font-size: 14px; font-weight: 700; }
.oo-helt-tekst { margin-top: 8px; color: var(--pf-gra); font-size: 15px; line-height: 1.45; }
.oo-helter-lenke { margin-top: 36px; text-align: center; }

@media (min-width: 700px) {
	.oo-helt { flex-basis: calc(33.333% - 10px); }
}

@media (min-width: 1000px) {
	.oo-helt { flex-basis: calc(25% - 11px); }
}

@keyframes oo-svev { 50% { translate: 0 -6px; } }

@media (prefers-reduced-motion: reduce) {
	.oo-helt-scene img { animation: none; }
}