/* Hardware: uitbreidbare aanbodkaarten, printplaatontwerp en 3D-ontwerp/printen. */

/* ---------- Uitbreidbare aanbodkaarten ---------- */
.ingangen { padding-top: var(--sectie); }
.ingangen .h2 { margin-bottom: 24px; }
.ingangen__lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--goot); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) { .ingangen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ingangen__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) { .ingangen__lijst--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kaart--aanbod { display: flex; height: 100%; flex-direction: column; background: var(--toon); color: var(--papier); text-decoration: none; }
.kaart--aanbod:focus-visible { outline-offset: 4px; }
.kaart--aanbod picture { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--inkt); }
.kaart--aanbod .kaart__beeld { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 200ms var(--ease); }
.kaart--aanbod .kaart__tekst { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: var(--dicht); }
.kaart__naam { font-size: var(--h3); text-wrap: balance; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.kaart__zin { max-width: 26em; font-size: 18px; line-height: 1.5; color: var(--steen-licht); text-wrap: pretty; }
.kaart__meer { margin-top: auto; font-size: 16px; line-height: 1.5; color: var(--papier); text-decoration: underline; text-decoration-color: var(--koper); text-underline-offset: 5px; }
.kaart--tekstkaart { justify-content: flex-end; background: var(--vlak); }
@media (hover: hover) and (pointer: fine) {
  .kaart--aanbod:hover .kaart__beeld { filter: brightness(1.12); }
  .kaart--aanbod:hover .kaart__naam { text-decoration: underline; text-decoration-color: var(--koper); text-underline-offset: 6px; }
}
.kaart--aanbod:focus-visible .kaart__beeld { filter: brightness(1.12); }
.kaart--aanbod:focus-visible .kaart__naam { text-decoration: underline; text-decoration-color: var(--koper); text-underline-offset: 6px; }

/* ---------- Printplaten ---------- */
.pcb-overzicht { padding-top: var(--sectie); }
.pcb-overzicht .g { row-gap: 32px; }
.pcb-overzicht__beeld, .pcb-overzicht__tekst { grid-column: 1 / -1; min-width: 0; }
.pcb-overzicht__beeld { display: block; }
.pcb-overzicht__beeld img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--toon); }
.pcb-overzicht__tekst .h2 { margin-bottom: 24px; }
@media (min-width: 900px) {
  .pcb-overzicht__tekst { grid-column: 1 / 6; padding-right: var(--goot); }
  .pcb-overzicht__beeld { grid-column: 6 / 13; }
}
.pcb-fabricage { margin-top: var(--sectie); }
.pcb-lijsten { padding-top: var(--sectie); }
.pcb-lijsten .g { row-gap: 48px; }
.pcb-lijsten .g > * { grid-column: 1 / -1; min-width: 0; }
.pcb-lijsten .h2 { margin-bottom: 24px; }

/* ---------- 3D-printen: FDM en SLA elk als foto binnen de marges plus tekstkolom (v4-rij); SLA gespiegeld ---------- */
.hw { padding-top: var(--ruim); }
.printen { padding-top: var(--sectie); }
.printen__kop .regel { margin-top: 16px; max-width: 40em; }
.printen .hw:first-of-type { padding-top: 32px; }

.hw__rij { row-gap: 32px; }
.hw__rij > * { grid-column: 1 / -1; min-width: 0; }

.hw__beeld {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 0; background: var(--toon);
}

/* Audit 28-09 (look-b.md F5): tekst bovenaan, materiaallijst direct eronder (32 px), geen gat meer tot de onderrand van de foto. */
.hw__tekst { display: flex; flex-direction: column; justify-content: flex-start; row-gap: 32px; }
.hw__zin { margin-top: 16px; max-width: 30em; font-size: clamp(18px, 17.3px + 0.188vw, 20px); line-height: 1.5; color: var(--steen-licht); }

/* Lijsten: naam in papier, toelichting in steen-licht; ook gebruikt op de printplatenpagina. */
.hw__materialen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--goot); }
.hw__materialen li { font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--papier); }
.hw__materialen--rij { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hw__materialen--rij li { font-size: clamp(18px, 17.3px + 0.188vw, 20px); line-height: 1.45; font-weight: 400; color: var(--steen-licht); }
.hw__stof { font-weight: 500; color: var(--papier); }

@media (min-width: 768px) and (max-width: 899px) { .hw__beeld { aspect-ratio: 7 / 4; } } /* ronde 2: hooguit ca. 475 hoog */
/* Audit 28-09 (look-b.md F1): vanaf 900 13:7, zodat de foto bij 1440 (891 breed) 480 hoog is in plaats van 594. */
@media (min-width: 900px) {
  .hw__beeld { aspect-ratio: 13 / 7; }
  .hw__rij > .hw__beeld { grid-column: 1 / 8; }
  .hw__rij > .hw__tekst { grid-column: 8 / 13; padding-left: var(--goot); }
  .hw--om .hw__rij > .hw__beeld { grid-column: 6 / 13; grid-row: 1; }
  .hw--om .hw__rij > .hw__tekst { grid-column: 1 / 6; grid-row: 1; padding-left: 0; padding-right: var(--goot); }
}
@media (min-width: 1200px) {
  .hw__rij > .hw__beeld { grid-column: 1 / 9; }
  .hw__rij > .hw__tekst { grid-column: 9 / 13; padding-left: 32px; }
  .hw--om .hw__rij > .hw__beeld { grid-column: 5 / 13; }
  .hw--om .hw__rij > .hw__tekst { grid-column: 1 / 5; padding-left: 0; padding-right: 32px; }
}

/* ---------- Tekstband op de toon: CAD-ontwerp (/hardware/3d/) en Behuizingen (/hardware/), geen foto; de h2 is de enige kop ---------- */
.cad { margin-top: var(--sectie); padding-block: var(--ruim); background: var(--toon); }
.cad .g { row-gap: 24px; }
.cad .g > * { grid-column: 1 / -1; min-width: 0; }
.cad__zin { max-width: 32em; font-size: clamp(18px, 17.3px + 0.188vw, 20px); line-height: 1.45; font-weight: 400; color: var(--steen-licht); text-wrap: pretty; } /* = .regel */
.cad__tekst > * + * { margin-top: 16px; }
.cad__tekst .regel { max-width: 32em; }
@media (min-width: 900px) {
  .cad .g > .h2 { grid-column: 1 / 5; }
  .cad .g > .cad__tekst { grid-column: 5 / 13; }
}