/* Sectorpagina's, in de stijl van de homepage (home.css wordt ook geladen: .ch-kop, .ch-label, afsluiter, header over de kop). */

/* ---------- Kop: sectorfoto schermbreed, header erover ---------- */
.cs-kop { position: relative; display: grid; align-items: end; min-height: clamp(520px, 78svh, 820px); overflow: hidden; background: var(--nacht); color: rgb(255 255 255 / .85); }
.ct-header--over ~ .ct-main .cs-kop { margin-top: calc(-1 * var(--header-h)); }
@media (min-width: 1200px) { html:not(.ct-compact) .ct-topbalk + .ct-header--over ~ .ct-main .cs-kop { margin-top: calc(-1 * var(--header-h) - 36px); } }
.cs-kop :focus-visible { outline-color: var(--wit); }
.cs-kop__beeld { position: absolute; inset: 0; }
.cs-kop__beeld img { width: 100%; height: 100%; object-fit: cover; }
.cs-kop__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(7 26 51 / .92) 0%, rgb(7 26 51 / .72) 42%, rgb(7 26 51 / .2) 75%, rgb(7 26 51 / .1) 100%), linear-gradient(to bottom, rgb(7 26 51 / .55) 0%, transparent 25%); }
.cs-kop__tekst { position: relative; z-index: 1; padding-block: 160px clamp(56px, 7vw, 104px); }
.cs-kop .ct-kruimelpad ol { margin-bottom: 20px; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.cs-kop .ct-kruimelpad a { color: rgb(255 255 255 / .7); }
.cs-kop .ct-kruimelpad a:hover { color: var(--wit); }
.cs-kop .ct-kruimelpad li:not(:last-child)::after { color: rgb(255 255 255 / .35); }
.cs-kop__titel { margin: 0; max-width: none; hyphens: manual; overflow-wrap: normal; color: var(--wit); 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; }
.cs-kop__lead { margin: 24px 0 0; max-width: 46ch; color: var(--wit); font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.55; }

/* ---------- Sectiebalk: vast onder de header, markeert het huidige deel ---------- */
.cs-nav { position: sticky; top: var(--header-h); z-index: 20; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.cs-nav ol { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; }
.cs-nav a { display: flex; align-items: baseline; gap: 8px; padding: 18px 0 16px; white-space: nowrap; color: var(--zacht); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .3s var(--uit); }
.cs-nav a span { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; }
.cs-nav a:hover { color: var(--kop); }
.cs-nav a[aria-current="true"] { color: var(--kop); border-bottom-color: var(--rood); }

/* ---------- Tekstdelen: één raster voor alle blokken ----------
   Nummer en kop links (4 van 12 kolommen), tekst rechts vanaf kolom 6, foto's onder de tekst. Om en om wit en grijs. */
.cs-deel { padding-block: clamp(72px, 8vw, 112px); scroll-margin-top: calc(var(--header-h) + 60px); background: var(--wit); }
.cs-deel:nth-child(even) { background: var(--vlak); }
.cs-deel__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; align-items: start; }
.cs-deel__kop { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 88px); } /* loopt mee met zijn tekst, onder header en sectiebalk (23-10) */
.cs-deel__kop .ch-label { margin-bottom: 14px; }
.cs-deel .ch-kop { font-size: clamp(2rem, 3vw, 3rem); }
.cs-deel__tekst { grid-column: 6 / -1; max-width: 66ch; }
.cs-deel__beelden { grid-column: 6 / -1; }
.cs-deel__tekst > :first-child { margin-top: 0; }
.cs-deel__tekst > :last-child { margin-bottom: 0; }
.cs-deel__tekst p, .cs-deel__tekst li { font-size: 1.0625rem; line-height: 1.75; }
.cs-deel__beelden { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cs-deel__beelden figure { margin: 0; width: 100%; }
.cs-deel__beelden img { display: block; width: 100%; height: auto; }

/* ---------- Producten en installaties uit de tekst ---------- */
.cs-inzet { padding-block: var(--sectie); background: var(--wit); border-top: 1px solid var(--lijn); }
.cs-inzet .ch-kop { margin-bottom: clamp(32px, 4vw, 56px); }
.cs-inzet__rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.cs-inzet__kaart { position: relative; display: grid; align-content: start; gap: 8px; height: 100%; padding: 24px 24px 56px; background: var(--vlak); color: var(--tekst); text-decoration: none; transition: background-color .3s var(--uit); }
.cs-inzet__kaart .ch-label { margin: 0; }
.cs-inzet__titel { color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.cs-inzet__sub { font-size: .9375rem; line-height: 1.55; color: var(--zacht); }
.cs-inzet__kaart > .ct-icon { position: absolute; left: 24px; bottom: 22px; width: 22px; height: 22px; color: var(--blauw); transition: transform .35s var(--uit); }
.cs-inzet__kaart:hover { background: var(--blauw-licht); }
.cs-inzet__kaart:hover > .ct-icon { transform: translateX(6px); }
.cs-inzet__kaart--beeld { padding-top: 0; }
.cs-inzet__beeld { display: block; aspect-ratio: 3 / 2; margin: 0 -24px 12px; overflow: hidden; background: transparent; }
.cs-inzet__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--uit); }
.cs-inzet__kaart--beeld:hover img { transform: scale(1.04); }

/* ---------- Andere sectoren: fotokaarten ---------- */
.cs-andere { padding-block: var(--sectie); background: var(--vlak); }
.cs-andere__kop { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.cs-andere__rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.cs-andere__rij a { display: grid; gap: 14px; color: var(--kop); text-decoration: none; }
.cs-andere__beeld { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nacht); }
.cs-andere__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--uit); }
.cs-andere__titel { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; text-transform: uppercase; transition: color .2s; }
.cs-andere__rij a:hover img { transform: scale(1.05); }
.cs-andere__rij a:hover .cs-andere__titel { color: var(--blauw); }

@media (max-width: 1000px) {
	.cs-deel__kop, .cs-deel__tekst, .cs-deel__beelden { grid-column: 1 / -1; }
	.cs-deel__kop { position: static; }
	.cs-andere__rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--goot)); padding-inline: var(--goot); }
	.cs-andere__rij li { flex: none; width: min(62vw, 260px); scroll-snap-align: start; }
}
@media (max-width: 760px) {
	.cs-kop { min-height: calc(100svh - 120px); }
	.cs-kop__tekst { padding-top: 120px; }
	.cs-kop__titel { font-size: clamp(2.25rem, 10vw, 4rem); hyphens: auto; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .cs-andere__rij img { transition: none; } }
/* Laatste tekstblok grijs en direct daarna de andere sectoren: die dan wit, zodat er geen twee grijze vlakken tegen elkaar liggen. */
.cs-delen:has(> .cs-deel:last-child:nth-child(even)) + .cs-andere { background: var(--wit); border-top: 1px solid var(--lijn); }