/* Installatiepagina's: een machinecatalogus in de huisstijl. Logoblauw in lichte tinten, rood alleen als accent,
   Alumni voor namen, DM Mono voor labels. Machines staan "vrij": witte productfoto's smelten in de tint (multiply). */

:root { --tint-1: #f1f5fa; --tint-2: #e1eaf5; --tint-3: #c8d8eb; }

.ci-sectie { padding-block: var(--sectie); }
.ci-sectie--wit { background: var(--wit); }
/* Machinefoto vrijstaand op de tint: wit achter de machine verdwijnt. */
.ci-vrij { margin: 0; display: grid; place-items: center; background: var(--tint-1); }
.ci-vrij img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- Kop ---------- */
.ci-kop { background: var(--tint-2); color: var(--tekst); overflow: hidden; }
.ci-kop__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: clamp(460px, 44vw, 620px); }
.ci-kop__tekst { padding-block: clamp(48px, 6vw, 88px); }
.ci-kop .ct-kruimelpad ol { margin-bottom: 28px; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.ci-kop__label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--blauw); }
.ci-kop__label::before { content: ""; width: 22px; height: 2px; background: var(--rood); }
.ci-kop__titel { margin: 0; color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 5.4vw, 5.5rem); line-height: .9; text-transform: uppercase; text-wrap: balance; }
.ci-kop__lead { margin: 24px 0 0; max-width: 46ch; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; }
/* Snelkoppelingen naar de modellen. */
.ci-kop__modellen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--tint-3); }
.ci-kop__modellen .ch-label { margin: 0; width: 100%; color: var(--zacht); }
.ci-kop__modellen a { color: var(--kop); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .25s, color .2s; }
.ci-kop__modellen a:hover { color: var(--blauw); border-bottom-color: var(--rood); }
.ci-kop__beeld { position: relative; align-self: stretch; display: grid; place-items: center; padding-block: 40px; }
.ci-kop__beeld img { width: 100%; height: 100%; max-height: 540px; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- Inleiding ---------- */
.ci-intro__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.ci-intro__kop { grid-column: 1 / span 4; }
.ci-intro__kop .ch-kop { font-size: clamp(2rem, 3vw, 3rem); }
.ci-intro__tekst { grid-column: 6 / -1; max-width: 66ch; }
.ci-intro__tekst > :first-child { margin-top: 0; font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.6; color: var(--kop); }
.ci-intro__tekst p, .ci-intro__tekst li { font-size: 1.0625rem; line-height: 1.75; }
.ci-galerij { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ci-galerij .ci-vrij { aspect-ratio: 4 / 3; padding: 20px; }

/* ---------- Modelkiezer ---------- */
.ci-modellen { background: var(--tint-1); }
.ci-modellen__kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 3vw, 44px); }
/* Ankerlinks naar de modellen, geen knoppen (23-10): ze filterden niets, alle modellen staan onder elkaar. Ze breken af in
   plaats van zijwaarts te scrollen, zodat op mobiel ook het laatste model te zien is. */
.ci-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ci-tabs__link { display: flex; align-items: center; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--kop); font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: border-color .25s, background .25s, color .25s; }
.ci-tabs__link:hover { color: var(--blauw); }
.ci-tabs__link.is-actief { color: var(--blauw); border-bottom-color: var(--rood); }
.ci-model { scroll-margin-top: calc(var(--header-h, 80px) + 16px); }
.ci-tabs button { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border: 1px solid var(--tint-3); background: var(--wit); color: var(--kop); font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.ci-tabs button span { font-family: var(--font-mono); font-size: .6875rem; color: var(--zacht); transition: color .25s; }
.ci-tabs button:hover { border-color: var(--blauw); }
.ci-tabs button[aria-selected="true"] { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.ci-tabs button[aria-selected="true"] span { color: rgb(255 255 255 / .7); }
.ci-model { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); background: var(--wit); }
.ci-model + .ci-model { margin-top: 24px; }
.ci-modellen.is-tabs .ci-model + .ci-model { margin-top: 0; }
.ci-model--zonder-foto { grid-template-columns: minmax(0, 1fr); }
/* De foto vult de kolom naast de tekst, maar bepaalt de hoogte niet meer (23-10): een staande foto rekte de kaart op tot een
   half lege witte kaart (EFA RCA 250). De kaart is nu zo hoog als de tekst, met minstens 360 px voor de foto. */
.ci-model__foto { --p: clamp(24px, 3vw, 48px); position: relative; min-height: 360px; padding: 0; }
.ci-model__foto img { position: absolute; top: var(--p); left: var(--p); width: calc(100% - 2 * var(--p)); height: calc(100% - 2 * var(--p)); }
.ci-model__foto::before { content: none; } /* 22-10: geen rode driehoek */
.ci-model__tekst { padding: clamp(28px, 3.4vw, 56px); }
.ci-model__tekst .ch-label { color: var(--blauw); margin-bottom: 12px; }
.ci-model__naam { margin: 0 0 20px; color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 3.4vw, 3.5rem); line-height: .92; text-transform: uppercase; }
.ci-model__tekst .ct-rich p, .ci-model__tekst .ct-rich li { font-size: 1rem; line-height: 1.7; }
.ci-model__tekst .ct-rich > :first-child { margin-top: 0; }
.ci-specs { margin: 24px 0 0; border-top: 2px solid var(--kop); }
.ci-specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--lijn); }
.ci-specs dt { color: var(--zacht); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.ci-specs dd { margin: 0; color: var(--kop); font-weight: 600; }

/* ---------- Vergelijking ---------- */
.ci-vergelijk .ch-kop { margin-bottom: clamp(28px, 3vw, 44px); }
.ci-vergelijk__schuif { overflow-x: auto; }
.ci-vergelijk table { width: 100%; min-width: 560px; border-collapse: collapse; }
.ci-vergelijk th, .ci-vergelijk td { padding: 14px 16px; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.ci-vergelijk thead th { color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; border-bottom: 2px solid var(--kop); }
.ci-vergelijk tbody th { width: 34%; color: var(--zacht); font-family: var(--font-mono); font-weight: 500; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.ci-vergelijk tbody td { color: var(--kop); font-weight: 600; }
.ci-vergelijk tbody tr:nth-child(odd) { background: var(--tint-1); }

/* ---------- Documentatie: downloadkaarten ---------- */
.ci-docs { background: var(--tint-2); }
.ci-docs .ch-kop { margin-bottom: clamp(28px, 3vw, 44px); }
.ci-docs__rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ci-docs__rij a { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100%; min-height: 168px; padding: 22px; background: var(--wit); color: var(--kop); text-decoration: none; transition: transform .35s var(--uit), box-shadow .35s var(--uit); }
.ci-docs__soort { justify-self: start; padding: 3px 7px; background: var(--rood); color: var(--wit); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; }
.ci-docs__naam { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.ci-docs__actie { display: inline-flex; align-items: center; gap: 8px; color: var(--blauw); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.ci-docs__actie .ct-icon { width: 16px; height: 16px; transition: transform .35s var(--uit); }
.ci-docs__rij a:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgb(0 74 154 / .12); }
.ci-docs__rij a:hover .ct-icon { transform: translate(3px, -3px); }

/* ---------- Tegels (overzicht) en andere installaties ---------- */
.ci-sectie .ct-tegels { border-top: 0; padding-block: 0; }
.ci-sectie .ct-tegels__beeld { background: var(--tint-1); }
.ci-sectie .ct-tegels__beeld img { object-fit: contain; padding: 20px; mix-blend-mode: multiply; }
.ci-andere__kop { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.ci-andere__rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ci-andere__rij > li { min-width: 0; }
.ci-andere__rij a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; color: var(--kop); text-decoration: none; }
.ci-andere__beeld { aspect-ratio: 3 / 2; padding: 0; min-width: 0; overflow: hidden; background: transparent; transition: opacity .3s; } /* 22-10: geen grijs vlak, foto beeldvullend */
.ci-andere__beeld img { object-fit: cover; mix-blend-mode: normal; }
.ci-andere__beeld img.is-vrijstaand { object-fit: contain; padding: 6%; }
.ci-andere__titel { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1; text-transform: uppercase; transition: color .2s; }
.ci-andere__rij a:hover .ci-andere__beeld { opacity: .92; }
.ci-andere__rij a:hover .ci-andere__titel { color: var(--blauw); }

@media (max-width: 1000px) {
	.ci-kop__raster, .ci-model { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.ci-kop__beeld { padding-block: 0 40px; }
	.ci-kop__beeld img { max-height: 360px; }
	.ci-intro__kop, .ci-intro__tekst { grid-column: 1 / -1; }
	.ci-model__foto { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
	.ci-kop__titel { font-size: clamp(2.25rem, 10vw, 3.5rem); hyphens: auto; overflow-wrap: anywhere; }
	.ci-specs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .ci-docs__rij a, .ci-docs__rij .ct-icon { transition: none; } }
/* Modelkiezer: niet-gekozen modellen echt verbergen (display: grid zou [hidden] overschrijven). */
.ci-model[hidden] { display: none; }
/* Een alinea die de klant helemaal vet zette, leest als gewone tekst (de eerste alinea is al groter). */
.ci-intro__tekst p > strong:only-child, .ci-model__tekst .ct-rich p > strong:only-child { font-weight: inherit; color: inherit; }