/* =============================================
   ARCHITECTURE INTRO — "A modern monument"  (Figma 175:3857)
   ============================================= */

.sec-monument {
  height: calc(100vh * 2.2);            /* stage + 1.2 viewports of pinned scroll (JS keeps exact) */
}

/* the 1920×1080 design canvas, centred in the 100vh stage */
.sec-monument .sec-canvas {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: calc(1080 * var(--dpx));
  transform: translateY(-50%);
  overflow: visible;
}

/* Figma 175:3858 — 1153 wide, centred, top 84 */
.monument-title {
  position: absolute;
  left: 0;
  right: 0;
  top: max(calc(84 * var(--dpx)), calc(var(--vis-top) + 24px));
  width: calc(1153 * var(--dpx));
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}

/* zoom group — scaled by GSAP about (960, 966) design px */
.monument-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 50% calc(966 * var(--dpx));
  will-change: transform;
  z-index: 1;
}

.monument-img {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--cream-dark);
  cursor: pointer;
}
.monument-img:hover img {
  opacity: 0.9;
}
.monument-img img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Rectangle 6 — 1034×557 @ -756,419 (photo: centred cover) */
.monument-img--left {
  left: calc(-756 * var(--dpx));
  top: calc(419 * var(--dpx));
  width: calc(1034 * var(--dpx));
  height: calc(557 * var(--dpx));
}
.monument-img--left img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Rectangle 5 — 1264×681 @ 328,357 (photo: centred cover; this frame zooms to full bleed) */
.monument-img--center {
  left: calc(328 * var(--dpx));
  top: calc(357 * var(--dpx));
  width: calc(1264 * var(--dpx));
  height: calc(681 * var(--dpx));
}
.monument-img--center img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Rectangle 7 — 1034×557 @ 1642,419 (photo: centred cover) */
.monument-img--right {
  left: calc(1642 * var(--dpx));
  top: calc(419 * var(--dpx));
  width: calc(1034 * var(--dpx));
  height: calc(557 * var(--dpx));
}
.monument-img--right img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---- flow layout: below 992px or reduced motion (class set by JS) ---- */
.sec-monument.is-flow { height: auto; }
.sec-monument.is-flow .pin-stage { height: auto; overflow: visible; }
.sec-monument.is-flow .sec-canvas {
  position: relative;
  top: auto;
  height: auto;
  transform: none;
  padding: 64px 20px 0;
}
.sec-monument.is-flow .monument-title {
  position: relative;
  top: auto;
  width: 100%;
  margin: 0 auto 32px;
}
.sec-monument.is-flow .monument-zoom {
  position: relative;
  inset: auto;
  transform: none;
}
.sec-monument.is-flow .monument-img--left,
.sec-monument.is-flow .monument-img--right { display: none; }
.sec-monument.is-flow .monument-img--center {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1264 / 681;
}

@media (max-width: 767px) {
  .sec-monument.is-flow .sec-canvas { padding: 48px 20px 0; }
}