/* =========================================================
   Texelborg Foto's — Stap 2D / Fix 175
   Pagina-eigen galerij/lightbox + duidelijke responsive toestanden.
   Sitebrede basis (typografie, knoppen, header/footer, tokens) blijft in style.css.
   ========================================================= */

body.photo-page > header{
  position:relative;
  top:auto;
}

/* Pagina-intro en eigen containerbalans. */
body.photo-page .photo-page-hero{
  padding:var(--tb-info-hero-top) 0 var(--tb-info-hero-bottom);
}
body.photo-page .photo-page-hero .container,
body.photo-page .photo-gallery-start > .container{
  width:min(var(--tb-container-main), calc(100% - 40px));
  margin-inline:auto;
}
body.photo-page .photo-page-hero h1{
  margin-bottom:10px;
}
body.photo-page .photo-page-hero p{
  margin:0 0 18px;
  max-width:720px;
  line-height:1.65;
}
body.photo-page .photo-page-hero .btn{
  margin-top:0;
}

body.photo-page .photo-gallery-start{
  padding:var(--tb-info-first-top) 0 54px;
}

/* Fotoserie-navigatie: één bron per toestand. */
body.photo-page .gallery-jump{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--tb-space-xs);
  width:100%;
  max-width:100%;
  margin:0 0 26px;
  padding:0;
}
body.photo-page .gallery-jump a{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  min-height:38px;
  max-width:100%;
  padding:var(--tb-space-xs) 13px;
  border:1px solid rgba(23,63,87,.14);
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
body.photo-page .gallery-jump a:hover{
  background:var(--cream);
  border-color:rgba(23,63,87,.24);
}

/* Galerij-inhoud is uitsluitend Foto's-specifiek. */
body.photo-page .gallery-section{
  margin:0 0 34px;
  scroll-margin-top:var(--tb-space-lg);
}
body.photo-page .gallery-section:last-child{margin-bottom:0}
body.photo-page .gallery-section h2{
  margin:0 0 7px;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:28px;
  line-height:1.15;
}
body.photo-page .gallery-section-intro{
  max-width:780px;
  margin:0 0 14px;
  color:var(--muted,#52636a);
  font-size:15px;
  line-height:1.58;
}
body.photo-page .gallery{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
body.photo-page .gallery > a{
  grid-column:span 2;
  display:block;
  overflow:hidden;
  border-radius:14px;
  background:#eef1ed;
  box-shadow:none;
  aspect-ratio:3/2;
  cursor:zoom-in;
}
body.photo-page .gallery > a img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
  box-shadow:none;
  transform:none;
  transition:filter .2s ease;
}
body.photo-page .gallery > a:hover img{
  transform:none;
  filter:brightness(.96);
  box-shadow:none;
}
body.photo-page .gallery:has(> :nth-child(5):last-child) > :nth-last-child(-n+2){
  grid-column:span 3;
}
body.photo-page .gallery:has(> :only-child) > a{
  grid-column:1 / -1;
  max-width:760px;
}

body.photo-page .gallery-reveal{
  opacity:0;
  transform:none;
}
body.photo-page .gallery-reveal.gallery-revealed{
  opacity:1;
  transform:none;
  transition:opacity .42s ease var(--gallery-delay,0ms);
}
body.photo-page footer{margin-top:0}

/* Lightbox hoort volledig bij de Foto's-pagina. */
html.lightbox-open,
html.lightbox-open body{overflow:hidden}
body.photo-page .photo-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease,visibility .24s ease;
}
body.photo-page .photo-lightbox.is-open{opacity:1;visibility:visible}
body.photo-page .photo-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,18,28,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
body.photo-page .photo-lightbox-shell{
  position:relative;
  z-index:2;
  width:min(96vw,1500px);
  height:min(94vh,980px);
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 68px;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:18px 6px 8px;
}
body.photo-page .photo-lightbox-stage{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
body.photo-page .photo-lightbox-stage img{
  display:block;
  max-width:100%;
  max-height:calc(94vh - 155px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 25px 80px rgba(0,0,0,.4);
  opacity:0;
  transform:scale(.965);
  transition:opacity .28s ease,transform .32s ease;
}
body.photo-page .photo-lightbox-stage img.is-loaded{opacity:1;transform:scale(1)}
body.photo-page .photo-lightbox-caption{
  color:rgba(255,255,255,.9);
  font-size:14px;
  margin-top:9px;
  text-align:center;
  min-height:20px;
}
body.photo-page .photo-lightbox-close{
  position:absolute;
  top:3px;
  right:7px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  z-index:3;
}
body.photo-page .photo-lightbox-close:hover{background:rgba(255,255,255,.23)}
body.photo-page .photo-lightbox-nav{
  border:0;
  width:52px;
  height:70px;
  border-radius:14px;
  background:rgba(255,255,255,.11);
  color:#fff;
  font-size:52px;
  line-height:1;
  cursor:pointer;
  justify-self:center;
  transition:background .2s ease,transform .2s ease;
}
body.photo-page .photo-lightbox-nav:hover{background:rgba(255,255,255,.21);transform:scale(1.04)}
body.photo-page .photo-lightbox-prev{grid-column:1;grid-row:1}
body.photo-page .photo-lightbox-next{grid-column:3;grid-row:1}
body.photo-page .photo-lightbox-thumbs-wrap{
  grid-column:1/4;
  grid-row:2;
  width:min(1100px, calc(100vw - 180px));
  max-width:100%;
  margin-inline:auto;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  padding:4px 42px 2px;
}
body.photo-page .photo-lightbox-thumbs{
  display:flex;
  width:max-content;
  min-width:100%;
  justify-content:flex-start;
  gap:var(--tb-space-xs);
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  padding:4px 0 var(--tb-space-xs);
}
body.photo-page .photo-lightbox-thumbs > *{flex:0 0 auto}
body.photo-page .photo-lightbox-thumb{
  flex:0 0 78px;
  height:58px;
  padding:0;
  border:2px solid transparent;
  border-radius:9px;
  overflow:hidden;
  background:#152b38;
  opacity:.56;
  cursor:pointer;
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease;
}
body.photo-page .photo-lightbox-thumb img{width:100%;height:100%;object-fit:cover;display:block}
body.photo-page .photo-lightbox-thumb:hover{opacity:.9;transform:translateY(-1px)}
body.photo-page .photo-lightbox-thumb.is-active{opacity:1;border-color:#fff}

/* Tablet / small desktop. */
@media(max-width:900px){
  body.photo-page .photo-page-hero .container,
  body.photo-page .photo-gallery-start > .container{
    width:min(var(--tb-container-main), calc(100% - 32px));
  }
  body.photo-page .photo-gallery-start{padding-bottom:44px}
  body.photo-page .gallery-jump{justify-content:flex-start;gap:7px;margin-bottom:23px}
  body.photo-page .gallery-section{margin-bottom:30px}
  body.photo-page .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  body.photo-page .gallery > a,
  body.photo-page .gallery:has(> :nth-child(5):last-child) > :nth-last-child(-n+2){grid-column:auto}
  body.photo-page .gallery:has(> :only-child) > a{grid-column:1 / -1;max-width:none}
  body.photo-page .gallery:has(> :nth-child(3):last-child) > :first-child{grid-column:1 / -1}
}

/* Lightbox compacter vanaf 760px breed. */
@media(max-width:760px){
  body.photo-page .photo-lightbox-shell{
    width:100vw;
    height:100vh;
    grid-template-columns:46px minmax(0,1fr) 46px;
    padding:52px 3px 7px;
  }
  body.photo-page .photo-lightbox-stage img{max-height:calc(100vh - 185px);border-radius:8px}
  body.photo-page .photo-lightbox-nav{width:40px;height:60px;font-size:40px;background:rgba(255,255,255,.08)}
  body.photo-page .photo-lightbox-close{top:9px;right:11px}
  body.photo-page .photo-lightbox-thumbs-wrap{padding:4px 8px 2px}
  body.photo-page .photo-lightbox-thumb{flex-basis:66px;height:50px}
}

/* Telefoon staand / smalle tablet. */
@media(max-width:700px){
  body.photo-page .photo-lightbox-shell{
    height:100dvh;
    grid-template-rows:auto auto;
    align-content:center;
    row-gap:6px;
    padding:54px 3px 14px;
  }
  body.photo-page .photo-lightbox-stage{height:auto}
  body.photo-page .photo-lightbox-stage img{max-height:calc(100dvh - 190px)}
  body.photo-page .photo-lightbox-caption{margin-top:7px}
  body.photo-page .photo-lightbox-thumbs-wrap{
    width:100%;
    max-width:100vw;
    padding:2px 10px 0;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.photo-page .photo-lightbox-thumbs{
    width:max-content;
    min-width:100%;
    padding:2px 0 4px;
  }
}

@media(max-width:600px){
  body.photo-page .photo-page-hero h1{font-size:clamp(38px,11vw,48px);margin-bottom:var(--tb-space-xs)}
  body.photo-page .photo-page-hero p{font-size:15px;line-height:1.55;margin-bottom:15px}
  body.photo-page .photo-page-hero .btn{width:auto;min-height:42px;padding:10px 15px;font-size:13px}
  body.photo-page .photo-gallery-start{padding-bottom:18px}
  body.photo-page .gallery-jump{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    width:100%;
    margin:0 0 29px;
    padding:0;
  }
  body.photo-page .gallery-jump a{
    width:100%;
    min-width:0;
    min-height:36px;
    padding:var(--tb-space-xs);
    justify-content:center;
    text-align:center;
    white-space:normal;
    line-height:1.2;
  }
  body.photo-page .gallery-section{margin-bottom:34px}
  body.photo-page .gallery-section h2{font-size:25px;margin-bottom:6px}
  body.photo-page .gallery-section-intro{font-size:14px;line-height:1.52;margin-bottom:var(--tb-space-sm)}
  body.photo-page .gallery{gap:7px}
  body.photo-page .gallery > a{border-radius:11px;aspect-ratio:4/3}
  body.photo-page .gallery:has(> :nth-child(5):last-child) > :last-child,
  body.photo-page .gallery:has(> :nth-child(3):last-child) > :first-child{
    grid-column:1 / -1;
    aspect-ratio:3/2;
  }
}

@media(max-width:350px){
  body.photo-page .gallery-jump{grid-template-columns:1fr}
}

/* Telefoon liggend / laag scherm: eigen componentreden = beschikbare hoogte. */
@media(orientation:landscape) and (max-height:500px){
  body.photo-page .photo-lightbox-shell{
    width:100vw;
    height:100dvh;
    grid-template-columns:44px minmax(0,1fr) 44px;
    grid-template-rows:minmax(0,1fr) auto;
    gap:6px;
    padding:38px 3px 5px;
  }
  body.photo-page .photo-lightbox-stage{height:100%}
  body.photo-page .photo-lightbox-stage img{max-height:calc(100dvh - 104px)}
  body.photo-page .photo-lightbox-nav{width:36px;height:52px;font-size:36px}
  body.photo-page .photo-lightbox-close{top:4px;right:8px;width:38px;height:38px;font-size:28px}
  body.photo-page .photo-lightbox-caption{margin-top:4px;font-size:12px;min-height:16px}
  body.photo-page .photo-lightbox-thumbs-wrap{
    width:100%;
    max-width:100vw;
    padding:1px 8px 0;
  }
  body.photo-page .photo-lightbox-thumbs{padding:1px 0 3px}
  body.photo-page .photo-lightbox-thumb{flex-basis:54px;height:40px}
}

@media(prefers-reduced-motion:reduce){
  body.photo-page .gallery-reveal,
  body.photo-page .gallery-reveal.gallery-revealed,
  body.photo-page .photo-lightbox,
  body.photo-page .photo-lightbox-stage img,
  body.photo-page .photo-lightbox-thumb,
  body.photo-page .photo-lightbox-nav,
  body.photo-page a[data-lightbox-photo] img{
    transition:none!important;
    transform:none!important;
  }
}