/* ===============================================================
   GALLERY PAGE
   Thumbnails in a responsive grid, plus a full-screen lightbox.
   =============================================================== */

.gal-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);
  margin-bottom:var(--space-6);
}
.gal-tab{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.9375rem;
  letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;
  color:var(--teal-card);background:#fff;border:1px solid var(--border);
  padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);
  transition:all 0.25s ease;
}
.gal-tab:hover{border-color:var(--blue);color:var(--blue)}
.gal-tab.is-active{
  background:linear-gradient(135deg,var(--teal-card) 0%,var(--teal-card2) 100%);
  color:#fff;border-color:transparent;
}
.gal-tab-count{
  font-size:0.75rem;opacity:0.75;background:rgba(0,0,0,0.12);
  padding:1px 7px;border-radius:var(--radius-full);
}
.gal-tab.is-active .gal-tab-count{background:rgba(255,255,255,0.22)}

.gal-count{
  font-family:'Barlow',sans-serif;font-size:0.875rem;color:var(--muted);
  text-align:center;margin:0 0 var(--space-6);
}

/* ---- GRID ---- */
.gal-grid{
  display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
}
.gal-item{
  display:block;position:relative;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--offwhite);
  aspect-ratio:4/3;cursor:zoom-in;
  box-shadow:0 2px 10px rgba(8,61,110,0.08);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s ease;
}
.gal-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.gal-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,31,58,0.35),transparent 55%);
  opacity:0;transition:opacity 0.3s ease;
}
.gal-item:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(8,61,110,0.20)}
.gal-item:hover img{transform:scale(1.06)}
.gal-item:hover::after{opacity:1}
.gal-item:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---- PAGER ---- */
.gal-pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-2);margin-top:var(--space-10);
}
.gal-page{
  min-width:2.5rem;padding:var(--space-2) var(--space-3);text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.9375rem;
  color:var(--teal-card);text-decoration:none;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  transition:all 0.2s ease;
}
.gal-page:hover{border-color:var(--blue);color:var(--blue)}
.gal-page.is-current{
  background:var(--teal-card);color:#fff;border-color:var(--teal-card);
}
.gal-page-arrow{letter-spacing:0.06em}
.gal-gap{color:var(--muted);padding:0 var(--space-1)}

/* ---- LIGHTBOX ---- */
.gal-lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(4,15,26,0.94);
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-10) var(--space-16);
  opacity:0;transition:opacity 0.25s ease;
}
.gal-lightbox[hidden]{display:none}
.gal-lightbox.is-open{opacity:1}

.gal-stage{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.gal-stage img{
  max-width:100%;max-height:calc(100vh - 9rem);
  width:auto;height:auto;display:block;
  border-radius:var(--radius-md);box-shadow:0 24px 70px rgba(0,0,0,0.55);
}
.gal-cap{
  font-family:'Barlow',sans-serif;font-size:0.875rem;color:rgba(255,255,255,0.78);
  text-align:center;max-width:50rem;
}

.gal-close,.gal-nav{
  position:absolute;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease,transform 0.2s ease;
}
.gal-close{
  top:var(--space-5);right:var(--space-5);
  width:2.75rem;height:2.75rem;border-radius:var(--radius-full);
  font-size:1.75rem;line-height:1;
}
.gal-nav{
  top:50%;transform:translateY(-50%);
  width:3.25rem;height:3.25rem;border-radius:var(--radius-full);
  font-size:2rem;line-height:1;
}
.gal-prev{left:var(--space-5)}
.gal-next{right:var(--space-5)}
.gal-close:hover,.gal-nav:hover{background:rgba(255,255,255,0.26)}
.gal-nav:hover{transform:translateY(-50%) scale(1.08)}
.gal-nav[disabled]{opacity:0.25;cursor:default}
.gal-nav[disabled]:hover{background:rgba(255,255,255,0.12);transform:translateY(-50%)}

/* Stop the page scrolling behind an open lightbox. */
body.gal-locked{overflow:hidden}

@media (max-width:860px){
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:var(--space-2)}
  .gal-lightbox{padding:var(--space-12) var(--space-3) var(--space-16)}
  .gal-nav{width:2.75rem;height:2.75rem;font-size:1.6rem}
  .gal-prev{left:var(--space-2)}
  .gal-next{right:var(--space-2)}
  .gal-stage img{max-height:calc(100vh - 12rem)}
}