/* =============================================
   HAUS EDELWEISS — Gallery Page
   Pixel-perfect reproduction from Figma (1512px)
   ============================================= */


/* =============================================
   1. PAGE BACKGROUND
   ============================================= */
.page-gallery {
  background-color: var(--color-wine);
}


/* 2. HEADER — uses header--hero (light text), no page-specific overrides needed */


/* =============================================
   3. GALLERY SECTION (main scrollable area)
   ============================================= */
.gallery-section {
  position: relative;
  z-index: 95;                /* covers header-fixed (z-10) — physical "slide from under" reveal */
  max-width: 1512px;
  margin: 0 auto;
  aspect-ratio: 1512 / 7905;
  overflow: visible;
  background-color: var(--color-wine);
}

/* Extend wine background to full viewport width (section is max-width: 1512px) */
.gallery-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: var(--color-wine);
  z-index: -1;
}


/* =============================================
   4. FIXED GALLERY HERO
   ============================================= */
.gallery-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 100;               /* above gallery-section (z-95) — text over images */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.gallery-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

/* Hide entrance elements before GSAP runs to prevent FOUC */
.gallery-hero__heading,
.gallery-hero__subtitle,
.gallery-images__item--1,
.gallery-images__item--2,
.gallery-images__item--3,
.gallery-images__item--4,
.gallery-images__item--5 {
  opacity: 0;
}

.gallery-hero__heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 199.814px;
  line-height: 1.24;
  letter-spacing: -3.9963px;
  color: var(--color-cream);
  margin: 0;
}

.gallery-hero__subtitle {
  margin-top: 48px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: #E8C1B1;
}

/* categories animation handled via fixed bar below */

@keyframes galleryFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* =============================================
   6. SCATTERED GALLERY IMAGES
   ============================================= */
.gallery-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-base);
}

.gallery-images__item {
  position: absolute;
  overflow: hidden;
}

.gallery-images__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image positions — percentages of 1512×7905 design frame
   Layout repeats an 11-position pattern: g1–g11, g12–g22, then g23–g25
   +1.76% top offset so first image clears hero/navbar area */
.gallery-images__item--1  { left: 27.65%; top:  1.76%; width: 13.49%; height:  3.62%; }
.gallery-images__item--2  { left: 66.67%; top:  3.28%; width: 21.30%; height:  6.32%; }
.gallery-images__item--3  { left: 12.10%; top:  7.79%; width: 21.10%; height:  5.54%; }
.gallery-images__item--4  { left: 68.98%; top: 12.89%; width: 31.02%; height:  3.40%; }
.gallery-images__item--5  { left:  4.17%; top: 15.78%; width: 21.36%; height:  3.00%; }
.gallery-images__item--6  { left: 43.25%; top: 18.78%; width: 29.23%; height:  7.64%; }
.gallery-images__item--7  { left: 19.84%; top: 24.75%; width: 13.49%; height:  4.01%; }
.gallery-images__item--8  { left: 82.28%; top: 26.87%; width: 13.49%; height:  3.62%; }
.gallery-images__item--9  { left: 66.67%; top: 31.94%; width: 21.30%; height:  5.27%; }
.gallery-images__item--10 { left: 12.04%; top: 34.64%; width: 21.30%; height:  6.48%; }
.gallery-images__item--11 { left: 51.06%; top: 40.22%; width: 21.30%; height:  2.64%; }
.gallery-images__item--12 { left: 27.65%; top: 45.86%; width: 13.49%; height:  3.62%; }
.gallery-images__item--13 { left: 66.67%; top: 47.38%; width: 21.30%; height:  6.32%; }
.gallery-images__item--14 { left: 12.10%; top: 51.83%; width: 21.10%; height:  5.54%; }
.gallery-images__item--15 { left: 68.98%; top: 56.99%; width: 31.02%; height:  3.40%; }
.gallery-images__item--16 { left:  4.17%; top: 59.88%; width: 21.36%; height:  3.00%; }
.gallery-images__item--17 { left: 43.25%; top: 62.88%; width: 29.23%; height:  7.64%; }
.gallery-images__item--18 { left: 19.84%; top: 68.84%; width: 13.49%; height:  4.01%; }
.gallery-images__item--19 { left: 82.28%; top: 70.97%; width: 13.49%; height:  3.62%; }
.gallery-images__item--20 { left: 66.67%; top: 76.04%; width: 21.30%; height:  5.27%; }
.gallery-images__item--21 { left: 12.04%; top: 78.74%; width: 21.30%; height:  6.48%; }
.gallery-images__item--22 { left: 51.06%; top: 84.32%; width: 21.30%; height:  2.64%; }
.gallery-images__item--23 { left: 27.65%; top: 90.18%; width: 13.49%; height:  3.62%; }
.gallery-images__item--24 { left: 66.67%; top: 91.70%; width: 21.30%; height:  6.32%; }
.gallery-images__item--25 { left: 12.10%; top: 94.46%; width: 21.10%; height:  5.54%; }


/* =============================================
   7. GALLERY CTA SECTION
   ============================================= */
.gallery-cta {
  background-color: var(--color-cream);
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
  text-align: center;
  position: relative;
  z-index: 5;                 /* above gallery-hero (z-3) to cover any remaining text */
}

.gallery-cta__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.gallery-cta__label {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.44px;
  color: var(--color-wine);
  line-height: 1.41;
}

.gallery-cta__heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: var(--text-4xl);
  line-height: 1.24;
  letter-spacing: -2.34px;
  color: var(--color-rust);
  max-width: 968px;
  margin: 0;
}

.gallery-cta__image {
  width: 440px;
  height: 246px;
  overflow: hidden;
}

.gallery-cta__image img {
  width: 100%;
  height: 140%;
  object-fit: cover;
  will-change: transform;
}

.gallery-cta__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 512px;
}

.gallery-cta__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
  max-width: 414px;
}


/* =============================================
   8. LIGHTBOX
   ============================================= */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.gallery-lightbox.is-active {
  pointer-events: auto;
}

.gallery-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 8, 3, 0.92);
  opacity: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%232C0803' fill-opacity='0.55' stroke='%23E8C1B1' stroke-width='1.5'/%3E%3Cline x1='10' y1='16' x2='22' y2='16' stroke='%23E8C1B1' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, pointer;
}

.gallery-lightbox__img {
  position: fixed;
  z-index: 0;
  will-change: transform, width, height, top, left;
  object-fit: cover;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%232C0803' fill-opacity='0.55' stroke='%23E8C1B1' stroke-width='1.5'/%3E%3Cline x1='10' y1='16' x2='22' y2='16' stroke='%23E8C1B1' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, pointer;
  opacity: 0;
}

.gallery-lightbox__close {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: none;
  border: 2px solid rgba(232, 193, 177, 0.3);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  z-index: 2;
}

.gallery-lightbox__close:hover {
  background-color: rgba(232, 193, 177, 0.1);
  border-color: rgba(232, 193, 177, 0.6);
}

.gallery-images__item {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%232C0803' fill-opacity='0.55' stroke='%23E8C1B1' stroke-width='1.5'/%3E%3Cline x1='16' y1='10' x2='16' y2='22' stroke='%23E8C1B1' stroke-width='1.5'/%3E%3Cline x1='10' y1='16' x2='22' y2='16' stroke='%23E8C1B1' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, pointer;
}

.gallery-images__item img {
  transition: filter 0.4s var(--ease-out);
}

.gallery-images__item:hover img {
  filter: brightness(1.08);
}


/* =============================================
   9. FOOTER OVERRIDE
   ============================================= */
.page-gallery .footer {
  position: relative;
  z-index: 5;                 /* same as gallery-cta */
}


/* =============================================
   10. RESPONSIVE ADJUSTMENTS
   ============================================= */
/* overflow: clip no longer needed — positions are percentage-based */

@media (max-width: 1200px) {
  .gallery-hero__heading {
    font-size: clamp(80px, 13.2vw, 199.814px);
  }

}

@media (max-width: 768px) {

  /* Hero scrolls with page on mobile */
  .gallery-hero {
    position: relative;
    height: auto;
    min-height: 50vh;
    padding: 100px 20px 32px;
    z-index: 1;
  }

  .gallery-hero__heading {
    font-size: clamp(50px, 15vw, 120px);
    letter-spacing: -2px;
  }

  /* JS masonry on mobile — container is relative, items positioned by JS */
  .gallery-section {
    aspect-ratio: auto;
  }

  .gallery-images {
    position: relative;
    width: auto;
    height: auto;
    padding: 0 24px 24px;
  }

  .gallery-images__item {
    position: absolute;
  }

  .gallery-images__item img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Disable FOUC opacity on mobile */
  .gallery-images__item--1,
  .gallery-images__item--2,
  .gallery-images__item--3,
  .gallery-images__item--4,
  .gallery-images__item--5 {
    opacity: 1;
  }

  /* CTA */
  .gallery-cta {
    padding: 80px 20px;
    gap: 48px;
  }

  .gallery-cta__image {
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 440 / 246;
  }

  .gallery-cta__text {
    max-width: 100%;
  }
}