/* Fotomozaïek en viewer op de lodgepagina.
   Laadt alleen op lodgepagina's met foto's; pagina's met de getekende plaat
   merken hier niets van.

   Afspraak: de tegels snijden bij (object-fit: cover), de viewer nooit
   (object-fit: contain). Een tegel is een uitsnede om de mozaïek strak te
   houden; wie de foto wil zien zoals de lodge hem nam, klikt erop.

   Rasters per aantal foto's staan hieronder. Wijzig je een kolomverhouding,
   pas dan ook gallery_sizes() in build.py aan: die vertelt de browser hoe
   breed elke tegel wordt, zodat hij de juiste WebP-breedte kiest. */

/* ---- Mozaïek ------------------------------------------------------------ */
/* Sinds 2 okt 2026 staat de kop op dezelfde ondergrond als de pagina, dus
   schuift de mozaïek niet meer omhoog over een zandband, en zonder schaduw. */
.pg { margin: 0; position: relative; z-index: 2; }
.pg-frame { position: relative; }
.pg-grid {
  display: grid; gap: 8px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--sand);
}
.pg-tile {
  position: relative; display: block; width: 100%; min-width: 0; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--sand); cursor: zoom-in; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.pg-tile picture { display: contents; }
/* Absoluut binnen de tegel: dan maakt het niet uit hoe een knop zijn eigen
   inhoud uitlijnt, en vult de foto altijd precies het vak. */
.pg-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.pg-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(22,26,14,0); transition: background .2s ease;
}
@media (hover: hover) {
  .pg-tile:hover::after { background: rgba(22,26,14,.16); }
  .pg-tile:hover img { transform: scale(1.025); }
}
/* De rand van de mozaïek knipt een gewone focusrand weg, dus die staat binnenin. */
.pg-tile:focus-visible { outline: none; }
.pg-tile:focus-visible::after { background: rgba(22,26,14,.12); box-shadow: inset 0 0 0 3px var(--ochre); }

.pg-count {
  display: none; position: absolute; right: 12px; bottom: 12px; margin: 0;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(22,26,14,.72); color: #fff;
  font: 600 .78rem/1.5 var(--font-ui); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.pg-all {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--ink); border-radius: 8px;
  background: var(--bone); color: var(--ink);
  font: 600 .875rem/1.2 var(--font-ui); cursor: pointer;
  box-shadow: 0 2px 10px rgba(22,26,14,.18);
  transition: background .15s ease, transform .15s ease;
}
.pg-all:hover { background: #fff; transform: translateY(-1px); }
.pg-all:active { transform: none; }
.pg-all svg { flex: none; display: block; }

/* Onderschrift links, credit rechts. */
.pg-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px;
  margin: 12px 2px 0;
}
.pg-caption { flex: 1 1 28ch; font-size: .9rem; color: var(--ink-soft); }
.pg-credits {
  flex: 0 1 auto; margin-left: auto; text-align: right;
  font-family: var(--font-ui); font-size: .78rem; color: var(--ink-soft);
}
.pg-credit-more { margin-left: 14px; }
.pg-credits a { color: inherit; text-underline-offset: 2px; }
.pg-credit[hidden] { display: none; }
/* Tablet toont drie tegels, een groot scherm vijf: elk zijn eigen "Also". */
.pg-credit-more.for-desk { display: none; }
@media (min-width: 900px) {
  .pg-credit-more.for-desk { display: inline; }
  .pg-credit-more.for-tab { display: none; }
}

/* Tablet en groter: een raster. */
@media (min-width: 600px) {
  .pg--n1 .pg-grid { display: block; }
  .pg--n1 .pg-tile { height: clamp(300px, 42vw, 520px); }
  .pg--n2 .pg-grid { grid-template-columns: 1fr 1fr; aspect-ratio: 2.4 / 1; }
  .pg--n3 .pg-grid, .pg--n4 .pg-grid, .pg--n5 .pg-grid {
    grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9;
  }
  .pg--n3 .pg-tile:first-child,
  .pg--n4 .pg-tile:first-child,
  .pg--n5 .pg-tile:first-child { grid-row: 1 / 3; }
  .pg--n4 .pg-tile:nth-child(n+4),
  .pg--n5 .pg-tile:nth-child(n+4) { display: none; }
}
/* Groot scherm: vanaf vijf foto's de volledige mozaïek, groot links (1/2) en
   vier rechts (2×2). Bij drie of vier: groot links (2/3) en twee rechts. */
@media (min-width: 900px) {
  .pg--n3 .pg-grid, .pg--n4 .pg-grid { aspect-ratio: 2 / 1; }
  .pg--n5 .pg-grid { grid-template-columns: 2fr 1fr 1fr; aspect-ratio: 2 / 1; }
  .pg--n5 .pg-tile:nth-child(n+4) { display: block; }
  .pg--n5 .pg-tile:nth-child(n+6) { display: none; }
}
/* Sinds de container 1440 is (2 okt 2026) wordt de mozaïek 1392 breed, en op
   2:1 zou hij dan bijna 700 hoog zijn. Daarom een plafond: nooit hoger dan
   620, en op een laag scherm nog lager: kop plus mozaïek passen dan in het
   eerste scherm en de aanvraagkaart eronder komt na een korte scroll in beeld
   (1280×800: mozaïek 500 hoog, onderrand op 800).

   Een max-height naast aspect-ratio werkt hier niet: de browser rekent het
   plafond via de verhouding terug naar de breedte en de mozaïek wordt smaller
   dan de pagina. Dus een echte hoogte, de helft van de breedte van het frame
   (cqw), met het plafond erin. De kolomverhoudingen blijven gelijk; boven
   1240 breed worden de tegels daardoor iets liggender (groot en klein allebei
   ongeveer 1,1:1 op de volle breedte), wat beter past bij liggende foto's dan
   vierkant. Een browser zonder containereenheden houdt gewoon de 2:1 van
   hierboven. */
@supports (height: 1cqw) {
  @media (min-width: 900px) {
    .pg-frame { container-type: inline-size; }
    .pg--n3 .pg-grid, .pg--n4 .pg-grid, .pg--n5 .pg-grid {
      aspect-ratio: auto; height: min(50cqw, 620px, max(380px, 100vh - 300px));
    }
    .pg--n2 .pg-grid {
      aspect-ratio: auto; height: min(100cqw / 2.4, 620px, max(380px, 100vh - 300px));
    }
  }
}
/* Telefoon: één foto van rand tot rand, vegen door alle foto's. Alleen de
   carrousel scrolt, de pagina niet. */
@media (max-width: 599px) {
  .lodge-hero--photos { padding-inline: 0; }
  .pg { margin-top: 0; }
  .pg-grid {
    display: flex; gap: 0; border-radius: 0; box-shadow: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .pg-grid::-webkit-scrollbar { display: none; }
  .pg-tile {
    flex: 0 0 100%; aspect-ratio: 3 / 2; cursor: pointer;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .pg-count { display: block; }
  .pg-all { display: none; }
  .pg-meta { margin: 10px 16px 0; }
  .pg-credits { margin-left: 0; text-align: left; }
  /* Op de telefoon zie je één foto tegelijk en loopt de credit daarmee mee. */
  .pg-credit-more, .pg-credit-more.for-desk { display: none; }
}

/* ---- Viewer ------------------------------------------------------------- */
html.lb-lock { overflow: hidden; }
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(16,19,10,.97); color: var(--bone);
  overflow: hidden; overscroll-behavior: contain;
}
@supports (height: 100dvh) { .lb { height: 100dvh; } }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.lb::backdrop { background: rgba(16,19,10,.9); }
.lb :focus-visible { outline-color: var(--ochre); }

.lb-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.lb-count {
  margin: 0 auto 0 6px; font: 600 .95rem/1 var(--font-ui); letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: rgba(246,240,226,.9);
}
.lb-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-width: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(246,240,226,.28); background: transparent; color: var(--bone);
  font: 600 .875rem/1 var(--font-ui); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.lb-tool:hover { background: rgba(246,240,226,.12); border-color: rgba(246,240,226,.5); }
.lb-tool svg { flex: none; display: block; }
.lb-close { width: 40px; padding: 0; }

/* De foto past altijd in zijn geheel: max-width en max-height samen, nooit
   bijsnijden. Klikken naast de foto (op het podium) sluit de viewer. */
.lb-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: 0 84px;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.lb-stage picture { display: contents; }
.lb-img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(100%, 92vh);
  object-fit: contain; border-radius: 4px;
  -webkit-user-drag: none;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(246,240,226,.92); color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: background .15s ease, transform .15s ease;
}
.lb-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.lb-nav svg { display: block; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }

.lb-meta { padding: 12px 20px 6px; text-align: center; }
.lb-caption { margin: 0 auto; max-width: 72ch; font-size: .95rem; line-height: 1.5; color: rgba(246,240,226,.92); }
.lb-caption:empty { display: none; }
.lb-credit { margin: 3px 0 0; font: .78rem/1.4 var(--font-ui); color: rgba(246,240,226,.62); }
.lb-credit a { color: inherit; text-underline-offset: 2px; }
.lb-credit[hidden] { display: none; }

/* Duimnagels onder de foto, alleen waar daar ruimte voor is. */
.lb-thumbs { display: none; }
@media (min-width: 900px) and (min-height: 640px) {
  .lb-thumbs {
    display: flex; gap: 6px; padding: 10px 16px 18px;
    overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(246,240,226,.3) transparent;
  }
  /* Centreren zonder dat het begin onbereikbaar wordt als de rij overloopt. */
  .lb-thumbs > :first-child { margin-left: auto; }
  .lb-thumbs > :last-child { margin-right: auto; }
}
.lb-thumb {
  flex: none; position: relative; width: 72px; height: 50px; padding: 0;
  border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: rgba(246,240,226,.08); opacity: .5; transition: opacity .15s ease;
}
.lb-thumb:hover { opacity: .85; }
.lb-thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bone); }
.lb-thumb picture, .lb-cell picture { display: contents; }
.lb-thumb img, .lb-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Overzicht van alle foto's, via "All photos". Elke derde foto over de volle
   breedte, daartussen paren: rustiger dan een kaal raster. */
.lb-grid { display: none; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 48px; }
.lb.is-grid .lb-stage, .lb.is-grid .lb-meta,
.lb.is-grid .lb-thumbs, .lb.is-grid .lb-gridbtn { display: none; }
.lb.is-grid .lb-grid { display: block; }
.lb-grid-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-width: 920px; margin: 0 auto;
}
.lb-cell {
  position: relative; aspect-ratio: 3 / 2; padding: 0; border: 0;
  border-radius: 6px; overflow: hidden; cursor: zoom-in;
  background: rgba(246,240,226,.06);
}
.lb-cell:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.lb-cell img { transition: opacity .15s ease; }
.lb-cell:hover img { opacity: .85; }
.lb-cell:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }

@media (max-width: 599px) {
  .lb-bar { padding: 8px 10px; }
  .lb-stage { padding: 0; }
  .lb-img { border-radius: 0; }
  .lb-nav { width: 38px; height: 38px; background: rgba(246,240,226,.82); }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-gridbtn span { display: none; }
  .lb-gridbtn { width: 40px; padding: 0; }
  .lb-meta { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .lb-grid { padding-inline: 8px; }
  .lb-grid-inner { gap: 6px; }
}