/* ============ 11 · גם אני הייתי שם ============
   Figma: desktop 278:282 (1280×1530) / mobile 278:314 (390×1931).

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

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

.s11__title{
  font-family:var(--f-head);font-weight:700;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--ink);
  letter-spacing:-.01em;
}

.s11__group{
  display:flex;flex-direction:column;gap:14px;
  font-family:var(--f-body);font-weight:400;
  font-size:24px;line-height:36px;
  color:#3e3e3e;                     /* פיגמה: #141414 ב-82% */
}
.s11__group .em{color:var(--sky-deep);font-weight:700;}

/* שלוש התחנות שבהן הסיפור עוצר. הן לא כותרות - הן משפטים שהעין
   נתקלת בהם בגלל המשקל והגודל, ולכן הם p ולא h */
.s11__beat{
  font-family:var(--f-body);font-weight:600;
  font-size:24px;line-height:39px;
  color:var(--ink);
}
.s11__beat .em{color:var(--sky-deep);font-weight:700;}

/* ״מחר יום חדש״ עומד לבד, ולידו איקס אדום. זה המשפט היחיד בסקשן
   שטל פוסל במפורש, והאיקס אומר את זה לפני שקוראים אותו */
.s11__no{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-body);font-weight:600;
  font-size:24px;line-height:39px;
  color:var(--ink);
}
.s11__x{
  flex:0 0 auto;
  font-size:26px;line-height:1;font-weight:700;
  color:var(--red);
}

.s11__close{
  font-family:var(--f-head);font-weight:700;
  font-size:28px;line-height:39px;
  color:var(--ink);
  letter-spacing:-.01em;
}

.s11__cta{margin-top:0;}

/* ============ mobile ============ */
@media (max-width:1199px){
  /* למעלה: מרווח מוקטן מתחת לכפתור של הסקשן הקודם.
     למטה: אותו דבר מתחת לכפתור של הסקשן הזה */
  .s11{padding-block:16px 14px;}
  .s11__wrap{gap:30px;}
  .s11__title{font-size:26px;line-height:34px;}
  .s11__group{gap:12px;}
}

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

   .reveal מאפס transform, ולכן שתי התיבות האלה מנטרלות את עצמן
   מהמנגנון הכללי ומריצות תנועה משלהן. */
.s11{position:relative;overflow:hidden;}
/* בדסקטופ העטיפה לא קיימת בכלל: היא רק כלי לסידור במובייל, וכאן היא
   הייתה מוסיפה עוד מרווח לטור המרכזי */
.s11__tal{display:contents;}
/* התמונות עלו לחלק העליון של הסקשן וגדלו: הן הראיה שטל באמת היה שם,
   והן צריכות להיקרא יחד עם הכותרת ולא להתחבא בתחתית */
.s11__before,.s11__after{
  position:absolute;top:0;
  /* גובה זהה לשתיהן ו-contain בתוכו: שני התצלומים מגיעים ביחסים
     שונים, ובלי גובה משותף אחד מהם יוצא נמוך מהשני ונקרא כרשלנות */
  width:290px;height:520px;
  opacity:0;
  transition:transform .8s var(--ease-out), opacity .8s var(--ease-out);
  pointer-events:none;
}
.s11__before{right:40px;transform:translateX(120px);}
.s11__after {left:40px; transform:translateX(-120px);}
.s11__before.is-in,.s11__after.is-in{opacity:1;transform:translateX(0);}
/* הלפני חזר להיות התצלום המקורי עם הרקע ולא חיתוך, ולכן שתי
   התמונות הן עכשיו שני תצלומים אמיתיים - ומרגע שזה המצב הן חייבות
   להיראות כזוג: אותה מסגרת, אותו גובה, אותו חיתוך. תצלום עם רקע
   שמונח על הקרם בלי מסגרת נקרא כטעות, ותצלום אחד ממוסגר ואחד לא
   נקרא כשני דברים שלא קשורים זה לזה */
.s11__before,.s11__after{
  border-radius:var(--r-media);overflow:hidden;
  background:var(--placeholder);
}
.s11__before img,.s11__after img{
  width:100%;height:100%;display:block;
  /* התצלומים נחתכו מראש לאותו קאדר: אותו יחס, הראש באותו גובה יחסי
     ובאותו גודל, והדמות במרכז. ולכן center ולא top - התיבה מציגה
     בדיוק את מה שנחתך, בלי לגזור ממנו עוד */
  object-fit:cover;object-position:center;
}

/* מתחת ל-1280 אין מספיק מקום בצדדים בלי להתנגש בטקסט, ולכן שתי
   התמונות יורדות אל מתחת לסיפור, זו לצד זו, ממש לפני הכפתור.
   row ולא row-reverse: בעמוד RTL הילד הראשון בשורה רגילה יושב מימין,
   ו-״לפני״ הוא הראשון, ולכן ציר הזמן רץ בכיוון הקריאה */
@media (max-width:1199px){
  .s11__tal{
    display:flex;flex-direction:row;
    align-items:flex-start;justify-content:center;
    /* רווח קטן ביניהן: בלי הרווח שני התצלומים נקראים כתמונה
       אחת שנחתכה באמצע ולא כלפני ואחרי */
    gap:10px;width:100%;max-width:420px;
    position:relative;
    /* התמונות עולות מיד אחרי הכותרת ולפני הסיפור: ההוכחה שטל באמת היה
       שם צריכה להתקבל לפני שקוראים את הווידוי, לא אחריו. בתחתית הן
       הגיעו אחרי שכבר החלטת אם להאמין לו */
    order:-1;
  }
  /* ״השינוי שלי״ היא חצי מהכותרת ולא בלוק בפני עצמו. בלי ה-order
     התמונות נדחפות בין שתי השורות והכותרת נשברת לשניים */
  .s11__title{order:-2;}
  .s11__sub{order:-2;}
  .s11__before,.s11__after{
    position:static;width:auto;flex:1 1 0;
    /* גובה זהה לשתי התיבות והתמונה נצמדת לראש התיבה: שני הראשים
       מתחילים באותו קו עליון, בלי לחתוך אף אחת מהתמונות */
    height:380px;
    transform:translateY(20px);
  }
  .s11__before.is-in,.s11__after.is-in{transform:translateY(0);}
  .s11__before img,.s11__after img{
    height:100%;object-fit:cover;object-position:center;
  }

}

@media (prefers-reduced-motion:reduce){
  .s11__before,.s11__after{transition:none;opacity:1;transform:none;}
}

/* ---------- תת-כותרת ״השינוי שלי״ ----------
   הכותרת של הסקשן היא השאלה של טל, והשם של הסיפור יושב מתחתיה
   כשורה נפרדת. פסקה ולא תגית כותרת, כדי לא לשבור את סדר הכותרות */
.s11__sub{
  /* הן שתי שורות של אותה כותרת, לא שני בלוקים. ה-gap של ה-wrap
     הוא 36 והוא נכון בין קבוצות, אבל בין הכותרת לתת-הכותרת הוא
     יוצר חלל שנקרא כאילו משהו חסר באמצע */
  margin-top:-26px;
  font-family:var(--f-head);font-weight:700;
  font-size:20px;line-height:28px;
  color:var(--sky-deep);text-align:center;
}
@media (max-width:1199px){
  .s11__sub{margin-top:-14px;font-size:16px;line-height:24px;}
}