/* ============ 08 · הבעיה היא לא חוסר ידע ============
   Figma: desktop 278:112 (1280×1174) / mobile 278:129 (390×1010).

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

.s08{
  background:var(--sky-tint);
  padding-block:var(--sec-y);
}
.s08__wrap{
  width:100%;max-width:860px;margin-inline:auto;
  text-align:center;
}

/* הקו התחתון נצבע ב-sky-deep כברירת מחדל, שכמעט נעלם על הנייבי.
   הסקשן לא נושא את המחלקה section--navy ולכן צריך כלל משלו */
.s08 .uline{background-image:linear-gradient(var(--sky-deep),var(--sky-deep));}

/* שאלת הפתיחה. בגודל ה-h2 האחיד של שאר הסקשנים ולא בגודל ההצהרה
   שמתחתיה: היא המסגרת, לא הפאנץ׳ */
.s08__q{
  font-family:var(--f-head);font-weight:800;
  font-size:30px;line-height:42px;
  color:var(--ink);
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0 0 40px;
}
.s08__title{
  font-family:var(--f-head);font-weight:800;
  /* בלי גודל משלו: יורש את --h2 מהטוקנים, כמו כל שאר כותרות
     הסקשנים. הדריסה ל-60px הפכה אותו לכותרת הגדולה בדף וגרמה לו
     להיקרא כ-h1 */
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--ink);
  letter-spacing:-.015em;
}
/* הכותרת שירדה מסקשן התמונות. היא פותחת את הסקשן, ולכן המרווח
   מתחתיה הוא שלה ולא של הפסקה שאחריה */
.s08__title--top{margin:0 0 40px;}
/* ״הן ידעו בדיוק כמוך״ נשארה בדיוק באותו גודל ובאותו משקל, רק
   שהיא כבר לא תגית כותרת: בסקשן יש עכשיו כותרת אחת, ושתי h2
   באותו גודל היו מבטלות זו את זו */
.s08__title--sub{margin:0;}

/* ארבע המילים. הרווח ביניהן קטן מאוד (10px) בכוונה - זה גוש אחד,
   לא ארבע הצהרות נפרדות */
.s08__known{
  margin-top:48px;
  display:flex;flex-direction:column;gap:10px;
  list-style:none;
  font-family:var(--f-head);font-weight:800;
  font-size:42px;line-height:54px;
  color:var(--sky-deep);
  letter-spacing:-.015em;
}

/* אותה אנימציה של שאר הדף, רק מדורגת: כל מילה נוחתת בתורה. מנטרלים את
   ה-reveal של ההורה כדי שהילדים יוכלו להשתמש ב-transform בעצמם */
.s08__known.reveal{opacity:1;transform:none;}
.s08__known li{opacity:0;transform:translateY(12px);}
.s08__known.is-in li{
  opacity:1;transform:none;
  transition:opacity .45s var(--ease-out) var(--sd),
             transform .45s var(--ease-out) var(--sd);
}
.s08__known li:nth-child(1){--sd:0ms;}
.s08__known li:nth-child(2){--sd:140ms;}
.s08__known li:nth-child(3){--sd:280ms;}
.s08__known li:nth-child(4){--sd:420ms;}

.s08__ask{
  margin-top:32px;
  font-family:var(--f-body);font-weight:600;
  font-size:28px;line-height:40px;
  color:var(--ink);
}
.s08__punch{
  margin-top:40px;
  font-family:var(--f-head);font-weight:800;
  font-size:36px;line-height:48px;
  color:var(--sky-deep);
  letter-spacing:-.01em;
}

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

/* ============ mobile ============ */
@media (max-width:1199px){
  .s08{padding-block:var(--sec-y);}
  /* כל המרווחים בתוך הסקשן זהים: קודם הם רצו 28/32/36/60/44 והעין
     קראה את זה כרשלנות - הרשימה נראתה תלושה משתי השורות שמסביבה */
  .s08__title--top{margin-bottom:32px;}
  .s08__q{font-size:22px;line-height:32px;margin-bottom:32px;}
  .s08__known{margin-top:40px;gap:6px;font-size:26px;line-height:34px;}
  .s08__ask{margin-top:24px;font-size:22px;line-height:32px;}
  .s08__punch{margin-top:32px;font-size:24px;line-height:33px;}
}

@media (prefers-reduced-motion:reduce){
  .s08__known li{opacity:1;transform:none;}
}


/* ---- שלושת הווים ----
   טל ביקש להשאיר את שלושת הווים מהדף המקורי. הוי הוא סימן ולא טקסט,
   ולכן הוא aria-hidden ויושב בגודל קבוע כדי שכל שלוש השורות יתחילו
   באותו ציר ולא יזוזו זו ביחס לזו */
.s08__v{
  display:inline-block;width:1.15em;
  margin-inline-end:.28em;
  color:var(--sky-deep);font-weight:800;
}