/* =========================================================================
   Tikkun Sanctuary — THE SANCTUARY page only (sanctuary/sanctuary/index.html).
   Image-led. Tokens only, never raw colours.
   ========================================================================= */

/* ---------- hero: tall, the Maloka in morning light ---------- */
.sanct-hero { min-height: min(88svh, 820px); }
.sanct-hero .hero__media img { object-position: 50% 62%; }
.sanct-hero .hero__title { max-width: 17ch; }

/* ---------- intros ---------- */
.sanct-lede { max-width: var(--maxw-text); margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.sanct-gallery { margin-top: 0; }

/* ---------- the Maloka ---------- */
.sanct-maloka__head {
  display: grid; gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .sanct-maloka__head { grid-template-columns: 5fr 6fr; align-items: end; }
  .sanct-maloka__head h2 { margin-bottom: 0; }
}
.sanct-maloka .gallery figure { background: var(--forest); }
.sanct-feature {
  margin: 0 0 clamp(0.65rem, 1.4vw, 1rem);
  overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; background: var(--forest);
}
@media (min-width: 720px) { .sanct-feature { aspect-ratio: 2000 / 867; } }
.sanct-feature img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }

/* maloka-dusk.jpg is portrait: on phones give it its true shape, kept narrow */
@media (max-width: 719px) {
  .sanct-portrait { aspect-ratio: 1242 / 1756; max-width: 420px; justify-self: center; width: 100%; }
}

/* Galleries: every figure in a row shares ONE height, so wide and narrow tiles line up
   instead of leaving ragged gaps (site.css gives them different aspect ratios). */
@media (min-width: 720px) {
  .sanct-gallery .gallery__item { aspect-ratio: auto; height: clamp(260px, 30vw, 430px); }
  .sanct-gallery .sanct-tall { height: clamp(380px, 44vw, 620px); }
  .sanct-gallery .gallery__item--full { height: clamp(240px, 26vw, 400px); }
}

/* ---------- the breath ---------- */
.sanct-band img { object-position: 50% 40%; }

/* ---------- alone / gather ---------- */
.sanct-pair {
  display: grid; gap: clamp(3.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .sanct-pair { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 4vw, 4rem); } }
.sanct-pair__col { display: flex; flex-direction: column; }
.sanct-pair__col p { color: var(--ink-soft); }
.sanct-pair__title { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.75rem); }
.sanct-pair__media {
  margin-top: auto; padding-top: 1.75rem;
  display: grid; gap: clamp(0.5rem, 1vw, 0.75rem);
  grid-template-columns: 1fr 1fr;
}
.sanct-pair__media figure {
  margin: 0; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; background: var(--cream);
}
.sanct-pair__media .sanct-pair__big { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.sanct-pair__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- stay: short, and quiet ---------- */
.sanct-stay {
  display: grid; gap: 0.5rem 3rem;
  grid-template-columns: 1fr;
  padding-block: clamp(0.5rem, 2vw, 1.5rem);
}
@media (min-width: 900px) { .sanct-stay { grid-template-columns: 4fr 7fr; } }
.sanct-stay__title { font-size: var(--fs-h3); }
.sanct-stay p { color: var(--ink-soft); }

/* ---------- close: where, and what next ---------- */
.sanct-close { height: auto; min-height: clamp(420px, 48vw, 600px); }
.sanct-close .band__inner { max-width: 760px; padding-block: clamp(4rem, 8vw, 6rem); }
.sanct-close__eyebrow { color: var(--sage); }
.sanct-close__title { margin-bottom: 1rem; }
.sanct-close__text {
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  margin-inline: auto; max-width: 52ch;
}
.sanct-close__btns { justify-content: center; margin-top: 2rem; }
@media (max-width: 480px) {
  .sanct-close__btns .btn { width: 100%; justify-content: center; text-align: center; }
}