/*
 * Purview how-tos — videobibliotek
 *
 * Alle klasser og variabler har prefiks pvh-, og variablene ligger på .pvh-lib
 * og .pvh-single i stedet for :root, slik at ingenting lekker ut i temaet.
 *
 * Begge må ha dem. Enkeltsidene er ikke pakket i .pvh-lib, og uten paletten der
 * blir hver var() ugyldig: en regel som «border-left: 3px solid var(--pvh-accent)»
 * faller da tilbake til border-style none, altså ingen kant i det hele tatt — og
 * det skjer uten en eneste feilmelding.
 *
 * Mørk modus følger nettstedets egen bryter (html[data-mode="dark"]). Uten
 * JavaScript finnes ikke attributtet, og da faller vi tilbake på operativsystemet.
 */

.pvh-lib,
.pvh-single {
	--pvh-bg: #f4f6f8;
	--pvh-surface: #ffffff;
	--pvh-ink: #16222c;
	--pvh-muted: #5b6b78;
	--pvh-line: #d7dee5;
	--pvh-navy: #24406b;
	--pvh-accent: #2450c9;
	--pvh-accent-soft: #e3eafb;
	--pvh-warn: #8a5a00;
	--pvh-warn-soft: #fbefd6;
	--pvh-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--pvh-head: var(--font-head, inherit);

	color: var(--pvh-ink);
}

/* Layouten gjelder bare galleriet. Enkeltsidene arver paletten over, men har
   sin egen flyt og skal ikke ha galleriets rutenett og maksbredde. */
.pvh-lib {
	display: grid;
	gap: 36px;
	margin-inline: auto;
	max-width: 1240px;
}

html[data-mode="dark"] .pvh-lib,
html[data-mode="dark"] .pvh-single {
	--pvh-bg: #0f171d;
	--pvh-surface: #17222b;
	--pvh-ink: #e6eef3;
	--pvh-muted: #9aabb8;
	--pvh-line: #2c3b47;
	--pvh-navy: #9fb6d6;
	--pvh-accent: #8ea8ff;
	--pvh-accent-soft: #1d2a52;
	--pvh-warn: #f2c46b;
	--pvh-warn-soft: #3a2c10;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-mode]) .pvh-lib {
		--pvh-bg: #0f171d;
		--pvh-surface: #17222b;
		--pvh-ink: #e6eef3;
		--pvh-muted: #9aabb8;
		--pvh-line: #2c3b47;
		--pvh-navy: #9fb6d6;
		--pvh-accent: #8ea8ff;
		--pvh-accent-soft: #1d2a52;
		--pvh-warn: #f2c46b;
		--pvh-warn-soft: #3a2c10;
		color-scheme: dark;
	}
}

/* Galleriet trenger hele bredden. Sidefeltet er skjult bare på disse sidene. */
@media (min-width: 992px) {
	body.pvh-page .theme-wrap #secondary {
		display: none;
	}

	body.pvh-page .theme-wrap #primary {
		width: 100%;
		max-width: none;
		flex-grow: 1;
	}
}

/*
 * Galleriet som forside trenger containeren temaet hopper over.
 *
 * Blog Articles åpner sin innholdscontainer bare når siden ikke er forsiden:
 *
 *     if ( ! is_front_page() || is_home() ) {
 *         <div id="content" class="site-content theme-wrapper">
 *
 * Forutsetningen er at forsiden består av temaets egne seksjoner, som har hver
 * sin container. Viser forsiden i stedet sitt eget sideinnhold, havner alt
 * utenfor — uten gutter, helt ut i vinduskanten, mens menyen over ligger pent
 * inne. Her gir vi #primary nøyaktig samme mål som .theme-wrapper har ellers,
 * slik at forsiden flukter med resten av nettstedet.
 *
 * Avgrenset til .home: på en vanlig side finnes containeren allerede, og da
 * skal vi ikke legge en til.
 */
body.pvh-page.home #primary {
	box-sizing: border-box;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/*
 * Galleriet fyller containeren, så kantene faller sammen.
 *
 * Gjelder alle sider som viser biblioteket, ikke bare forsiden: sidefeltet er
 * skjult på dem alle, så containeren er like bred overalt. Var dette avgrenset
 * til .home, ble artikkelutlistingen stående igjen på 1240px og sentrert — og
 * da lå hyllene synlig inne fra sidetittelen over dem.
 */
body.pvh-page #primary .pvh-lib {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Filtre */
.pvh-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pvh-lib .pvh-chip {
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--pvh-line);
	background: var(--pvh-surface);
	color: var(--pvh-ink);
	cursor: pointer;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	width: auto;
}

.pvh-lib .pvh-chip[aria-pressed="true"] {
	background: var(--pvh-ink);
	color: var(--pvh-bg);
	border-color: var(--pvh-ink);
}

.pvh-chip:focus-visible,
.pvh-btn:focus-visible,
.pvh-thumb:focus-visible,
.pvh-seg button:focus-visible {
	outline: 2px solid var(--pvh-accent);
	outline-offset: 2px;
}

/* Hyller */
.pvh-shelves {
	display: grid;
	gap: 24px;
}

/*
 * Hver del rammes inn av en svak toning av tekstfargen. Fordi den er
 * gjennomsiktig, blir båndet automatisk litt mørkere enn siden i lys modus og
 * litt lysere i mørk — uten to sett med faste farger å holde i synk.
 */
/*
 * Hver del har sin egen fargetone.
 *
 * Tonen kommer fra PHP som --pvh-part-hue, mens metning og lyshet settes her.
 * Da leses de elleve delene som én familie i stedet for en regnbue, og de kan
 * justeres for lys og mørk modus på ett sted hver.
 */
.pvh-shelf {
	/* hsl() foerst som reserve for nettlesere uten oklch(). */
	--pvh-part: hsl(var(--pvh-part-hue, 255) 45% 38%);
	--pvh-part: oklch(.44 .13 var(--pvh-part-hue, 255));
	--pvh-part-soft: color-mix(in srgb, var(--pvh-part) 12%, transparent);

	display: grid;
	gap: 16px;
	padding: 24px 24px 28px;
	border-radius: 14px;
	border-top: 3px solid var(--pvh-part);
	background: rgba(22, 34, 44, .045);
	background: color-mix(in srgb, var(--pvh-ink) 4.5%, transparent);
}

html[data-mode="dark"] .pvh-shelf {
	--pvh-part: hsl(var(--pvh-part-hue, 255) 60% 70%);
	--pvh-part: oklch(.79 .12 var(--pvh-part-hue, 255));
	--pvh-part-soft: color-mix(in srgb, var(--pvh-part) 16%, transparent);
}

.pvh-shelf[hidden] {
	display: none;
}

/*
 * Rutenett, ikke flex-rad med ombrekking.
 *
 * «Part N» og tittelen skal stå på første linje, beskrivelsen på neste. Med en
 * flex-rad ble det tilfeldig: elementene la seg etter hverandre så lenge det var
 * plass, så en lang tittel dyttet beskrivelsen ned mens en kort lot den bli
 * stående ved siden av.
 *
 * flex-basis: 100% på beskrivelsen løser det ikke. Flex regner linjebrytingen
 * ut fra elementets hypotetiske størrelse, og den ble den gang klemt av en
 * max-width på beskrivelsen — altså rundt 630 px, ikke full bredde, så den fikk
 * fortsatt plass ved siden av tittelen. Et rutenett har ekte rader, og da
 * spiller verken tittelens lengde eller beskrivelsens bredde noen rolle.
 */
.pvh-shelf-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 6px 14px;
}

.pvh-shelf-head h2 {
	margin: 0;
	font-family: var(--pvh-head);
	font-size: 22px;
	line-height: 1.25;
	color: var(--pvh-ink);
}

/*
 * Beskrivelsen skal alltid stå på egen linje, under tittelen.
 *
 * Raden over er en flex-rad som brytes ved behov, så «Part N», tittelen og
 * beskrivelsen la seg etter hverandre så lenge det var plass. Resultatet var
 * tilfeldig: en lang tittel som «eDiscovery: map out the old and sensitive data»
 * dyttet beskrivelsen ned på egen linje, mens en kort som «Pit stop» fikk den
 * stående ved siden av. Full bredde gjør oppsettet likt for alle hyllene,
 * uavhengig av hvor lang tittelen er.
 */
/* Beskrivelsen spenner over begge kolonnene, altså sin egen rad under tittelen. */
.pvh-shelf-head p {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--pvh-muted);
}

/* «Part N» bærer delens farge, som en liten etikett foran tittelen. */
.pvh-step {
	justify-self: start;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--pvh-part-soft);
	font-family: var(--pvh-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--pvh-part);
}

/* Kort */
.pvh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px 20px;
}

/*
 * Knapperadene skal stå på linje på tvers av kortene.
 *
 * Kortene i en rad er allerede like høye — rutenettet strekker dem. Men da
 * innholdet lå pakket mot toppen, havnet knappene rett under teksten, og en
 * tittel eller undertekst som brøt over en ekstra linje dyttet dem nedover.
 * Resultatet var en ujevn trapp av knapperader.
 *
 * Kortet er derfor en kolonne, og knapperaden skyves til bunnen med auto-marg.
 * Det løser problemet uavhengig av hvor lang teksten er, som er mer robust enn
 * å holde alle titler og undertekster like lange.
 */
.pvh-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.pvh-card > .pvh-actions,
.pvh-card > .pvh-soon {
	margin-top: auto;
}

.pvh-lib .pvh-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--pvh-line);
	background: var(--pvh-surface);
	padding: 0;
	margin: 0;
	cursor: pointer;
	min-height: 0;
	line-height: 0;
}

.pvh-lib .pvh-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 0;
	transition: transform .25s;
}

.pvh-lib .pvh-thumb:hover img {
	transform: scale(1.03);
}

.pvh-lib .pvh-thumb-empty {
	display: grid;
	place-items: center;
	cursor: default;
	color: var(--pvh-muted);
	font-weight: 600;
	background: repeating-linear-gradient(135deg, var(--pvh-surface) 0 12px, var(--pvh-bg) 12px 24px);
}

.pvh-num,
.pvh-dur {
	position: absolute;
	font-family: var(--pvh-mono);
	font-size: 12px;
	line-height: 1.5;
	border-radius: 4px;
}

.pvh-num {
	left: 8px;
	top: 8px;
	padding: 2px 7px;
	background: var(--pvh-navy);
	color: var(--pvh-bg);
}

.pvh-dur {
	right: 8px;
	bottom: 8px;
	padding: 2px 6px;
	background: rgba(10, 16, 22, .82);
	color: #ffffff;
}

.pvh-title {
	margin: 0;
	font-family: var(--pvh-head);
	font-size: 16px;
	line-height: 1.3;
	color: var(--pvh-ink);
}

/*
 * Tittelen er en lenke til videoens egen side, men den skal ikke se ut som en.
 *
 * Temaets a { color: royalblue } med understrek slo gjennom her og ga hvert
 * kort en skarp blå overskrift som stakk ut av paletten. Kortet signaliserer
 * allerede at det er klikkbart — miniatyrbildet og Watch-knappen — så tittelen
 * kan hvile i samme farge som resten av teksten og først vise seg som lenke når
 * musen er over.
 */
.pvh-title a {
	color: inherit;
	text-decoration: none;
}

.pvh-title a:hover,
.pvh-title a:focus-visible {
	color: var(--pvh-accent);
	text-decoration: underline;
}

.pvh-sub {
	margin: 0;
	color: var(--pvh-muted);
	font-size: 14px;
	line-height: 1.5;
}

.pvh-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pvh-tag {
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--pvh-accent-soft);
	color: var(--pvh-accent);
}

.pvh-tag.pvh-lic {
	background: var(--pvh-warn-soft);
	color: var(--pvh-warn);
}

.pvh-soon {
	font-size: 12px;
	font-weight: 600;
	color: var(--pvh-muted);
}

.pvh-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pvh-lib .pvh-btn,
.pvh-player .pvh-btn {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--pvh-line);
	background: var(--pvh-surface);
	color: var(--pvh-ink);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	width: auto;
	min-height: 0;
}

.pvh-lib .pvh-btn:hover,
.pvh-player .pvh-btn:hover {
	border-color: var(--pvh-ink);
	color: var(--pvh-ink);
}

/*
 * Watch er hovedvalget og skal skille seg ut i aksentfargen. Tekstfargen følger
 * --pvh-bg: mørk aksent med lys tekst i lys modus, lys aksent med mørk tekst i mørk.
 */
/*
 * Watch bruker den dempede marineblå, ikke aksentfargen.
 *
 * Aksenten (#2450c9) er en kraftig kongeblå. Den fungerer på én knapp, men
 * galleriet viser førti av dem samtidig, og da blir siden urolig. Marineblå er
 * samme farge som nummerlappen på miniatyrbildet, så kortet henger sammen, og
 * knappen skiller seg fortsatt tydelig fra Step through.
 *
 * Aksenten beholdes der den er sjelden: fokusmarkering og merkelapper.
 */
.pvh-lib .pvh-btn-primary,
.pvh-lib .pvh-btn-primary:hover {
	background: var(--pvh-navy);
	border-color: var(--pvh-navy);
	color: var(--pvh-bg);
}

.pvh-note {
	max-width: 70ch;
	color: var(--pvh-muted);
	font-size: 14px;
	border-top: 1px solid var(--pvh-line);
	padding-top: 18px;
	margin: 0;
}

.pvh-empty {
	padding: 14px 16px;
	border: 1px dashed var(--pvh-line);
	border-radius: 8px;
	color: var(--pvh-muted);
}

/* Spiller */
.pvh-player[hidden] {
	display: none !important;
}

.pvh-player {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(8, 12, 16, .72);
	display: grid;
	place-items: center;
	/* Blir panelet høyere enn skjermen, skal det kunne rulles i stedet for å kuttes. */
	overflow: auto;
	overscroll-behavior: contain;
	padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

/*
 * Panelet er en kolonne der bare beskrivelsen kan rulles.
 *
 * Skjermen, tittelraden og metalinjen må alltid være synlige: kontrollene til
 * den interaktive visningen ligger nederst i skjermen, og forsvinner de ut av
 * vinduet, er visningen i praksis ubrukelig. Beskrivelsen er derimot ren lesetekst
 * og tåler å rulles. Uten denne fordelingen vokser teksten panelet ut av vinduet
 * på lave skjermer — og jo smalere panelet blir, jo flere linjer brytes teksten
 * over, så det hjelper ikke å krympe bredden.
 */
.pvh-panel {
	width: min(1040px, 100%);
	max-height: calc(100vh - 32px);
	background: var(--pvh-surface, #fff);
	color: var(--pvh-ink, #16222c);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/*
 * Skjermen kan krympe. I videomodus har den bare aspect-ratio 16/9, og på en
 * bred, lav skjerm blir den høyere enn hele panelet — da ville tittelraden og
 * Lukk-knappen blitt klippet bort. Videoen har object-fit: contain, så en lavere
 * skjerm gir bare svarte kanter, ikke beskåret bilde.
 *
 * I Step through setter JavaScript en eksplisitt høyde og slår av krympingen
 * (flex-shrink: 0), siden den høyden er regnet ut nøyaktig for å gi plass til
 * kontrollradene i den interaktive siden.
 */
.pvh-panel > .pvh-screen {
	flex: 0 1 auto;
	min-height: 0;
}

.pvh-panel > .pvh-pbar,
.pvh-panel > .pvh-meta {
	flex: 0 0 auto;
}

.pvh-panel > .pvh-text {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Tekstalternativet (WCAG 1.2.1). Dempet, men ikke skjult — den skal kunne
   leses av den som lurer paa hvorfor videoen er stum. */
.pvh-alt-note {
	margin: 0;
	padding: 0 16px 12px;
	color: var(--pvh-muted);
	font-size: 13px;
	line-height: 1.5;
}

.pvh-alt-note[hidden] {
	display: none;
}

.pvh-single .pvh-alt-note {
	padding-left: 0;
	padding-right: 0;
}

/*
 * Lesetips: artiklene som hører til videoen.
 *
 * Disse sto tidligere som en punktliste med små, understrekningsfrie lenker.
 * Da leste de som brødtekst, og de ble oversett — nettopp den koblingen mellom
 * video og artikkel som er hele poenget. Hver artikkel er derfor et eget felt
 * med ramme, farget venstrekant og en pil: en flate som ser ut som noe man
 * trykker på, ikke som en setning man leser forbi.
 */
.pvh-reads {
	padding: 0 16px 16px;
}

.pvh-reads[hidden] {
	display: none;
}

.pvh-reads h5,
.pvh-reads h2 {
	margin: 0 0 10px;
	font-family: var(--pvh-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pvh-ink);
}

/*
 * Temaet treffer lista på enkeltsidene fra to hold: blocks.min.css gir den
 * kulepunkt og innrykk, og .single .site-main article .entry-content ul legger
 * på padding-left. Den siste har fire klasser, så selektoren her må være minst
 * like dyp — ellers står prikkene igjen til venstre for feltene.
 */
.pvh-reads ul,
.site-main article .entry-content .pvh-reads ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.pvh-reads li,
.site-main article .entry-content .pvh-reads li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvh-reads li::marker {
	content: "";
}

.pvh-reads a {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Fyller radhøyden, slik at kort ved siden av hverandre blir like høye
	   selv når én tittel går over flere linjer. */
	height: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--pvh-line);
	border-left: 3px solid var(--pvh-accent);
	border-radius: 8px;
	background: var(--pvh-surface);
	color: var(--pvh-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

/* Pilen markerer at lenken fører ut av spilleren, til en artikkel. */
.pvh-reads a::after {
	content: "\2192";
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 16px;
	color: var(--pvh-accent);
}

.pvh-reads a:hover,
.pvh-reads a:focus-visible {
	border-color: var(--pvh-accent);
	background: var(--pvh-accent-soft);
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.pvh-reads a {
		transition: none;
	}

	.pvh-reads a:hover,
	.pvh-reads a:focus-visible {
		transform: none;
	}
}

/*
 * Lav skjerm — i praksis en telefon holdt på tvers.
 *
 * Da er det flaten og kontrollene som teller. Metalinjen og tekstblokken må vike,
 * ellers presser de tittelraden og Lukk-knappen ut av vinduet, og leseren sitter
 * igjen uten synlig vei ut av overlegget. Teksten er tilbake så snart telefonen
 * snus, og den står uansett på kortet i galleriet.
 */
@media (max-height: 520px) {
	.pvh-panel > .pvh-meta,
	.pvh-panel > .pvh-text {
		display: none;
	}

	/*
	 * Tittelraden slankes også. Tittelen kan trygt vike — leseren trykket nettopp
	 * på kortet og vet hva hen åpnet.
	 *
	 * «Open in new tab» blir derimot stående, og er viktigere her enn ellers: i
	 * en ny fane får den interaktive siden hele vinduet i stedet for å dele det
	 * med tittelraden, og det er den eneste måten å se den ordentlig på en så lav
	 * skjerm. Se kommentaren i measureFrame() om hvorfor.
	 */
	.pvh-pbar {
		padding: 8px 12px;
		gap: 8px;
	}

	.pvh-pbar h4 {
		display: none;
	}

	.pvh-seg button,
	.pvh-pbar .pvh-btn {
		padding: 6px 10px;
		font-size: 13px;
	}
}

.pvh-screen {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0f171d;
}

.pvh-screen video,
.pvh-screen iframe,
.pvh-screen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	object-fit: contain;
	display: block;
}

.pvh-fallback {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(15, 23, 29, .9);
	color: #e6eef3;
	font-size: 14px;
}

.pvh-pbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	flex-wrap: wrap;
}

.pvh-pbar h4 {
	margin: 0;
	font-family: var(--pvh-head);
	font-size: 17px;
	line-height: 1.3;
	flex: 1 1 260px;
	min-width: 0;
}

.pvh-seg {
	display: inline-flex;
	border: 1px solid var(--pvh-line);
	border-radius: 8px;
	overflow: hidden;
}

.pvh-seg button {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 6px 12px;
	border: 0;
	background: var(--pvh-surface);
	color: var(--pvh-ink);
	cursor: pointer;
}

.pvh-seg button[aria-pressed="true"] {
	background: var(--pvh-ink);
	color: var(--pvh-bg);
}

/* Nivå · målgruppe · lisens. Står over beskrivelsen, dempet og i små bokstaver. */
.pvh-meta {
	margin: 0;
	padding: 0 16px 10px;
	color: var(--pvh-muted, #5b6b78);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.5;
}

.pvh-meta[hidden] {
	display: none;
}

.pvh-desc {
	margin: 0;
	padding: 0 16px 16px;
	max-width: 72ch;
	color: var(--pvh-muted, #5b6b78);
	font-size: 14px;
	line-height: 1.6;
}

.pvh-desc[hidden] {
	display: none;
}

/* Spilleren arver ikke variablene fra .pvh-lib, siden den ligger utenfor. */
.pvh-player {
	--pvh-surface: #ffffff;
	--pvh-ink: #16222c;
	--pvh-muted: #5b6b78;
	--pvh-bg: #f4f6f8;
	--pvh-line: #d7dee5;
	--pvh-accent: #2450c9;
	--pvh-head: var(--font-head, inherit);
}

html[data-mode="dark"] .pvh-player {
	--pvh-surface: #17222b;
	--pvh-ink: #e6eef3;
	--pvh-muted: #9aabb8;
	--pvh-bg: #0f171d;
	--pvh-line: #2c3b47;
	--pvh-accent: #8ea8ff;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-mode]) .pvh-player {
		--pvh-surface: #17222b;
		--pvh-ink: #e6eef3;
		--pvh-muted: #9aabb8;
		--pvh-bg: #0f171d;
		--pvh-line: #2c3b47;
		--pvh-accent: #8ea8ff;
		color-scheme: dark;
	}
}

/* Mobil: ett kort i bredden, ingen vannrett rulling */
@media (max-width: 600px) {
	.pvh-lib {
		gap: 28px;
	}

	.pvh-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.pvh-shelves {
		gap: 16px;
	}

	.pvh-shelf {
		padding: 18px 16px 22px;
		border-radius: 12px;
	}

	.pvh-shelf-head {
		gap: 6px 12px;
	}

	.pvh-pbar {
		padding: 12px;
		gap: 10px;
	}

	.pvh-pbar h4 {
		flex: 1 1 100%;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pvh-thumb img {
		transition: none;
	}

	.pvh-thumb:hover img {
		transform: none;
	}
}

/* ------------------------------------------------------------------ Enkeltside
 * Videoens egen side. Arver variablene fra .pvh-lib ikke, siden den står
 * utenfor galleriet, så de settes her.
 */
.pvh-single {
	--pvh-ink: #16222c;
	--pvh-muted: #5b6b78;
	--pvh-line: #d7dee5;
	--pvh-surface: #ffffff;
	--pvh-bg: #f4f6f8;
	--pvh-navy: #24406b;
	--pvh-head: var(--font-head, inherit);
}

html[data-mode="dark"] .pvh-single {
	--pvh-ink: #e6eef3;
	--pvh-muted: #9aabb8;
	--pvh-line: #2c3b47;
	--pvh-surface: #17222b;
	--pvh-bg: #0f171d;
	--pvh-navy: #9fb6d6;
}

.pvh-single-screen {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0f171d;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 20px;
}

.pvh-single-screen video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pvh-single-sub {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.4;
	color: var(--pvh-muted);
}

.pvh-single .pvh-meta {
	padding: 0;
	margin: 0 0 16px;
}

.pvh-single-desc {
	margin: 0 0 22px;
	line-height: 1.7;
}

.pvh-single-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}

.pvh-single .pvh-btn {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid var(--pvh-line);
	background: var(--pvh-surface);
	color: var(--pvh-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.pvh-single .pvh-btn-primary {
	background: var(--pvh-navy);
	border-color: var(--pvh-navy);
	color: var(--pvh-bg);
}

.pvh-single .pvh-reads {
	padding: 0;
	border-top: 1px solid var(--pvh-line);
	padding-top: 18px;
}

.pvh-single .pvh-reads h2 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--pvh-muted);
}

/* ------------------------------------------------------------- Artikkelkort
 * Artiklene bruker galleriets bånd og kort. Forskjellene er få: ingen
 * nummerlapp, ingen varighet, og miniatyrbildet er et artikkelbilde i stedet
 * for et 16:9-stillbilde fra en video.
 */
.pvh-articles .pvh-thumb {
	aspect-ratio: 3 / 2;
}

.pvh-articles .pvh-card .pvh-sub {
	flex: 1 1 auto;
}

/* Uten knapperad er det tittelen og ingressen som bærer kortet. */
.pvh-articles .pvh-title {
	font-size: 17px;
}