/* =========================================================
   GALLERY PAGE
   File: /assets/css/gallery.css
   ========================================================= */

:root{
  --gal-ink:#0f172a;
  --gal-muted:#64748b;
  --gal-border: rgba(15,23,42,.10);
  --gal-soft: rgba(2,6,23,.03);
  --gal-shadow: 0 16px 46px rgba(15,23,42,.08);
  --gal-red: #fa394a;
}

/* Keep same as other pages */
.gal.page-hero{
  background:#ffffff;
  color: var(--gal-ink);
  padding-top: calc(var(--site-header-offset, 110px) + 34px);
  padding-bottom: 22px;
}

.gal.page-section{
  background:#ffffff;
  color: var(--gal-ink);
  padding: 26px 0 70px;
}

/* Breadcrumb (reuse) */
.breadcrumb{
  font-size: 13px;
  color: var(--gal-muted);
  font-weight: 700;
  display:flex;
  align-items:center;
  gap: 8px;
  margin: 6px 0 18px;
}
.breadcrumb a{ color: var(--gal-muted); text-decoration:none; }
.breadcrumb a:hover{ color: var(--gal-ink); }
.crumb-sep{ opacity: .6; }

/* Hero */
.gal-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gal-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: .92;
}
.gal-kickerIco{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 1px solid rgba(250,57,74,.22);
  background: rgba(250,57,74,.10);
  display:grid;
  place-items:center;
}

.gal-title{
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.gal-lead{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #4b5563;
  max-width: 78ch;
}

/* Buttons */
.gal-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

.gal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  border: 1px solid transparent;
}

.gal-btn--primary{
  background: linear-gradient(135deg, #ff445e, #ff6a2a);
  color: #fff;
  box-shadow: 0 16px 38px rgba(250,57,74,.22);
}
.gal-btn--primary:hover{ filter: brightness(.98); }

.gal-btn--ghost{
  background: #ffffff;
  border-color: rgba(15,23,42,.14);
  color: var(--gal-ink);
}
.gal-btn--ghost:hover{ background: #f9fafb; }

/* Masonry (CSS columns) */
.gal-masonry{
  column-count: 3;
  column-gap: 14px;
}

/* Item */
.gal-item{
  display:block;
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--gal-border);
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gal-item img{
  width:100%;
  height:auto;
  display:block;
}

.gal-item:hover{
  transform: translateY(-2px);
  border-color: rgba(250,57,74,.18);
  box-shadow: 0 22px 65px rgba(15,23,42,.10);
}

/* Bottom CTA */
.gal-cta{
  margin-top: 18px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid var(--gal-border);
  background: radial-gradient(circle at 10% 0%, rgba(110,10,10,.12), rgba(2,6,23,.05) 70%);
}

.gal-ctaInner{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gal-ctaInner h2{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: var(--gal-ink);
}
.gal-ctaInner p{
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gal-muted);
}
.gal-ctaActions{ display:flex; gap: 12px; flex-wrap: wrap; }

/* Lightbox */
.gal-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.gal-lightbox.is-open{ display:block; }

.gal-lbBackdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.80);
}

.gal-lbDialog{
  position: relative;
  width: min(980px, calc(100% - 26px));
  height: min(86vh, 760px);
  margin: 7vh auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  display:grid;
  place-items:center;
}

.gal-lbImg{
  max-width: 92%;
  max-height: 88%;
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
}

.gal-lbClose{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.gal-lbNav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 26px;
  line-height: 1;
}
.gal-lbNav--prev{ left: 12px; }
.gal-lbNav--next{ right: 12px; }

.gal-lbMeta{
  position:absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 1024px){
  .gal-masonry{ column-count: 2; }
}

@media (max-width: 640px){
  .gal-title{ font-size: 28px; }
  .gal-actions .gal-btn{ width: 100%; }
  .gal-masonry{ column-count: 1; }
  .gal-ctaActions{ width: 100%; }
  .gal-ctaActions .gal-btn{ width: 100%; }
}