/* ============ 10 · ככה נראות הארוחות + צ׳יט דיי ============
   Figma: desktop 278:203 (1280×1803) / mobile 278:243 (390×1411).

   הסקשן היחיד בדף שהראיה בו היא אוכל ולא גוף. שש תמונות אמיתיות של
   ארוחות מהתהליך, כי המשפט ״יש פה גם פיצה״ לא שווה כלום בלי שרואים אותה.
   הרשת היא 3×2 בדסקטופ ו-2×3 במובייל, בדיוק כמו בפיגמה. */

.s10{
  background:var(--cream);
  padding-block:var(--sec-y);
}
.s10__wrap{
  width:100%;max-width:1040px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
  gap:36px;
  text-align:center;
}

.s10__title{
  width:100%;max-width:680px;
  font-family:var(--f-head);font-weight:700;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--ink);
  letter-spacing:-.01em;
}

/* ---------- רשת הארוחות ---------- */
.s10__grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  list-style:none;
}
.s10__grid img{
  display:block;
  width:100%;height:auto;
  /* היחס נעול לפי פיגמה (330×508) כדי שהרשת לא תזוז בזמן טעינת התמונות */
  aspect-ratio:330 / 508;
  object-fit:cover;
  border-radius:var(--r-media);
}

.s10__punch{
  width:100%;max-width:680px;
  font-family:var(--f-head);font-weight:700;
  font-size:34px;line-height:45px;
  color:var(--ink);
  letter-spacing:-.01em;
}
.s10__punch .em{color:var(--sky-deep);}

.s10__cta{margin-top:calc(var(--sec-cta) - 36px);}

/* ============ mobile ============ */
@media (max-width:1199px){
  /* מרווח מוקטן מתחת לכפתור של הסקשן הקודם */
  .s10{padding-block:16px var(--sec-y);}
  .s10__wrap{gap:30px;}
  .s10__title{font-size:26px;line-height:34px;}
    .s10__grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .s10__grid img{border-radius:14px;}
  .s10__punch{font-size:26px;line-height:34px;}
  .s10__cta{margin-top:calc(var(--sec-cta) - 30px);}
}

/* ---------- שורת המשנה שמתחת לכותרת ----------
   אותו טיפוגרפיה כמו ה-lede של סקשן הסרטונים, כדי שכל שורות המשנה
   בעמוד ייקראו כאותו רכיב */
.s10__lede{
  margin-top:18px;
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:40px;
  color:var(--body);text-align:center;
}
@media (max-width:1199px){
  .s10__lede{margin-top:0;font-size:22px;line-height:32px;}
}