/* ══════════════════════════════════════════════════════════════
   K360 Cases  ·  assets/karousel.css  ·  case-karousel

   En række kort der kan skubbes til siden. Sporet er et almindeligt
   element med scroll-snap, så det virker med fingeren uden JavaScript.
   Pilene, tælleren og linjen i bunden lægges ovenpå af karousel.js.

   Tokens og skrift arves fra cases.css via .kc. Karousellen står på
   undersider udenfor casene, så den sætter ikke selv nogen baggrund
   medmindre man beder om det.
   ══════════════════════════════════════════════════════════════ */

.kc.kc-kar {
	/* Kolonnerne på en stor skærm. Shortcoden sætter --kc-kar-n-stor
	   inline, så mindre skærme stadig kan overtage nedenfor. Elementor
	   sætter --kc-kar-n direkte, pr. skærmstørrelse. */
	--kc-kar-n: var(--kc-kar-n-stor, 3);
	--kc-kar-gab: 16px;
	--kc-kar-forhold: 4 / 3;
	--kc-kar-runding: 14px;
	--kc-kar-flade: var(--flade);

	position: relative;
	max-width: var(--bredde);
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.kc-kar--bg-creme,
.kc-kar--bg-hvid {
	padding: 40px 40px 34px;
	border-radius: 20px;
}

.kc.kc-kar--bg-creme { background-color: var(--creme); }
.kc.kc-kar--bg-hvid { background-color: var(--flade); }
.kc-kar--flade-creme { --kc-kar-flade: var(--creme); }

/* ── Toppen: overskrift til venstre, styring til højre ───── */
.kc-kar-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin: 0 0 26px;
	padding: 0;
}

.kc-kar-top--kun-styr { justify-content: flex-end; }

.kc-kar-tekst { min-width: 0; }

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

.kc-kar-tekst .kc-manchet { margin-top: 12px; }

.kc-kar-styr {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
}

/* Tælleren: to cifre på hver side af en skråstreg, i tal der er lige
   brede, så den ikke hopper når man bladrer. */
.kc-kar-taeller {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	margin-right: 10px;
	font-family: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--dim);
}

.kc-kar-taeller b { font-weight: 600; color: var(--ink); }
.kc-kar-taeller i { font-style: normal; opacity: .5; }

.kc-kar-pil {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--linje);
	border-radius: 50%;
	background-color: transparent;
	color: var(--ink);
	font-family: inherit;
	cursor: pointer;
	transition: background-color .3s var(--e), border-color .3s var(--e), color .3s var(--e), opacity .3s var(--e);
}

.kc-kar-pil svg { width: 15px; height: 15px; }

.kc-kar-pil[disabled] {
	opacity: .3;
	cursor: default;
}

/* ── Sporet ──────────────────────────────────────────────── */
.kc-kar-spor {
	display: flex;
	gap: var(--kc-kar-gab);
	margin: 0;
	padding: 4px 0 6px;

	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.kc-kar-spor::-webkit-scrollbar { display: none; }

/* Under et træk med musen skal snappet ikke kæmpe imod. */
.kc-kar-spor.er-traek {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
}

.kc-kar-spor.er-traek .kc-kar-kort { pointer-events: none; }

.kc-kar-spor:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 4px;
}

/* ── Kortet ──────────────────────────────────────────────── */
.kc-kar-kort {
	position: relative;
	flex: 0 0 calc((100% - var(--kc-kar-gab) * (var(--kc-kar-n) - 1)) / var(--kc-kar-n));
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--kc-kar-runding);
	background-color: var(--kc-kar-flade);
	color: var(--ink);
	text-decoration: none;
	scroll-snap-align: start;
	transition: transform .35s var(--e);
}

.kc-kar-bill {
	position: relative;
	display: block;
	aspect-ratio: var(--kc-kar-forhold);
	overflow: hidden;
	background-color: var(--creme);
}

.kc-kar-bill img { border-radius: 0 !important; }

/* Beskåret: billedet fylder feltet. */
.kc-kar--beskaaret .kc-kar-bill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--e);
}

/* Fuld figur: som hero'en, i to lag. Bagved en sløret og forstørret
   kopi der fylder feltet, ovenpå billedet selv, uden beskæring. */
.kc-kar-bag {
	position: absolute;
	inset: 0;
	display: block;
}

.kc-kar-bag img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
	filter: blur(22px) saturate(1.15) brightness(.9);
}

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

.kc-kar-for img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .8s var(--e);
}

.kc-kar-tomt {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--creme);
}

.kc-kar-krop {
	position: relative;
	display: block;
	flex: 1 1 auto;
	padding: 18px 52px 20px 20px;
}

.kc-kar-navn {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--ink);

	/* To linjer, og så tre prikker. Titlerne er sætninger. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kc-kar-under {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kc-kar-manchet {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(20, 20, 20, .72);
	text-wrap: pretty;
}

/* En lille pil nederst i hjørnet, der først får farve når man peger. */
.kc-kar-pil-lille {
	position: absolute;
	right: 18px;
	bottom: 18px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	color: var(--dim);
	transform: translateX(var(--px, 0px));
	transition: transform .35s var(--e), color .3s var(--e);
}

.kc-kar-pil-lille svg { width: 14px; height: 14px; }

/* ── Linjen: en hårfin streg der fyldes ud mens man bladrer ── */
.kc-kar-linje {
	position: relative;
	height: 1px;
	margin: 22px 0 0;
	background-color: var(--linje);
}

.kc-kar-linje span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 0;
	background-color: var(--ink);
	transition: width .3s var(--e);
}

/* ── Bunden ──────────────────────────────────────────────── */
.kc-kar-bund {
	margin: 20px 0 0;
}

.kc-kar-alle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 0 3px;
	border-bottom: 1px solid transparent;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ink);
	text-decoration: none;
	transition: color .3s var(--e), border-color .3s var(--e);
}

.kc-kar-alle svg {
	width: 14px;
	height: 14px;
	transform: translateX(var(--px, 0px));
	transition: transform .35s var(--e);
}

.kc-kar-tom {
	margin: 0;
	padding: 18px 20px;
	border-radius: 12px;
	background-color: rgba(0, 112, 131, .08);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	color: #007083;
}

/* ── Mindre skærme ───────────────────────────────────────── */
@media (max-width: 1024px) {
	.kc.kc-kar { --kc-kar-n: 2; }
}

@media (max-width: 720px) {
	.kc.kc-kar { --kc-kar-n: 1.15; }
	.kc-kar--bg-creme, .kc-kar--bg-hvid { padding: 26px 20px 24px; border-radius: 16px; }
	.kc-kar-top { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
	.kc-kar-top--kun-styr { align-items: flex-end; }
	.kc-kar-styr { padding-bottom: 0; }
	.kc-kar-pil { width: 40px; height: 40px; }
	.kc-kar-krop { padding: 16px 46px 18px 16px; }
	.kc-kar-navn { font-size: 16px; }
}

/* ── Mus ─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
	.kc-kar-spor { cursor: grab; }
	.kc-kar-pil:not([disabled]):hover { background-color: var(--ink); border-color: var(--ink); color: #fff; }
	.kc-kar-kort:hover { transform: translateY(-4px); }
	.kc-kar-kort:hover .kc-kar-for img,
	.kc-kar--beskaaret .kc-kar-kort:hover .kc-kar-bill img { transform: scale(1.04); }
	.kc-kar-kort:hover .kc-kar-pil-lille { --px: 4px; color: var(--teal); }
	.kc-kar-alle:hover { color: var(--teal); border-bottom-color: var(--teal); --px: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.kc-kar-spor { scroll-behavior: auto; }
	.kc-kar-kort, .kc-kar-for img, .kc-kar-bill img, .kc-kar-linje span, .kc-kar-pil-lille { transition: none; }
}