/*
 * Prosjektarkiv og prosjektside — Permafrost 2026.
 *
 * Fargene, typografien og rutenettet følger designforslaget. Alt er scopet
 * under .pfp for ikke å lekke ut i resten av nettstedet, som fortsatt er
 * bygget i Elementor på Hello Elementor.
 */

.pfp {
	--pfp-bg: #f7f5f0;
	--pfp-ink: #232220;
	--pfp-ink-soft: #5b594f;
	--pfp-sage: #6e9a72;
	--pfp-sage-dark: #527457;
	--pfp-sage-tint: #e7eee4;
	--pfp-line: #e4e0d6;
	--pfp-card: #ffffff;

	background: var(--pfp-bg);
	color: var(--pfp-ink);
	color-scheme: light;
	font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

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

.pfp a {
	color: inherit;
	text-decoration: none;
}

.pfp h1,
.pfp h2,
.pfp h3 {
	font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
	margin: 0;
	letter-spacing: -0.01em;
}

.pfp img {
	max-width: 100%;
	display: block;
}

.pfp-wrap {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 40px;
}

.pfp-kicker {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pfp-sage-dark);
	font-weight: 700;
	margin-bottom: 10px;
}

/* ---------- Arkiv ---------- */

.pfp-arkiv {
	padding: 72px 0 100px;
}

.pfp-arkiv__hode {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.pfp-arkiv__hode h1 {
	font-size: 34px;
	font-weight: 700;
}

.pfp-arkiv__ingress {
	font-size: 16px;
	color: var(--pfp-ink-soft);
	max-width: 460px;
	margin: 10px 0 0;
}

.pfp-filter {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.pfp-filter a {
	border: 1px solid var(--pfp-line);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pfp-ink-soft);
	background: var(--pfp-card);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pfp-filter a:hover {
	border-color: var(--pfp-sage);
	color: var(--pfp-sage-dark);
}

.pfp-filter a.er-valgt {
	background: var(--pfp-ink);
	border-color: var(--pfp-ink);
	color: #fff;
}

.pfp-rutenett {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 180px;
	gap: 18px;
}

.pfp-rute {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: #ddd;
}

.pfp-rute img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pfp-rute:hover img {
	transform: scale(1.07);
}

.pfp-rute__tom {
	width: 100%;
	height: 100%;
	background: var(--pfp-sage-tint);
}

.pfp-rute__overlegg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(35, 34, 32, 0) 35%, rgba(24, 23, 21, 0.94) 100%);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
}

.pfp-rute:hover .pfp-rute__overlegg,
.pfp-rute:focus-within .pfp-rute__overlegg {
	opacity: 1;
	transform: translateY(0);
}

.pfp-rute__cat {
	color: #b9d6b7;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 6px;
}

.pfp-rute__overlegg h2 {
	color: #fff;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 6px;
}

.pfp-rute__overlegg p {
	color: #d8d6ce;
	font-size: 12.5px;
	line-height: 1.4;
	margin: 0 0 10px;
}

.pfp-rute__lenke {
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
}

.pfp-stor {
	grid-column: span 2;
	grid-row: span 2;
}

.pfp-hoy {
	grid-column: span 1;
	grid-row: span 2;
}

.pfp-liten {
	grid-column: span 1;
	grid-row: span 1;
}

.pfp-bred {
	grid-column: span 2;
	grid-row: span 1;
}

.pfp-tom {
	padding: 64px 0;
	color: var(--pfp-ink-soft);
	font-size: 17px;
}

.pfp-paginering {
	margin-top: 40px;
	display: flex;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
}

.pfp-paginering .page-numbers {
	border: 1px solid var(--pfp-line);
	border-radius: 999px;
	padding: 6px 14px;
	background: var(--pfp-card);
}

.pfp-paginering .page-numbers.current {
	background: var(--pfp-ink);
	border-color: var(--pfp-ink);
	color: #fff;
}

/* ---------- Prosjektside ---------- */

.pfp-prosjekt {
	padding-bottom: 80px;
}

.pfp-sti {
	padding: 26px 0 0;
	font-size: 13px;
	color: var(--pfp-ink-soft);
}

.pfp-sti a:hover {
	color: var(--pfp-sage-dark);
}

.pfp-hode {
	padding: 20px 0 36px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	border-bottom: 1px solid var(--pfp-line);
	flex-wrap: wrap;
}

.pfp-hode h1 {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.08;
	max-width: 640px;
}

.pfp-meta {
	display: flex;
	gap: 36px;
	flex-shrink: 0;
}

.pfp-meta__lbl {
	color: var(--pfp-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 6px;
}

.pfp-meta__val {
	font-weight: 600;
	font-size: 15px;
}

.pfp-hero {
	margin-top: 36px;
	border-radius: 8px;
	overflow: hidden;
	height: 520px;
	background: #ddd;
}

.pfp-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pfp-brodtekst {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	gap: 64px;
	padding: 64px 0 40px;
	align-items: start;
}

.pfp-brodtekst h2 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 18px;
}

.pfp-brodtekst p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--pfp-ink-soft);
	margin: 0 0 18px;
}

.pfp-fakta {
	background: var(--pfp-card);
	border: 1px solid var(--pfp-line);
	border-radius: 8px;
	padding: 28px;
}

.pfp-fakta h2 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pfp-sage-dark);
	font-weight: 700;
	margin-bottom: 20px;
}

.pfp-fakta__rad {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pfp-line);
	font-size: 14px;
}

.pfp-fakta__rad:last-child {
	border-bottom: none;
}

.pfp-fakta__k {
	color: var(--pfp-ink-soft);
}

.pfp-fakta__v {
	font-weight: 600;
	text-align: right;
}

.pfp-galleri {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	padding-bottom: 24px;
}

.pfp-galleri__boks {
	border-radius: 8px;
	overflow: hidden;
	height: 340px;
	background: #ddd;
}

.pfp-galleri__boks img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pfp-neste {
	border-top: 1px solid var(--pfp-line);
	margin-top: 40px;
	padding: 48px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.pfp-neste__lbl {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pfp-ink-soft);
	font-weight: 600;
	margin-bottom: 8px;
}

.pfp-neste h2 {
	font-size: 22px;
	font-weight: 700;
}

.pfp-neste__lenke {
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1.5px solid var(--pfp-ink);
	padding-bottom: 2px;
}

.pfp-neste__lenke:hover {
	color: var(--pfp-sage-dark);
	border-color: var(--pfp-sage-dark);
}

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

@media (max-width: 1024px) {
	.pfp-rutenett {
		grid-template-columns: repeat(2, 1fr);
	}

	.pfp-stor,
	.pfp-bred {
		grid-column: span 2;
	}

	.pfp-hoy {
		grid-column: span 1;
	}

	.pfp-brodtekst {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.pfp-hode h1 {
		font-size: 34px;
	}

	.pfp-hero {
		height: 380px;
	}
}

@media (max-width: 640px) {
	.pfp-wrap {
		padding: 0 20px;
	}

	.pfp-rutenett {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	.pfp-stor,
	.pfp-bred,
	.pfp-hoy,
	.pfp-liten {
		grid-column: span 1;
		grid-row: span 1;
	}

	/*
	 * Teksten flyttes ut av bildet — samme grep som på forsiden.
	 *
	 * Uten mus finnes det ingen hover, så overlegget måtte stå permanent på, og
	 * da lå tittelen oppå motivet på hvert eneste kort. Kortet blir en vanlig
	 * kolonne i stedet: bilde øverst, tekst under, på kortflaten.
	 */
	.pfp-rutenett {
		grid-auto-rows: auto;
	}

	.pfp-rute {
		display: flex;
		flex-direction: column;
		background: var(--pfp-card);
		border: 1px solid var(--pfp-line);
	}

	.pfp-rute img {
		height: 200px;
		flex-shrink: 0;
	}

	.pfp-rute:hover img {
		transform: none;
	}

	.pfp-rute__overlegg {
		position: static;
		inset: auto;
		background: none;
		opacity: 1;
		transform: none;
		padding: 16px 18px 18px;
	}

	.pfp-rute__cat {
		color: var(--pfp-sage-dark);
	}

	.pfp-rute__overlegg h2 {
		color: var(--pfp-ink);
	}

	.pfp-rute__overlegg p {
		color: var(--pfp-ink-soft);
	}

	.pfp-rute__lenke {
		color: var(--pfp-ink);
	}

	.pfp-galleri {
		grid-template-columns: 1fr;
	}

	.pfp-galleri__boks {
		height: 260px;
	}

	.pfp-hero {
		height: 260px;
	}

	.pfp-meta {
		gap: 24px;
	}
}


/* ---------- Mørk modus ----------
 *
 * Temaet stempler data-theme på <html>. Verdiene her speiler temaets egne,
 * men pluginet må kunne stå på egne ben hvis et annet tema tas i bruk — derfor
 * gjentas de i stedet for å arves.
 */

:root[data-theme="dark"] .pfp {
	--pfp-bg: #1b1a18;
	--pfp-ink: #edeae1;
	--pfp-ink-soft: #a8a499;
	--pfp-sage: #7fae84;
	--pfp-sage-dark: #93c098;
	--pfp-sage-tint: #2a3329;
	--pfp-line: #34322d;
	--pfp-card: #232220;
	color-scheme: dark;
}

:root[data-theme="dark"] .pfp-rute,
:root[data-theme="dark"] .pfp-hero,
:root[data-theme="dark"] .pfp-galleri__boks {
	background: #2a2925;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .pfp {
		--pfp-bg: #1b1a18;
		--pfp-ink: #edeae1;
		--pfp-ink-soft: #a8a499;
		--pfp-sage: #7fae84;
		--pfp-sage-dark: #93c098;
		--pfp-sage-tint: #2a3329;
		--pfp-line: #34322d;
		--pfp-card: #232220;
		color-scheme: dark;
	}

	:root:not([data-theme="light"]) .pfp-rute,
	:root:not([data-theme="light"]) .pfp-hero,
	:root:not([data-theme="light"]) .pfp-galleri__boks {
		background: #2a2925;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfp-rute img,
	.pfp-rute__overlegg {
		transition: none;
	}
}

/* Antallet ved siden av årstallet i filterraden. */
.pfp-filter__antall {
	display: inline-block;
	margin-left: 5px;
	font-size: 11px;
	font-weight: 600;
	color: var(--pfp-ink-soft);
	opacity: 0.7;
}

.pfp-filter a.er-valgt .pfp-filter__antall {
	color: inherit;
	opacity: 0.65;
}

/* ---------- Bildevisning ----------
 *
 * Et klikk pa et bilde apner det i full opplosning. Hvert bilde har ogsa to
 * sma knapper - last ned og del - som kommer fram nar man er innom bildet.
 */

.pfp-bildeboks {
	position: relative;
}

.pfp-kan-apnes {
	cursor: zoom-in;
}

.pfp-bildeverktoy {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 6px;
	opacity: 0;
	transition: opacity 0.18s ease;
}

/*
 * Knappene vises nar man er innom bildet - men de skal ogsa fram nar noen
 * tabber seg til dem, ellers finnes de ikke uten mus. Og pa berorings-
 * skjermer finnes det ingen hover i det hele tatt, sa der star de alltid pa.
 */
.pfp-bildeboks:hover .pfp-bildeverktoy,
.pfp-bildeverktoy:focus-within {
	opacity: 1;
}

@media (hover: none) {
	.pfp-bildeverktoy {
		opacity: 1;
	}
}

.pfp-bildeverktoy__knapp {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 19, 0.62);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.pfp-bildeverktoy__knapp:hover,
.pfp-bildeverktoy__knapp:focus-visible {
	background: rgba(20, 20, 19, 0.85);
	transform: scale(1.08);
}

.pfp-bildeverktoy__knapp svg {
	width: 17px;
	height: 17px;
	display: block;
}

.pfp-bildeverktoy__knapp.er-kopiert {
	background: #527457;
}

.pfp-bildeverktoy__knapp.er-feil {
	background: #b4463c;
}

/* ---------- Selve visningen ---------- */

.pfp-lupe {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px;
	background: rgba(12, 12, 11, 0.94);
}

.pfp-lupe[hidden] {
	display: none;
}

/* Siden bak skal ikke kunne rulle mens visningen star apen. */
body.pfp-lupe-aapen {
	overflow: hidden;
}

.pfp-lupe__ramme {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.pfp-lupe__ramme img {
	max-width: 100%;
	max-height: calc(100vh - 110px);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.pfp-lupe__tekst {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
}

.pfp-lupe__lukk,
.pfp-lupe__pil {
	border: 0;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	transition: background 0.18s ease;
}

.pfp-lupe__lukk:hover,
.pfp-lupe__pil:hover,
.pfp-lupe__lukk:focus-visible,
.pfp-lupe__pil:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

.pfp-lupe__lukk {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 42px;
	height: 42px;
	font-size: 26px;
	line-height: 1;
}

.pfp-lupe__pil {
	width: 46px;
	height: 46px;
	font-size: 28px;
	line-height: 1;
}

@media (max-width: 700px) {
	.pfp-lupe {
		padding: 16px;
	}

	/* Pa liten skjerm tar pilene plass fra bildet. Sveip og tastatur finnes
	   ikke her, men bildene ligger like under - man lukker og trykker videre. */
	.pfp-lupe__pil {
		position: absolute;
		bottom: 20px;
		width: 44px;
		height: 44px;
		background: rgba(255, 255, 255, 0.16);
	}

	.pfp-lupe__pil--forrige { left: 20px; }
	.pfp-lupe__pil--neste { right: 20px; }

	.pfp-lupe__ramme img {
		max-height: calc(100vh - 170px);
	}
}