/* ==================================================================
   ELI · 2026-09-22 (סבב שלישי)

   1. נייד — כפתורי הניווט בהדר על כל רוחב הקונטיינר
   2. נייד — אריחי הקטגוריות על כל רוחב המסך, בלי רווחים
   3. "הכירו את" — חיצים על התמונה, כותרת בקרנטינה
   ================================================================== */


/* ==================================================================
   1. שורת הקטגוריות בהדר — נייד
   ==================================================================

   במובייל מוצגים שלושה כפתורים בלבד. במקום flex שממרכז
   אותם ומשאיר שוליים משני הצדדים, הם יושבים בגריד של
   עמודות שווות שממלא את כל רוחב הקונטיינר — שלושה כפתורים
   באותו גודל בדיוק, בלי חורים בצדדים.

   פריטים מוסתרים (display:none) לא יוצרים עמודה, ולכן החלוקה
   מתעדכנת לבד אם ישתנה מספר הקטגוריות בתפריט. */

@media (max-width:760px){

  .pill-nav__list{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0, 1fr);
    align-items:stretch;
    justify-content:stretch;
    gap:6px;
    flex-wrap:nowrap;
  }

  .pill-nav__list > li{ min-inline-size:0; }

  .pill-nav__list a{
    display:grid;
    place-items:center;
    block-size:100%;
    inline-size:100%;
    padding:11px 4px;
    text-align:center;
    font-size:clamp(.7rem, 3.05vw, .95rem);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width:380px){
  .pill-nav__list{ gap:5px; }
  .pill-nav__list a{ padding:10px 3px; font-size:clamp(.66rem, 2.95vw, .95rem); }
}


/* ==================================================================
   2. אריחי הקטגוריות — נייד
   ==================================================================

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

@media (max-width:820px){

  /* הסקשן פורץ את הקונטיינר ונוגע בשני קצוות המסך */
  .cats > .wrap{
    max-inline-size:100%;
    inline-size:100%;
    padding-inline:0;
  }

  .cat__grid--mob{
    --cat-gap:0px;
    gap:0;
  }

  .cat__grid--mob .cat__tile{
    aspect-ratio:16 / 8.2;
    clip-path:none;
    border-radius:0;
    --cut-media:0px;
  }

  /* קו שיער ביניהם — מפריד בלי לנתק */
  .cat__grid--mob .cat__tile + .cat__tile{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  }

  /* המסגרת הכתומה שייכת לאריח שצף על רקע — לא לרצועה רצופה */
  .cat__grid--mob .cat__frame{ display:none; }

  /* הטקסט והכפתור מתיישרים לשולי העמוד ולא לקצה המסך */
  .cat__grid--mob .cat__text{
    padding-inline:var(--gutter, 20px);
    padding-block-end:clamp(16px, 4.4vw, 22px);
  }
  .cat__grid--mob .cat__badge{
    left:var(--gutter, 20px);
    top:clamp(12px, 3.4vw, 16px);
  }

  .cat__grid--mob .cat__title{ font-size:clamp(1.3rem, 5.6vw, 1.8rem); }
  .cat__grid--mob .cat__eyebrow{ font-size:clamp(.74rem, 3.2vw, .86rem); }
}


/* ==================================================================
   3. "הכירו את" — חיצים על התמונה
   ==================================================================

   הזוג יושב בפינה התחתונה של צד התמונה. ה-JS קובע על הבמה
   data-side="left|right" לפי השקופית הפעילה, כך שהחיצים עוברים
   אתה ולעולם לא נוחתים על הטקסט. */

.shw__nav-wrap{
  position:absolute;
  z-index:6;
  bottom:clamp(16px, 2.2vw, 26px);
  left:clamp(16px, 2.2vw, 26px);
  display:flex;
  gap:8px;
}
.shw__stage[data-side="right"] .shw__nav-wrap{
  left:auto;
  right:clamp(16px, 2.2vw, 26px);
}

/* על צילום הכפתור חייב להיות כהה ומטושטש, אחרת הוא נבלע בתמונה */
.shw__stage .shw__nav{
  inline-size:40px;
  block-size:40px;
  background:rgba(12,12,14,.44);
  -webkit-backdrop-filter:blur(9px);
          backdrop-filter:blur(9px);
  color:#FFFFFF;
  box-shadow:0 4px 18px rgba(0,0,0,.34);
}
.shw__stage .shw__nav:hover,
.shw__stage .shw__nav:focus-visible{
  background:var(--c-orange, #F14B1C);
  color:#FFFFFF;
}
.shw__stage .shw__nav:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:2px;
}

/* בנייד התמונה בראש השקופית ותחתיתה אלכסונית — החיצים עולים למעלה */
@media (max-width:860px){
  .shw__nav-wrap,
  .shw__stage[data-side="right"] .shw__nav-wrap{
    top:14px;
    bottom:auto;
    left:14px;
    right:auto;
  }
  .shw__stage .shw__nav{ inline-size:36px; block-size:36px; }
}

/* השורה שמתחת לפאנל — נשארו הנקודות והמונה בלבד */
.shw__controls{ gap:clamp(10px, 1.2vw, 16px); }


/* ---------- הכותרת בקרנטינה ----------

   קרנטינה הוא פונט תצוגה צר וגבוה, ולכן הוא דורש גודל גדול
   במידה ניכרת מ-Heebo כדי להגיע לאותה נוכחות, ו-line-height
   נמוך מ-1 כדי ששתי השורות ישבו צמוד. בלי מרווח אותיות
   שלילי — הוא כבר צר מספיק מעצמו. */

.shw__title{
  font-family:var(--font-display, 'Karantina', sans-serif);
  font-weight:700;
  font-size:clamp(2.7rem, 5.4vw, 4.6rem);
  line-height:.92;
  letter-spacing:0;
}

.shw__title span{
  margin-top:.02em;
  font-size:.54em;
  font-weight:700;
  letter-spacing:0;
}

@media (max-width:860px){
  .shw__title{ font-size:clamp(2.4rem, 11vw, 3.4rem); }
}


/* ==================================================================
   ELI 2026-09-22 - shw-fullbleed
   סקשן הכירו את הכלי נפרס על כל רוחב המסך במחשב.
   הבמה יוצאת מהקונטיינר בטריק full-bleed, בעוד הכותרת
   והפקדים נשארים ברוחב התוכן הרגיל.
   ================================================================== */

@media (min-width:1001px){

  .shw__stage{
    inline-size:100vw;
    max-inline-size:100vw;
    margin-inline:calc(50% - 50vw);
  }

  .shw__slide{
    clip-path:none;
    min-block-size:clamp(460px, 44vw, 640px);
    --shw-skew:8%;
  }

  .shw__body{
    padding-right:clamp(44px, 6.5vw, 130px);
  }

  .shw__slide--flip .shw__body{
    padding-left:clamp(44px, 6.5vw, 130px);
  }

  .shw__text{ max-width:54ch; }
  .shw__points{ max-width:660px; }
}