/* MABUHAY 2026 - Fotogalerie (/galerie/)
   Raster: Zeilen mit gleicher Hoehe, jedes Bild behaelt sein Seitenverhaeltnis
   (Flexbox: flex-grow und Basisbreite haengen am Seitenverhaeltnis --r). Ohne
   JavaScript steht alles da, die Bilder sind normale Links auf die Grossansicht.
   Filter und Lightbox kommen erst mit galerie.js dazu. */

/* ---------- Kopf ---------- */
.gal-hero{padding-bottom:1.6rem}
.gal-hero__meta{margin-top:1.3rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.gal-hero__pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.38rem .85rem;border-radius:999px;
  background:var(--ink);color:var(--field);
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.gal-hero__pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.gal-hero__credit{font-size:.92rem;font-weight:600;color:var(--muted)}

/* ---------- Filter (klebt unter dem Header) ---------- */
.gal{padding-top:1.2rem}
.gal__filter{
  position:sticky;top:var(--gal-top,73px);z-index:20;
  display:flex;flex-wrap:wrap;gap:.45rem;
  margin:0 -.4rem;padding:.65rem .4rem .75rem;
  background:linear-gradient(var(--field) 78%, rgba(250,243,232,0));
}
/* Fallback ohne JavaScript: Headerhoehe wie gemessen. galerie.js setzt --gal-top
   auf die echte Hoehe, falls sich der Header einmal aendert. */
@media(max-width:860px){.gal__filter{top:var(--gal-top,67px)}}
.gal__chip{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.5rem 1rem;border-radius:999px;
  border:1.5px solid rgba(23,49,88,0.22);background:#fff;color:var(--ink);
  font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-ui) var(--ease-ui),color var(--dur-ui) var(--ease-ui),border-color var(--dur-ui) var(--ease-ui),transform var(--dur-press) var(--ease-ui);
}
.gal__chip:hover{border-color:var(--ink)}
.gal__chip:active{transform:scale(0.97)}
.gal__chip:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.gal__n{font-size:.8rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.gal__chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--field)}
.gal__chip[aria-current="true"] .gal__n{color:var(--gold)}

/* ---------- Tage ---------- */
.gal__day{scroll-margin-top:8rem}
.gal__day + .gal__day{margin-top:3.2rem}
.gal__dayhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:1.6rem 0 1.1rem;padding-bottom:.55rem;border-bottom:2px solid var(--ink);
}
.gal__dayhead h2{font-size:clamp(1.45rem,2.8vw,2.1rem)}
.gal__count{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Raster ---------- */
.gal__grid{--h:200px;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
/* Letzte Zeile nicht aufziehen: der Platzhalter frisst den Rest. */
.gal__grid::after{content:"";flex-grow:999999}
.gal__item{flex-grow:var(--r);flex-basis:calc(var(--r) * var(--h));min-width:0}
.gal__link{
  display:block;position:relative;overflow:hidden;border-radius:6px;
  aspect-ratio:var(--r);background:#e8dcc8;
}
.gal__link img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-ui),filter 300ms var(--ease-ui)}
.gal__link:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media(hover:hover){
  .gal__link:hover img{transform:scale(1.035)}
}
@media(prefers-reduced-motion:reduce){.gal__link img{transition:none}.gal__link:hover img{transform:none}}
@media(max-width:1100px){.gal__grid{--h:170px}}
@media(max-width:760px){.gal__grid{--h:140px;gap:5px}}
/* Telefon: zwei Querformate pro Zeile (2 x 1,5 x 104 px + Abstand passt in 335 px) */
@media(max-width:520px){.gal__grid{--h:104px;gap:4px}.gal__link{border-radius:4px}}

/* ---------- Ende der Seite ---------- */
.gal-ende .container{text-align:center}
.gal-ende .label{display:block;margin-bottom:.9rem}
.gal-ende h2{max-width:22ch;margin-inline:auto;text-wrap:balance}
.gal-ende .hero__ctas{margin-top:1.8rem;justify-content:center}
.gal-ende__hinweis{margin:2.4rem auto 0;max-width:34rem;color:rgba(250,243,232,0.78);font-size:.95rem}
.gal-ende__hinweis a{color:var(--gold)}
.gal-ende__credit{margin-top:1rem;color:rgba(250,243,232,0.62);font-size:.82rem}

/* ---------- Lightbox ---------- */
html.gal-lock,html.gal-lock body{overflow:hidden}
.glb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:var(--night-deep);color:var(--text-night);
  overscroll-behavior:contain;
}
.glb::backdrop{background:var(--night-deep)}
.glb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.glb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(.55rem + env(safe-area-inset-top)) .8rem .55rem 1.1rem;
}
.glb__count{font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;color:rgba(250,243,232,0.82)}
.glb__btn{
  flex:none;width:48px;height:48px;border-radius:50%;border:0;
  display:grid;place-items:center;
  background:rgba(250,243,232,0.13);color:var(--text-night);
  transition:background-color var(--dur-ui) var(--ease-ui),transform var(--dur-press) var(--ease-ui);
}
.glb__btn:hover{background:rgba(250,243,232,0.24)}
.glb__btn:active{transform:scale(0.94)}
.glb__btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:50%}
.glb__btn svg{width:22px;height:22px}
.glb__stage{position:relative;overflow:hidden;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.glb__frame{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.glb__frame.is-anim{transition:transform 260ms var(--ease-ui),opacity 260ms var(--ease-ui)}
.glb__ph,.glb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:4px}
/* Vorschau aus dem Raster steht sofort da, die Grossansicht legt sich darueber */
.glb__frame.is-ready .glb__ph{visibility:hidden}
.glb__img{opacity:0;transition:opacity 220ms var(--ease-ui)}
.glb__img.is-ready{opacity:1}
.glb__foot{
  display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:.8rem;
  padding:.7rem .8rem calc(.9rem + env(safe-area-inset-bottom));
}
.glb__cap{text-align:center;min-height:3em}
.glb__alt{font-size:.98rem;line-height:1.4;color:var(--text-night);max-width:46rem;margin-inline:auto}
.glb__meta{margin-top:.2rem;font-size:.8rem;color:rgba(250,243,232,0.66)}
@media(max-width:640px){
  .glb__alt{font-size:.9rem}
  .glb__foot{gap:.5rem;padding-inline:.5rem}
}
@media(prefers-reduced-motion:reduce){
  .glb__frame.is-anim,.glb__img{transition:none}
}