/* ==========================================================================
   opt - יש לך שתי אופציות
   הסקשן הזה הוא התפצלות, לא רשימה. שני משטחים שנוגעים זה בזה בלי מרווח
   ובלי פינות, והשאלה יושבת בדיוק על התפר ביניהם.
   ========================================================================== */
.opt{
  background-color:var(--cream);
  background-image:linear-gradient(180deg,
    #ffffff 0,
    rgba(241,240,235,0) 180px);
  background-repeat:no-repeat;
  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--hard{background:var(--navy);}
.opt__side--hard .opt__n-w{color:var(--cream-80);}
.opt__side--hard .opt__n-d{color:rgba(241,240,235,.24);}
.opt__side--hard .opt__txt{color:var(--cream-80);}

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

/* השאלה יושבת על התפר עצמו. היא לא כותרת של אף אחד מהצדדים - היא
   מה שעומד בין שניהם, וזה מה שמזיז את העין לסקשן הבא */
.opt__ask{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--cream);
  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:60px 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--good{padding-top:64px;grid-row:2;grid-column:1;}
  .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;
  }
}