/* ============ st52 — Projecten: een rij kaarten die rondloopt, na Schoorsteenrenovatie en voor De eigenaar. De
   werking komt van Bouwbedrijf SAL via De Zaanse Schilder (st45/sal-projecten.css); de vorm is die van deze pagina:
   kalkwit, gevelgroen, de afgesneden hoek rechtsonder (zoals een deur en een knop), het label van fotos.css. Een
   kaart draagt alleen zijn stempel en plaats en datum met de speld, niets anders. Ongeveer 4:3 op de computer,
   staand op de telefoon. Gezet door ../st52-fotos.py, gelinkt na fotos.css. ============ */

/* de rij loopt over de volle breedte, dus de sectie zelf heeft geen zijlucht; de .wrap erboven en eronder wel */
.projecten__kop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.projecten__kop .h2 { grid-column: 1; grid-row: 1; margin: 0; }
.projecten__intro { grid-column: 1; grid-row: 2; margin: .8rem 0 0; max-width: 40em; color: var(--lei-600); font-size: 1rem; line-height: 1.6; }
.projecten__nav { grid-column: 2; grid-row: 1 / 3; align-self: end; display: flex; gap: .6rem; }
.projecten__knop {
  width: 52px; height: 52px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: transparent; color: var(--groen-700); border: 1px solid var(--groen-600);
  transition: background-color .15s, color .15s;
}
.projecten__knop .ico { width: 20px; height: 20px; }
.projecten__knop--vorig .ico { transform: rotate(180deg); }
.projecten__knop:hover { background: var(--groen-700); color: var(--kalk-000); }
.projecten__knop:focus-visible { outline-offset: 2px; }

.projecten__rij {
  --h: clamp(300px, 30vw, 420px);
  --rand: calc(max(0px, (100% - var(--wrap)) / 2) + var(--pad));   /* waar de tekst van elke sectie begint */
  position: relative; display: flex; gap: clamp(12px, 1.4vw, 18px); margin: 0; list-style: none;
  padding: 4px var(--rand); scroll-padding-inline: var(--rand);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.projecten__rij::-webkit-scrollbar { display: none; }
.proj { flex: none; height: var(--h); aspect-ratio: 4 / 3; max-width: 86vw; scroll-snap-align: start; }
.proj__open {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; cursor: zoom-in;
  background: var(--kalk-300);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
}
.proj__open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.proj__open:hover img { transform: scale(1.03); }
.proj__open:focus-visible { outline: 2.5px solid var(--bak-600); outline-offset: -4px; }
.proj__open .fotolabel { pointer-events: none; bottom: 1.1rem; }

/* de balk: welk deel van een ronde in beeld is; hij volgt het schuiven direct */
.projecten__balk { position: relative; height: 2px; margin-top: 20px; background: var(--kalk-300); overflow: hidden; }
.projecten__balk span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--groen-600); }

@media (max-width: 620px) {
  .projecten__kop { column-gap: 1rem; margin-bottom: var(--r-3); }
  .projecten__kop .h2 { align-self: center; }
  .projecten__nav { grid-row: 1; align-self: center; gap: var(--r-1); }
  .projecten__intro { grid-column: 1 / -1; margin-top: var(--r-2); font-size: 1rem; }
  .projecten__knop { width: 44px; height: 44px; }
  .projecten__knop .ico { width: 18px; height: 18px; }
  .projecten__rij { --h: min(300px, 78vw); }
  .proj { aspect-ratio: 4 / 5; }
  .projecten__balk { margin-top: var(--r-2); }
}

/* ---- "Projecten" in het menu: zeven links in plaats van zes. Een link breekt niet meer binnen zijn woorden (daar
   werd de kopbalk tussen 1041 en 1260 px 17 tot 21 px hoger van), en heeft daar iets minder zijlucht, zodat de balk
   op één regel blijft. Vanaf 1261 px is het menu zoals het was. ---- */
@media (min-width: 1041px) { .nav__link { white-space: nowrap; } }
@media (min-width: 1041px) and (max-width: 1180px) { .nav { gap: .1rem; } .nav__link { padding-inline: .3rem; } }
@media (min-width: 1181px) and (max-width: 1260px) { .nav__link { padding-inline: .55rem; } }