/* =========================================================
   GALLERY PAGE TEMPLATE — shared, reusable stylesheet.
   Loaded by every image-gallery page (labs.php, campus.php,
   canteen.php, library.php, ...) via $pageExtraCss =
   'css/gallery-page.css'.
   Nothing in this file is specific to one facility — every
   class is generic (gal-section, gal-grid, gal-item, gal-
   lightbox, ...) so a new gallery page only needs to point
   gnipst_render_gallery() at its own image folder.
   Images are shown with no caption or title, in a CSS-column
   masonry grid, and open in a lightweight built-in lightbox
   (see gallery-lightbox.php for the markup + JS).
   ========================================================= */
/* ---- Section scaffolding ---- */
.gal-section{ padding:64px 0 96px; }
.gal-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-700); margin-bottom:12px;
}
.gal-kicker::before{ content:''; width:22px; height:2px; background:var(--gold-500); }
.gal-heading{
  font-size:clamp(1.55rem,2.4vw,2.1rem);
  font-weight:800; color:var(--green-900); max-width:680px; margin:0 0 14px;
}
.gal-lede{
  max-width:720px;
  font-size:1rem; line-height:1.75; color:var(--ink-soft);
  margin:0 0 40px;
}
/* =========================================================
   PHOTO GRID — true row-based CSS grid, uniform tiles.
   Always shows a full row before wrapping (4 / 3 / 2 / 1 per
   row by breakpoint), regardless of how many photos are in
   the folder — unlike CSS-column masonry, which fills top-to-
   bottom per column and can look uneven with few images.
   ========================================================= */
.gal-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.gal-item{
  display:block;
  aspect-ratio:4 / 3;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--green-100);
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gal-item:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px -20px rgba(10,61,38,.4);
}
.gal-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:zoom-in;
}
@media (max-width:1100px){ .gal-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px){ .gal-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media (max-width:480px){ .gal-grid{ grid-template-columns:1fr; } }
/* ---- Empty state (no images in folder yet) ---- */
.gal-empty{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:12px;
  padding:64px 24px;
  background:var(--cream);
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  color:var(--ink-soft);
}
.gal-empty svg{ width:34px; height:34px; color:var(--green-700); opacity:.6; }
.gal-empty p{ margin:0; font-size:.9rem; max-width:420px; }
.gal-empty code{
  font-size:.82rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:2px 8px;
  color:var(--green-800);
}
/* =========================================================
   LIGHTBOX — fixed overlay, vanilla JS (see
   gallery-lightbox.php). No caption/title by design.
   ========================================================= */
.gal-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,18,13,.94);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.gal-lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.gal-lightbox-img{
  max-width:88vw;
  max-height:86vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  transform:scale(.97);
  transition:transform .25s ease;
}
.gal-lightbox.is-open .gal-lightbox-img{ transform:scale(1); }
.gal-lightbox-btn{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.gal-lightbox-btn:hover{ background:rgba(255,255,255,.22); }
.gal-lightbox-btn svg{ width:22px; height:22px; }
.gal-lightbox-close{ top:24px; right:24px; }
.gal-lightbox-prev{ left:16px; top:50%; transform:translateY(-50%); }
.gal-lightbox-next{ right:16px; top:50%; transform:translateY(-50%); }
.gal-lightbox-prev:hover, .gal-lightbox-next:hover{ transform:translateY(-50%) scale(1.06); }
.gal-lightbox-count{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.1);
  border-radius:999px;
  padding:6px 14px;
}
@media (max-width:640px){
  .gal-lightbox-btn{ width:40px; height:40px; }
  .gal-lightbox-btn svg{ width:19px; height:19px; }
  .gal-lightbox-close{ top:14px; right:14px; }
  .gal-lightbox-prev{ left:8px; }
  .gal-lightbox-next{ right:8px; }
}