/* ============================================================
   IMAGO ARC — EDITORIAL GALLERY LAYOUT SYSTEM
   Replaces all .ed-block, .ed-hero, .ed-pair-left etc.
   ============================================================ */

/* --- Page wrapper --- */
.gallery-page {
  background: #000;
  padding: 0;
  /* NO min-height: 100vh — already removed */
}

/* --- Gallery sequence container --- */
.gallery-sequence {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 120px 24px;
}

/* ============================================================
   SLOT TYPES
   Each slot is a self-contained editorial unit.
   ============================================================ */

/* HERO — opens the page, near-full viewport height */
.slot-hero {
  width: 100%;
  margin: 0 0 0 0;
  position: relative;
}

.slot-hero img {
  width: 100%;
  height: 88vh;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* FULL — full column width, shorter than hero */
.slot-full {
  width: 100%;
  margin: 140px 0;
}

.slot-full img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 680px;
  object-fit: cover;
}

/* BREATHE — solo image, offset left or right, with whitespace */
.slot-breathe {
  width: 68%;
  margin: 140px 0 140px auto; /* right-aligned by default */
}

.slot-breathe.left {
  margin: 140px auto 140px 0; /* left-aligned */
}

.slot-breathe img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 580px;
  object-fit: cover;
}

/* PAIR — two images side by side, asymmetric sizes */
.slot-pair {
  display: grid;
  gap: 16px;
  margin: 140px 0;
  align-items: end; /* stagger heights — images bottom-align */
}

/* Left image larger */
.slot-pair.left-heavy {
  grid-template-columns: 3fr 2fr;
}

/* Right image larger */
.slot-pair.right-heavy {
  grid-template-columns: 2fr 3fr;
}

/* Equal but still editorial */
.slot-pair.equal {
  grid-template-columns: 1fr 1fr;
}

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

.slot-pair .pair-img-tall {
  height: 460px;
}

.slot-pair .pair-img-short {
  height: 320px;
}

/* DIPTYCH — closing two images, small and quiet */
.slot-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 140px auto;
  width: 78%;
}

.slot-diptych img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* TRIO — three images across, equal width, with gaps */
.slot-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin: 160px 0;
}

.slot-trio img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

/* SOLO INSET — single image, centered, narrower than full */
.slot-inset {
  width: 56%;
  margin: 140px auto;
}

.slot-inset img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   LIGHTBOX CURSOR — all gallery images are clickable
   ============================================================ */
.gallery-sequence img {
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.gallery-sequence img:hover {
  opacity: 0.88;
}

/* ============================================================
   RESPONSIVE — collapse pairs to stacked on mobile
   ============================================================ */
/* Medium screens — trio goes to 2+1 stacked */
@media (max-width: 1024px) {
  .gallery-sequence {
    max-width: 100%;
    padding: 0 16px 100px 16px;
  }

  .slot-trio img {
    height: 300px;
  }
}

@media (max-width: 680px) {
  .gallery-sequence {
    padding: 0 12px 80px 12px;
  }

  .slot-hero img {
    height: 60vh;
  }

  .slot-breathe,
  .slot-breathe.left {
    width: 100%;
    margin: 64px auto;
  }

  .slot-pair,
  .slot-pair.left-heavy,
  .slot-pair.right-heavy,
  .slot-pair.equal {
    grid-template-columns: 1fr;
  }

  .slot-pair .pair-img-tall,
  .slot-pair .pair-img-short {
    height: 260px;
  }

  .slot-trio {
    grid-template-columns: 1fr;
  }

  .slot-trio img {
    height: 260px;
  }

  .slot-diptych {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .slot-diptych img {
    height: 220px;
  }

  .slot-inset {
    width: 92%;
  }

  .slot-full {
    margin: 64px 0;
  }
}