/* ============ 09 · המשקל לא מספר את הסיפור ============
   Figma: desktop 278:146 (1280×1334) / mobile 278:175 (390×1530).

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

   סדר ה-DOM: כותרת, כרטיס, טקסט. במובייל זה בדיוק הסדר הנדרש, ובדסקטופ
   ה-grid מחזיר את הכרטיס לעמודה השמאלית מבלי לשנות את סדר הקריאה. */

.s09{
  background:var(--cream);
  padding-block:80px;
}
.s09__wrap{
  width:100%;max-width:var(--content);margin-inline:auto;
}

.s09__grid{
  display:grid;
  /* הכותרת נפרסת על כל הרוחב, ולכן היא כבר לא מגבילה את רוחב התמונה.
     זה מה שמאפשר לתמונה לגדול מ-360 ל-500 בלי חיתוך ובלי להוריד את
     גודל הפונט של הכותרת - וגם מיישר את שתי העמודות לאותו קו תחתון */
  grid-template-columns:520px 500px;   /* 520 + 60 + 500 = 1080 */
  column-gap:60px;row-gap:44px;
  align-items:start;
}
.s09__title{
  grid-column:1 / -1;grid-row:1;
  font-family:var(--f-head);font-weight:800;
  font-size:52px;line-height:62px;
  color:var(--navy);
  letter-spacing:-.015em;
  /* כל הסקשן ממורכז: הוא לא רשימה שקוראים לפי סדר אלא טענה אחת שנאמרת
     מול התמונה שמוכיחה אותה, ולכן הכותרת, הטקסט והפאנל יושבים על ציר
     אחד באמצע - בדיוק כמו הפאנץ' שסוגר אותו */
  text-align:center;
}
.s09__body{
  grid-column:1;grid-row:2;
  align-self:start;
  display:flex;flex-direction:column;gap:24px;
  /* הגוף לימין בעוד הכותרת והפאנל נשארים באמצע: שלוש הפסקאות האלה הן
     טיעון שנקרא שורה אחרי שורה, ולא הכרזה. יישור לימין נותן לעין קו
     התחלה קבוע לחזור אליו בכל שורה - זה מה שמאפשר לקרוא רצף ולא
     להתאמץ. הכותרת והפאנל הם משפט אחד כל אחד, ולכן שם המרכוז עובד */
  text-align:right;
}
.s09__body p{
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:42px;
  color:var(--body);
}
.s09__body .s09__key{
  font-family:var(--f-body);font-weight:600;
  font-size:30px;line-height:42px;
  color:var(--sky-deep);
}

/* ---------- כרטיס ההשוואה ---------- */
/* בלי מסגרת לבנה: התמונה יושבת ישר על הקרם. המסגרת הלבנה יצרה שטח ריק
   מעל ומתחת לתמונה, וכל מה שהיא הוסיפה זה גבול מיותר בין ההוכחה לטקסט
   שהיא מוכיחה. הכיתוב עלה מעל התמונה כדי שקוראים אותו לפניה ולא אחריה */
.s09__card{
  grid-column:2;grid-row:2;
  align-self:start;
  display:flex;flex-direction:column;gap:16px;
  /* התמונה נכנסת מצד שמאל בגלילה. ה-transform נכתב מ-JS ישירות על
     ה-style, ולכן אין כאן מחלקת reveal שתדרוס אותו */
  will-change:transform,opacity;
}
.js .s09__card{opacity:0;transform:translateX(-70px);}
/* התמונה שטל שלח היא כבר לפני-ואחרי מורכבות בקובץ אחד, ולכן אין כאן
   שתי מסגרות אלא אחת. היחס נלקח מהקובץ עצמו כדי שלא ייחתך כלום */
.s09__pair{
  display:flex;gap:16px;
  border-radius:var(--r-media);
  overflow:hidden;
}
.s09__pair img{width:100%;height:auto;display:block;}
.s09__cap{
  font-family:var(--f-body);font-weight:600;
  font-size:24px;line-height:32px;
  color:var(--muted);
  text-align:center;
}

/* ---------- פאנל אימוני הכוח ---------- */

/* ---------- הפאנץ׳ + הקו ---------- */
.s09__punch{
  margin-top:56px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}
.s09__punch p{
  font-family:var(--f-head);font-weight:800;
  font-size:34px;line-height:44px;
  color:var(--ink);
  letter-spacing:-.01em;
}
/* הקו נמתח מתחת למשפט כשהוא נכנס למסך - האפקט היחיד בסקשן, והוא
   מצייר בדיוק את מה שהמשפט אומר: קו מתחת לנושא המשקל */
.s09__rule{
  width:min(874px,100%);height:6px;
  border-radius:999px;
  background:var(--sky);
  transform-origin:right center;
  transform:scaleX(0);
}
.js .s09__punch.is-in .s09__rule{
  transform:scaleX(1);
  transition:transform .7s var(--ease-out) .15s;
}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s09{padding-block:60px;}
  .s09__grid{
    display:flex;flex-direction:column;gap:28px;
    /* חובה לבטל את align-items:start של ה-grid - ב-flex טור הוא מכווץ
       את הכרטיס לרוחב התוכן במקום למלא את העמודה */
    align-items:stretch;
  }
  .s09__title{font-size:36px;line-height:44px;}
  /* בדסקטופ הטקסט יושב בעמודה מימין לתמונה, ויישור לימין הוא מה שקושר
     בין השתיים. במובייל התמונה עוברת מעל הטקסט, הקשר הזה נעלם, ובלוק
     מיושר לימין מתחת לכותרת מרוכזת נראה כאילו נשמט. לכן מרכז - במובייל בלבד */
  .s09__body{gap:20px;text-align:center;}
  .s09__body p{font-size:24px;line-height:38px;}
  .s09__body .s09__key{font-size:26px;line-height:36px;}
  .s09__card{gap:12px;}
  .s09__pair{gap:12px;}
  .s09__cap{font-size:22px;line-height:30px;}
  .s09__punch{margin-top:36px;}
  .s09__punch p{font-size:28px;line-height:38px;}
}

@media (prefers-reduced-motion:reduce){
  .js .s09__rule{transform:none;}
  .js .s09__card{opacity:1;transform:none;}
}