/* ==================================================================
   ELI · 2026-09-22
   שלוש הסיבות — רצועה צרה שמציצה מתחת לפתיחה

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

   הפתיחה מתקצרת בדיוק בגובה ההצצה (--feats-peek), כך
   שראש הקופסה נכנס למסך הראשון ומרמז שיש המשך מתחת.
   הוידאו עצמו נשאר פרוש על כל רוחב המסך.
   ================================================================== */

:root{ --feats-peek:clamp(58px, 7vh, 96px); }

.hero{
  min-height:calc((100svh - var(--head-actual, 0px)) * var(--hero-fill, .8));
}

.feats-band{
  padding-block:0;
  position:relative;
  z-index:3;
}
.feats-band .feats-box{ margin-block-end:0; }

.feats-box{
  position:relative;
  margin-block-end:clamp(26px, 3.4vw, 48px);
  background:var(--c-plate, #F6F2EC);
  color:var(--c-ink, #0A0A0A);
  --feats-cut:clamp(12px, 1.6vw, 22px);
  clip-path:polygon(
    var(--feats-cut) 0,
    100% 0,
    100% calc(100% - var(--feats-cut)),
    calc(100% - var(--feats-cut)) 100%,
    0 100%,
    0 var(--feats-cut)
  );
}

.feats-box__rail{
  position:absolute;
  inset-inline:0;
  block-size:7px;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(135deg,
    var(--c-orange, #F14B1C) 0 9px,
    var(--c-ink, #0A0A0A) 9px 18px);
}
.feats-box__rail--top{ inset-block-start:0; }

/* היפוך אופקי — האלכסונים נוטים הפוך והמסגרת נסגרת */
.feats-box__rail--bottom{ inset-block-end:0; transform:scaleX(-1); }

/* ---------- הרשת בתוך הקופסה ---------- */

.feats-box .feats{
  margin:0;
  padding:clamp(20px, 2.2vw, 30px) clamp(16px, 2.4vw, 38px);
  gap:clamp(14px, 2vw, 28px);
  align-items:stretch;
}

/* קו מפריד עדין בין הסיבות — הצד לוגי, כך שהוא נכון גם ב-RTL */
.feats-box .feat + .feat,
.feats-box .feat:not(:first-child){
  border-inline-start:1px solid rgba(10,10,10,.12);
  padding-inline-start:clamp(10px, 1.5vw, 22px);
}

/* ---------- אייקון וטיפוגרפיה ---------- */

.feats-box .feat__icon{
  inline-size:clamp(40px, 3.6vw, 54px);
  block-size:clamp(40px, 3.6vw, 54px);
  margin-bottom:6px;
  filter:none;
}

.feats-box .feat__title{
  color:var(--c-ink, #0A0A0A);
  font-size:clamp(.92rem, 1.05vw, 1.05rem);
  margin-block-end:2px;
}

.feats-box .feat__text{
  color:var(--c-slate, #6F6F6F);
  font-size:clamp(.78rem, .85vw, .88rem);
  line-height:1.5;
  max-width:32ch;
}

@media (max-width:1000px){

  :root{ --feats-peek:clamp(44px, 6vh, 72px); }

  .feats-box{ --feats-cut:clamp(12px, 3.2vw, 18px); }

  .feats-box .feats{
    grid-template-columns:minmax(0, 1fr);
    padding:clamp(18px, 5vw, 28px) clamp(16px, 5vw, 26px);
    gap:0;
  }

  /*
   * בנייד עטיפת הפריט מקבלת רקע קרם ומסגרת כתומה מעצמה.
   * בתוך קופסה קרמה זה קרם על קרם — מנטרלים.
   */
  .feats-box .feat__inner{
    background:none;
    clip-path:none;
    padding:0;
  }
  .feats-box .feat::before{ display:none; }

  /* בטור אחד הקו המפריד עובר מהצד למעלה */
  .feats-box .feat + .feat,
  .feats-box .feat:not(:first-child){
    border-inline-start:0;
    padding-inline-start:0;
    border-block-start:1px solid rgba(10,10,10,.12);
    margin-block-start:clamp(14px, 4vw, 20px);
    padding-block-start:clamp(14px, 4vw, 20px);
  }

  .feats-box .feat__icon{ inline-size:48px; block-size:48px; }
  .feats-box .feat__text{ max-width:40ch; }
}


/* הקופסה יושבת על הוידאו — צל רך מפריד אותה מהרקע */
.feats-band .feats-box{ box-shadow:0 -10px 46px rgba(0,0,0,.38); }


/* ==================================================================
   שני האייקונים הרחבים — לא ריבועיים

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

.feats-box .feat__icon[data-icon="vehicles"],
.feats-box .feat__icon[data-icon="accessories"]{
  inline-size:auto;
  max-inline-size:100%;
  block-size:clamp(46px, 4.4vw, 64px);
  object-fit:contain;
  margin-inline:auto;
}

@media (max-width:1000px){
  .feats-box .feat__icon[data-icon="vehicles"],
  .feats-box .feat__icon[data-icon="accessories"]{ block-size:56px; }
}


/* ==================================================================
   הרצועה גדלה לחמש משבצות

   מספר העמודות מגיע מהתבנית (--feats-cols), כך שהרצועה
   מתאימה את עצמה לכמה סיבות שמולאות בפועל.
   ================================================================== */

.feats-box .feats{
  grid-template-columns:repeat(var(--feats-cols, 3), minmax(0, 1fr));
  align-items:start;
}

/* ארבע או חמש — הכל מתהדק כדי שהשורה תישאר נשימה */
.feats-box .feats[style*="--feats-cols:4"],
.feats-box .feats[style*="--feats-cols:5"]{
  gap:clamp(10px, 1.3vw, 20px);
}

.feats-box .feats[style*="--feats-cols:4"] .feat:not(:first-child),
.feats-box .feats[style*="--feats-cols:5"] .feat:not(:first-child){
  padding-inline-start:clamp(8px, 1.1vw, 16px);
}

.feats-box .feats[style*="--feats-cols:4"] .feat__title,
.feats-box .feats[style*="--feats-cols:5"] .feat__title{
  font-size:clamp(.84rem, .95vw, .98rem);
  text-wrap:balance;
}

.feats-box .feats[style*="--feats-cols:4"] .feat__text,
.feats-box .feats[style*="--feats-cols:5"] .feat__text{
  font-size:clamp(.74rem, .8vw, .84rem);
  max-width:26ch;
}

/* ביניים: חמש עמודות צרות מדי — נשברות לשלוש */
@media (min-width:761px) and (max-width:1240px){
  .feats-box .feats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    row-gap:clamp(18px, 2.4vw, 28px);
  }
  .feats-box .feat:nth-child(3n+1){
    border-inline-start:0;
    padding-inline-start:0;
  }
}

@media (max-width:1000px){
  .feats-box .feats{ grid-template-columns:minmax(0, 1fr); }
}


/* ==================================================================
   feat-icon-balance

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

.feats-box .feat__icon[data-icon="vehicles"]{
  block-size:clamp(36px, 3.2vw, 48px);
}

.feats-box .feat__icon[data-icon="accessories"]{
  block-size:clamp(38px, 3.4vw, 51px);
}

@media (max-width:1000px){
  .feats-box .feat__icon[data-icon="vehicles"]{    block-size:42px; }
  .feats-box .feat__icon[data-icon="accessories"]{ block-size:46px; }
}


/* ==================================================================
   הפתיחה תופסת 80% מהמסך, והרצועה ממלאת את ה-20% הנותרים

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

.feats-band{
  padding-block:clamp(10px, 1.4vw, 18px) 0;
}


/* ==================================================================
   feats-flush-right

   הקופסה נדבקת לווידאו בלי רווח כלל, ונוגעת בקצה הימני
   של המסך. הצד השמאלי נשאר מיושר לרוחב התוכן של שאר הדף,
   כך שהקופסה נקראת כרצועה שיוצאת מהעמוד ולא כבלוק מרחף.

   החישוב פיזי (margin-right) ולא לוגי — ב-RTL הצד הלוגי
   היה מוציא אותה לכיוון ההפוך.
   ================================================================== */

.feats-band{ padding-block:0; }

.feats-band{ overflow-x:clip; }

.feats-band > .wrap{ padding-right:0; }

/*
 * האחוז נמדד מול רוחב האב, ולכן החריגה מוחלת על הקופסה
 * עצמה (בתוך ה-wrap) ולא על ה-wrap, שלגביו 50% היה שווה ל-50vw.
 */
.feats-band .feats-box{
  margin-right:calc(50% - 50vw);
}


/* ==================================================================
   feats-mobile-rail

   במובייל חמש הסיבות נערמו לחמש שורות — בלוק של כ-700px
   מיד אחרי הפתיחה. עכשיו זו שורה שמחליקים בה הצידה, עם
   הצמדה לכרטיס הבא. רוחב הכרטיס קטן מחצי מסך במכוון,
   כדי שהכרטיס הבא יציץ וירמז שיש המשך.
   ================================================================== */

@media (max-width:760px){

  .feats-box .feats{
    display:flex;
    grid-template-columns:none;
    align-items:stretch;
    gap:0;
    padding:clamp(16px, 4.5vw, 24px) 0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-inline-start:16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .feats-box .feats::-webkit-scrollbar{ display:none; }

  /* מרווח בסוף הרצועה — padding בקצה נבלע בחלק מהדפדפנים */
  .feats-box .feats::after{
    content:"";
    flex:0 0 clamp(10px, 4vw, 18px);
  }

  .feats-box .feat{
    flex:0 0 auto;
    inline-size:clamp(148px, 44vw, 196px);
    scroll-snap-align:start;
    padding-inline:clamp(12px, 3.6vw, 16px);
    border-block-start:0;
    margin-block-start:0;
    padding-block-start:0;
  }

  /* הקו המפריד חוזר לאנכי — בשורה הוא בין הכרטיסים */
  .feats-box .feat + .feat,
  .feats-box .feat:not(:first-child){
    border-inline-start:1px solid rgba(10,10,10,.12);
    border-block-start:0;
    margin-block-start:0;
    padding-block-start:0;
    padding-inline-start:clamp(12px, 3.6vw, 16px);
  }

  .feats-box .feat__title{ font-size:.86rem; }

  .feats-box .feat__text{
    font-size:.74rem;
    line-height:1.5;
    max-width:none;
  }

  .feats-box .feat__icon{ inline-size:44px; block-size:44px; }
  .feats-box .feat__icon[data-icon="vehicles"]{    block-size:34px; }
  .feats-box .feat__icon[data-icon="accessories"]{ block-size:42px; }
}

/* ---------- גובה הפתיחה במסך קטן ---------- */

@media (max-width:760px){
  :root{ --hero-fill:.72; }
}

@media (max-width:480px){
  :root{ --hero-fill:.68; }
}