/* בלק צ'רי — עמוד "הסיפור שלנו" · מקור: פיגמה frame 652:1086 */

/* כיתוב הגלריה בעיצוב הוא Noto Serif Hebrew — נטען רק לעמוד זה */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Hebrew:wght@400;500&display=swap');

/* ── Hero (בעיצוב: 1440x400, שכבת כהות 50%, כותרת 72px) ── */
.story-hero {
  position: relative; overflow: hidden;
  min-block-size: clamp(200px, 30vw, 400px);
  display: grid; place-items: center;
}
.story-hero-bg {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 54% 60%; /* מוקד החיתוך כמו בעיצוב */
}
.story-hero-overlay { position: absolute; inset: 0; background: rgba(6, 3, 4, .5); }
.story-hero h1 {
  position: relative; margin: 0; padding-inline: 20px;
  color: var(--bc-white); text-align: center;
  font-size: var(--fs-hero); font-weight: 400;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

/* ── סקשן הסיפור: טקסט מימין, תמונת השף משמאל ── */
.story-narrative { background: var(--bc-white); padding-block: clamp(3rem, 6vw, 4.5rem); }
.story-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.story-text h2 {
  color: var(--bc-primary);
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.25;
  max-inline-size: 15ch; /* שבירה לשתי שורות כמו בעיצוב */
  margin-block-end: 1em;
}
.story-body p {
  color: var(--bc-ink-soft);
  font-size: var(--fs-lg); line-height: 1.56; /* 18/28 בעיצוב */
  margin-block-end: 1.1em;
}
.story-rest { display: none; }
.story-expanded .story-rest { display: block; }

.story-morebar { display: flex; justify-content: flex-end; margin-block-start: .3rem; }
.story-readmore {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--bc-primary); font-weight: 500; font-size: var(--fs-lg);
  padding: 0 0 3px; border-block-end: 1.5px solid var(--bc-primary);
  transition: opacity .2s;
}
.story-readmore:hover { opacity: .75; }
.story-readmore svg { inline-size: 16px; block-size: 16px; transition: transform .25s ease; }
.story-readmore[aria-expanded="true"] svg { transform: rotate(-90deg); } /* חץ למעלה במצב פתוח */

.story-media { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-card); }
.story-media img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 624 / 620; }

/* ── ציטוט (רקע קרם-חם, טקסט 60px, קו ורוד) ── */
.story-quote {
  background: var(--bc-cream-warm);
  padding-block: clamp(3.5rem, 7vw, 4.5rem);
  text-align: center;
}
.story-quote figure { margin: 0 auto; max-inline-size: 936px; padding-inline: 20px; }
.quote-glyph {
  display: block; overflow: visible;
  color: var(--bc-rose); font-weight: 500;
  font-size: clamp(3rem, 6vw, 5rem); line-height: 1; block-size: .52em;
  margin-block-end: .4em;
}
.story-quote blockquote { margin: 0; }
.story-quote blockquote p {
  margin: 0; color: var(--bc-primary);
  font-size: clamp(1.75rem, 4.2vw, 3.75rem); font-weight: 400; line-height: 1.15;
}
.quote-divider {
  display: block; inline-size: 96px; block-size: 2px;
  background: var(--bc-rose);
  margin: clamp(1.6rem, 3.2vw, 2.6rem) auto 1.5rem;
}
.story-quote .q-name { display: block; font-size: 1.5rem; color: var(--bc-primary); }
.story-quote .q-role { display: block; font-size: var(--fs-md); color: var(--bc-rose); margin-block-start: .3rem; }

/* ── גלריה: תמונה גדולה מימין, שתי תמונות משמאל ── */
.story-gallery-section { background: var(--bc-white); padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem); }
.story-gallery {
  display: grid;
  grid-template-columns: 888fr 432fr; /* פרופורציות העיצוב */
  gap: 24px;
}
.sg-card { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.sg-card img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sg-feature { grid-row: 1 / 3; block-size: 100%; }
.sg-side { aspect-ratio: 432 / 400; }
.sg-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .2);
  display: grid; place-items: center;
}
.sg-overlay span {
  color: var(--bc-white);
  font-family: 'Noto Serif Hebrew', 'Heebo', serif;
  font-size: 1.25rem;
}

/* ── CTA סיום (תוספת מעבר לפריים — הפניה לתפריט) ── */
.story-cta {
  background: var(--bc-white); text-align: center;
  padding-block: clamp(1.5rem, 3vw, 2rem) clamp(3.5rem, 7vw, 5rem);
}
.story-cta-inner h2 { font-size: var(--fs-h3); font-weight: 500; color: var(--bc-ink); }
.story-cta-inner p { color: var(--bc-ink-soft); margin-block-end: 1.4em; }

/* בעיצוב הגלריה נושקת לפוטר — ביטול הרווח המשותף בעמוד זה בלבד */
.site-footer { margin-block-start: 0; }

/* ── רספונסיב ── */
@media (max-width: 960px) {
  .story-split { grid-template-columns: 1fr; gap: 2rem; }

  /* במובייל בעיצוב נראות שתי פסקאות בלבד עד "קראו עוד" */
  .story-collapse-mobile { display: none; }
  .story-expanded .story-collapse-mobile { display: block; }
  .story-morebar { justify-content: center; }

  .story-media { border-radius: 16px; }
  .story-media img { aspect-ratio: 1 / 1; }

  .story-gallery { grid-template-columns: 1fr; gap: 16px; }
  .sg-feature { grid-row: auto; aspect-ratio: 6 / 5; block-size: auto; }
  .sg-side { aspect-ratio: 6 / 5; }
  .sg-salads { display: none; } /* בעיצוב המובייל מוצגות שתי תמונות בלבד */
}