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

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

.s14{
  background:var(--cream);
  padding-block:var(--sec-y);
}
.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:var(--h2);line-height:var(--h2-lh);
  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;
}

/* ---------- שני התיקים ---------- */
/* הכותרת עברה לסקשן ״מה ההבדל?״, והסקשן הזה מתחיל ישר בתמונות.
   המרווח העליון הוא כבר padding-block של הסקשן */
.s14__cases{
  margin-top:0;
  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{
  /* תשעת התצלומים נחתכו מראש ליחס המסגרת, כל אחד סביב הדמות שבו,
     ולכן אין כאן יותר זום ולא הזזה אנכית: הריבוע מציג את הקאדר
     שנחתך, ובכולם הראש נכנס במלואו. הזזת object-position לפי הערכה
     היא מה שחתך קודם את הראשים */
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.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:var(--sec-y);}
  .s14__title{font-size:26px;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:0;gap:28px;}
  .s14__case{gap:12px;}
  /* במובייל שלוש תמונות בשורה אחת נותנות 107 פיקסל לתמונה - ברוחב הזה
     אי אפשר לראות שינוי בגוף, וזה בדיוק מה שהסקשן הזה אמור להוכיח.
     לכן הן נערמות אנכית ברוחב מלא: תמונה אחת גדולה בכל רגע, בסדר
     הכרונולוגי מלמעלה למטה - לפני, אחרי, שנה אחרי */
  /* במובייל: לפני ואחרי זו לצד זו באותה שורה, ו״שנה אחרי״ לבדה בשורה
     מתחתיהן. ההשוואה הראשונה היא בין שתי התמונות הראשונות, ולכן הן
     חייבות להיות באותה שורה; השנה אחרי היא טענה בפני עצמה */
  .s14__row{
    flex-direction:row;flex-wrap:nowrap;
    display:grid;grid-template-columns:1fr 1fr;
    gap:8px 12px;
    /* בדסקטופ השורה היא row-reverse, כלומר ״לפני״ יושבת בקצה השמאלי.
       ה-grid בעמוד RTL היה מתחיל מימין והופך את הסדר בין הברייקפוינטים,
       ולכן ltr כאן והחזרה ל-rtl על הילדים בשביל הכיתובים */
    direction:ltr;
  }
  .s14__shot{direction:rtl;}
  /* התמונה השלישית תופסת את שתי העמודות, כלומר שורה שלמה לעצמה */
  .s14__shot:nth-child(3){grid-column:1 / -1;}
  .s14__shot{gap:8px;}
  /* contain ולא cover: טל ביקש במפורש שלא ייחתך שום חלק מהתמונה.
     ה-cover מילא את המסגרת אבל חתך את הקצוות */
  /* בלי רקע אפור מאחורי התמונות. כשהמסגרת בגודל קבוע והתמונה
     contain, מה שנשאר מסביבה הוא פס אפור שנקרא כתקלה ולא כעיצוב.
     במקום זה המסגרת מקבלת את היחס של התמונה עצמה, אין מה למלא
     מסביב, והרדיוס עובר לתמונה */
  /* כל התמונות בכל שלוש המתאמנות באותו יחס ובאותו גודל. שתיים
     מהתמונות צולמו ביחס רחב יותר, ולכן הן נחתכות בצדדים - החיתוך
     נופל על הרקע והמתאמנת נשארת במרכז. בלי יחס אחיד היו שם גם
     פסים אפורים וגם תמונות בגבהים שונים באותה שורה */
  .s14__shot .ph{
    aspect-ratio:4 / 5;background:none;
    border-radius:var(--r-media);overflow:hidden;
  }
  .s14__shot .ph img{
    width:100%;height:100%;display:block;
    object-fit:cover;object-position:center;
    background:none;
  }
  /* השורה הבודדת מקבלת מסגרת רחבה יותר, ולכן יחס אחר, אחרת התמונה
     תיראה ענקית ליד שתי הקטנות שמעליה */
  /* התמונה השלישית תופסת שורה שלמה, ולכן ברוחב מלא היא הייתה יוצאת
     כפולה מהשתיים שמעליה. רוחב מרבי מחזיר אותה לאותו סדר גודל */
  /* אותו רוחב בדיוק של שתי התמונות שמעליה, ממורכז - כך כל שש
     התמונות של המתאמנת באותו גודל */
  /* התמונה השלישית היא ההוכחה האמיתית של הסקשן - ״שנה אחרי לבד״ -
     ולכן היא גדולה יותר משתי התמונות שמעליה ולא זהה להן, ויושבת
     קרוב אליהן כדי שהשלוש ייקראו כרצף אחד ולא כשני בלוקים */
  /* בלי margin שלילי: הוא גזל 4 פיקסל מהמרווח שמתחת לכיתוב, והכיתוב
     נראה צמוד לתמונה שמתחתיו יותר מאשר לזו שמעליו */
  .s14__shot:nth-child(3){
    width:calc((100% - 12px) / 2 + 56px);max-width:100%;
    justify-self:center;
  }
  /* ברוחב 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;}
}

/* ============ כניסה ============
   טל ביקש בלי אפקטים על התמונות. שלוש נקודות הזמן מוצגות מיד,
   בלי תנועה ובלי השהיה - ההוכחה עצמה היא מה שצריך לעבוד כאן */