/* =========================================================
   Hof Heinrich – gallery.css
   Ergänzung zu style.css: Galerie-Grid + Lightbox
   Diese Datei ZUSÄTZLICH einbinden ODER Inhalt ans Ende
   von style.css kopieren.
   ========================================================= */

/* ---------- Thumbnail-Galerie ---------- */
.gallery{
  display:grid;
  gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  margin:1rem 0;
}
.gallery__thumb{
  padding:0;border:0;cursor:pointer;background:none;
  border-radius:12px;overflow:hidden;position:relative;
  aspect-ratio:4/3;box-shadow:0 4px 14px rgba(66,96,71,.12);
  transition:transform .15s ease;
}
.gallery__thumb:hover{transform:translateY(-2px)}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__thumb::after{
  content:"🔍";position:absolute;right:.4rem;bottom:.4rem;
  background:rgba(255,255,255,.85);border-radius:8px;
  font-size:.85rem;padding:.1rem .35rem;opacity:0;transition:opacity .15s ease;
}
.gallery__thumb:hover::after,.gallery__thumb:focus-visible::after{opacity:1}

/* Große Galerie (z.B. Hof & Umgebung) mit größeren Kacheln */
.gallery--wide{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(30,35,30,.92);
  align-items:center;justify-content:center;padding:1.5rem;
}
.lightbox.is-open{display:flex}
.lightbox__figure{margin:0;max-width:min(1100px,92vw);text-align:center}
.lightbox__img{
  max-width:100%;max-height:82vh;border-radius:12px;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5);background:#111;
}
.lightbox__caption{color:#f3efe7;margin-top:.75rem;font-size:.95rem}
.lightbox__close,.lightbox__nav{
  position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;
  cursor:pointer;border-radius:50%;width:52px;height:52px;font-size:1.6rem;
  line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__close{top:1rem;right:1rem;font-size:2rem}
.lightbox__prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1rem;top:50%;transform:translateY(-50%)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (max-width:600px){
  .lightbox__close,.lightbox__nav{width:44px;height:44px;font-size:1.3rem}
  .lightbox__prev{left:.4rem}.lightbox__next{right:.4rem}
}