/* ══════════════════════════════════════════════════════════════
   K360 Cases  ·  assets/cases.css  ·  v1.0.0

   Samme CSS som det godkendte udkast. To bredder på hele siden:
   tekst står i læsebredden, alt med et billede i fylder spalten ud.
   ══════════════════════════════════════════════════════════════ */

.kc {
	--teal: #007083;
	--mint: #9CD2CB;
	--creme: #F5F2EA;
	--ink: #141414;
	--dim: rgba(20, 20, 20, .58);
	--linje: rgba(20, 20, 20, .1);
	--flade: #FFFFFF;
	--bund: #F1F0EE;
	--e: cubic-bezier(.23, 1, .32, 1);
	--bredde: 1400px;
	--spalte: 720px;
	--luft: 84px;
	--luft-overskrift: 26px;

	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ink);
	background-color: var(--creme);
}

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

.kc img { display: block; max-width: 100%; height: auto; }

.kc [hidden] { display: none !important; }

/* Temaets egne margener må ikke smitte af. Overskrifter står ikke på
   listen: de sætter selv deres margen længere nede, og en nulstilling
   her ville veje lige så tungt og gøre det til et spørgsmål om
   rækkefølge. Blokkene undtages af samme grund, bare omvendt: .kc
   figure vejer tungere end .kc-blok, fordi et element tæller med. */
.kc p,
.kc dl,
.kc dd,
.kc figure:not(.kc-blok),
.kc blockquote:not(.kc-blok) { margin: 0; }

/* Mange temaer runder alle billeder af. Vi nulstiller og sætter selv
   rundingen der hvor den hører hjemme. Derfor !important: det er den
   eneste måde at vinde over en temaregel vi ikke kender. */
.kc img { border-radius: 0 !important; }

.kc-figur img { border-radius: 14px !important; }

/* Rundingen sidder på feltet, ikke på de to billeder indeni. */
.kc-hero-bill img { border-radius: 0 !important; }

.kc-naeste img { border-radius: 10px !important; }

.kc-citat footer img { border-radius: 50% !important; }

.kc-kort img,
.kc-lille img,
.kc-galleri img { border-radius: 0 !important; }

/* ── Læsefremdrift ───────────────────────────────────────── */
.kc-fremdrift {
	position: sticky;
	top: 0;
	z-index: 30;
	height: 2px;
	background-color: transparent;
}

.kc-fremdrift span {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--teal);
	transition: width .1s linear;
}

/* ── Sti ─────────────────────────────────────────────────── */
.kc-sti {
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 56px 6px 0;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--dim);
}

.kc-sti a { color: var(--dim); text-decoration: none; transition: color .25s var(--e); }
.kc-sti b { font-weight: 500; color: var(--ink); }

/* ── Hero ────────────────────────────────────────────────── */
.kc-hero {
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 30px 3px 0;
}

/* Manchetten fylder hele bredden i hero'en. Overskriften har sin egen
   grænse på 45 tegn, som gælder begge steder. */
.kc-hero .kc-manchet { max-width: none; }

.kc h1 {
	max-width: 45ch;
	margin: 0;
	font-size: clamp(32px, 4.4vw, 48px);
	font-weight: 600;
	margin-bottom: var(--luft-overskrift);
	line-height: 1.06;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.kc-manchet {
	max-width: 58ch;
	margin: 20px 0 0;
	font-size: clamp(16.5px, 1.3vw, 19px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--dim);
	text-wrap: pretty;
}

/* To lag: en uskarp kopi der fylder feltet, og billedet selv ovenpå i
   fuld figur. Forholdet sidder på feltet og ikke på billederne, for de
   skal netop have lov til at være hvad de er. */
.kc-hero-bill {
	position: relative;
	margin: 40px 0 0;
	aspect-ratio: 30 / 8;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--creme);
}

.kc-hero-bag {
	position: absolute;
	inset: 0;
	display: block;
}

.kc-hero-bag img {
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Forstørret, ellers ville sløringen trække kanterne indad og
	   efterlade en lys rand hele vejen rundt. */
	transform: scale(1.2);
	filter: blur(26px) saturate(1.2) brightness(.92);
}

.kc-hero-for {
	position: relative;
	display: block;
	height: 100%;
}

.kc-hero-for img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Artiklen: spalte plus fakta ─────────────────────────── */
.kc-krop {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 60px;
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 0 26px 90px;
	align-items: start;
}

.kc-indhold { min-width: 0; }

/* ── Fakta, klæber med ───────────────────────────────────── */
.kc-fakta {
	position: sticky;
	top: var(--kc-top, 150px);
	padding: 22px 0 0;
	border-top: 1px solid var(--linje);
}

.kc-fakta h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ink);
}

.kc-fakta dl { margin: var(--luft-overskrift) 0 0; }

.kc-fakta-linje {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	font-size: 13.5px;
}

.kc-fakta-linje + .kc-fakta-linje { border-top: 1px solid var(--linje); }
.kc-fakta-linje dt { color: var(--dim); }
.kc-fakta-linje dd { margin: 0; font-weight: 500; text-align: right; }

/* En linje der endnu ikke er udfyldt. Vises kun for dem der kan
   rette casen, så en kunde aldrig læser "Ikke sat". */
.kc-fakta-linje.er-tom dd {
	font-weight: 400;
	font-style: italic;
	color: rgba(20, 20, 20, .38);
}

.kc-ydelser {
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--linje);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--dim);
}

.kc-ydelse + .kc-ydelse::before { content: " · "; }

.kc-fakta .kc-knap { margin-top: 20px; }

/* ── Blokkene ────────────────────────────────────────────── */
.kc .kc-blok {
	max-width: var(--spalte);
	margin: 0 0 var(--luft);
}

.kc .kc-blok:first-child { margin-top: var(--luft); }
.kc .kc-blok:last-child { margin-bottom: 0; }

.kc-overskrift {
	max-width: 22ch;
	margin: 0 0 var(--luft-overskrift);
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.kc .kc-blok p {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(20, 20, 20, .78);
	text-wrap: pretty;
}

.kc .kc-blok p:last-child { margin-bottom: 0; }

/* Billede i fuld spaltebredde, eller bredere end teksten. */
.kc-figur { margin: 0; }

.kc-figur img {
	width: 100%;
	border-radius: 14px;
	background-color: var(--creme);
}

.kc-figur figcaption {
	margin: 12px 2px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dim);
}

/* To bredder på hele siden, ikke flere: tekst står i læsebredden,
   alt med et billede i fylder spalten ud. */
.kc .kc-blok--bred { max-width: none; }
.kc-blok--bred > .kc-overskrift { max-width: 22ch; }

.kc .kc-blok--to {
	max-width: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.kc-blok--to img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Tekst ved siden af et billede. */
.kc .kc-blok--side {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 34px;
	align-items: center;
}

.kc-blok--side.er-vendt .kc-figur { order: -1; }
.kc-blok--side img { aspect-ratio: 4 / 3; object-fit: cover; }
.kc-blok--side h2.kc-overskrift { font-size: clamp(22px, 2vw, 28px); }
.kc-blok--side p { font-size: 16px; }

/* Citat. */
.kc .kc-citat {
	margin: 0 0 var(--luft);
	padding: 30px 0 0;
	border-top: 1px solid var(--linje);
}

.kc-citat p {
	margin: 0 0 18px;
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 400;
	line-height: 1.42;
	letter-spacing: -.02em;
	color: var(--ink);
	text-wrap: balance;
}

.kc-citat footer {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13.5px;
	color: var(--dim);
}

.kc-citat footer img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

.kc-citat footer b { display: block; font-weight: 600; color: var(--ink); }

/* Video. */
.kc-video {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--ink);
	cursor: pointer;
}

.kc-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .82; transition: opacity .4s var(--e), transform .8s var(--e); }

.kc-afspil {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .92);
	color: var(--ink);
	transition: transform .35s var(--e), background-color .3s var(--e);
}

.kc-afspil svg { width: 22px; height: 22px; margin-left: 3px; }

/* Nøgletal. */
.kc-tal {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 26px;
	padding: 24px 0 0;
	border-top: 1px solid var(--linje);
}

.kc-tal strong {
	display: block;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--ink);
}

.kc-tal span { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--dim); }

/* Galleri. */
.kc-galleri {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.kc-galleri button {
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--creme);
	cursor: pointer;
}

.kc-galleri img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .7s var(--e);
}

.kc-galleri button:nth-child(1) { grid-column: span 2; }
.kc-galleri button:nth-child(1) img { aspect-ratio: 2 / 1; }

/* ── Næste case ──────────────────────────────────────────── */
.kc-videre {
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 20px 26px 100px;
}

.kc-naeste {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 0;
	border-top: 1px solid var(--linje);
	border-bottom: 1px solid var(--linje);
	text-decoration: none;
	color: var(--ink);
}

.kc-naeste img {
	flex: 0 0 auto;
	width: 96px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
	background-color: var(--creme);
}

.kc-naeste-tekst {
	display: block;
	min-width: 0;
}

.kc-naeste-tekst span {
	display: block;
	margin: 0 0 4px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--dim);
}

.kc-naeste-tekst strong {
	display: block;
	max-width: 34ch;
	font-size: clamp(17px, 1.7vw, 21px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
	transition: color .3s var(--e);
}

.kc-naeste-pil {
	flex: 0 0 auto;
	margin-left: auto;
	width: 18px;
	height: 18px;
	color: var(--dim);
	transform: translateX(var(--px, 0px));
	transition: transform .35s var(--e), color .3s var(--e);
}


.kc-stribe {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.kc-lille {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--flade);
	text-decoration: none;
	color: var(--ink);
	transition: transform .3s var(--e);
}

.kc-lille img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.kc-lille-tekst { padding: 14px 16px 16px; }
.kc-lille-tekst b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.kc-lille-tekst span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--dim); }

.kc-knap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	border: 0;
	border-radius: 12px;
	background-color: var(--ink);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s var(--e), transform .25s var(--e);
}


.kc-knap svg { width: 14px; height: 14px; }

/* ── Oversigten ──────────────────────────────────────────── */
.kc-oversigt {
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 56px 3px 100px;
}

.kc-filtre {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 22px;
	margin: 26px 0;
	padding: 18px 2px 2px;
	border-top: 1px solid var(--linje);

	/* Én linje uanset hvor mange ydelser der kommer til. Er der ikke
	   plads, kan der skubbes til siden i stedet for at de brækker om. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.kc-filtre::-webkit-scrollbar { display: none; }

.kc-filtre button {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px solid transparent;
	background-color: transparent;
	color: var(--dim);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	cursor: pointer;
	transition: color .25s var(--e), border-color .25s var(--e);
}

.kc-filtre button.er-nu { color: var(--ink); border-bottom-color: var(--ink); }

.kc-gitter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	align-items: start;
	gap: 16px;
}

/* Murværk. Billederne beholder deres eget forhold, og det er dét der
   giver rytmen. Uden JavaScript er det et almindeligt gitter, og med
   JavaScript får hvert kort et rækkespænd der svarer til sin højde,
   så kortene låser sig ind i hinanden uden at rækkefølgen ændres.
   Det er forskellen på det her og en kolonneopdeling, hvor man læser
   nedad i stedet for henad. */
.kc-gitter.er-murvaerk {
	grid-auto-rows: 8px;
	row-gap: 0;
}

.kc-kort {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--flade);
	text-decoration: none;
	color: var(--ink);
	transition: transform .35s var(--e);
}

.kc-kort img {
	width: 100%;
	height: auto;
	transition: transform .8s var(--e);
}

.kc-kort--stor { grid-column: span 2; }

.kc-kort-tekst { padding: 18px 20px 22px; }
.kc-lille-tekst, .kc-kort-tekst { display: block; }

.kc-kort-tekst b {
	display: block;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.kc-kort-tekst p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--dim); }

/* ── Lightbox ────────────────────────────────────────────── */
.kc-lys {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 30px;
	background-color: rgba(20, 20, 20, .92);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--e), visibility .3s var(--e);
}

.kc-lys.er-aaben { opacity: 1; visibility: visible; }
.kc-lys img { max-width: 100%; max-height: 85vh; border-radius: 12px; }

.kc-lys-luk {
	position: absolute;
	top: 20px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
}

.kc-lys-luk svg { width: 16px; height: 16px; }

/* ── Indflyvning ─────────────────────────────────────────── */
.kc-ind { opacity: 0; transform: translateY(18px); }

.kc-ind.er-inde {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--e), transform .7s var(--e);
}

/* ── Mindre skærme ───────────────────────────────────────── */
@media (max-width: 1080px) {
	.kc-krop { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.kc-fakta { position: static; order: -1; }
	.kc-kort--stor { grid-column: auto; }
	.kc-gitter.er-murvaerk { grid-auto-rows: auto; row-gap: 16px; }
	.kc-gitter.er-murvaerk .kc-kort { grid-row: auto !important; }
}

@media (max-width: 720px) {

	/* Et 30:8-felt bliver en stribe på en telefon. */
	.kc-hero-bill { aspect-ratio: 16 / 10; }
	.kc-hero-bag img { filter: blur(18px) saturate(1.2) brightness(.92); }

	.kc-krop, .kc-videre, .kc-oversigt { padding-left: 18px; padding-right: 18px; }
	.kc-blok--side, .kc-blok--to { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.kc-blok--side.er-vendt .kc-figur { order: 0; }
	.kc-galleri { grid-template-columns: 1fr 1fr; }
	.kc-galleri button:nth-child(1) { grid-column: span 2; }
	.kc { --luft: 52px; --luft-overskrift: 20px; }
}


/* ── Når et billede mangler ──────────────────────────────── */
.kc-naeste-tom {
	display: block;
	width: 96px;
	height: 72px;
	border-radius: 10px;
	background-color: var(--creme);
}

.kc-kort .kc-naeste-tom,
.kc-lille .kc-naeste-tom {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 0;
}

/* ── Videoen når den spiller ─────────────────────────────── */
.kc-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ── Filtrene er links, ikke knapper ─────────────────────── */
.kc-filtre a {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0 0 3px;
	border-bottom: 1px solid transparent;
	color: var(--dim);
	font-size: 14.5px;
	text-decoration: none;
	transition: color .25s var(--e), border-color .25s var(--e);
}

.kc-filtre a.er-nu { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Fokus ───────────────────────────────────────────────── */
.kc a:focus-visible,
.kc button:focus-visible,
.kc-lys button:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
}

/* ── Mus ─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
	.kc-sti a:hover { color: var(--teal); }
	.kc-video:hover img { opacity: .7; transform: scale(1.02); }
	.kc-video:hover .kc-afspil { transform: scale(1.08); background-color: #fff; }
	.kc-galleri button:hover img { transform: scale(1.05); }
	.kc-naeste:hover { --px: 4px; }
	.kc-naeste:hover .kc-naeste-pil { color: var(--teal); }
	.kc-naeste:hover .kc-naeste-tekst strong { color: var(--teal); }
	.kc-lille:hover { transform: translateY(-3px); }
	.kc-knap:hover { transform: translateY(-2px); }
	.kc-filtre button:hover { color: var(--ink); }
	.kc-kort:hover { transform: translateY(-4px); }
	.kc-kort:hover img { transform: scale(1.05); }
	
	.kc-filtre a:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.kc-ind { opacity: 1; transform: none; }
}