/* Kurhus indlægskarrusel */
.kpc {
	--kpc-panel: #C8C6B6;
	--kpc-ink: #2D3A2A;
	--kpc-arrow: #2D3A2A;
	--kpc-dot: #CCCCCC;
	--kpc-dot-active: #737856;
	--kpc-h: clamp(220px, 19vw, 268px);
	position: relative;
}
.kpc-viewport { overflow: hidden; }
.kpc-track {
	display: flex;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	will-change: transform;
}

/* Ét slide: billede bagved, felt foran der overlapper nederst */
.kpc .kpc-slide {
	--kpc-c: var(--kpc-panel);
	--kpc-i: var(--kpc-ink);
	flex: 0 0 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: 1fr auto 56px;
	color: inherit;
	text-decoration: none;
}
.kpc .kpc-img {
	grid-column: 1 / 8;
	grid-row: 1 / 3;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 7 / 4;
	object-fit: cover;
	border-radius: 0;
}
.kpc .kpc-noimg { background: color-mix(in srgb, var(--kpc-c) 45%, #fff); }

.kpc-panel {
	grid-column: 6 / 13;
	grid-row: 2 / 4;
	z-index: 1;
	display: flex;
	height: var(--kpc-h);
	color: var(--kpc-i);
}
.kpc-edge {
	flex: none;
	width: var(--kpc-h);
	height: 100%;
	fill: var(--kpc-c);
	position: relative;
	z-index: 1;
}
/* Uploadet ikon fra mediebiblioteket: formen bruges som maske og farves i feltets farve */
.kpc-edge-img {
	display: block;
	background: var(--kpc-c);
	-webkit-mask: var(--kpc-mask) center / contain no-repeat;
	mask: var(--kpc-mask) center / contain no-repeat;
}
.kpc-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	position: relative;
	z-index: 2; /* teksten ligger over symbolets højre halvdel, som har samme farve */
	margin-left: calc(var(--kpc-h) * -.5);
	padding: 20px clamp(20px, 2.5vw, 36px) 20px var(--kpc-pad-left, 60px);
	background: var(--kpc-c);
}
.kpc .kpc-title {
	display: block;
	margin: 0;
	font-size: clamp(1.4rem, 2vw, 2rem);
	line-height: 1.12;
	color: inherit;
	text-decoration: none;
	/* Lange overskrifter afkortes efter 3 linjer */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	overflow-wrap: break-word;
	hyphens: auto;
}
.kpc .kpc-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	max-width: 44ch;
	font-size: 1rem;
	line-height: 1.5;
	color: inherit;
}
.kpc a.kpc-slide,
.kpc a.kpc-slide:hover,
.kpc a.kpc-slide:focus,
.kpc a.kpc-slide .kpc-excerpt { text-decoration: none; box-shadow: none; }
.kpc .kpc-date { font-size: .875rem; opacity: .8; }
.kpc a.kpc-slide:hover .kpc-title,
.kpc a.kpc-slide:focus-visible .kpc-title {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
}
.kpc .kpc-slide:focus-visible { outline: 2px solid var(--kpc-arrow); outline-offset: 4px; }

/* Pile – nulstiller temaets knapstil */
.kpc-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}
.kpc-dots + .kpc-status:not(.kpc-sr), .kpc-dots ~ .kpc-arrow:first-of-type { margin-left: 10px; }
.kpc-dots { display: flex; align-items: center; gap: 12px; }
.kpc .kpc-dot {
	appearance: none;
	width: 10px;
	height: 10px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kpc-dot);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .25s ease;
}
.kpc .kpc-dot:hover { background: color-mix(in srgb, var(--kpc-dot-active) 55%, var(--kpc-dot)); }
.kpc .kpc-dot[aria-current="true"] { background: var(--kpc-dot-active); }
.kpc .kpc-dot:focus-visible { outline: 2px solid var(--kpc-dot-active); outline-offset: 3px; }
/* Klikflade på mindst 24px uden at gøre prikken større */
.kpc .kpc-dot { position: relative; }
.kpc .kpc-dot::after { content: ""; position: absolute; inset: -8px; }
.kpc .kpc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kpc-status { margin-right: 6px; font-size: .9375rem; color: var(--kpc-arrow); font-variant-numeric: tabular-nums; }
.kpc .kpc-arrow {
	appearance: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--kpc-arrow);
	border-radius: 50%;
	background: transparent;
	color: var(--kpc-arrow);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.kpc .kpc-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpc .kpc-arrow:hover:not(:disabled),
.kpc .kpc-arrow:focus-visible {
	background: var(--kpc-arrow);
	color: #fff;
	border-color: var(--kpc-arrow);
}
.kpc .kpc-arrow:focus-visible { outline: 2px solid var(--kpc-arrow); outline-offset: 3px; }
.kpc .kpc-arrow:disabled { opacity: .3; cursor: default; }

.kpc-empty { padding: 32px; border: 1px dashed #aaa; text-align: center; font-size: 14px; }

/* Mobil: symbolet bliver en fane oven på feltet, så teksten får hele bredden */
@media (max-width: 767px) {
	.kpc .kpc-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
	.kpc .kpc-img { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
	.kpc-panel { grid-column: 1; grid-row: 2; flex-direction: column; height: auto; margin-top: -80px; }
	.kpc-edge { width: 80px; height: 80px; margin-bottom: -1px; }
	.kpc-body { margin: 0; padding: 20px 20px 26px; gap: 8px; min-height: 150px; justify-content: flex-start; }
	.kpc .kpc-title { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.kpc-track { transition: none; }
}