/* ==========================================================================
   opt - יש לך שתי אופציות
   הסקשן הזה הוא התפצלות, לא רשימה. שני משטחים שנוגעים זה בזה בלי מרווח
   ובלי פינות, והשאלה יושבת בדיוק על התפר ביניהם.
   ========================================================================== */
.opt{
  /* אותו קרם של ההירו, בלי מעבר לבן בראש הסקשן - הרצועה הבהירה
     נקראה כתפר בין שני רקעים שונים */
  background-color:var(--cream);
  padding-block:var(--sec-y) 0;
  position:relative;z-index:1;
}
.opt__title{
  width:100%;max-width:var(--content);margin-inline:auto;
  font-family:var(--f-head);font-weight:800;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--ink);letter-spacing:-.02em;
  text-align:center;text-wrap:balance;
  margin-bottom:64px;
}

/* יציאה מרוחב התוכן אל רוחב המסך המלא. הפיצול חייב לגעת בקצוות, אחרת
   הוא נקרא כתמונה בתוך הדף במקום כרצפה שהדף עומד עליה */
.opt__split{
  position:relative;
  width:100vw;margin-inline:calc(50% - 50vw);
  display:grid;grid-template-columns:1fr 1fr;
  min-height:400px;
}
.opt__side{
  padding:56px clamp(32px, 6vw, 88px) 64px;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:40px;
  text-align:right;
}

/* המספר הוא המבנה, לא תווית. הוא מונה אמיתי של שתי אפשרויות, ולכן
   מותר לו להיות גדול. המילה ״אופציה״ נשארת קטנה מעליו */
.opt__n{display:block;line-height:1;}
.opt__n-w{
  display:block;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:28px;
}
.opt__n-d{
  display:block;margin-top:2px;
  font-family:var(--f-head);font-weight:800;
  font-size:96px;line-height:.86;letter-spacing:-.03em;
}
.opt__txt{
  font-family:var(--f-head);font-weight:700;
  font-size:34px;line-height:44px;letter-spacing:-.01em;
  text-wrap:balance;
}

/* טל ביקש שהסקשן ימשיך בכתב תכלת על רקע לבן. שני המשטחים לבנים,
   וההבדל בין שתי האופציות עובר לטיפוגרפיה במקום לרקע: הראשונה
   בשחור, השנייה בתכלת. קו דק אחד מפריד ביניהן, כדי שהפיצול יישאר
   פיצול ולא ייקרא כמשטח אחד ארוך */
.opt__side{background:#fff;}
.opt__side--hard{border-inline-start:1px solid var(--line);}
.opt__side--hard .opt__n-w{color:var(--muted);}
.opt__side--hard .opt__n-d{color:var(--ink);}
.opt__side--hard .opt__txt{color:var(--ink);}

.opt__side--good .opt__n-w{color:var(--sky-deep);}
.opt__side--good .opt__n-d{color:var(--sky-deep);}
.opt__side--good .opt__txt{color:var(--sky-deep);}

/* השאלה יושבת על התפר עצמו. היא לא כותרת של אף אחד מהצדדים - היא
   מה שעומד בין שניהם, וזה מה שמזיז את העין לסקשן הבא */
.opt__ask{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  /* שני המשטחים לבנים, ולכן פתקית לבנה הייתה נעלמת בתוכם. הקו
     הדק מחזיר לה את הגבול בלי להוסיף צבע */
  background:#fff;border:1px solid var(--line);
  padding:16px 34px;border-radius:var(--r-pill);
  font-family:var(--f-head);font-weight:800;
  font-size:28px;line-height:34px;
  color:var(--ink);white-space:nowrap;
  box-shadow:0 4px 18px rgba(11,16,32,.22);
}

@media (max-width:1199px){
  .opt{padding-block:var(--sec-y) 0;}
  .opt__title{margin-bottom:40px;letter-spacing:-.015em;}
  .opt__split{grid-template-columns:1fr;min-height:0;}
  .opt__side{
    padding:36px var(--margin) 40px;
    gap:24px;
    min-height:250px;
  }
  /* הצד השני מקבל מרווח עליון כדי שהשאלה שיושבת על התפר לא תיפול על
     הטקסט. במובייל התפר אופקי, ולכן היא צריכה מקום משלה */
  /* חייב מיקום מפורש: אחרת השאלה תופסת שורה משלה בגריד והכרטיסים
     מתרחקים זה מזה. כאן שניהם יושבים באותו תא */
  .opt__side--hard{border-inline-start:0;}
  .opt__side--good{padding-top:64px;grid-row:2;grid-column:1;border-top:1px solid var(--line);}
  .opt__n-w{font-size:22px;line-height:28px;}
  .opt__n-d{font-size:64px;}
  .opt__txt{font-size:27px;line-height:36px;}
  /* במובייל התפר הוא אופקי, והוא לא באמצע הגובה של הפיצול - שני
     הכרטיסים לא באותו גובה. לכן השאלה מוצבת בתא של הכרטיס השני,
     נצמדת לקצה העליון שלו ונמשכת חצי מגובהה כלפי מעלה - כלומר היא
     יושבת על קו התפר עצמו, ולא על אמצע הסקשן */
  .opt__ask{
    position:static;
    grid-row:2;grid-column:1;
    justify-self:center;align-self:start;
    transform:translateY(-50%);
    z-index:2;
    font-size:24px;line-height:30px;
    padding:12px 26px;
  }
}