/* ════════════════════════════════
   GALLERY — hero, grid, lightbox
════════════════════════════════ */

@keyframes lbIn      { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }
@keyframes lbFadeIn  { from { opacity:0; } to { opacity:1; } }

/* ════════════
   HERO
════════════ */
#gallery-hero {
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  height: 380px;
  background: #111009;
  margin-bottom: 36px;
}

#gallery-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

#gallery-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,8,5,0.62) 0%, rgba(10,8,5,0.18) 38%, rgba(10,8,5,0.60) 100%);
}

#gallery-nav {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  white-space: nowrap;
}

#gallery-contact {
  position: absolute;
  top: 34px;
  right: 38px;
  z-index: 20;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.05em;
}

#gallery-title-block {
  position: absolute;
  bottom: 44px;
  left: 52px;
  z-index: 20;
  animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both;
}

.gallery-eyebrow {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.52);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

#gallery-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 64px;
  line-height: 0.94;
  color: #fff;
  letter-spacing: -0.026em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.2);
}

#gallery-count-pill {
  position: absolute;
  bottom: 44px;
  right: 44px;
  z-index: 20;
}

.gallery-count-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 100px;
  padding: 10px 20px;
}

.gallery-count-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #52C47A;
  flex-shrink: 0;
}

.gallery-count-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}

/* ════════════
   FILTER TABS
════════════ */
#gallery-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-btn {
  padding: 9px 22px;
  background: rgba(28,26,23,0.07);
  color: #8B857A;
  border: none;
  border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.filter-btn.active {
  background: #1C1A17;
  color: #fff;
  font-weight: 500;
}

.filter-btn:hover:not(.active) {
  background: rgba(28,26,23,0.12);
  color: #1C1A17;
}

/* ════════════
   GALLERY GRIDS
════════════ */
.gallery-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.sec1-grid {
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 320px 280px;
}

.sec3-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 280px 280px;
}

.sec4-grid {
  grid-template-columns: 1.2fr 1fr;
}

.sec5-grid {
  grid-template-columns: 1fr 1fr;
}

/* ── Gallery Card ── */
.gcard {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #EDE7DE;
  transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.gcard:hover {
  transform: translateY(-5px);
}

.gcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}

.gcard:hover img {
  transform: scale(1.05);
}

.gcard-wide {
  height: 330px;
}

.gcard.dim {
  opacity: 0.16;
}

.gcard-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(0,0,0,0.52) 100%);
  pointer-events: none;
}

.gcard-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-block;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 5px 13px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.90);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.gcard-bottom {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.gcard-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: rgba(255,255,255,0.94);
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

.gcard-expand {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

/* Section 4 card variation */
.gcard-bottom-wide {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.gcard-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.48);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.gcard-label-wide {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  color: rgba(255,255,255,0.94);
}

.gcard-expand-lg {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* ════════════
   PANORAMIC (SEC 2)
════════════ */
.gallery-panoramic {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #EDE7DE;
  height: 350px;
  margin-bottom: 16px;
  transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.gallery-panoramic:hover {
  transform: scale(1.006);
}

.gallery-panoramic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}

.gallery-panoramic:hover img {
  transform: scale(1.03);
}

.gallery-panoramic.dim {
  opacity: 0.16;
}

.pano-grad-v {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,0.50) 100%);
  pointer-events: none;
}

.pano-grad-h {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.18) 0%, transparent 40%);
  pointer-events: none;
}

.gallery-panoramic .gcard-tag {
  top: 22px;
  left: 22px;
}

.pano-bottom {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.pano-sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pano-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 34px;
  color: #fff;
  letter-spacing: -0.01em;
}

.pano-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

/* ════════════
   CTA
════════════ */
#gallery-cta {
  margin-top: 88px;
  padding: 68px 0;
  text-align: center;
  border-top: 1px solid rgba(28,26,23,0.08);
}

#gallery-cta-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 62px;
  color: #1C1A17;
  line-height: 1.02;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}

.gallery-cta-sub {
  font-size: 14px;
  color: #9A9490;
  margin-bottom: 42px;
  letter-spacing: 0.01em;
}

.gallery-cta-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #1C1A17;
  text-decoration: none;
  border-radius: 100px;
  padding: 15px 40px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid rgba(28,26,23,0.22);
  transition: all 0.25s ease;
}

.btn-outline:hover {
  border-color: rgba(28,26,23,0.55);
}

/* ════════════
   LIGHTBOX
════════════ */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8,6,4,0.96);
  align-items: center;
  justify-content: center;
}

#lightbox.open {
  display: flex;
  animation: lbFadeIn 0.22s ease;
}

#lb-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  transition: background 0.2s ease;
  z-index: 10;
}

#lb-close:hover { background: rgba(255,255,255,0.22); }

#lb-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lbIn 0.28s cubic-bezier(0.16,1,0.3,1);
}

#lb-img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 18px;
  object-fit: contain;
  box-shadow: 0 48px 120px rgba(0,0,0,0.7);
  display: block;
  transition: opacity 0.22s ease;
}

#lb-prev,
#lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
  transition: background 0.2s ease;
  z-index: 10;
}

#lb-prev { left: 40px; }
#lb-next { right: 40px; }

#lb-prev:hover,
#lb-next:hover { background: rgba(255,255,255,0.24); }

#lb-caption {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

#lb-tag {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#lb-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  color: rgba(255,255,255,0.92);
}

#lb-count {
  font-size: 11px;
  color: rgba(255,255,255,0.34);
  margin-top: 8px;
  letter-spacing: 0.06em;
}

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

/* ── Tablet ≤ 1100px ── */
@media (max-width: 1100px) and (min-width: 769px) {
  .sec1-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .sec1-grid .gcard {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 270px;
  }

  .sec3-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .sec3-grid .gcard {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 260px;
  }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
  #gallery-nav      { top: 20px; }
  /* 4 links don't fit at full size on narrow screens */
  #gallery-nav .nav-link { padding: 8px 12px; font-size: 12px; }
  #gallery-contact  { display: none; }
  #gallery-hero     { height: 300px; border-radius: 24px; margin-bottom: 28px; }
  #gallery-title    { font-size: 44px; line-height: 1; }

  .sec1-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sec1-grid .gcard {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: 260px;
  }

  .sec3-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sec3-grid .gcard {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: 250px;
  }

  .sec4-grid        { grid-template-columns: 1fr; }
  .gcard-wide       { height: 250px; }

  .gallery-panoramic { height: 220px; }

  #gallery-cta-h2   { font-size: 40px; }

  #lb-prev          { left: 14px; }
  #lb-next          { right: 14px; }
  #lb-prev,
  #lb-next          { width: 40px; height: 40px; font-size: 16px; }
}