/* =============================================================================
   gamos-shabbat.css — שבת חתן, EDITORIAL redesign (2026-07)
   ---------------------------------------------------------------------------
   Replaces the old GSAP pinned mask-reveal. A clean, informative editorial
   layout: centered header + a "facts" ribbon + alternating image/text feature
   rows. Reveal-on-scroll is handled by the shared runtime ([data-reveal]);
   no pinning, no per-widget JS. Works identically on desktop and mobile.
   All colours/typography come from gamos-shared tokens (with fallbacks).
   ========================================================================== */

.shabbat {
  position: relative;
  inline-size: 100%;
  isolation: isolate;
  background-color: var(--ivory, #f5efe6);
  color: var(--ink-deep, #1a1410);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  overflow: clip;
}

.shabbat__container {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(1rem, 4vw, 2.5rem));
}

/* ------------------------------- header ---------------------------------- */
.shabbat__header {
  margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
}
.shabbat .section-header__lede {
  margin-inline: auto;
}

/* ---------------------------- facts ribbon ------------------------------- */
.shabbat__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 0.85rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-inline-size: 60rem;
  margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
}
.shabbat__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brass, #cfae83) 55%, transparent);
  background: color-mix(in srgb, var(--ivory-warm, #ece3d3) 60%, #fff);
  box-shadow: 0 10px 26px -22px rgba(26, 20, 16, 0.55);
}
.shabbat__fact-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--brass-deep, #8b6f46);
  flex: 0 0 auto;
}
.shabbat__fact-label {
  font-family: var(--font-body, "Rubik", sans-serif);
  font-size: clamp(0.85rem, 1.1vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-deep, #1a1410);
  white-space: nowrap;
}

/* ------------------------------ rows ------------------------------------- */
.shabbat__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 6vw, 5.5rem);
}

.shabbat__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4.25rem);
}

/* Alternate the sides row-by-row (works in both LTR and RTL — grid places
   items by `order`, no left/right semantics). */
.shabbat__row-media { order: 1; }
.shabbat__row-body  { order: 2; }
.shabbat__row:nth-child(even) .shabbat__row-media { order: 2; }
.shabbat__row:nth-child(even) .shabbat__row-body  { order: 1; }

/* media */
.shabbat__row-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ivory-warm, #ece3d3);
  box-shadow: 0 40px 80px -48px rgba(26, 20, 16, 0.55);
}
.shabbat__row-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shabbat__row-media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  border-radius: calc(var(--radius-lg, 16px) - 6px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.shabbat__row:hover .shabbat__row-media img { transform: scale(1.045); }

/* body */
.shabbat__row-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-inline-size: 44ch;
}
.shabbat__row-num {
  font-family: var(--font-display-he, "Canela", serif);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 0.9;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--brass, #cfae83) 85%, transparent);
  opacity: 0.8;
  margin-block-end: 0.15rem;
}
.shabbat__row-title {
  margin: 0;
  font-family: var(--font-display-he, "Canela", serif);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ink-deep, #1a1410);
}
.shabbat__row-text {
  margin: 0;
  font-family: var(--font-body, "Rubik", sans-serif);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.65;
  color: var(--ink-deep, #1a1410);
  opacity: 0.84;
}

/* --------------------------- responsive ---------------------------------- */
@media (max-width: 860px) {
  .shabbat__row {
    grid-template-columns: 1fr;
    gap: clamp(1.1rem, 4vw, 1.75rem);
  }
  /* Stack: image always on top, text below (reset the desktop alternation). */
  .shabbat__row-media,
  .shabbat__row:nth-child(even) .shabbat__row-media { order: 0; }
  .shabbat__row-body,
  .shabbat__row:nth-child(even) .shabbat__row-body { order: 1; }
  .shabbat__row-body { max-inline-size: none; }
  .shabbat__row-media { aspect-ratio: 3 / 2; }
}

@media (max-width: 480px) {
  .shabbat__fact { padding: 0.4rem 0.85rem; }
  .shabbat__fact-label { white-space: normal; }
}

/* Reduced motion: the shared [data-reveal] block already renders everything
   statically; hover zoom is decorative and harmless, but disable it too. */
@media (prefers-reduced-motion: reduce) {
  .shabbat__row-media img { transition: none; }
  .shabbat__row:hover .shabbat__row-media img { transform: none; }
}