/* ============================================================
   GALLERY PAGE (gallery.html) — PAGE-SPECIFIC STYLES
   Global styles are in css/styles.css
============================================================ */

/* ── HERO ────────────────────────────────────────────────── */
.gallery-hero {
   position: relative;
   height: 100vh;
   min-height: 600px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Scrolling reel of images behind the hero */
.gallery-hero-reel {
   position: absolute;
   inset: 0;
   overflow: hidden;
}

.reel-track {
   display: flex;
   height: 100%;
   width: max-content;
   animation: reelScroll 30s linear infinite;
}

.reel-img {
   width: 60vw;
   height: 100%;
   background-size: cover;
   background-position: center;
   flex-shrink: 0;
}

@keyframes reelScroll {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

.gallery-hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg,
         rgba(4, 22, 13, 0.72) 0%,
         rgba(11, 74, 52, 0.45) 60%,
         rgba(4, 22, 13, 0.80) 100%);
   z-index: 1;
}

.gallery-hero-content {
   position: relative;
   z-index: 2;
   text-align: center;
   padding: 0 5%;
   max-width: 760px;
}

.gallery-eyebrow {
   display: inline-block;
   font-size: 0.72rem;
   letter-spacing: 5px;
   text-transform: uppercase;
   color: #a8d8b0;
   margin-bottom: 18px;
}

.gallery-hero-content h1 {
   font-family: 'DM Serif Display', serif;
   font-size: clamp(4rem, 11vw, 9rem);
   color: #fff;
   line-height: 0.95;
   letter-spacing: -2px;
   margin-bottom: 20px;
}

.gallery-hero-content p {
   font-size: 1.05rem;
   color: rgba(255, 255, 255, 0.78);
   line-height: 1.8;
   max-width: 480px;
   margin: 0 auto 32px;
}

.gallery-hero-count {
   display: inline-flex;
   align-items: baseline;
   gap: 10px;
   background: rgba(255, 255, 255, 0.10);
   border: 1px solid rgba(255, 255, 255, 0.22);
   backdrop-filter: blur(10px);
   padding: 12px 28px;
   border-radius: 50px;
}

.count-num {
   font-family: 'DM Serif Display', serif;
   font-size: 2.2rem;
   color: #a8d8b0;
   line-height: 1;
}

.count-lbl {
   font-size: 0.78rem;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: rgba(255, 255, 255, 0.7);
}

/* Scroll cue */
.gh-scroll-cue {
   position: absolute;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}

.gh-scroll-cue span {
   font-size: 0.62rem;
   letter-spacing: 4px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.5);
}

.gh-scroll-line {
   width: 1px;
   height: 46px;
   background: rgba(255, 255, 255, 0.25);
   position: relative;
   overflow: hidden;
}

.gh-scroll-line::after {
   content: '';
   position: absolute;
   top: -100%;
   width: 100%;
   height: 100%;
   background: #a8d8b0;
   animation: scrollDrop 1.8s ease infinite;
}

@keyframes scrollDrop {
   0% {
      top: -100%;
   }

   100% {
      top: 100%;
   }
}

/* ── FILTER BAR ──────────────────────────────────────────── */
.gallery-filter-bar {
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
   padding: 22px 6%;
   border-bottom: 1px solid #e8f3ed;
   position: sticky;
   top: 0;
   z-index: 90;
   box-shadow: 0 2px 20px rgba(11, 74, 52, 0.07);
}

.gf-pill {
   padding: 9px 24px;
   border-radius: 50px;
   border: 1.5px solid #c8e3d0;
   background: transparent;
   color: #0B4A34;
   font-size: 0.82rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.22s;
   font-family: 'Inter', sans-serif;
   letter-spacing: 0.3px;
}

.gf-pill:hover,
.gf-pill.active {
   background: #0B4A34;
   color: #fff;
   border-color: #0B4A34;
   box-shadow: 0 4px 16px rgba(11, 74, 52, 0.2);
}

/* ── FEATURED MOSAIC (top 5) ─────────────────────────────── */
.gallery-featured-section {
   padding: 60px 5% 0;
   background: #f3f8f5;
}

.gf-mosaic {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   grid-template-rows: 300px 300px;
   gap: 12px;
   max-width: 1200px;
   margin: 0 auto;
   border-radius: 20px;
   overflow: hidden;
}

.gf-cell {
   position: relative;
   background-size: cover;
   background-position: center;
   overflow: hidden;
   cursor: pointer;
   transition: filter 0.4s;
}

.gf-cell:focus-visible {
   outline: 3px solid #a8d8b0;
   outline-offset: 3px;
}

.gf-large {
   grid-row: span 2;
}

.gf-cell-overlay {
   position: absolute;
   inset: 0;
   background: rgba(6, 45, 31, 0);
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   padding: 22px 22px;
   transition: background 0.35s;
   opacity: 0;
}

.gf-cell:hover .gf-cell-overlay,
.gf-cell:focus-visible .gf-cell-overlay {
   background: rgba(6, 45, 31, 0.55);
   opacity: 1;
}

.gf-cell-label {
   font-family: 'DM Serif Display', serif;
   font-size: 1.15rem;
   color: #fff;
   letter-spacing: 0.5px;
}

.gf-cell-zoom {
   font-size: 1.4rem;
   color: rgba(255, 255, 255, 0.85);
   transition: transform 0.3s;
}

.gf-cell:hover .gf-cell-zoom {
   transform: scale(1.2);
}

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

.gf-cell:hover {
   filter: brightness(1.05);
}

.gf-cell:hover img {
   transform: scale(1.07);
}

/* ── MASONRY GRID ────────────────────────────────────────── */
.gallery-grid-section {
   background: #f3f8f5;
   padding: 70px 5% 80px;
}

.gg-header {
   text-align: center;
   margin-bottom: 48px;
}

.gg-eyebrow {
   display: block;
   font-size: 0.7rem;
   letter-spacing: 5px;
   text-transform: uppercase;
   color: #147252;
   font-weight: 700;
   margin-bottom: 10px;
}

.gg-header h2 {
   font-family: 'DM Serif Display', serif;
   font-size: clamp(1.8rem, 3vw, 2.6rem);
   color: #062D1F;
   line-height: 1.2;
}

/* CSS Grid masonry-style */
.gg-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 220px;
   gap: 12px;
   max-width: 1200px;
   margin: 0 auto;
}

.gg-item {
   position: relative;
   overflow: hidden;
   border-radius: 14px;
   cursor: pointer;
   background: #e0ebe4;
}

.gg-item:focus-visible {
   outline: 3px solid #0B4A34;
   outline-offset: 3px;
}

.gg-tall {
   grid-row: span 2;
}

.gg-wide {
   grid-column: span 2;
}

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

.gg-item:hover img {
   transform: scale(1.08);
}

.gg-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(6, 45, 31, 0.75) 0%, transparent 55%);
   opacity: 0;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   padding: 18px 18px;
   transition: opacity 0.35s;
   color: #fff;
}

.gg-item:hover .gg-overlay,
.gg-item:focus-visible .gg-overlay {
   opacity: 1;
}

.gg-overlay span {
   font-family: 'DM Serif Display', serif;
   font-size: 1rem;
   color: #fff;
}

.gg-overlay svg {
   flex-shrink: 0;
   color: rgba(255, 255, 255, 0.8);
   transition: transform 0.3s;
}

.gg-item:hover .gg-overlay svg {
   transform: translateX(3px) translateY(-3px);
}

/* ── BOOKING CTA STRIP ───────────────────────────────────── */
.gallery-cta-strip {
   background: #0B4A34;
   padding: 80px 6%;
   position: relative;
   overflow: hidden;
}

.gallery-cta-strip::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(45deg, #062D1F 25%, transparent 25%, transparent 75%, #062D1F 75%),
      linear-gradient(45deg, #062D1F 25%, transparent 25%, transparent 75%, #062D1F 75%);
   background-size: 40px 40px;
   background-position: 0 0, 20px 20px;
   opacity: 0.4;
}

.gcta-inner {
   position: relative;
   z-index: 1;
   max-width: 1100px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap;
}

.gcta-tag {
   display: block;
   font-size: 0.72rem;
   letter-spacing: 5px;
   text-transform: uppercase;
   color: #a8d8b0;
   margin-bottom: 12px;
}

.gcta-text h2 {
   font-family: 'DM Serif Display', serif;
   font-size: clamp(2rem, 4vw, 3rem);
   color: #fff;
   margin-bottom: 12px;
   line-height: 1.15;
}

.gcta-text p {
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.7);
   max-width: 460px;
   line-height: 1.75;
}

.gcta-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #fff;
   color: #0B4A34;
   padding: 18px 44px;
   border-radius: 50px;
   font-size: 0.92rem;
   font-weight: 600;
   letter-spacing: 0.5px;
   text-decoration: none;
   white-space: nowrap;
   transition: transform 0.25s, box-shadow 0.3s;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
   flex-shrink: 0;
}

.gcta-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

/* ── LIGHTBOX ────────────────────────────────────────────── */
.lb-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.94);
   z-index: 2000;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.35s;
}

.lb-backdrop.open {
   opacity: 1;
   pointer-events: all;
}

.lightbox {
   position: fixed;
   inset: 0;
   z-index: 2001;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 16px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.35s;
}

.lightbox.open {
   opacity: 1;
   pointer-events: all;
}

.lb-img-wrap {
   max-width: 90vw;
   max-height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.lb-img {
   max-width: 90vw;
   max-height: 80vh;
   object-fit: contain;
   border-radius: 10px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
   transition: opacity 0.2s;
}

.lb-close {
   position: fixed;
   top: 24px;
   right: 30px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
   font-size: 1.1rem;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.25s, transform 0.25s;
   z-index: 2002;
}

.lb-close:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: rotate(90deg);
}

.lb-nav {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.10);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   font-size: 2.2rem;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.25s, transform 0.25s;
   z-index: 2002;
   line-height: 1;
}

.lb-prev {
   left: 24px;
}

.lb-next {
   right: 24px;
}

.lb-prev:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: translateY(-50%) translateX(-3px);
}

.lb-next:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: translateY(-50%) translateX(3px);
}

.lb-caption {
   font-family: 'DM Serif Display', serif;
   font-size: 1.15rem;
   color: rgba(255, 255, 255, 0.9);
   letter-spacing: 0.5px;
   text-align: center;
}

.lb-counter {
   font-size: 0.72rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.45);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
   .gf-mosaic {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 240px 240px 240px;
   }

   .gf-large {
      grid-row: span 2;
   }

   .gg-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 768px) {
   .gallery-hero-content h1 {
      font-size: clamp(3rem, 15vw, 5rem);
   }

   .gf-mosaic {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 180px 180px 180px;
   }

   .gf-large {
      grid-row: span 1;
      grid-column: span 2;
   }

   .gg-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 180px;
   }

   .gg-wide {
      grid-column: span 2;
   }

   .gcta-inner {
      flex-direction: column;
      text-align: center;
   }

   .gcta-text p {
      margin: 0 auto;
   }

   .lb-nav {
      width: 44px;
      height: 44px;
      font-size: 1.6rem;
   }
}

@media (max-width: 480px) {
   .gf-mosaic {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
   }

   .gf-large,
   .gf-cell {
      height: 220px;
   }

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

   .gg-tall,
   .gg-wide {
      grid-column: span 1;
      grid-row: span 1;
   }
}