/* sections.css – סיפור הפסיפס, חרכים, עונות, CTA */

/* =========================================================
   סיפור הפסיפס (Hero)
   בסיס = פסיפס סטטי (בלי תמיכה / reduced-motion).
   משופר = במה דביקה: חלון → מסך מלא → פסיפס.
   ========================================================= */
.story { position: relative; }
.story__stage { padding: 32px var(--gutter) var(--section); max-width: 1360px; margin-inline: auto; }
.story__title { font-size: var(--fs-display); line-height: 1.02; }
.story__hint { margin-top: 18px; color: var(--muted); }
.story__intro { margin-bottom: 40px; }

.story__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.story__cell { aspect-ratio: 4 / 3; min-width: 0; }
.story__cell--main { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; }
.story__main { position: relative; margin: 0; width: 100%; height: 100%; }
.story__frame { width: 100%; height: 100%; }
.story__caption {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 16px;
  z-index: 3;
  padding: 10px 16px;
  background: var(--ground);
}
.story__tile { position: relative; display: block; width: 100%; height: 100%; color: var(--ink); text-decoration: none; }
.story__tile .frame { width: 100%; height: 100%; }
.story__tile .frame__label { display: none; }
.story__tile-label {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  background: var(--ground);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
}
.story__closing { margin-top: 32px; font-size: var(--fs-h3); font-weight: 700; text-align: center; }
.story__main .frame__label { bottom: auto; top: 16px; inset-inline-start: auto; inset-inline-end: 16px; }
.story__tile-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) {
  .story__tile-label { padding: 6px 8px; gap: 6px; font-size: .75rem; }
  .story__tile-label .stone { width: 16px; height: 12px; }
}

@media (min-width: 900px) {
  .story__grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .story__cell--main { grid-column: 3; grid-row: 2; aspect-ratio: 4 / 3; }
}

/* ---------- משופר: scroll-driven ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .story {
      height: 300svh;
      view-timeline: --story block;
    }
    .story__stage {
      position: sticky;
      top: 0;
      height: 100svh;
      max-width: none;
      padding: 0;
      overflow: hidden;
      container-type: size;
      /* גיאומטריית הרשת (מובייל: 3×5) */
      --g-cols: 3; --g-rows: 5;
      --g-px: 4cqw; --g-col: 2cqw;
      --g-pt: 12cqh; --g-pb: 12cqh; --g-row: 1.2cqh;
      --mid-c: 1; --mid-r: 2;
      --win: inset(54cqh 10cqw 14cqh 10cqw);
    }
    .story__grid {
      position: absolute;
      inset: 0;
      grid-template-columns: repeat(var(--g-cols), 1fr);
      grid-template-rows: repeat(var(--g-rows), 1fr);
      column-gap: var(--g-col);
      row-gap: var(--g-row);
      padding: var(--g-pt) var(--g-px) var(--g-pb);
      --tw: calc((100cqw - 2 * var(--g-px) - (var(--g-cols) - 1) * var(--g-col)) / var(--g-cols));
      --th: calc((100cqh - var(--g-pt) - var(--g-pb) - (var(--g-rows) - 1) * var(--g-row)) / var(--g-rows));
      --slot-x: calc(var(--g-px) + var(--mid-c) * (var(--tw) + var(--g-col)));
      --slot-t: calc(var(--g-pt) + var(--mid-r) * (var(--th) + var(--g-row)));
      --slot-b: calc(100cqh - var(--slot-t) - var(--th));
    }
    .story__cell { aspect-ratio: auto; }
    .story__cell--main { grid-column: auto; grid-row: auto; aspect-ratio: auto; }
    .story__main { position: absolute; inset: 0; z-index: 1; }
    .story__frame {
      position: absolute;
      inset: 0;
      animation: tn-story-frame linear both;
      animation-timeline: --story;
      animation-range: contain 0% contain 76%;
    }
    .story__caption {
      animation: tn-fade-out linear both;
      animation-timeline: --story;
      animation-range: contain 42% contain 50%;
    }
    .story__intro {
      position: absolute;
      z-index: 4;
      top: 14cqh;
      inset-inline-start: var(--gutter);
      max-width: min(640px, 80cqw);
      margin: 0;
      animation: tn-intro-out linear both;
      animation-timeline: --story;
      animation-range: contain 0% contain 12%;
    }
    .story__cell:not(.story__cell--main):not(.story__cell--empty) {
      animation: tn-tile-in linear both;
      animation-timeline: --story;
    }
    .mosaic__tile--loose {
      animation: tn-settle linear both;
      animation-timeline: --story;
      animation-range: contain 0% contain 34%;
    }
    .story__closing {
      position: absolute;
      z-index: 4;
      inset-inline: 0;
      bottom: 3cqh;
      width: fit-content;
      max-width: calc(100% - 2 * var(--gutter));
      margin-inline: auto;
      padding: 8px 20px;
      background: var(--ground);
      animation: tn-fade-in linear both;
      animation-timeline: --story;
      animation-range: contain 84% contain 94%;
    }
    @media (min-width: 900px) {
      .story__stage {
        --g-cols: 5; --g-rows: 3;
        --g-px: 6cqw; --g-col: 1.2cqw;
        --g-pt: 14cqh; --g-pb: 13cqh; --g-row: 1.8cqh;
        --mid-c: 2; --mid-r: 1;
        --win: inset(30cqh 62cqw 26cqh 8cqw);
      }
      .story__intro { top: 24cqh; }
    }
  }
}

@keyframes tn-story-frame {
  0%   { clip-path: var(--win); }
  40%  { clip-path: inset(0 0 0 0); }
  56%  { clip-path: inset(0 0 0 0); }
  76%, 100% { clip-path: inset(var(--slot-t) var(--slot-x) var(--slot-b) var(--slot-x)); }
}
@keyframes tn-intro-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-48px); } }
@keyframes tn-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tn-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tn-tile-in { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes tn-settle { from { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); } to { transform: none; } }

/* =========================================================
   חרכים
   ========================================================= */
.slits { padding-block: var(--section); }
.slits__list { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.slits__item {
  position: relative;
  height: 84px;
  transition: height .45s var(--ease-out); /* חריגה מודעת: 6 פריטים, שינוי גובה קצר */
}
.slits__item.is-open,
.slits__item:focus-within { height: clamp(300px, 52vw, 460px); }
.slits__link { position: absolute; inset: 0; display: block; color: var(--ink); text-decoration: none; }
.slits__media { position: absolute; inset: 0; }
.slits__media .frame { width: 100%; height: 100%; }
.slits__media .frame__label { inset-inline-start: auto; inset-inline-end: 12px; bottom: auto; top: 12px; }
.slits__item:not(.is-open):not(:focus-within) .frame__label { display: none; }
.slits__body {
  position: absolute;
  z-index: 2;
  inset-inline-start: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(520px, calc(100% - 24px));
  padding: 10px 16px;
  background: var(--ground);
}
.slits__head { display: flex; align-items: center; gap: 10px; }
.slits__title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.slits__text { display: none; font-size: var(--fs-small); color: var(--muted); }
.slits__item.is-open .slits__text,
.slits__item:focus-within .slits__text { display: block; }
@media (max-width: 599px) {
  .slits__item { height: 72px; }
  .slits__title { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .slits__item { transition: none; } }

/* =========================================================
   עונות
   ========================================================= */
.seasons { padding-block: 0 var(--section); overflow-x: clip; }
.seasons__months {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(76px, 1fr);
  gap: var(--gap);
  overflow-x: auto;
}
.seasons__month {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  background: var(--month);
  font-weight: 500;
}
.seasons__month.is-next { background: var(--tint-orange); }
.seasons__month.is-now { background: var(--stone-orange); font-weight: 800; }
.seasons__now { font-size: .75rem; font-weight: 700; }
.seasons__grid { display: grid; gap: 32px; margin-top: 32px; }
.seasons__feature { display: grid; gap: 20px; }
.seasons__frame { width: 100%; }
.seasons__when { font-size: var(--fs-small); color: var(--muted); }
.seasons__title { margin-top: 6px; font-size: var(--fs-h2); line-height: 1.1; }
.seasons__next { border-top: 3px solid var(--ink); padding-top: 16px; }
.seasons__next-title { margin-top: 8px; font-size: var(--fs-h3); line-height: 1.2; }
.seasons .link { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (min-width: 900px) {
  .seasons__grid { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
}

/* =========================================================
   CTA
   ========================================================= */
.cta { background: var(--sky); }
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-block: var(--section); text-align: center; }
.cta__logo { width: min(460px, 82vw); height: auto; }
.sentence { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.sentence__line { font-size: var(--fs-sentence); font-weight: 700; line-height: 1.8; }