/* =============================================================================
   Section: #shabbat-chatan — שבתות חתן
   ---------------------------------------------------------------------------
   GSAP pinned mask-reveal pattern, port of CodePen WbQPRwv
   ("GSAP pinned image mask reveal on scroll" by gridmorphic).

   Layout: two columns inside .shabbat__container. .shabbat__panels is a
   vertical flex column of 5 × .shabbat__panel, each min-block-size 100vh
   so the parent is 500vh tall. .shabbat__stage is sibling, block-size:
   100vh, position: relative; it gets pinned by ScrollTrigger across the
   container's scroll. Inside the stage, 5 × .shabbat__media are stacked
   absolutely (inset-block-start: 50%, transform: translateY(-50%)) and
   z-index ordered from data-index. The JS animates each image's clip-path
   and object-position to wipe upward + Ken-Burns down, revealing the
   image stacked beneath.

   Background: section paints var(--shabbat-tint, --shabbat-tint-1) — the
   GSAP timeline writes --shabbat-tint per panel for the cross-fade.

   RTL safety: only block-axis animation (clip-path top→bottom, object-
   position Y). No left/right semantics — both LTR and RTL render the
   stage on the inline-end side via flex order.

   Constitution §2 (vanilla), §4 (RTL logical props), §5 user-authorised
   pastel exception (tokens at css/tokens.css), §8 (perf — compositor-only),
   §10 (module-scoped, tokens single-source).
   ========================================================================== */

.shabbat {
  position: relative;
  inline-size: 100%;
  isolation: isolate;
  background-color: var(--shabbat-tint, var(--shabbat-tint-1, #EDF9FF));
  color: var(--ink-deep);
}

.shabbat__container {
  display: flex;
  flex-direction: column;
  max-inline-size: var(--container-wide, 1100px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(1rem, 4vw, 2rem));
}

/* Centered opening header — scrolls naturally above the pinned row. */
.shabbat__header {
  text-align: center;
  margin-block: var(--space-12, 3rem) var(--space-8, 2rem);
}

/* The two-column row. Its block-size IS the scroll range (5 panels × 100vh);
   the .shabbat__stage inside is pinned by ScrollTrigger across it. */
.shabbat__layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 60px);
}

/* Left column — natural scrolling text panels. */
.shabbat__panels {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-inline-size: clamp(240px, 30vw, 360px);
}

.shabbat__panel {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding-block: var(--space-8, 2rem);
}

.shabbat__heading {
  margin: 0;
  font-family: var(--font-display-he);
  font-size: clamp(var(--text-2xl, 1.75rem), 4.4vw, var(--text-4xl, 3.25rem));
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight, 1.1);
  letter-spacing: var(--tracking-tight, -0.02em);
  text-align: start;
  max-inline-size: 16ch;
}

/* Right column — pinned image stage. */
.shabbat__stage {
  position: relative;
  flex: 1 1 auto;
  inline-size: 100%;
  max-inline-size: clamp(320px, 45vw, 540px);
  block-size: 100vh;
  display: flex;
  flex-direction: column;
}

.shabbat__media {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: clamp(280px, 50vh, 480px);
  margin: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: translateY(-50%);
  /* Each image starts fully visible. The JS animates clip-path on the
     N-1 frontmost images to wipe them away in panel order. */
  clip-path: inset(0px 0px 0px 0px);
  /* Warm ink-deep shadow, not pure black (§5 — warm near-black palette). */
  box-shadow: 0 30px 80px -40px rgba(26, 20, 16, 0.45);
  will-change: clip-path;
}

.shabbat__media picture,
.shabbat__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.shabbat__media img {
  object-fit: cover;
  object-position: 0% 0%;
  will-change: object-position;
}

/* Z-index from data-index — pen pattern. data-index="5" is topmost. */
/* Static z-index ladder — JS in js/shabbat-gallery.js also writes inline
   z-index based on imgs.length so the stack stays correct if the markup
   grows beyond 5 panels. The CSS here is the no-JS fallback. */
.shabbat__media[data-index="1"] { z-index: 1; }
.shabbat__media[data-index="2"] { z-index: 2; }
.shabbat__media[data-index="3"] { z-index: 3; }
.shabbat__media[data-index="4"] { z-index: 4; }
.shabbat__media[data-index="5"] { z-index: 5; }

/* ---------------------------------------------------------------------------
   Reduced-motion fallback (desktop). The GSAP module also bails on
   prefers-reduced-motion, so this CSS provides a clean static read.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shabbat__container {
    gap: var(--space-6, 1.5rem);
    padding-block: var(--space-12, 3rem);
  }

  /* display: contents promotes the layout wrapper and both column wrappers'
     children into the container's flex flow. The figures (data-index="5..1")
     arrive AFTER the panels in DOM order, so use their data-index to weave
     them between panels — image data-index="5" sits right after panel 1, "4"
     after panel 2, etc. nth-of-type ordinals sequence the panels themselves.
     The header is the container's first child, so it stays on top. */
  .shabbat__layout,
  .shabbat__panels,
  .shabbat__stage {
    display: contents;
  }

  .shabbat__panel {
    min-block-size: auto;
    block-size: auto;
    padding-block: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
    place-items: center start;
  }
  .shabbat__panel:nth-of-type(1) { order: 0; }
  .shabbat__panel:nth-of-type(2) { order: 2; }
  .shabbat__panel:nth-of-type(3) { order: 4; }
  .shabbat__panel:nth-of-type(4) { order: 6; }
  .shabbat__panel:nth-of-type(5) { order: 8; }

  .shabbat__media {
    position: relative;
    inset-block: auto;
    inset-inline: auto;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: clamp(280px, 60vw, 420px);
    border-radius: 12px;
    transform: none;
    clip-path: none;
  }
  .shabbat__media[data-index="5"] { order: 1; }
  .shabbat__media[data-index="4"] { order: 3; }
  .shabbat__media[data-index="3"] { order: 5; }
  .shabbat__media[data-index="2"] { order: 7; }
  .shabbat__media[data-index="1"] { order: 9; }

  .shabbat__media img {
    object-position: 0% 50%;
  }
}