/*
 * Photo gallery — three tilted rows of camp photos
 * Figma: Desktop 70:3 (section y 2250–3620) rows 70:114 / 70:129 / 70:121
 *        Mobile 70:187 (section y 2170–2860) rows 86:42 / 86:57 / 86:49
 * Rows are absolutely placed relative to the viewport centre (so they bleed
 * off both edges like the design) and are flex tracks, ready to become marquees.
 */

.gallery {
  --gallery-photo-w: 272px;
  --gallery-photo-h: 181px;
  --gallery-radius: 8px;
  position: relative;
  height: 760px; /* +70 vs Figma: the tilted top row mustn't overlap the middle one on wide phones */
  overflow-x: clip;
  overflow-y: visible;
}

.gallery__row {
  position: absolute;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  /* Scroll parallax: js/parallax.js sets --gallery-shift (px); --gallery-tilt is each row's rotation */
  --gallery-shift: 0px;
  --gallery-tilt: 0deg;
  transform: translate3d(var(--gallery-shift), 0, 0) rotate(var(--gallery-tilt));
  will-change: transform;
}

.gallery__item { flex: none; }

.gallery__img {
  display: block;
  width: var(--gallery-photo-w);
  height: var(--gallery-photo-h);
  object-fit: cover;
  border-radius: var(--gallery-radius);
}

/* Mobile placement (relative to viewport centre) */
.gallery__row--1 {
  top: 93px;
  left: calc(50% - 390px);
  --gallery-tilt: -2.31deg;
  filter: drop-shadow(0 2px 17px var(--glow-gallery-1));
  z-index: 3;
}
.gallery__row--3 {
  top: 321px;
  left: calc(50% - 1861px);
  gap: 3px;
  filter: drop-shadow(0 2px 19px var(--glow-gallery-3));
  z-index: 1;
}
.gallery__row--2 {
  top: 511px;
  left: calc(50% - 1214px);
  --gallery-tilt: 1.83deg;
  filter: drop-shadow(0 2px 7px var(--glow-gallery-2));
  z-index: 2;
}

@media (min-width: 768px) {
  .gallery {
    --gallery-photo-w: 544px;
    --gallery-photo-h: 363px;
    --gallery-radius: 16px;
    height: 1410px; /* +40 vs Figma: more room under the top row */
  }
  .gallery__row { gap: 16px; }
  .gallery__row--1 { top: 87px;  left: calc(50% - 1012px); filter: drop-shadow(0 4px 34.35px var(--glow-gallery-1)); }
  .gallery__row--3 { top: 552px; left: calc(50% - 3961px); gap: 6px; filter: drop-shadow(0 4px 37.85px var(--glow-gallery-3)); }
  .gallery__row--2 { top: 933px; left: calc(50% - 2674px); filter: drop-shadow(0 4px 14.45px var(--glow-gallery-2)); }
}