/* ============ st52 — de foto's bewijzen dat het zijn eigen werk is (hoofdstuk 4 van 5). Gezet door
   ../st52-fotos.py. De werking komt van Bouwbedrijf SAL via De Zaanse Schilder (st45: sal-fotos.css, hoofdfoto.css);
   de vorm is die van deze pagina: kalkwit, gevelgroen, het goudgeel van de knoppen, Playfair Display en Inter, de
   schuine snede en de afgesneden hoek. De operator: "please don't make it too cluttered" — dus minder dingen, nooit
   kleinere of blekere: op een foto hoogstens zijn stempel en één label; het stempel alleen op de hoofdfoto van een
   blok en op de projectkaarten; één rij duimen per dienst, op één regel, hoogstens vier tegels met de "+N".
   Gelinkt na wie-diensten.css; geen bestaand bestand is aangeraakt. ============ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- de hoofdfoto opent de viewer: een onzichtbare link over de hele foto. De foto zelf blijft staan waar hij
   stond (zelfde element, zelfde regels, dus hetzelfde kader en dezelfde snede); de link ligt erover. ---- */
.foto-open { position: absolute; inset: 0; z-index: 1; display: block; cursor: zoom-in; }
.foto-open:focus-visible { outline: 2.5px solid var(--bak-600); outline-offset: -4px; }

/* ============ ZEGEL — zijn merk en de naam van de zaak, schuin opgedrukt; nooit "EIGEN WERK" ============ */
.zegel {
  position: absolute; z-index: 3; top: 14px; right: 14px; width: 76px; height: 76px; display: block;
  pointer-events: none; transform: rotate(-12deg); filter: drop-shadow(0 2px 5px rgba(23, 29, 38, .38));
  font-family: var(--merk-letter);
}

/* ============ LABEL — plaats en datum met de speld, groot, en "Bekijk onze projecten" in één plaat. Het label van
   de pagina zelf (style.css: .projectlijn): kalkwit, een goudgele rand links, de schuine rechterkant. ============ */
.fotolabel {
  position: absolute; z-index: 2; left: 0; bottom: 1.2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  max-width: min(84%, 27rem); padding: .72rem 1.5rem .72rem 1rem;
  background: var(--kalk-000); color: var(--lei-900); border-left: 4px solid var(--bak-600);
  clip-path: polygon(0 0, 100% 0, calc(100% - .9rem) 100%, 0 100%);
  text-decoration: none; box-shadow: 0 6px 18px rgba(23, 29, 38, .16);
}
.fotolabel__waar {
  display: flex; align-items: flex-start; gap: .45rem;
  font: 500 clamp(1.02rem, 1.35vw, 1.18rem)/1.28 var(--serif); letter-spacing: .005em; color: var(--lei-900);
}
/* de speld: op de foto, op de kaart en in de viewer */
.fotolabel__waar::before, .lb__cap::before {
  content: ""; flex: none; width: 1em; height: 1em; margin-top: .12em; background: var(--groen-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fotolabel__door {
  display: inline-flex; align-items: center; gap: .5rem; margin-left: calc(1em + .45rem);
  font: 600 .84rem/1.25 var(--sans); letter-spacing: .01em; color: var(--groen-700);
}
.fotolabel__door svg { flex: none; transition: transform .2s; }
a.fotolabel:hover .fotolabel__door { text-decoration: underline; text-underline-offset: 3px; }
a.fotolabel:hover .fotolabel__door svg { transform: translateX(3px); }
a.fotolabel:focus-visible { outline: 2.5px solid var(--bak-600); outline-offset: 2px; }

/* ---- waar elk label en elk stempel staat: weg van elke snede ---- */
/* Gevelrenovatie: de kaart schuift over de voet van de foto, dus het label staat linksboven; de foto is de breedste
   van de pagina, het stempel de maat die De Zaanse Schilder op zijn hoofddienst gaf */
.kaart__photo > .fotolabel { top: 1.2rem; bottom: auto; }
.kaart__photo > .zegel { top: 16px; right: 16px; width: 92px; height: 92px; }
/* Schoorsteenrenovatie: de snede neemt de hoek rechtsboven en linksonder; het blok staat gespiegeld, dus stempel en
   label ook — het stempel linksboven, het label rechtsonder met de rand rechts (zoals .projectlijn--cap) */
.foto--cut-links > .zegel { right: auto; left: 14px; }
.foto--cut-links > .fotolabel {
  /* de rechterrand van de foto loopt schuin (de snede wijkt naar boven 9% naar binnen): het label staat 12px van de
     rand, zodat ook zijn bovenhoek nog op de foto ligt */
  left: auto; right: .75rem; align-items: flex-end; text-align: right;
  border-left: 0; border-right: 4px solid var(--bak-600); padding: .72rem 1rem .72rem 1.5rem;
  clip-path: polygon(.9rem 0, 100% 0, 100% 100%, 0 100%);
}

/* ============ DUIMEN — de rest van de reeks onder de hoofdfoto; elke tegel opent de viewer ============ */
.duimen {
  --plekken: 4;                      /* hoogstens vier tegels, de "+N" meegeteld */
  display: flex; flex-wrap: nowrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none;
}
.duimen > li { flex: none; }
.duim {
  position: relative; display: block; width: 85px; height: 64px; overflow: hidden; cursor: zoom-in;
  background: var(--kalk-300); box-shadow: 0 0 0 2px var(--kalk-000), 0 2px 8px rgba(23, 29, 38, .2);
  transition: box-shadow .15s, transform .15s;
}
.duimen .duim img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.duim:hover { box-shadow: 0 0 0 2px var(--groen-600), 0 4px 12px rgba(23, 29, 38, .24); transform: translateY(-1px); }
.duim:focus-visible { outline: 2.5px solid var(--bak-600); outline-offset: 3px; }
/* de "+N": de volgende foto onder een groene sluier, het getal groot */
.meer::after { content: ""; position: absolute; inset: 0; background: rgba(37, 44, 24, .62); transition: background-color .2s; }
.meer:hover::after { background: rgba(37, 44, 24, .42); }
.meer__n {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none;
  color: var(--kalk-000); font: 600 22px/1 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.meer-plek--laatste .meer::after, .meer-plek--laatste .meer__n { display: none; }

/* Gevelrenovatie: de rij staat in de kaart, bovenaan het grijze vlak rechts — direct onder het zichtbare deel van de
   foto, want de kaart ligt over de voet ervan */
.kaart__right > .duimen { margin: 0 0 .2rem; }
/* Gevelreiniging en Schilderwerk: één foto per kaart, de duimen eronder. Waar de twee kaarten onder elkaar staan
   (860 en smaller) is de foto 16:9, het kader dat deze foto's op de telefoon al hadden; daarboven 4:3 zoals in st51 */
.d3-paar.d3-paar--een { grid-template-columns: minmax(0, 1fr); }
.d3-paar--een > .duimen { margin-top: 4px; }
@media (max-width: 860px) { .d3-paar--een > figure > img { aspect-ratio: 16 / 9; } }

/* Dakwerkzaamheden: de detailfoto is een duim geworden, het vlak eronder hoeft niet meer vrij */
#dakwerkzaamheden .sec__col--media { padding-bottom: 0; }

/* op de telefoon (de pagina's eigen grens, 620) gaan de duimen weg: een tik op de foto opent nog de hele reeks, en
   de telefoonpagina mag niet langer worden dan in st51 */
@media (max-width: 620px) {
  html:not([data-telefoon="uit"]) .duimen { display: none; }
}

/* ============ de viewer: de foto heel op een donkergroene grond; sluiten met ×, Esc of een klik ernaast ============ */
.lb {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: 72px clamp(12px, 6vw, 88px) 104px; background: rgba(37, 44, 24, .97); color: var(--kalk-100);
}
.lb[open] { display: flex; align-items: center; justify-content: center; }
.lb::backdrop { background: transparent; }
.lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.lb__img {
  width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 300px); max-height: calc(100svh - 300px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .7); background: var(--groen-800);
}
/* plaats en datum, groot, met de speld */
.lb__cap { display: flex; align-items: flex-start; justify-content: center; gap: .45rem; color: var(--kalk-000); font: 500 21px/1.3 var(--serif); text-align: center; }
.lb__cap::before { background: var(--bak-600); }
.lb__cap[hidden] { display: none; }
.lb__x, .lb__nav {
  position: fixed; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.lb__x { top: 12px; right: 12px; width: 48px; height: 48px; background: var(--kalk-000); color: var(--groen-900); font: 400 30px/1 var(--sans); }
.lb__x:hover { background: var(--kalk-200); }
.lb__nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; background: rgba(245, 245, 240, .14); color: var(--kalk-100); }
.lb__nav:hover { background: rgba(245, 245, 240, .3); }
.lb__nav .ico { width: 22px; height: 22px; }
.lb__nav--prev { left: 12px; }
.lb__nav--prev .ico { transform: rotate(180deg); }
.lb__nav--next { right: 12px; }
.lb--one .lb__nav { display: none; }
html.lb-open { overflow: hidden; }
/* de teller, linksboven tegenover het kruis */
.lb__tel {
  position: fixed; top: 12px; left: 12px; margin: 0; height: 48px; padding: 0 18px; display: flex; align-items: center;
  background: rgba(245, 245, 240, .14); color: var(--kalk-100);
  font: 600 15px/1 var(--sans); letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.lb__tel[hidden] { display: none; }
/* de hele reeks als strook onderaan, de huidige opgelicht */
.lb--one .lb__strook { display: none; }
.lb__strook {
  display: flex; gap: 6px; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain; background: rgba(245, 245, 240, .08);
}
.lb__strook::-webkit-scrollbar { display: none; }
.lb__t { position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: var(--groen-800); opacity: .55; transition: opacity .15s; }
.lb__t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb__t::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px transparent; }
.lb__t.is-nu::after { box-shadow: inset 0 0 0 3px var(--bak-600); }
.lb__t:hover, .lb__t.is-nu { opacity: 1; }
.lb__t:focus-visible { outline: 2px solid var(--bak-600); outline-offset: 2px; }
/* "Ook zo'n klus?" en de twee knoppen van de pagina, onder de foto */
.lb__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 2px; }
.lb__vraag { margin: 0; color: var(--kalk-100); font: 600 .84rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.lb__knoppen { display: flex; gap: 10px; }
.lb__knoppen .btn { min-height: 48px; white-space: nowrap; }
.lb__kort { display: none; }

@media (max-width: 620px) {
  .zegel, .kaart__photo > .zegel { top: 10px; right: 10px; width: 64px; height: 64px; }
  .foto--cut-links > .zegel { left: 10px; }
  .fotolabel { bottom: .9rem; padding: .6rem 1.3rem .6rem .85rem; max-width: 88%; }
  .foto--cut-links > .fotolabel { padding: .6rem .85rem .6rem 1.3rem; }
  .fotolabel__waar { font-size: 1rem; }
  /* de kaart van Gevelrenovatie: op de telefoon ligt er geen kaart over de voet, maar loopt de onderrand schuin
     omhoog naar rechts (12%); het label staat linksonder, boven die lijn */
  .kaart__photo > .fotolabel { top: auto; bottom: calc(12% + .5rem); }

  .lb { padding: 72px 10px 150px; }
  .lb__img { max-height: calc(100svh - 270px); }
  .lb__cap { font-size: 18px; }
  .lb__nav { top: auto; bottom: 16px; margin-top: 0; width: 48px; height: 48px; }
  .lb__nav--prev { left: calc(50% - 58px); }
  .lb__nav--next { right: calc(50% - 58px); }
  .lb__strook { bottom: 76px; }
  .lb__t { width: 48px; height: 48px; }
  /* op de telefoon alleen "Bel" en "App", in de bovenste rij naast het kruis */
  .lb__vraag, .lb__lang { display: none; }
  .lb__kort { display: inline; }
  .lb__cta { position: fixed; top: 12px; right: 68px; margin: 0; flex-wrap: nowrap; }
  .lb__knoppen { gap: 6px; }
  .lb__knoppen .btn { min-height: 48px; padding: 0 14px; gap: 7px; }
  .lb__tel { padding: 0 12px; font-size: 14px; }
}
/* het smalste scherm: de kaartjes van Gevelreiniging en Schilderwerk zijn hier 245 × 138; label en stempel houden
   hun maat, het label krijgt de hele breedte onder het stempel */
@media (max-width: 359px) {
  .fotolabel { bottom: .5rem; padding: .5rem 1.1rem .5rem .75rem; max-width: calc(100% - 6px); }
  .zegel, .kaart__photo > .zegel { top: 4px; }
}

/* ============ st52 · reparatie — de belbalk op 320: "Opname" viel er rechts af. Met minder lucht in en tussen de
   knoppen passen alle drie; de letter blijft even groot. ============ */
@media (max-width: 359px) {
  .sticky { gap: 6px; padding-inline: 6px; }
  .sticky__bel { padding-inline: .5rem; gap: .4rem; }
  .sticky__wa { padding-inline: .7rem; }
  .sticky__form { padding-inline: .5rem; letter-spacing: .05em; }
}