/* ============================================================
   ECOLAST — gallery page (gallery.html and its translations)
   Uses the site's own tokens, so dark mode, gold light mode and
   right-to-left pages all follow the rest of the site.
   ============================================================ */
.gal-tools{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
.gal-tools[hidden]{ display:none; }
.gal-f{
  font:600 14px/1 inherit; font-family:inherit; cursor:pointer;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--glass-brd); background:var(--glass-bg); color:var(--muted);
  transition:background .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.gal-f:hover{ color:var(--ink); background:var(--glass-bg-2); }
.gal-f.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.gal-f:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Masonry: columns keep every picture at its own proportions; the description sits below the picture */
.gal{ column-width:270px; column-gap:18px; }
.gi{
  display:block; position:relative; width:100%; margin:0 0 18px; padding:0; text-align:start;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  border:1px solid var(--glass-brd); border-radius:18px; overflow:hidden; cursor:zoom-in;
  background:var(--glass-bg-2); color:inherit; font:inherit;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.gi:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.gi img{
  display:block; width:100%; height:auto;
  opacity:0; transform:scale(1.03);
  transition:opacity .7s var(--ease), transform .9s var(--ease);
}
.gi img.ok{ opacity:1; transform:none; }
.gi:hover img.ok{ transform:scale(1.045); }
.gi .pic{ display:block; overflow:hidden; line-height:0; }
.gi .cap{
  display:block; padding:12px 15px 14px; color:var(--ink);
  font-size:14.5px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;   /* long texts are cut after 4 lines; the full text is in the viewer */
  border-top:1px solid var(--glass-brd);
}

/* placeholder blocks while the list loads */
.gal-sk{ break-inside:avoid; margin:0 0 18px; border-radius:18px; background:var(--glass-bg-2); border:1px solid var(--glass-brd); animation:galPulse 1.4s ease-in-out infinite; }
@keyframes galPulse{ 50%{ opacity:.55; } }

.gal-msg{ padding:34px 24px; border-radius:18px; text-align:center; color:var(--muted); border:1px solid var(--glass-brd); background:var(--glass-bg); }

/* Lightbox */
.lb{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:rgba(8,10,14,.97);
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
}
.lb[hidden]{ display:none; }
.lb-f{ margin:0; max-width:100%; display:grid; justify-items:center; gap:14px; }
.lb-f img{ display:block; max-width:min(94vw,1400px); max-height:78vh; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); transition:opacity .25s ease; }
.lb-f img.loading{ opacity:.25; }
.lb-f figcaption{ color:#e9ecef; font-size:16px; line-height:1.55; text-align:center; max-width:70ch; min-height:1.4em; max-height:20vh; overflow-y:auto; white-space:pre-line; overflow-wrap:anywhere; }
.lb-c{ position:absolute; top:max(20px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); color:#aeb4bb; font-size:13px; letter-spacing:.06em; direction:ltr; }
.lb-b{
  position:absolute; display:grid; place-items:center; width:46px; height:46px; padding:0; cursor:pointer;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s ease;
}
.lb-b:hover{ background:rgba(255,255,255,.2); }
.lb-b:focus-visible{ outline:2px solid #ffcf53; outline-offset:3px; }
.lb-b svg{ width:20px; height:20px; }
.lb-x{ top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); }
.lb-p{ left:max(14px,env(safe-area-inset-left)); top:50%; transform:translateY(-50%); }
.lb-n{ right:max(14px,env(safe-area-inset-right)); top:50%; transform:translateY(-50%); }
.lb.one .lb-p, .lb.one .lb-n, .lb.one .lb-c{ display:none; }
@media (max-width:640px){
  .gal{ column-width:150px; column-gap:12px; }
  .gi{ margin-bottom:12px; border-radius:14px; }
  .lb-b{ width:40px; height:40px; }
  .lb-p, .lb-n{ top:auto; bottom:max(16px,env(safe-area-inset-bottom)); transform:none; }
  .lb-f img{ max-height:70vh; }
}
@media (prefers-reduced-motion:reduce){ .gi img, .gal-sk{ transition-duration:.01s; animation:none; } }