/* ══════════════════════════════════════════════════════════════
   K360 Service  ·  assets/oversigt.css
   Afsnittet "Det laver vi også" nederst på en serviceside.
   ══════════════════════════════════════════════════════════════ */

.ko {
	--ko-kolonner: 3;
	/* Faste farver. Elementors globale tekstfarve er hvid på dette
	   site, fordi den bruges på det tealfarvede, og arvede vi den, blev
	   overskrifterne hvide på det cremede. */
	--ko-teal: #007083;
	--ko-ink: #141414;
	--ko-dim: rgba(20, 20, 20, .58);
	--ko-flade: #FFFFFF;
	--ko-bund: #F1F0EE;
	--ko-e: cubic-bezier(.23, 1, .32, 1);

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

.ko *, .ko *::before, .ko *::after { box-sizing: border-box; }
.ko h2, .ko p { margin: 0; }

/* ── Overskriften ────────────────────────────────────────── */
.ko-hoved { margin-bottom: 28px; }

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

.ko-tekst {
	max-width: 58ch;
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ko-dim);
	text-wrap: pretty;
}

/* ── Gitteret ────────────────────────────────────────────── */
.ko-gitter {
	display: grid;
	grid-template-columns: repeat(var(--ko-kolonner), minmax(0, 1fr));
	gap: 16px;
}

/* ── Kortet ──────────────────────────────────────────────── */
.ko-kort {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--ko-flade);
	color: var(--ko-ink);
	text-decoration: none;
	transition: transform .35s var(--ko-e);
}

.ko-bill {
	display: block;
	overflow: hidden;
	background-color: var(--ko-bund);
}

.ko-bill img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	transition: transform .8s var(--ko-e);
}

/* Uden billede: ikonet fra menuen, stort, på den cremede bund. */
.ko-bill--ikon {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	color: var(--ko-teal);
}

.ko-bill--ikon svg { width: 44px; height: 44px; }

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

.ko-krop b {
	display: block;
	color: var(--ko-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.02em;
}

.ko-krop > span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ko-dim);
	text-wrap: pretty;
}

.ko-pil {
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--ko-bund);
	color: var(--ko-ink);
	transition: background-color .3s var(--ko-e), color .3s var(--ko-e), transform .3s var(--ko-e);
}

.ko-pil svg { width: 13px; height: 13px; }

.ko-besked {
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	background-color: #FDF3E6;
	color: #8A5A00;
	font-size: 13.5px;
}

/* ── Mus ─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
	.ko-kort:hover { transform: translateY(-4px); }
	.ko-kort:hover img { transform: scale(1.05); }
	.ko-kort:hover .ko-pil { background-color: var(--ko-teal); color: #fff; transform: translateX(3px); }
}

.ko-kort:focus-visible { outline: 2px solid var(--ko-teal); outline-offset: 3px; }

/* ── Små skærme ──────────────────────────────────────────── */
@media (max-width: 900px) {
	.ko-gitter { grid-template-columns: repeat(min(var(--ko-kolonner), 2), minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.ko-gitter { grid-template-columns: minmax(0, 1fr); }
	.ko-hoved { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ko *, .ko-kort { transition-duration: .01ms !important; }
}