/* [kompas_keuzes]: overview cards for /diensten/ and /woningaanbod/ (see src/Choices.php). */
.kk { --kk-navy: #031435; --kk-gold: #ebc273; --kk-gold-dark: #c99a3c; --kk-light: #eae8e5; --kk-text: #454240;
	display: grid; gap: 28px; font-family: "Geograph Test", system-ui, sans-serif; }

.kk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.kk__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kk__grid--2, .kk__grid--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kk-card { margin: 0; padding: 0; }
.kk-card::before { content: none !important; }

.kk-card__link {
	display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--kk-light);
	color: var(--kk-navy); text-decoration: none; transition: box-shadow .2s, transform .2s;
}
.kk-card__link:hover, .kk-card__link:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(3, 20, 53, .5); }
.kk-card__link:focus-visible { outline: 3px solid var(--kk-gold); outline-offset: 3px; }

.kk-card__photo { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--kk-light); }
.kk-card__photo img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .5s; }
.kk-card__link:hover .kk-card__photo img { transform: scale(1.04); }
.kk-card__count {
	position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; background: var(--kk-gold); color: var(--kk-navy);
	font-size: 13px; font-weight: 700; letter-spacing: .04em;
}

.kk-card__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 34px 24px 26px; border-top: 4px solid var(--kk-gold); }
.kk-card__icon {
	position: absolute; top: -27px; right: 22px; display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -8px rgba(3, 20, 53, .45);
}
.kk-card__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--kk-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kk-card__title { font-size: 20px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.kk-card__text { color: var(--kk-text); font-size: 15px; line-height: 1.6; }
.kk-card__call {
	display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; color: var(--kk-navy);
	font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.kk-card__call::after { content: "→"; color: var(--kk-gold-dark); transition: transform .15s; }
.kk-card__link:hover .kk-card__call::after { transform: translateX(4px); }

/* The highlighted page: a wide gold banner below the cards. */
.kk-feature {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); background: var(--kk-gold); color: var(--kk-navy);
	text-decoration: none; transition: box-shadow .2s;
}
.kk-feature:hover, .kk-feature:focus-visible { box-shadow: 0 24px 44px -28px rgba(3, 20, 53, .5); }
.kk-feature:focus-visible { outline: 3px solid var(--kk-navy); outline-offset: 3px; }
.kk-feature__photo { display: block; min-height: 240px; background: var(--kk-light); overflow: hidden; }
.kk-feature__photo img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }
.kk-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(28px, 4vw, 52px); }
.kk-feature__title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.kk-feature__text { max-width: 560px; font-size: 17px; line-height: 1.6; }
.kk-feature__call {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: 8px; padding: 14px 24px;
	background: var(--kk-navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	transition: background-color .15s;
}
.kk-feature__call::after { content: "→"; }
.kk-feature:hover .kk-feature__call { background: #0b2554; }

@media (max-width: 1100px) {
	.kk__grid, .kk__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.kk__grid, .kk__grid--3, .kk__grid--2 { grid-template-columns: minmax(0, 1fr); }
	.kk-feature { grid-template-columns: minmax(0, 1fr); }
	.kk-feature__photo { min-height: 0; aspect-ratio: 16 / 9; }
	.kk-feature__call { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-card__link, .kk-card__photo img, .kk-card__call::after { transition: none; }
	.kk-card__link:hover, .kk-card__link:hover .kk-card__photo img { transform: none; }
}