/* =============================================
   MOMENTS OF GRANDEUR — gallery carousel  (Figma 175:3759, 1920×886)

   Layer order (bottom → top):
     1  .moments-strip     four 858×515 photos on a 1030 pitch, 2nd one centred
     2  .moments-shape     two cream arcs that carve the strip's top / bottom edges
     3  .moments-nav       transparent prev / next click zones over the side photos
     4  .moments-title     "Moments of Grandeur"
     5  .moments-watermark gold emblem peeking in at the top-left corner
   ============================================= */

.sec-moments .sec-canvas {
  height: calc(886 * var(--dpx));
  background: var(--cream);
}

/* ---- Title — Figma 175:3767: 874 wide, centred (x 523), y 97 ---- */
.sec-moments .moments-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(97 * var(--dpx));
  text-align: center;
  white-space: nowrap;
  z-index: 4;
}

/* ---- Watermark — Figma 175:3768: 258×258 @ -80,-148 ---- */
.sec-moments .moments-watermark {
  position: absolute;
  left: calc(-80 * var(--dpx));
  top: calc(-148 * var(--dpx));
  width: calc(258 * var(--dpx));
  height: calc(258 * var(--dpx));
  max-width: none;
  pointer-events: none;
  z-index: 5;
}

/* ---- Carousel viewport — the strip row: y 285, height 515, full width ---- */
.sec-moments .moments-carousel {
  position: absolute;
  left: 0;
  top: calc(285 * var(--dpx));
  width: 100%;
  height: calc(515 * var(--dpx));
  touch-action: pan-y;             /* horizontal swipes reach the JS, vertical pans scroll the page */
  user-select: none;
  -webkit-user-select: none;
}

.sec-moments .moments-strip {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Each slide starts on the centre slot (x 527, Figma 175:3762) and is shifted by
   whole steps of 1030 design px = 120.0466 % of its own 858 width — a percentage,
   so the layout survives resizes without JS re-measuring. JS overwrites these. */
.sec-moments .moments-slide {
  position: absolute;
  left: calc(527 * var(--dpx));
  top: 0;
  width: calc(858 * var(--dpx));
  height: calc(515 * var(--dpx));
  overflow: hidden;
  background: var(--cream-dark);
  will-change: transform;
  cursor: pointer;
}
.sec-moments .moments-slide:hover .moments-slide__img {
  opacity: 0.9;
}
.sec-moments .moments-slide:nth-child(1)   { transform: translateX(-120.0466%); }   /* @ -503 */
.sec-moments .moments-slide:nth-child(2)   { transform: translateX(0); }            /* @  527 */
.sec-moments .moments-slide:nth-child(3)   { transform: translateX(120.0466%); }    /* @ 1557 */
.sec-moments .moments-slide:nth-child(n+4) { transform: translateX(240.0932%); }    /* off-screen right */

.sec-moments .moments-slide__img {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Portrait renders in a landscape slot: bias the crop up so the tower crowns stay in frame */
.sec-moments .moments-slide--portrait .moments-slide__img { object-position: 50% 38%; }

/* ---- Prev / next click zones: the visible parts of the side photos ---- */
.sec-moments .moments-nav {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
.sec-moments .moments-nav--prev { left: 0; width: calc(355 * var(--dpx)); }                       /* -503 + 858 */
.sec-moments .moments-nav--next { left: calc(1557 * var(--dpx)); width: calc(363 * var(--dpx)); }  /* 1920 - 1557 */
.sec-moments .moments-nav:focus-visible { outline-offset: calc(-4 * var(--dpx)); }

/* ---- Visible prev / next buttons, centred under the strip (matches .res-arrow) ----
   Nested inside .moments-carousel (top 285) so it shares the same hover/focus
   autoplay-pause listeners; 533 = 818 - 285 keeps it at canvas-space y 818. */
.sec-moments .moments-controls {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(533 * var(--dpx));
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.sec-moments .moments-arrow {
  width: calc(49.3 * var(--dpx));
  height: calc(49.3 * var(--dpx));
  padding: 0;
  border: 1px solid rgba(176, 143, 61, 0.35);
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.sec-moments .moments-arrow:hover,
.sec-moments .moments-arrow:focus-visible {
  transform: scale(1.06);
  border-color: var(--gold);
  box-shadow: 0 calc(4 * var(--dpx)) calc(16 * var(--dpx)) rgba(48, 48, 48, 0.1);
}
.sec-moments .moments-arrow img {
  width: calc(21.25 * var(--dpx));
  height: calc(21.71 * var(--dpx));
  max-width: none;
  display: block;
}
.sec-moments .moments-arrow--prev img { transform: rotate(-90deg); }
.sec-moments .moments-arrow--next img { transform: rotate(90deg); }

/* ---- Cream arcs — Figma 175:3765 / 175:3766 "Subtract": 2189×594.206 @ -83 ---- */
.sec-moments .moments-shape {
  position: absolute;
  left: calc(-83 * var(--dpx));
  width: calc(2189 * var(--dpx));
  height: calc(594.206 * var(--dpx));
  max-width: none;
  pointer-events: none;
  z-index: 2;
}
.sec-moments .moments-shape--top    { top: calc(-184 * var(--dpx)); }
.sec-moments .moments-shape--bottom { top: calc(651 * var(--dpx)); }

/* =============================================
   < 992px — title above a native horizontal scroll-snap row
   (no arcs, no autoplay; JS clears the slide transforms)
   ============================================= */
@media (max-width: 991px) {
  .sec-moments .sec-canvas {
    height: auto;
    padding: 64px 0;
  }

  .sec-moments .moments-watermark,
  .sec-moments .moments-shape,
  .sec-moments .moments-nav,
  .sec-moments .moments-controls,
  .sec-moments .moments-slide.is-clone { display: none; }

  .sec-moments .moments-title {
    position: relative;
    top: auto;
    white-space: normal;
    padding: 0 20px;
    margin: 0 0 32px;
  }

  .sec-moments .moments-carousel {
    position: relative;
    top: auto;
    height: auto;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }

  .sec-moments .moments-strip {
    position: relative;
    inset: auto;
    display: flex;
    gap: 16px;
    padding: 0 9vw;                  /* (100 - 82) / 2 → first and last slides sit centred */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sec-moments .moments-strip::-webkit-scrollbar { display: none; }

  .sec-moments .moments-strip .moments-slide {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 82vw;
    width: 82vw;
    height: auto;
    aspect-ratio: 16 / 10;
    transform: none;
    scroll-snap-align: center;
    will-change: auto;
  }

  /* centred cover in the 16/10 mobile box */
  .sec-moments .moments-strip .moments-slide .moments-slide__img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .sec-moments .moments-strip .moments-slide--portrait .moments-slide__img { object-position: 50% 38%; }
}

@media (max-width: 767px) {
  .sec-moments .sec-canvas { padding: 48px 0; }
  .sec-moments .moments-title { margin-bottom: 24px; }
}

/* The Figma variant renders (the in-page states) show no watermark here — hidden to match. */
.sec-moments .moments-watermark { display: none; }