/* ==========================================================================
   pages.css — kruimels, inhoud met zijbalk, projecten, blog,
   filters, paginering, formulier, contact en zoeken.
   ========================================================================== */

/* ---------- Kruimelpad ---------- */
.kruimels ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--muted); }
.kruimels li { display: inline-flex; align-items: center; gap: 4px; }
.kruimels a { color: var(--muted); text-decoration: none; }
.kruimels a:hover { color: var(--blue); }
.kruimels__home { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; transition: background-color .2s, color .2s; }
.kruimels__home:hover { background: var(--blue-50); }
.kruimels__home .icoon { stroke-width: 2; }
.kruimels [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Inhoud met zijbalk ---------- */
.inhoud-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.inhoud-grid__zij { position: sticky; top: 130px; }
@media (max-width: 960px) { .inhoud-grid { grid-template-columns: minmax(0, 1fr); } .inhoud-grid__zij { position: static; } }
.inhoud-grid__zij { min-width: 0; }
.zijkaart { display: grid; gap: 18px; padding: 28px; border-radius: var(--radius-lg); background: var(--soft); border: 1px solid var(--line); }
.zijkaart__titel { margin: 0; font-size: 1.35rem; }
.zijkaart .vinklijst { margin: 0; }
/* Wat je krijgt / In het kort: elk punt op één regel (lettergrootte schaalt mee op smalle schermen) */
.zijkaart { container-type: inline-size; }

.zijkaart .vinklijst li { white-space: nowrap; align-items: center; font-size: clamp(.8rem, 5cqi, .95rem); /* teksten kort houden (± 32 tekens), alleen op smalle schermen iets kleiner */ letter-spacing: -.01em; }
.zijkaart .vinklijst .icoon { flex: none; }
.zijkaart .g-rating { justify-self: start; flex-wrap: nowrap; white-space: nowrap; }

/* ---------- Voordelen ---------- */
.voordelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.voordeel { padding: 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.voordeel__nr { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 14px; background: var(--lime); font-weight: 800; }
.voordeel:nth-child(even) .voordeel__nr { background: var(--blue); color: #fff; }
.voordeel h3 { margin-bottom: .4em; }
.voordeel p { margin: 0; color: var(--muted); }

/* ---------- Project ---------- */
.projectbeeld { --p: 0; perspective: 1600px; }
.projectbeeld > * {
	width: 100%; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-lg);
	transform: rotateX(calc((1 - var(--p)) * 16deg)) scale(calc(.94 + var(--p) * .06)); transform-origin: center top;
	transition: transform .12s linear;
}
.caseblokken { display: grid; gap: 16px; margin-bottom: 40px; }
.caseblok { padding: 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.caseblok:nth-child(2) { background: var(--blue-50); border-color: rgba(var(--blue-rgb), .2); }
.caseblok h2 { font-size: 1.5rem; margin-bottom: .5em; }
.caseblok__icoon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; background: var(--ink); color: var(--lime); }
.case-verhaal { padding-top: 8px; }

/* ---------- Blog ---------- */
.blogbeeld { margin: 0 0 40px; border-radius: var(--radius-lg); overflow: hidden; }
.auteurkaart { display: flex; gap: 18px; align-items: center; margin-top: 48px; padding: 24px; border-radius: var(--radius-lg); background: var(--soft); }
.auteurkaart__avatar img { border-radius: 50%; }
.auteurkaart p { margin: 4px 0 0; color: var(--muted); }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter { padding: 10px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); color: var(--ink); font-weight: 650; text-decoration: none; transition: all .2s; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-actief { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Paginering ---------- */
.paginering { margin-top: 48px; display: flex; justify-content: center; }
.paginering ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.paginering a, .paginering span { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 650; }
.paginering .current { background: var(--ink); border-color: var(--ink); color: #fff; }
.paginering a:hover { border-color: var(--ink); }

/* ---------- Formulier ---------- */
.formulier { display: grid; gap: 18px; }
.formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .formulier__rij { grid-template-columns: 1fr; } }
.formulier__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.veld { display: grid; gap: 8px; margin: 0; border: 0; padding: 0; min-width: 0; }
.veld label, .veld legend { font-weight: 650; font-size: .95rem; padding: 0; }
.veld input, .veld textarea, .veld select {
	width: 100%; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff;
	font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--blue-rgb), .14); }
.veld textarea { resize: vertical; min-height: 140px; }
.veld--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.veld--chips legend { width: 100%; margin-bottom: 8px; }
.chip-keuze { position: relative; }
/* Verborgen keuzerondje: klein en binnen het label, zodat de pagina op mobiel niet breder wordt. */
.chip-keuze input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.chip-keuze span { display: inline-block; padding: 10px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--line); font-weight: 600; font-size: .92rem; cursor: pointer; transition: all .2s; }
.chip-keuze input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-keuze input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.veld--check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.veld--check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); }
.formulier-melding { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: var(--radius); margin-bottom: 18px; font-weight: 600; }
.formulier-melding--ok { background: #E9F9EE; color: #0f5f2e; }
.formulier-melding--fout { background: #FDECEC; color: #8a1c1c; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } }
.contact__formulier { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.contact__zij { display: grid; gap: 16px; }
.contactkaart { padding: 28px; border-radius: var(--radius-lg); background: var(--soft); }
.contactkaart h2 { font-size: 1.4rem; }
.contactkaart--blauw { background: var(--blue); color: #fff; }
.contactkaart--blauw h2 { color: #fff; }
.contactkaart--zacht { background: var(--blue-50); }
.contactkaart__tijden { color: var(--muted); margin-top: 12px; }
.contactlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contactlijst a { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-weight: 650; font-size: 1.05rem; }
.contactlijst span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .16); }
.contactlijst a:hover span { background: var(--lime); color: var(--ink); }

/* ---------- Zoeken ---------- */
.zoekbalk { display: flex; gap: 10px; margin-bottom: 32px; padding: 6px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); }
.zoekbalk input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 16px; font-size: 1.05rem; background: none; }
.zoeklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zoeklijst a { display: grid; gap: 6px; justify-items: start; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.zoeklijst a:hover { border-color: var(--ink); }
.zoeklijst strong { font-size: 1.2rem; }
.zoeklijst span:last-child { color: var(--muted); }

/* ---------- Landinglinks ---------- */

/* Projecten: categorieën, branche-dropdown, zoekveld en knop op één regel (alles even hoog) */
.projectfilters { --hoogte: 50px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 32px; }
.projectfilters .filters { margin: 0; flex-wrap: nowrap; }
.projectzoek { display: flex; flex: 1 1 520px; gap: 8px; min-width: 0; margin: 0; }
.projectzoek__keuze { position: relative; flex: 0 1 220px; min-width: 0; }
.projectzoek__keuze select {
	width: 100%; height: var(--hoogte); padding: 0 40px 0 18px; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
	background: #fff; color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; appearance: none; -webkit-appearance: none;
	text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.projectzoek__keuze .icoon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink); }
.projectzoek__veld { position: relative; flex: 1 1 200px; min-width: 0; }
.projectzoek__icoon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted, #5b6475); display: flex; pointer-events: none; }
.projectzoek input { width: 100%; height: var(--hoogte); padding: 0 18px 0 46px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); font: inherit; color: var(--ink); background: #fff; }
.projectzoek input:focus, .projectzoek__keuze select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(14, 20, 32, .08); }
.projectzoek__keuze select:hover { border-color: var(--ink); }
.projectzoek .btn { flex: none; height: var(--hoogte); background: var(--ink); border-color: var(--ink); color: #fff; }
.projectzoek .btn:hover { background: #fff; color: var(--ink); }
.filterstatus { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: -12px 0 24px; color: var(--muted, #5b6475); }
.filterstatus a { color: var(--ink); font-weight: 650; }
@media (max-width: 760px) {
	/* filters op mobiel: één rij om horizontaal door te vegen */
	.filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
	.filters::-webkit-scrollbar { display: none; }
	.filter { flex: none; white-space: nowrap; }
	.projectfilters .filters { width: calc(100% + 32px); }
	.projectzoek { flex-wrap: wrap; flex-basis: 100%; }
	.projectzoek__keuze { flex: 1 1 100%; }
	.projectzoek .btn { padding-inline: 18px; }
}

/* Ervaringen-overzicht */
.ervaringenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: start; }
.ervaringenraster .reviewkaart { width: auto; max-width: none; margin: 0; }
/* Metselwerk (main.js): elke kaart sluit direct aan onder de kaart erboven, ook als een review langer is. */
.ervaringenraster.is-metselwerk { grid-auto-rows: 1px; row-gap: 0; }
.ervaringenraster.is-metselwerk .reviewkaart { margin-bottom: 24px; }

/* Labels met de reviewplatforms boven de kaarten (alleen platforms met reviews) */
.reviewplatforms { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.reviewplatform {
	display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px;
	border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: #fff;
	color: var(--ink); font-weight: 650; line-height: 1.2;
}
.reviewplatform .icoon { flex: none; }
button.reviewplatform { font: inherit; font-weight: 650; line-height: 1.2; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
button.reviewplatform:hover { border-color: var(--ink); }
button.reviewplatform[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ervaringenraster > [hidden] { display: none; }
.reviewplatform--kwdv span { font-weight: 800; letter-spacing: -.04em; }

/* Imprint */
.imprint__datum { color: var(--muted); font-size: .95rem; }
.imprint__gegevens { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.imprint__gegevens > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.imprint__gegevens > div:last-child { border-bottom: 0; }
.imprint__gegevens dt { font-weight: 700; color: var(--ink); }
.imprint__gegevens dd { margin: 0; color: #3b4456; }
@media (max-width: 560px) { .imprint__gegevens > div { grid-template-columns: 1fr; gap: 2px; } }
.imprint { max-width: 820px; } /* links uitgelijnd met de rest van de pagina, wel een prettige regellengte */

/* ---------- 404: populaire pagina's ---------- */
.linkraster__kop { margin: 8px 0 18px; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.linkraster { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .linkraster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .linkraster { grid-template-columns: repeat(4, 1fr); } }
.linkraster__kaart {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; padding: 18px 20px;
	border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.linkraster__kaart:hover { border-color: var(--blue); box-shadow: var(--shadow-sm, 0 8px 24px rgba(14, 20, 32, .08)); transform: translateY(-2px); color: var(--ink); }
.linkraster__tekst { display: grid; gap: 4px; }
.linkraster__tekst strong { font-size: 1.05rem; }
.linkraster__tekst span { color: var(--muted); font-size: .92rem; }
.linkraster__pijl { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-50); color: var(--blue); }