/* בלק צ'רי — עמוד "הסיפור שלנו" · מקור: פיגמה frame 652:1086 (מובייל 633:3637)
   V3 (20.7.26): כויל למידות מ-node-JSON גולמי — figma-extract/2026-07-20/raw/nodes-02.json + nodes-04.json */

/* הגופן Noto Serif Hebrew נטען מ-/css/font-noto-serif-hebrew.css (מקושר ב-our-story.html),
   ו-`--font-display` מוגדר ב-tokens.css. אין כאן @font-face — היו שתי הצהרות כפולות
   לאותה משפחה (סוכן הגלריה + סוכן הסיפור בנו אותה במקביל), אוחדו 20.7. */

/* ── Hero (652:1227 — 1440×400, שכבת כהות #010101 50%, כותרת 72/lh90 משקל 400) ── */
/* גובה: 652:1227 — 1440×400 בדסקטופ · 651:831 — 393×300 במובייל.
   רצפת ה-clamp היא ערך-המובייל מהפיגמה (היתה 200 שרירותית, ולכן ב-393 רונדרו 200 במקום 300). */
.story-hero {
  position: relative; overflow: hidden;
  min-block-size: clamp(300px, 30vw, 400px);
  display: grid; place-items: center;
}
/* חיתוך מחושב · figmacopy `crop` על 652:1230 מול המסגרת החותכת החיצונית 652:1227.
   הפיגמה מציגה את התמונה בגודל 1592×889 בתוך חלון 1440×400 — כלומר 110.56%
   מרוחב הפס ו-222.25% מגובהו, בהיסט 87.5% / 67.59%.

   ⚠ coverSafe:false — התמונה גולשת בשני הצירים, ולכן `object-fit:cover` **אינו יכול**
   לשחזר את החיתוך: הוא כופה בדיוק 100% מרוחב הפס (מקטין את הסצנה ב-10.56%) ומאפס
   את הגלישה האופקית, כך שה-54% שהיה כאן היה ערך מת. הערך האנכי (69%) כויל בעין
   אחרי שנראה שהקינוח נחתך — וזה בדיוק מה שהבעלים דיווח עליו ב-27.7.

   הפתרון: תיבת-האלמנט נבנית בגודל-התצוגה של הפיגמה ומוזזת אל ההיסט.
   ‏translate% הוא ביחס לתיבת-האלמנט: ‏tx = −posX·(sX−1)/sX ‏· ‏ty = −posY·(sY−1)/sY.
   ה-cover שבתוכה פועל על תיבה שכבר ביחס הנכון ולכן אינו חותך ב-1440, ובכל רוחב
   אחר התיבה עדיין עוטפת את הפס לגמרי — כלומר כיסוי מובטח בלי חורים. */
.story-hero-bg {
  position: absolute; top: 0; left: 0;
  inline-size: 110.56%; block-size: 222.25%; max-inline-size: none;
  object-fit: cover;
  transform: translate(-8.36%, -37.18%);
}
/* 652:1231 (מובייל 651:839) — #010101 @ 50% (היה rgba(6,3,4,.5)) */
.story-hero-overlay { position: absolute; inset: 0; background: rgba(1, 1, 1, .5); }
/* 652:1234 — 72 / lh 90 / משקל 400 (היה 500); effects=[] בפיגמה ⇒ בלי text-shadow —
   שכבת הכהות 50% מספקת את הניגודיות. padding-inline 16 = ערך-הפיגמה (651:839 pad 16). */
.story-hero h1 {
  position: relative; margin: 0; padding-inline: 16px;
  color: var(--bc-white); text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-hero); font-weight: var(--fw-regular); line-height: 1.25;
}

/* ── סקשן הסיפור: טקסט מימין, תמונת השף משמאל ── */
.story-narrative { background: var(--bc-white); padding-block: clamp(3rem, 6vw, 4.5rem); }
/* 652:1087 — הפריים 1440 עם padding-inline 48 ⇒ תוכן 1344; שתי העמודות 624+624 ⇒ gap = 96.
   הנוסחה הישנה clamp(2rem,6vw,6rem) נתנה 6vw = 86.4 ב-1440 (התקרה 96 לא נגעה אף פעם).
   6.67vw פוגע ב-96 בדיוק ב-1440, והרצפה 56 = itemSpacing של המובייל (651:845). */
/* ⚠ גובה-השורה הוא מפרט, לא תוצאה: 652:1087 הוא GRID עם
   `gridRowsSizing: "620px"` — שורה בגובה קבוע, ושני הילדים FILL ברוחב.
   כלומר הפיגמה מצהירה ששתי העמודות נגמרות יחד **בכל רוחב**, וכך זה נראה
   בצילום הרפרנס. הבנייה גזרה במקום זה `aspect-ratio: 624/620` מה-bbox —
   מדויק ב-1440 בדיוק, ובכל רוחב אחר התמונה מתארכת עם הרוחב בעוד שהטקסט,
   שנעשה רחב יותר, מתקצר. ב-1920 (קונטיינר 1600, עמודה 704) התמונה 699
   והטקסט נגמר באמצעה — הערה 3 של הבעלים, 27.7.
   minmax(620px, auto): 620 הוא הערך המוצהר, ו-auto מונע גלישה במסכי-ביניים
   שבהם הטקסט עדיין ארוך מ-620. */
.story-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: minmax(620px, auto);
  gap: clamp(56px, 6.67vw, 96px); align-items: stretch;
}
/* 652:1091 — 48 / lh 60 / משקל 400 / #3b0f1a, יישור לימין. gap 48 לפסקאות (652:1088).
   text-wrap:balance במקום max-inline-size ב-ch — מדד ה-ch משתנה עם החלפת הגופן לסריף. */
.story-text h2 {
  color: var(--bc-primary);
  font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: 1.25;
  text-wrap: balance; /* שתי שורות מאוזנות כמו בעיצוב */
  margin-block-end: 1em;
}
.story-body p {
  color: var(--bc-ink-soft);
  font-size: var(--fs-lg); line-height: 1.56; /* 18/28 בעיצוב */
  /* 652:1093 / 836:2167 — paragraphSpacing=0 בפיגמה: הטקסט בלוק רציף של 16 שורות בדיוק,
     בלי רווח בין פסקאות (היה 1.1em — שיפור-קריאות שלא קיים בעיצוב) */
  margin-block-end: 0;
}
.story-rest { display: none; }
.story-expanded .story-rest { display: block; }

.story-morebar { display: flex; justify-content: flex-start; margin-block-start: .3rem; }
/* 826:3423 (מובייל 651:851) — itemSpacing 12 בין אייקון לטקסט; קו תחתי stroke bottom=2 #d8a7b1 (= --bc-rose-soft) */
.story-readmore {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--bc-primary); font-weight: 500; font-size: var(--fs-lg);
  padding: 0 0 3px; border-block-end: 2px solid var(--bc-rose-soft);
  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); } /* חץ למעלה במצב פתוח */

/* 652:1096/652:1097 — effects=[] בפיגמה ⇒ בלי צל (היה var(--shadow-card)) */
/* התמונה ממלאת את גובה-השורה המוצהר (620) במקום להכתיב אותו מיחס-ה-bbox */
.story-media { border-radius: 24px; overflow: hidden; }
.story-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── ציטוט (652:1100 — 1440×519: padding-block 72, רקע #f0e7dd, קונטיינר 896, gap 40) ──
   הסקשן היה גבוה מדי בעיקר בגלל הגליף (80px) ו-line-height 1.15 בציטוט; בפיגמה הגליף 28px
   ושורות הציטוט 60/60 = 1.0. סה"כ 519px כמו בעיצוב. */
.story-quote {
  background: var(--bc-cream-warm);
  padding-block: clamp(3rem, 5vw, 4.5rem); /* 48 במובייל (543:7158) → 72 בדסקטופ */
  text-align: center;
}
.story-quote figure { margin: 0 auto; max-inline-size: 896px; padding-inline: 20px; }
/* 652:1102/652:1103 — וקטור 40×28, מילוי #c08497, gap 40 לציטוט */
.quote-glyph {
  display: block; inline-size: 40px; block-size: 28px;
  color: var(--bc-rose);
  margin: 0 auto 40px;
}
.story-quote blockquote { margin: 0; }
/* 652:1105 — 60 / lh 60 / משקל 400 / #3b0f1a */
.story-quote blockquote p {
  margin: 0; color: var(--bc-primary);
  font-size: var(--fs-60); font-weight: var(--fw-regular); line-height: 1;
}
/* 652:1107/652:1108 — קו 96×2 #c08497, gap 40 מהציטוט, 24 מהשם */
.quote-divider {
  display: block; inline-size: 96px; block-size: 2px;
  background: var(--bc-rose);
  margin: 40px auto 24px;
}
/* 652:1109 — 24 / lh 32 / #3b0f1a · 652:1112 — 16 / lh 24 / #c08497, padding-top 8 */
.story-quote .q-name { display: block; font-size: var(--fs-h3); line-height: 1.33; color: var(--bc-primary); }
.story-quote .q-role { display: block; font-size: var(--fs-md); line-height: 1.5; color: var(--bc-rose-text); margin-block-start: 8px; }

/* ── גלריה: תמונה גדולה מימין, שתי תמונות משמאל ── */
/* 652:1113 — padding 72 למעלה / 64 למטה בדסקטופ · 543:7362 — 48/48 במובייל.
   התחתון היה clamp(1.5rem,3vw,2rem) ⇒ 32px בדסקטופ (חצי מהעיצוב) ו-24 במובייל. */
.story-gallery-section { background: var(--bc-white); padding-block: clamp(3rem, 6vw, 4.5rem) clamp(48px, 4.45vw, 64px); }
.story-gallery {
  display: grid;
  grid-template-columns: minmax(0, 888fr) minmax(0, 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; }
/* 652:1117/1119/1121 — כרטיס המקרונים: overlay #000000@20% על כל הכרטיס + כיתוב ממורכז
   "דיוק בכל פרט" — Noto Serif Hebrew 400 / 20 / lh 28 / לבן. דסקטופ בלבד (בפריים המובייל
   543:7367 אין כיתוב — מוסתר בבלוק ה-960). */
.sg-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.sg-caption {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--bc-white);
  font-family: var(--font-serif);
  font-size: 20px; font-weight: var(--fw-regular); line-height: 1.4; /* 20/28 */
}

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

/* ── רספונסיב ── */
/* ── רספונסיב ──
   שורש-הרגרסיה (20.7): ה-clamp-ים כאן כוילו לתקרת-הדסקטופ ורצפתם נבחרה בעין; ב-393 איבר
   ה-vw מתמוטט והכל מרונדר על הרצפה — ערך שלא נבדק מול M_Our story 633:3637 (393 רוחב).
   התיקון: רצפת-ה-clamp = ערך-הפיגמה של המובייל, ומה שלא ניתן לבטא כ-clamp נכתב מפורשות כאן. */
@media (max-width: 960px) {
  /* ה-gap מגיע מרצפת ה-clamp (56 = 651:845); כאן רק פירוק לעמודה אחת.
     גובה-השורה הקבוע (620) שייך לפריים הדסקטופ בלבד — במובייל 651:845 הוא
     טור אנכי שבו כל בלוק בגובה התוכן שלו. */
  .story-split { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .story-hero h1 { font-size: 3rem; }                              /* 651:842 — 48/60 (lh 1.25 מהבסיס) */
  /* לפריים המובייל חיתוך משלו · crop על 651:837 מול 651:831 (393×300):
     התמונה מוצגת 793×444 ⇒ 201.78% / 148%, היסט 76.25% / 62.5%. */
  .story-hero-bg { inline-size: 201.78%; block-size: 148%; transform: translate(-38.46%, -20.27%); }
  /* 651:848 — 36/50, ממורכז (וכן הקונטיינר 651:847 counterAlign=CENTER) */
  .story-text h2 { font-size: var(--fs-36); line-height: 1.389; text-align: center; }
  /* 651:850 — פסקאות הגוף ממורכזות במובייל (כל בלוק הסיפור ממורכז: כותרת+גוף+כפתור) */
  .story-body p { text-align: center; }

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

  .story-media { border-radius: var(--radius-lg); }
  .story-media img { aspect-ratio: 353 / 400; block-size: auto; } /* 651:852/651:853 — 353×400, לאורך (היה 1/1) */

  /* ציטוט במובייל (543:7158/543:7159) — גליף 24×17, gap 24, ציטוט 32/lh50, שם 18 */
  .quote-glyph { inline-size: 24px; block-size: 17px; margin-block-end: 24px; }
  .story-quote blockquote p { font-size: 2rem; line-height: 1.5625; }
  .quote-divider { margin-block-start: 24px; }
  .story-quote .q-name { font-size: var(--fs-lg); line-height: 32px; } /* 543:7167 — 18/32 */

  /* 543:7362 — רקע הסקשן במובייל #faf9f7 (בדסקטופ 652:1113 לבן) */
  .story-gallery-section { background: var(--bc-paper); }
  /* 543:7363 — itemSpacing 24 גם במובייל (הדריסה gap:16 הוסרה) */
  .story-gallery { grid-template-columns: minmax(0, 1fr); }
  .sg-feature { grid-row: auto; aspect-ratio: 353 / 424; block-size: auto; } /* 543:7364 — פורטרט */
  .sg-side { aspect-ratio: 353 / 208; }                                      /* 543:7367 — רחב ונמוך */
  .sg-salads { display: none; } /* בעיצוב המובייל מוצגות שתי תמונות בלבד */
  .sg-overlay, .sg-caption { display: none; } /* 543:7367 — במובייל אין overlay/כיתוב */
}

/* ── הצמדת שבירות-שורה לפיגמה (29.7.26) — ראו audit/2026-07-29-linebreaks/solve-widths.mjs ──────── */
/* 652:1105 — הציטוט: "…בפרטים | …בהם, | …מרגישים." — 890 בתוך טווח-הפתרון [884–998] */
.story-quote figure { max-inline-size: 930px; } /* 890 + ‏2×20 ריפוד */
.story-quote blockquote p { max-inline-size: 890px; margin-inline: auto; }
@media (max-width: 960px) {
  /* 543:7163 — "…מושלם | …– | …בהם, | …מרגישים." — 334 בתוך טווח-הפתרון [334–336] */
  .story-quote blockquote p { max-inline-size: 334px; }
}