/* Sectie: werkwijze (how) – vier stappen binnen de marges, foto's op wisselende hoogte */
.how { padding-block: calc(var(--section-gap) / 2); }

.how-title { font-size: var(--step-l); font-weight: 300; text-align: left; }

/* Elke stap is een subgrid van 3 rijen (kop, tekst, foto), zodat koppen en
   teksten in één rij altijd op dezelfde hoogte beginnen, ook als een kop
   over 2 regels loopt. */
.how-list {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px; row-gap: 0;
  align-items: start;
}
.how-item {
  min-width: 0;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
}
/* ruimte tussen de 2×2-rijen (geen row-gap, anders komt die ook tussen kop en tekst) */
.how-item:nth-child(n+3) .how-caption { margin-top: 64px; }

.how-caption { font-size: var(--step-m); font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.how-text { margin-top: 12px; font-size: var(--step-body); color: var(--ink); max-width: 34ch; }

.how-frame { margin-top: var(--how-space, 80px); overflow: hidden; aspect-ratio: 4 / 5; }
.how-photo {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.85) contrast(1.05);
  transition: transform .6s var(--ease);
}
.how-photo--group { object-position: 44% 50%; }
@media (hover: hover) {
  .how-frame:hover .how-photo { transform: scale(1.02); }
}

/* wisselende ruimte: de bovenranden van de foto's gaan op en neer */
.how-item:nth-child(1) { --how-space: 80px; }
.how-item:nth-child(2) { --how-space: 140px; }
.how-item:nth-child(3) { --how-space: 96px; }
.how-item:nth-child(4) { --how-space: 124px; }

/* 4 kolommen pas vanaf 1100px (bewuste uitzondering op 1024): bij 1024 zijn de
   kolommen maar 217px en lopen koppen en tekst te krap; daaronder 2 × 2. */
@media (min-width: 1100px) {
  .how-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .how-item:nth-child(n+3) .how-caption { margin-top: 0; }
}

/* telefoon: één kolom, foto ±80% breed, afwisselend links en rechts */
@media (max-width: 599px) {
  .how-list { display: flex; flex-direction: column; gap: 56px; margin-top: 32px; }
  .how-item { display: flex; flex-direction: column; }
  .how-item:nth-child(n+3) .how-caption { margin-top: 0; }
  .how-frame { width: 80%; }
  .how-item:nth-child(even) .how-frame { align-self: flex-end; }
  .how-item:nth-child(1) { --how-space: 24px; }
  .how-item:nth-child(2) { --how-space: 48px; }
  .how-item:nth-child(3) { --how-space: 32px; }
  .how-item:nth-child(4) { --how-space: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .how-photo { transition: none; }
  .how-frame:hover .how-photo { transform: none; }
}