/* ============================================================
   pages/galerie/css/galerie.css
   ============================================================ */

.gallery-hero { padding:140px 0 80px; background:var(--skyblush); }

/* ── Filters ───────────────────────────────────────────────── */
.gallery-filters {
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:40px;
}
.filter-btn {
  padding:9px 22px; border-radius:100px;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  background:var(--paper); color:var(--ink-mid);
  border:2px solid rgba(22,163,74,.15);
  cursor:pointer; transition:all var(--transition);
}
.filter-btn:hover { border-color:var(--green); color:var(--green); background:var(--green-pale); }
.filter-btn.active { background:var(--green); color:#fff; border-color:var(--green); }
.filter-btn:focus-visible { outline:2px solid var(--green); outline-offset:3px; }

/* ── Grid ──────────────────────────────────────────────────── */
.gallery-section { background:var(--white); }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:240px;
  gap:14px;
}
.gi { overflow:hidden; border-radius:var(--radius); position:relative; cursor:pointer; }
.gi.wide { grid-column:span 2; }
.gi.tall { grid-row:span 2; }
.gi img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease; }
.gi:hover img,.gi:focus img { transform:scale(1.08); }
.gi:focus-visible { outline:3px solid var(--green); outline-offset:2px; }

.gi-ov {
  position:absolute;inset:0;
  background:rgba(22,163,74,0);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  transition:background .3s;
}
.gi:hover .gi-ov,.gi:focus .gi-ov { background:rgba(22,163,74,.35); }
.gi-icon {
  width:54px;height:54px;background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;opacity:0;transform:scale(.6);
  transition:all .3s;box-shadow:var(--shadow);
}
.gi:hover .gi-icon,.gi:focus .gi-icon { opacity:1;transform:scale(1); }
.gi-caption {
  font-size:.75rem;font-weight:500;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);
  transition:all .3s .05s;
  text-align:center;padding:0 16px;
}
.gi:hover .gi-caption,.gi:focus .gi-caption { opacity:1;transform:translateY(0); }

/* Filtering animation */
.gi.hidden { display:none; }
.gi.fade-in { animation:scaleIn .4s ease; }

.no-results { text-align:center;padding:60px;color:var(--ink-dim);font-size:1.1rem; }

/* ── Lightbox ──────────────────────────────────────────────── */
.lightbox {
  position:fixed;inset:0;z-index:500;background:rgba(15,36,23,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.lightbox.open { opacity:1;pointer-events:all; }
.lb-inner { display:flex;flex-direction:column;align-items:center;gap:16px;max-width:90vw; }
.lb-inner img { max-width:90vw;max-height:80vh;object-fit:contain;border-radius:8px; }
.lb-caption { color:rgba(255,255,255,.75);font-size:.85rem;text-align:center; }
.lb-x {
  position:absolute;top:28px;right:36px;
  width:44px;height:44px;background:rgba(255,255,255,.1);
  border:none;border-radius:50%;color:#fff;font-size:1.2rem;
  cursor:pointer;transition:background .2s;
  display:flex;align-items:center;justify-content:center;
}
.lb-x:hover { background:rgba(255,255,255,.25); }
.lb-prev,.lb-next {
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:50%;
  color:#fff;font-size:1.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.lb-prev { left:24px; }
.lb-next { right:24px; }
.lb-prev:hover,.lb-next:hover { background:rgba(255,255,255,.25);transform:translateY(-50%) scale(1.1); }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:960px) {
  .gallery-grid { grid-template-columns:repeat(2,1fr);grid-auto-rows:200px; }
  .gi.wide { grid-column:span 2; }
  .lb-prev { left:10px; }
  .lb-next { right:10px; }
}
@media(max-width:560px) {
  .gallery-grid { grid-template-columns:1fr;grid-auto-rows:220px; }
  .gi.wide { grid-column:span 1; }
}