/* Closing beat: the table cloth lifts straight up and the people the night is
   for are underneath. The gallery is a continuous strip of photographs; the
   cloth sits on top of it and rises out of frame on scroll
   (scripts/sections/gallery.js drives the motion, this file only stages it).

   The cloth uses the same felt tile as the page background, so nothing new is
   introduced: the green that was always there is what gets pulled away. */

.section-gallery {
  position: relative;
  /* Full bleed: no section frame, no shell padding. The reveal owns the screen.
     No overflow here: an overflow ancestor would kill the sticky viewport below. */
  padding: 0;
}

.gallery-viewport {
  position: relative;
  /* Mobile: a tall band rather than the whole screen, so scrolling past is never
     trapped, but with enough room for the full footer lockup to sit on the cloth. */
  height: clamp(24rem, 78vh, 34rem);
  overflow: hidden;
}


/* Title, on the dark band above the photographs. Same rules-and-diamond
   treatment as every section kicker, so the reveal lands in the page's own
   language. Sits under the cloth in stacking order, which is what lets it be
   uncovered rather than animated in. */
.gallery-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.5vw, 1.6rem);
  /* Centred in the dark band left above the photos. */
  height: 13%;
  min-height: 2.75rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
  margin: 0;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.gallery-title::before,
.gallery-title::after {
  content: "";
  flex: 1 1 0;
  max-width: clamp(1.5rem, 16vw, 10rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 92%);
}

.gallery-title::after {
  background: linear-gradient(90deg, var(--gold) 8%, transparent);
}

/* Photo strip, underneath the cloth. */
.gallery-strip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Reads as the dark underside of the table, so the photographs carry the light. */
  background-color: #0b1a10;
}

.gallery-track {
  display: flex;
  align-items: center;
  /* Explicit height so the photos' percentage heights have something to resolve
     against. Without it the track sizes to its content, the percentage is
     circular, and each photo falls back to its intrinsic pixel height. */
  height: 100%;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  padding-inline: clamp(0.9rem, 2vw, 1.75rem);
  will-change: transform;
}

.gallery-photo {
  position: relative;
  flex: none;
  /* Sized off the strip, so it follows the viewport height at every breakpoint.
     On a phone one photo fills the band; on desktop two or three read at once,
     which is what makes it feel like a strip and not a slideshow. */
  height: 82%;
  margin: 0;
  /* Printed edge, the same hairline gold used by every frame on the page. */
  border: 1px solid var(--gold-line);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    2px 4px 4px rgb(0 0 0 / 0.55),
    6px 13px 20px rgb(0 0 0 / 0.45);
}

.gallery-photo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* Each photograph carries its organisation's mark in the corner, as asked in
   the review, so it is always clear whose work is on screen. */
.gallery-mark {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
  background-color: rgb(3 8 5 / 0.62);
  backdrop-filter: blur(2px);
}

.gallery-mark img {
  height: clamp(1.05rem, 2vw, 1.5rem);
  width: auto;
}

/* Kisses for Kyle's crayon mark needs its white field to stay legible, exactly
   as in the hero and footer. */
.gallery-mark-kxk {
  background-color: var(--white);
  border: 1px solid var(--gold);
}

/* The cloth: one piece of felt covering the opening, lifted straight up and off
   as you scroll. Its lower edge casts onto the photographs underneath, which is
   what sells it as fabric being pulled away rather than a panel sliding. */
.gallery-cloth {
  position: absolute;
  inset: 0;
  /* Above the title (z-index 2), which in turn is above the strip. */
  z-index: 3;
  background-color: var(--felt-deep);
  background-image: url("../../assets/textures/felt-tile.webp");
  background-repeat: repeat;
  background-size: 800px auto;
  box-shadow:
    /* Weight and shade along the trailing edge. */
    inset 0 -18px 26px -14px rgb(0 0 0 / 0.7),
    0 16px 26px -8px rgb(0 0 0 / 0.6);
  will-change: transform;
}

/* The footer rides on the cloth, centred, so it travels with it. */
.cloth-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
}

/* On the cloth the footer needs no block padding of its own: the face centres it. */
.cloth-face .site-footer {
  padding-block: 0;
}

/* Desktop: the section is two screens tall and the viewport sticks to the top of
   it, so the second screen of scroll drives the reveal. Sticky rather than a
   GSAP pin on purpose: a pin appends a spacer, which would leave a screen of
   empty felt after the gallery. This way the page's last pixel of scroll is the
   gallery, fully revealed. */
@media (min-width: 768px) {
  .section-gallery {
    height: 200vh;
  }

  .gallery-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .gallery-photo {
    height: 62%;
  }
}

/* No motion: nothing lifts. The section falls back to a plain layout, the strip
   becomes a manually scrollable band and the footer sits below it in flow. Uses
   the media query (not the .reduced-motion class main.js adds) so it also holds
   when scripts never run. Placed last so it wins over the desktop block above. */
@media (prefers-reduced-motion: reduce) {
  .section-gallery {
    height: auto;
  }

  .gallery-viewport {
    position: relative;
    height: auto;
  }

  .gallery-title {
    position: static;
    height: auto;
    padding-block: var(--space-3);
  }

  .gallery-strip {
    position: relative;
    height: clamp(19rem, 55vh, 26rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .gallery-photo {
    height: 82%;
    scroll-snap-align: center;
  }

  /* The cloth stops covering anything and simply becomes the footer's backdrop. */
  .gallery-cloth {
    position: static;
    background: none;
    box-shadow: none;
  }

  .cloth-face {
    position: static;
    padding: 0;
  }

  .cloth-face .site-footer {
    padding-block: var(--space-8);
  }
}