/* ============ 15 · שאלות שנשאלות ============
   Figma: desktop 279:397 (1280×1373) / מובייל 279:484 (390×1725).

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

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

.s15{
  background:var(--cream);
  padding-block:80px;
}
.s15__wrap{
  width:100%;max-width:var(--content);margin-inline:auto;
  text-align:right;
}
/* הכותרת והשורה שמתחתיה ממורכזות: הן פונות לכל מי שגוללת, בעוד
   האקורדיון עצמו נשאר מיושר לימין כי הוא רשימה שקוראים אותה */
.s15__title{
  text-align:center;
  font-family:var(--f-head);font-weight:800;
  font-size:56px;line-height:68px;
  color:var(--ink);
  letter-spacing:-.015em;
}
.s15__sub{
  text-align:center;
  margin-top:26px;
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:34px;
  color:var(--body);
}

.s15__cols{
  margin-top:64px;
  display:grid;
  grid-template-columns:624px 400px;   /* 624 + 56 + 400 = 1080 */
  gap:56px;
  align-items:start;
}

/* התמונה נשארת בשדה הראייה כל זמן הגלילה בשאלות - זה ״sticky״ בפיגמה,
   וזה גם מה שמחזיק את הפנים של טל ליד התשובות שלו */
/* בלי aspect-ratio: קופסה בגובה קבוע 400×700 השאירה מעל ראשו של טל
   כמאתיים פיקסל של כלום, כי התמונה עצמה היא 800×957 והיא עוגנה לתחתית.
   עכשיו הקופסה בגובה התמונה, ולכן קודקוד הראש מתחיל בדיוק בקו של השאלה
   הראשונה - ומשם הוא יורד עם הגלילה */
/* התמונה היא חיתוך שקוף, ולכן אין מאחוריה מסגרת ואין רקע: טל יושב ישר
   על הקרם של הסקשן. contain כדי שהמשקל השבור והרגליים המשוכלות לא
   ייחתכו - הם כל הבדיחה - ועיגון לתחתית כדי שיישב על הקו התחתון */
.s15__shot{
  position:sticky;top:100px;
  /* אותם 24 פיקסל של ה-padding בשאלה הראשונה, כדי ששני הקווים העליונים
     יהיו אותו קו בפועל ולא רק על הנייר */
  padding-top:24px;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.s15__shot img{
  width:100%;height:auto;max-height:100%;
  object-fit:contain;object-position:bottom center;
}

/* ---------- האקורדיון ---------- */
.s15__faq{border-top:0;}
.s15__q{
  border-bottom:1px solid var(--line);
  padding-block:24px;
}
.s15__q > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;
  font-family:var(--f-body);font-weight:600;
  font-size:26px;line-height:36px;
  color:var(--body);
}
.s15__q > summary::-webkit-details-marker{display:none;}
.s15__q[open] > summary{color:var(--ink);}

/* הפלוס/מינוס מצויר ב-CSS: שני קווים, והאנכי נעלם כשהשאלה פתוחה */
.s15__sign{
  position:relative;
  flex:0 0 36px;width:36px;height:36px;
}
.s15__sign::before,
.s15__sign::after{
  content:"";position:absolute;
  background:var(--muted);border-radius:1px;
  transition:background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.s15__sign::before{inset:17px 9px auto 9px;height:2px;}
.s15__sign::after{inset:9px 17px 9px 17px;width:2px;}
.s15__q[open] .s15__sign::before{background:var(--sky-deep);}
.s15__q[open] .s15__sign::after{opacity:0;transform:scaleY(0);}

.s15__a{
  margin-top:14px;padding-inline-start:52px;
  font-family:var(--f-body);font-weight:400;
  font-size:24px;line-height:36px;
  color:var(--muted);
}
/* עד שהנוסח יגיע מטל - סימון גלוי ולא טקסט ממוצא */
.s15__a--todo{color:var(--sky-deep);font-weight:600;}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s15{padding-block:60px;}
  .s15__title{font-size:36px;line-height:46px;}
  .s15__sub{margin-top:20px;}
  .s15__cols{
    margin-top:44px;
    display:flex;flex-direction:column;gap:40px;
    align-items:stretch;
  }
  .s15__shot{position:static;padding-top:0;order:-1;}
  .s15__q{padding-block:20px;}
  .s15__q > summary{font-size:24px;line-height:34px;gap:12px;}
  .s15__sign{flex-basis:32px;width:32px;height:32px;}
  .s15__sign::before{inset:15px 7px auto 7px;}
  .s15__sign::after{inset:7px 15px 7px 15px;}
  .s15__a{padding-inline-start:44px;font-size:22px;line-height:34px;}
}

@media (prefers-reduced-motion:reduce){
  .s15__sign::before,.s15__sign::after{transition:none;}
}