/* ---------- Gallery hero ---------- */
.gallery-hero{
  background: var(--navy-950);
  padding: 150px 0 60px;
  text-align:center;
}
.gallery-hero .eyebrow{ color: var(--gold-400); justify-content:center; }
.gallery-hero h1{ color: var(--white); font-size: clamp(2rem, 5vw, 2.8rem); }
.gallery-sub{ color: rgba(255,255,255,0.7); }

/* ---------- Grid ---------- */
.gallery-section{ padding: 60px 0 100px; background: var(--off-white); }
.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.gallery-item{
  position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 1/1;
  cursor: pointer; box-shadow: var(--shadow-soft); border:none; padding:0; background:none;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-item:focus-visible{ outline: 3px solid var(--gold-500); outline-offset:2px; }

@media (max-width: 720px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:10px; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background: rgba(10,16,28,0.94); z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .25s ease;
  padding: 40px 20px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-img{ max-width: min(90vw, 1000px); max-height: 78vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-caption{ color: rgba(255,255,255,0.8); margin-top:16px; font-size:.95rem; }
.lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:none; color:var(--white);
  font-size:2.2rem; line-height:1; cursor:pointer; padding:6px 12px;
}
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%); background: rgba(255,255,255,0.08);
  border: none; color:var(--white); font-size:1.4rem; width:52px; height:52px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .2s ease;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.2); }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
@media (max-width: 600px){
  .lightbox-nav{ width:42px; height:42px; font-size:1.1rem; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}