/* ============ 12 · ארבעת הדברים שעובדים ביחד ============
   Figma: desktop 279:132 (1280×1008) / מובייל 279:203 (390×936).

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

   המבנה: .s12__stage הוא מסלול גבוה (מסך מלא + מרחק הנסיעה), ובתוכו
   .s12__pin דבוק לראש המסך. ה-JS מתרגם את מיקום המסלול להתקדמות.
   בלי JS זה נשאר בדיוק מה שהיה - חפיסה שנגללת הצידה בעצמה. */

.s12{background:var(--cream);}

/* בלי נעיצה ובלי מסלול. הסקשן מתנהג כמו כל סקשן אחר בדף */
.s12__pin{padding:var(--sec-y) var(--margin) 0;}
.s12__foot{padding-inline:var(--margin);padding-bottom:var(--sec-y);}

.s12__wrap{
  width:100%;max-width:var(--content);margin-inline:auto;
  text-align:center;
}

/* בפיגמה זה טקסט מעל הכותרת בתוך אותו בלוק כותרת - הוא מקודד כ-p
   ולא ככותרת, כדי שה-h2 יישאר הכותרת האמיתית של הסקשן */
.s12__kicker{
  font-family:var(--f-body);font-weight:400;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--muted);
}
.s12__title{
  font-family:var(--f-head);font-weight:800;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--ink);
  letter-spacing:-.015em;
}
.s12__lede{
  margin-top:26px;
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:40px;
  color:var(--body);
}

/* ---------- חפיסת הכרטיסים ---------- */
.s12__deck{
  margin-top:44px;
  /* שתי עמודות ולא מסילה אופקית: ארבעה כרטיסים נקראים לפי הסדר גם
     כשהם עומדים במקום, ואין שום גלילה שיכולה להישבר */
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;
  padding-block:14px;
}

.s12__card{
  background:#fff;
  border-radius:var(--r-card);
  padding:30px 28px;
  text-align:right;
  /* עמודה גמישה כדי שהפסקה תמתח את הכרטיס לגובה של השכן הגבוה ביותר */
  display:flex;flex-direction:column;
  box-shadow:0 10px 28px rgba(11,16,32,.10);
}
.s12__num{
  width:60px;height:60px;border-radius:999px;
  background:var(--grey);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:800;
  font-size:26px;line-height:28px;
  color:#fff;
}
/* גובה מינימלי של שתי שורות, למרות ש״גוף חזק וחטוב״ נכנס באחת.
   ארבעת הכרטיסים עומדים זה לצד זה, ובלי הנעילה הזאת הכותרת הקצרה
   הייתה מושכת את פסקת הגוף שלה 36 פיקסל למעלה - כלומר שורת הטקסט
   של כרטיס אחד יושבת גבוה משלושת האחרים. הקורא לא מזהה את הסיבה,
   הוא רק מרגיש שמשהו לא ישר */
.s12__card h3{
  margin-top:30px;
  min-height:72px;
  font-family:var(--f-head);font-weight:800;
  font-size:28px;line-height:36px;
  color:var(--muted);
  letter-spacing:-.01em;
}
.s12__card p{
  margin-top:16px;
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:34px;
  color:var(--body);
}
/* אין יותר כרטיס ״פעיל״: כשארבעתם נראים יחד, כולם באותו משקל */

/* העיגול והכותרת בתכלת בכל ארבעת הכרטיסים - הם קו התהליך, ולא משנה
   איזה כרטיס פעיל כרגע. מה שמשתנה עם הפעילות הוא הרקע והצל בלבד */
.s12__num{background:var(--sky-deep);}
.s12__card h3{color:var(--sky-deep);}

/* פס ההתקדמות היה חלק מהרצף הנעוץ. אין רצף - אין פס */
.s12__bar{display:none;}

/* ה-CTA סוגר את הסקשן */
.s12__cta{margin-top:var(--sec-cta);}

/* ============ mobile ============ */
@media (max-width:1199px){
  /* קודם 60 קבוע כאן מול 40 בכל שאר הסקשנים, ולכן המרווח מעל ומתחת
     לסקשן הזה היה גדול משאר המרווחים בעמוד. אותו טוקן = אותו מרווח */
  .s12__pin{padding:var(--sec-y) 24px 0;}
  /* מתחת לכפתור אותו מרווח שיש מעליו, ולא מרווח סקשן מלא */
  .s12__foot{padding-inline:24px;padding-bottom:16px;}
  /* בפיגמה הכותרת במובייל מיושרת לימין ולא למרכז */
  .s12__wrap{text-align:right;}
  .s12__kicker{font-size:24px;line-height:44px;}
  .s12__title{font-size:26px;line-height:46px;}
  .s12__lede{margin-top:20px;font-size:23px;line-height:34px;}
  /* במובייל עמודה אחת. ארבעה כרטיסים זה אחרי זה, בלי גלילה הצידה */
  .s12__deck{margin-top:28px;gap:16px;grid-template-columns:1fr;}
  .s12__card{padding:24px 22px;}
  /* בעמודה אחת אין שכנים ליישר מולם, והמינימום היה פותח חלל ריק
     מתחת לכותרת של שורה אחת */
  .s12__card h3{min-height:0;}
  .s12__num{width:52px;height:52px;font-size:23px;line-height:26px;}
  .s12__card h3{margin-top:24px;min-height:66px;font-size:22px;line-height:30px;}
  .s12__card p{margin-top:14px;font-size:22px;line-height:32px;}
}