/* =====================================================
   GALLERY-NEW.CSS — photo_gallary.php
   Load AFTER style-New.css + Home.css (uses their variables & .hx-sec, .cta-card)
   ===================================================== */

/* ---------- PAGE HERO ---------- */
.gx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 380px; display: flex; align-items: center;
  padding: 80px 8% 90px; color: #fff; background: var(--deep);
}
.gx-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(95deg, rgba(7, 31, 26, .93) 0%, rgba(7, 31, 26, .72) 45%, rgba(7, 31, 26, .3) 100%),
    linear-gradient(0deg, rgba(7, 31, 26, .8) 0%, transparent 45%);
}
.gx-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--ring); }
.gx-hero-in { max-width: 680px; }
.gx-hero .hero-eyebrow { background: rgba(7, 31, 26, .55); border-color: rgba(201, 167, 74, .75); }
.gx-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.12;
  margin-bottom: 14px; text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
.gx-hero h1::after { content: ""; display: block; width: 92px; height: 5px; margin-top: 16px; border-radius: 3px; background: var(--ring); }
.gx-hero p { font-size: 1.12rem; color: #e6f2ec; max-width: 520px; }
.gx-crumb { margin-top: 22px; font-size: .88rem; color: #b7d0c3; display: flex; align-items: center; gap: 10px; }
.gx-crumb a { color: #fff; text-decoration: none; font-weight: 600; }
.gx-crumb a:hover { color: var(--gold-light); }
.gx-crumb i { font-size: .65rem; }

/* ---------- FILTER CHIPS ---------- */
.gx-sec { padding-top: 64px; }
.gx-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; }
.gx-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-radius: 50px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.gx-chip b {
  font-size: .75rem; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mint); color: var(--green-dark); transition: inherit;
}
.gx-chip:hover { border-color: var(--green); transform: translateY(-2px); }
.gx-chip.on { background: var(--brand); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(18, 163, 201, .3); }
.gx-chip.on b { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- MASONRY GRID ---------- */
.gx-grid { column-count: 4; column-gap: 16px; }
.gx-item {
  break-inside: avoid; margin: 0 0 16px; position: relative; overflow: hidden;
  border-radius: 18px; cursor: zoom-in; background: var(--line);
  box-shadow: var(--shadow); animation: gxIn .5s ease both;
}
.gx-item.hide { display: none; }
.gx-item img { width: 100%; display: block; transition: transform .9s cubic-bezier(.22, .61, .36, 1); backface-visibility: hidden; }
.gx-item:hover img { transform: scale(1.06); }
.gx-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 14px 12px;
  color: #fff; font-weight: 700; font-size: .85rem;
  background: linear-gradient(0deg, rgba(7, 31, 26, .88), transparent);
  display: flex; justify-content: space-between; align-items: center;
  transform: translateY(100%); transition: transform .35s ease;
}
.gx-item:hover figcaption { transform: translateY(0); }
@keyframes gxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- LIGHTBOX ---------- */
.gx-lb {
  position: fixed; inset: 0; z-index: 10000; padding: 20px;
  background: rgba(7, 31, 26, .94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.gx-lb.open { opacity: 1; visibility: visible; }
.gx-lb-stage { text-align: center; max-width: min(1100px, 92vw); }
.gx-lb-stage img { max-width: 100%; max-height: 78vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.gx-lb-cap { margin-top: 14px; display: flex; justify-content: center; align-items: center; gap: 14px; color: #fff; }
.gx-lb-cap span { background: var(--green); font-size: .8rem; font-weight: 700; padding: 5px 14px; border-radius: 30px; }
.gx-lb-cap em { font-style: normal; color: #b7d0c3; font-size: .9rem; }
.gx-lb-close {
  position: absolute; top: 14px; right: 22px; background: none; border: 0;
  color: #fff; font-size: 40px; line-height: 1; cursor: pointer; transition: color .25s;
}
.gx-lb-close:hover { color: var(--gold-light); }
.gx-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; font-size: 1rem; transition: background .25s, transform .25s;
}
.gx-lb-nav:hover { background: var(--green); border-color: var(--green); transform: translateY(-50%) scale(1.08); }
.gx-lb-nav.prev { left: 3%; }
.gx-lb-nav.next { right: 3%; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) { .gx-grid { column-count: 3; } }
@media (max-width: 768px) {
  .gx-hero { min-height: 300px; padding: 60px 6% 70px; }
  .gx-sec { padding-top: 48px; }
  .gx-grid { column-count: 2; column-gap: 10px; }
  .gx-item { margin-bottom: 10px; border-radius: 14px; }
  .gx-item figcaption { transform: translateY(0); padding-top: 28px; font-size: .78rem; }
  .gx-item figcaption i { display: none; }
  .gx-chip { padding: 9px 16px; font-size: .86rem; }
  .gx-lb-nav { width: 42px; height: 42px; }
  .gx-lb-nav.prev { left: 8px; }
  .gx-lb-nav.next { right: 8px; }
}
@media (max-width: 420px) { .gx-grid { column-count: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gx-item { animation: none; }
}