/* ══════ GALLERY PAGE ══════ */

/* Page banner - same dark navy as Team section */
.gal-hero {
  background: linear-gradient(rgba(7,24,41,.78),rgba(7,24,41,.78)),url('assets/WhatsApp%20Image%202026-08-12%20at%204.50.42%20PM.jpeg');
  background-size: cover;
  background-position: center;
  padding: 148px var(--px) 80px;
  position: relative;
  overflow: hidden;
}
.gal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 40%, rgba(36,112,200,.14) 0%, transparent 65%);
  pointer-events: none;
}
.gal-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.06);
}
.gal-hero-inner {
  position: relative;
  z-index: 2;
}
.gal-hero-inner .lbl { margin-bottom: 14px; }
.gal-hero-inner .h2  { margin-bottom: 16px; max-width: 520px; }
.gal-hero-sub {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.38);
  max-width: 420px;
  line-height: 1.82;
}

/* ── Gallery section ── */
.gal-sec { background: var(--bg); padding-block: 100px; }

/* Section header row - same as .srv-hd */
.gal-hd { margin-bottom: 52px; }
.gal-hd .lbl { margin-bottom: 12px; }
.gal-hd .h2  { margin-bottom: 10px; }
.gal-count {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 400;
  color: var(--t3);
}

/* Masonry grid */
.gal-grid {
  columns: 3;
  column-gap: 20px;
  column-fill: balance;
}

/* Image card - matches site's border + shadow language */
.gi {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: var(--rxl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--bdrb);
  box-shadow: 0 2px 12px rgba(7,24,41,.06);
  transition: transform var(--m) var(--e), box-shadow var(--m) var(--e), border-color var(--m);
}
.gi img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.gi:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(7,24,41,.15);
  border-color: var(--b300);
}
.gi:hover img { transform: scale(1.04); }

/* Hover overlay - same gradient direction as hero */
.gi-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,24,41,.72) 0%, rgba(7,24,41,.18) 55%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px 18px;
  opacity: 0;
  transition: opacity .28s ease;
}
.gi:hover .gi-ov { opacity: 1; }

/* Expand icon inside overlay */
.gi-ov svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}

/* ══════ LIGHTBOX ══════ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(7,24,41,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s var(--e), visibility 0s .3s;
}
.lb.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity .3s var(--e), visibility 0s;
}

.lb-wrap {
  max-width: 90vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-wrap img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--rl);
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  transition: opacity .18s ease;
}
.lb-wrap img.fade { opacity: 0; }

/* Close button */
.lb-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background var(--f), color var(--f), transform var(--f) var(--es);
  z-index: 1001;
}
.lb-close:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
  transform: scale(1.08);
}

/* Prev / Next */
.lb-prev, .lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background var(--f), color var(--f), transform var(--f) var(--es);
  z-index: 1001;
}
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-prev:hover, .lb-next:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }

/* Counter */
.lb-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 7px 18px;
  border-radius: 100px;
}

/* ══════ RESPONSIVE ══════ */

@media(max-width:1024px) {
  .gal-grid { columns: 2; }
}

@media(max-width:768px) {
  .gal-hero { padding: 120px 20px 60px; }
  .gal-sec  { padding-block: 64px; }
}

@media(max-width:600px) {
  .gal-grid { columns: 1; }
  .lb-prev  { left: 8px; }
  .lb-next  { right: 8px; }
  .lb-prev, .lb-next { width: 42px; height: 42px; }
}