/* ==========================================================================
   components.css — kaarten (diensten, projecten, blog, reviews), raster,
   accordeon, CTA-paneel, kort antwoord. Gedeeld door alle pagina's.
   ========================================================================== */

/* ---------- Bento (diensten) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento > :nth-child(1) { grid-column: span 7; }
.bento > :nth-child(2) { grid-column: span 5; }
.bento > :nth-child(3) { grid-column: span 5; }
.bento > :nth-child(4) { grid-column: span 7; }
.bento--archief > * { grid-column: span 4 !important; }
@media (max-width: 960px) {
	.bento > *, .bento--archief > * { grid-column: span 12 !important; }
}
/* Homepage-diensten op mobiel: horizontale veegslider zonder pijlen; een deel van de volgende kaart
   blijft zichtbaar. Loopt tot de schermrand door (geen afgesneden schaduw). */
@media (max-width: 760px) {
	.bento--slider {
		display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
		margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter);
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.bento--slider::-webkit-scrollbar { display: none; }
	.bento--slider > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
}

.dienstkaart {
	--k-bg: var(--blue); --k-fg: #fff; --k-sub: rgba(255, 255, 255, .82); --k-icoon-bg: rgba(255, 255, 255, .16); --k-vink: var(--lime);
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; gap: 14px; min-height: 360px;
	padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg);
	background: var(--k-bg); color: var(--k-fg);
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.dienstkaart--lime { --k-bg: var(--lime); --k-fg: var(--ink); --k-sub: rgba(var(--ink-rgb), .72); --k-icoon-bg: rgba(var(--ink-rgb), .08); --k-vink: var(--ink); }
.dienstkaart--ink { --k-bg: var(--ink); --k-sub: rgba(255, 255, 255, .7); --k-icoon-bg: rgba(255, 255, 255, .1); }
.dienstkaart--soft { --k-bg: var(--soft); --k-fg: var(--ink); --k-sub: var(--muted); --k-icoon-bg: #fff; --k-vink: var(--blue); }
.dienstkaart:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.dienstkaart__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.dienstkaart__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; }
.dienstkaart__icoon {
	display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
	background: var(--k-icoon-bg, var(--blue-50)); color: inherit;
}
.dienstkaart .btn-arrow { background: #fff; color: var(--ink); }
.dienstkaart--lime .btn-arrow, .dienstkaart--soft .btn-arrow { background: var(--ink); color: #fff; }
.dienstkaart:hover .btn-arrow { transform: rotate(45deg); }
.dienstkaart__titel { color: inherit; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); margin: 24px 0 0; }
.dienstkaart__tekst { color: var(--k-sub); margin: 0; max-width: 52ch; }
.dienstkaart__punten { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dienstkaart__punten li {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
	border-radius: var(--radius-pill); background: var(--k-icoon-bg); font-size: .88rem; font-weight: 600;
}
.dienstkaart__punten .icoon { color: var(--k-vink); stroke-width: 2.6; }
.dienstkaart__deco { position: absolute; right: -14px; bottom: -14px; z-index: -1; opacity: .14; transition: transform 1.2s var(--ease); }
.dienstkaart__deco .icoon { width: 160px; height: 160px; }
.dienstkaart:hover .dienstkaart__deco { transform: rotate(40deg) scale(1.1); }

.werkgebiedkaart {
	display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px);
	border-radius: var(--radius-lg); background: var(--soft); border: 1px solid var(--line);
}
.werkgebiedkaart__kop { display: flex; align-items: center; gap: 16px; }
.werkgebiedkaart__kop h3 { margin: 0; }
.werkgebiedkaart .dienstkaart__icoon { background: #fff; color: var(--blue); }
.werkgebiedkaart p { color: var(--muted); margin: 0; }
.werkgebiedkaart .chips { margin-top: auto; }

/* ---------- Projecten ---------- */
.projectraster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.projectraster--drie { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .projectraster--drie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .projectraster, .projectraster--drie { grid-template-columns: 1fr; } }
/* Oneindig scrollen (projectenoverzicht): kaarten na de eerste 12 verborgen tot main.js ze toont. */
.projectraster.is-oneindig > .projectkaart:not(.is-geladen) { display: none; }
.projectraster__laden { display: none; justify-content: center; gap: 8px; padding: 36px 0 8px; }
.projectraster__laden.is-actief { display: flex; }
.projectraster__laden span { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); animation: kwdv-laden 1s var(--ease) infinite alternate; }
.projectraster__laden span:nth-child(2) { animation-delay: .15s; }
.projectraster__laden span:nth-child(3) { animation-delay: .3s; }
@keyframes kwdv-laden { from { opacity: .25; transform: translateY(0); } to { opacity: 1; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .projectraster__laden span { animation: none; } }

.projectkaart {
	position: relative; display: flex; flex-direction: column; gap: 14px;
	background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius-lg) + 8px);
	padding: clamp(10px, 1.2vw, 14px) clamp(10px, 1.2vw, 14px) clamp(18px, 2vw, 24px);
	transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.projectkaart:hover { border-color: transparent; box-shadow: 0 18px 44px rgba(14, 20, 32, .08); }
.projectkaart__beeld {
	display: block; position: relative; overflow: hidden; border-radius: var(--radius-lg);
	aspect-ratio: 4 / 3; background: #fff; transform: translateZ(0);
}
.projectkaart__beeld img, .projectkaart__beeld svg, .projectkaart__beeld picture { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* Mockups (laptop/telefoon) van de live site: volledig tonen op een zacht vlak. */
.projectkaart__beeld .project-img { object-fit: contain; padding: 4%; }
.projectkaart:hover .projectkaart__beeld img, .projectkaart:hover .projectkaart__beeld svg { transform: scale(1.045); }
.projectkaart__info { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-inline: 8px; }
.projectkaart__titel { font-size: 1.4rem; margin: 0; }
.projectkaart__titel a { color: var(--ink); text-decoration: none; }
.projectkaart__titel a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.projectkaart__klant { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.projectkaart:hover .btn-arrow { background: var(--blue); transform: rotate(45deg); }

/* ---------- Blog ---------- */
.postraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px) { .postraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .postraster { grid-template-columns: 1fr; } }
.postkaart { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.postkaart:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.postkaart__beeld { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--blue-50); overflow: hidden; }
.postkaart__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.postkaart:hover .postkaart__beeld img { transform: scale(1.04); }
.postkaart__labels { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.postkaart__labels li { padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .8rem; font-weight: 650; line-height: 1.2; box-shadow: 0 6px 18px -8px rgba(var(--ink-rgb), .35); backdrop-filter: blur(6px); }
.postkaart__placeholder { display: grid; place-items: center; height: 100%; color: var(--blue); background: radial-gradient(circle at 70% 30%, rgba(var(--lime-rgb), .6), transparent 45%), var(--blue-50); }
.postkaart__info { flex: 1; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.postkaart__meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .85rem; color: var(--muted); }
.postkaart__titel { margin: 0; font-size: 1.25rem; }
.postkaart__titel a { color: var(--ink); text-decoration: none; }
.postkaart__titel a::after { content: ""; position: absolute; inset: 0; }
.postkaart__tekst { margin: 0; color: var(--muted); font-size: .97rem; }
.postkaart__meer { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; font-weight: 650; color: var(--ink); }
.postkaart__pijl { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .4s var(--ease), background-color .3s var(--ease); }
.postkaart:hover .postkaart__pijl { transform: rotate(45deg); background: var(--blue); }

/* ---------- Reviews ---------- */
.reviewkaart {
	margin: 0; display: grid; gap: 12px; align-content: start;
	width: min(380px, 82vw); padding: 24px; border-radius: var(--radius-lg);
	background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04);
}
.reviewkaart__kop { display: flex; align-items: center; gap: 12px; }
.reviewkaart__kop figcaption { display: grid; line-height: 1.3; }
.reviewkaart__kop figcaption span { color: var(--muted); font-size: .85rem; }
.reviewkaart__avatar {
	flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
	background: var(--blue); color: #fff; font-weight: 800;
}
.reviewkaart:nth-child(3n+2) .reviewkaart__avatar { background: var(--lime); color: var(--ink); }
.reviewkaart:nth-child(3n+3) .reviewkaart__avatar { background: var(--ink); }
.reviewkaart__avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviewkaart__g { margin-left: auto; }
.reviewkaart__tekst { margin: 0; color: #2b3445; font-size: .98rem; }

/* ---------- Accordeon ---------- */
.accordeon { display: grid; gap: 12px; }
.accordeon__item { border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.accordeon__item.is-open { border-color: transparent; box-shadow: 0 0 0 2px var(--blue), var(--shadow); }
.accordeon__kop { margin: 0; font-size: inherit; letter-spacing: normal; }
.accordeon__knop {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px;
	padding: 20px 22px; border: 0; background: none; text-align: left;
	font-size: 1.08rem; font-weight: 700; color: var(--ink); line-height: 1.35;
}
.accordeon__plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); transition: background-color .3s, transform .4s var(--ease); }
.accordeon__plus::before, .accordeon__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease); }
.accordeon__plus::after { transform: rotate(90deg); }
.accordeon__item.is-open .accordeon__plus { background: var(--lime); transform: rotate(180deg); }
.accordeon__item.is-open .accordeon__plus::after { transform: rotate(0); }
.accordeon__paneel { display: grid; grid-template-rows: 1fr; }
.accordeon__binnen { overflow: hidden; padding: 0 22px 20px; color: #3b4456; }
.is-js .accordeon__item:not(.is-open) .accordeon__paneel { grid-template-rows: 0fr; }
.is-js .accordeon__item:not(.is-open) .accordeon__binnen { padding-bottom: 0; }
/* Overgang pas na het laden (main.js zet .is-klaar): anders animeren alle vragen bij het openen
   van de pagina dicht ("niet-samengestelde animaties" in PageSpeed). */
.is-klaar .accordeon__paneel { transition: grid-template-rows .45s var(--ease); }
.is-klaar .accordeon__binnen { transition: padding .45s var(--ease); }

/* ---------- Kort antwoord (GEO) ---------- */
.kort-antwoord {
	display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; margin-bottom: 32px;
	border-radius: var(--radius); background: var(--blue-50); border: 1px solid rgba(var(--blue-rgb), .18);
	font-size: 1.08rem; font-weight: 550; color: #1b2a44;
}
.kort-antwoord__icoon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue); color: #fff; }
.kort-antwoord__midden { max-width: 800px; margin-inline: auto; }
.kort-antwoord--groot { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); padding: clamp(22px, 3vw, 34px); margin: 0; }

/* ---------- CTA ---------- */
.cta { padding-block: clamp(40px, 6vw, 80px) clamp(60px, 7vw, 96px); }
.cta__paneel {
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; grid-template-columns: 1.3fr auto; gap: 32px 56px; align-items: center;
	padding: clamp(32px, 5vw, 72px); border-radius: var(--radius-lg);
	background: var(--ink); color: #fff;
}
.cta__paneel h2 { color: #fff; max-width: 18ch; }
.cta__tekst p { color: rgba(255, 255, 255, .74); font-size: 1.1rem; max-width: 56ch; margin-bottom: 22px; }
.cta__knoppen { display: grid; gap: 12px; }
.cta__gloed {
	position: absolute; z-index: -1; right: -10%; top: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--blue-rgb), .85), rgba(var(--blue-rgb), 0));
	filter: blur(10px);
}
@media (max-width: 860px) {
	.cta__paneel { grid-template-columns: 1fr; }
	.cta__knoppen { justify-items: start; }
}

/* ---------- Mobiele knop (links naast "terug naar boven") ---------- */
.mobiele-balk { display: none; }
@media (max-width: 760px) {
	/* Zelfde hoogte en onderrand als de knop terug naar boven (56px, 16px); rechts ruimte voor die knop en de chatwolk. */
	.mobiele-balk { position: fixed; left: 16px; right: 92px; bottom: 20px; z-index: 140; display: flex; }
	body:has(.kwdv-chatwolk:not(.is-verborgen)) .mobiele-balk { right: 164px; }
	.mobiele-balk__cta {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 18px;
		border-radius: var(--radius-pill); background: var(--lime); color: var(--ink) !important; box-shadow: var(--shadow-lg);
		font-weight: 700; font-size: .98rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.mobiele-balk__cta svg { flex: none; }
	body:has(.mobiele-balk) { padding-bottom: 84px; }
}
@media (max-width: 600px) {
	.mobiele-balk { right: 84px; bottom: 16px; }
	body:has(.kwdv-chatwolk:not(.is-verborgen)) .mobiele-balk { right: 152px; }
}