/* ============ 14 · שנה אחרי ============
   Figma: desktop 279:321 (1280×1740) / מובייל 279:359 (390×1188).

   הסקשן הזה הוא הטיעון שהכי קשה לזייף: לא ״לפני ואחרי״ אלא ״לפני, אחרי,
   ושנה אחרי״. שלוש התמונות בשורה אחת הן כל הרעיון, ולכן הן נשארות שלוש
   בשורה גם במובייל - אם נשבור אותן לטור, הטיעון נשבר איתן. */

.s14{
  background:var(--cream);
  padding-block:80px;
}
.s14__wrap{
  width:100%;max-width:var(--content);margin-inline:auto;
  /* הסקשן הזה כולו ממורכז: הוא לא מספר סיפור לינארי אלא מציג הוכחה,
     והכותרת, השאלה והתמונות יושבות על אותו ציר אחד באמצע */
  text-align:center;
}
.s14__title{
  font-family:var(--f-head);font-weight:800;
  font-size:52px;line-height:62px;
  color:var(--navy);
  letter-spacing:-.015em;
}
.s14__lede{
  margin-top:28px;
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:42px;
  color:var(--body);
}
/* השורה שמובילה ישר אל התמונות - היא השאלה שהסקשן עונה עליה, ולכן
   היא בולטת יותר מהפסקה שמעליה ונגמרת בנקודתיים */
.s14__ask{
  margin-top:26px;
  font-family:var(--f-head);font-weight:800;
  font-size:32px;line-height:44px;
  color:var(--navy);
  letter-spacing:-.01em;
}

/* ---------- שני התיקים ---------- */
.s14__cases{
  margin-top:64px;
  display:flex;flex-direction:column;gap:40px;
  list-style:none;
}
.s14__case{display:flex;flex-direction:column;gap:16px;}
/* row-reverse כדי שהסדר יהיה לפני · אחרי · שנה אחרי משמאל לימין, בדיוק
   כמו בפיגמה בשני המסכים. סדר ה-DOM נשאר לפני → אחרי → שנה אחרי, כך
   שקורא מסך והדפסה מקבלים את הסדר הכרונולוגי הנכון */
.s14__row{display:flex;flex-direction:row-reverse;gap:16px;}
.s14__shot{
  flex:1 1 0;
  display:flex;flex-direction:column;gap:12px;
}
/* היחס נלקח מפיגמה (349×420) ולא מ-3:4 העגול, כדי שהתמונות של טל
   ייכנסו בדיוק לתוך המסגרת שאושרה */
.s14__shot .ph{
  aspect-ratio:349 / 420;
  border-radius:var(--r-media);
  background:var(--placeholder);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:29px;
  color:var(--muted);
  overflow:hidden;
}
.s14__shot .ph img{width:100%;height:100%;object-fit:cover;}
.s14__shot .ph b{font-weight:inherit;}
.s14__when{
  font-family:var(--f-body);font-weight:600;
  font-size:24px;line-height:30px;
  color:var(--muted);
  text-align:center;
}

.s14__punch{
  margin-top:48px;
  font-family:var(--f-head);font-weight:800;
  font-size:34px;line-height:44px;
  color:var(--sky-deep);
  letter-spacing:-.01em;
  text-align:center;
}
.s14__cta{margin-top:var(--sec-cta);}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s14{padding-block:60px;}
  .s14__title{font-size:36px;line-height:44px;}
  .s14__lede{margin-top:20px;font-size:24px;line-height:38px;}
  .s14__ask{margin-top:20px;font-size:26px;line-height:38px;}
  .s14__cases{margin-top:36px;gap:28px;}
  .s14__case{gap:12px;}
  /* במובייל שלוש תמונות בשורה אחת נותנות 107 פיקסל לתמונה - ברוחב הזה
     אי אפשר לראות שינוי בגוף, וזה בדיוק מה שהסקשן הזה אמור להוכיח.
     לכן הן נערמות אנכית ברוחב מלא: תמונה אחת גדולה בכל רגע, בסדר
     הכרונולוגי מלמעלה למטה - לפני, אחרי, שנה אחרי */
  .s14__row{flex-direction:column;gap:18px;}
  .s14__shot{gap:10px;}
  .s14__shot .ph{aspect-ratio:3 / 4;}
  /* ברוחב 107 פיקסל אין מקום למילה ״תמונה״ - בפיגמה היא גם לא שם */
  .s14__shot .ph b{display:none;}
  .s14__when{font-size:22px;line-height:28px;}
  .s14__punch{margin-top:32px;font-size:28px;line-height:38px;}
}