/* Softwareoverzicht, maatwerk en eigen producten. Bestaande kaart-, raster- en kleurtaal. */
main :is(h1, h2, h3, dt) { overflow-wrap: anywhere; }

.kaarten { padding-top: var(--sectie); }
.kaarten__lijst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--goot); }
.kaart--aanbod { display: flex; flex-direction: column; height: 100%; background: var(--toon); color: var(--papier); text-decoration: none; }
.kaart--aanbod picture { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.kaart__beeld { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* Bewaar de bestaande veilige code-uitsnede; geen bronpaden of identificatoren in beeld. */
.kaart__beeld--zoom { object-fit: none; object-position: max(-150px, 100%) bottom; }
.kaart__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: var(--dicht); flex: 1; }
.kaart__naam { font-size: var(--h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }
.kaart__zin { font-size: 18px; line-height: 1.5; color: var(--steen-licht); max-width: 36em; }
.kaart__noot { font-size: 16px; line-height: 1.5; color: var(--steen); }
.kaart__link { display: inline-block; margin-top: auto; padding-top: 8px; font-size: 18px; font-weight: 500; text-decoration: underline 1px var(--steen); text-underline-offset: 4px; }
.kaart--aanbod:focus-visible { outline-offset: 4px; }
.kaart--aanbod:focus-visible .kaart__link { text-decoration-color: var(--koper); }
@media (hover: hover) { .kaart--aanbod:hover .kaart__link { text-decoration-color: var(--koper); } }
@media (min-width: 900px) { .kaarten__lijst--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gegevens--raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dicht) var(--goot); }
.gegevens--raster > li { display: grid; align-content: start; gap: 16px; min-width: 0; }
.gegevens--raster .regel { max-width: 36em; }
.dienst__onderdelen { display: grid; gap: 24px; font-size: 18px; line-height: 1.5; }
.dienst__onderdelen dt { font-weight: 500; color: var(--papier); }
.dienst__onderdelen dd { margin-top: 8px; color: var(--steen-licht); }
@media (min-width: 600px) { .gegevens--raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gegevens--raster { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--dicht); } }
.sectie--toon { margin-top: var(--ruim); padding-block: var(--sectie); background: var(--toon); }
.duo { row-gap: 24px; }
.duo > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) { .duo > .h2 { grid-column: 1 / 5; } .duo > .duo__tekst { grid-column: 5 / 13; } }

/* Een product is een complete presentatie. Extra producten worden extra lijstitems. */
.producten { display: grid; gap: var(--ruim); }
.kaart--product { display: grid; gap: var(--dicht); align-items: start; }
.kaart--product .kaart__tekst { padding: 0; }
.kaart--product .acties { margin-top: 8px; }
.product__beeld { min-width: 0; }
.product__beeld picture { display: block; }
.product__beeld .kaart__beeld { height: auto; }
.product__beeld figcaption { margin-top: 12px; }
@media (min-width: 900px) { .kaart--product { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--goot); } }
main > .kaarten:last-child { padding-bottom: var(--sectie); }