/* ============================================================
   Shared gallery + lightbox  -  used on Homepage and About Us.
   Everything is namespaced under .szuae-gallery-section /
   .szuae-lightbox so it can never affect a page's own styles.
   ============================================================ */

.szuae-gallery-section{
  --sg-gold:#C7A44D;
  --sg-radius:8px;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  padding:64px 0;
}
.szuae-gallery-section *{box-sizing:border-box;}
.szuae-gallery-wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
.szuae-gallery-heading{text-align:center; font-size:clamp(22px,3vw,32px); margin:0 0 32px; font-weight:700;}

.szuae-gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.szuae-gallery-item{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4; /* portrait */
  border:0;
  padding:0;
  border-radius:var(--sg-radius);
  overflow:hidden;
  cursor:zoom-in;
  background:#111;
}
.szuae-gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.szuae-gallery-item:hover img{transform:scale(1.06);}
.szuae-gallery-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%);
  opacity:0;
  transition:opacity .25s ease;
}
.szuae-gallery-item:hover::after{opacity:1;}
.szuae-gallery-item:focus-visible{outline:2px solid var(--sg-gold); outline-offset:3px;}

@media(max-width:900px){
  .szuae-gallery-grid{grid-template-columns:repeat(3, 1fr);}
}
@media(max-width:640px){
  .szuae-gallery-grid{grid-template-columns:repeat(2, 1fr);}
}

/* Lightbox overlay  -  one shared instance, reused by any gallery on the page. */
.szuae-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.92);
  padding:24px;
}
.szuae-lightbox.is-open{display:flex;}
.szuae-lightbox-img{
  max-width:90vw; max-height:85vh;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.szuae-lightbox-close,
.szuae-lightbox-prev,
.szuae-lightbox-next{
  position:absolute;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:50%;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  transition:background .2s ease;
}
.szuae-lightbox-close:hover,
.szuae-lightbox-prev:hover,
.szuae-lightbox-next:hover{background:rgba(255,255,255,.18);}
.szuae-lightbox-close{top:20px; right:20px;}
.szuae-lightbox-prev{left:20px; top:50%; transform:translateY(-50%);}
.szuae-lightbox-next{right:20px; top:50%; transform:translateY(-50%);}
.szuae-lightbox-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:13px; font-family:'Inter',sans-serif;
}
@media(max-width:600px){
  .szuae-lightbox-prev{left:8px;}
  .szuae-lightbox-next{right:8px;}
  .szuae-lightbox-close{top:8px; right:8px;}
}