/* ==================================================================
   ELI · 2026-09-22
   שירות ומעבדה — אותה מסגרת של סקשן "דברו איתנו"

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

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

   הקטימה נכתבת ישירות ולא דרך --cut-media: משתנה על הגריד היה
   עובר בירושה לתמונות שבפנים ומגדיל גם את הקטימה שלהן.
   ================================================================== */

.svc__grid{
  --svc-cut:clamp(16px, 2.2vw, 30px);

  position:relative;
  padding-block:10px;
  clip-path:polygon(
    var(--svc-cut) 0,
    100% 0,
    100% calc(100% - var(--svc-cut)),
    calc(100% - var(--svc-cut)) 100%,
    0 100%,
    0 var(--svc-cut)
  );
}

.svc__grid::before,
.svc__grid::after{
  content:"";
  position:absolute;
  inset-inline:0;
  block-size:10px;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(135deg,
    var(--c-orange, #F14B1C) 0 13px,
    var(--c-ink, #0A0A0A) 13px 26px);
}

.svc__grid::before{ inset-block-start:0; }

/* היפוך אופקי — כך שתי הרצועות נוטות הפוך והמסגרת נסגרת */
.svc__grid::after{ inset-block-end:0; transform:scaleX(-1); }

@media (max-width:1000px){
  .svc__grid{ --svc-cut:clamp(14px, 4vw, 22px); }
}


/* ==================================================================
   הכרטיס האמצעי — שחור, טקסט לבן, הכל ממורכז

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

.svc__grid{ background:var(--c-ink, #0A0A0A); }

.svc__card{
  background:var(--c-ink, #0A0A0A);
  color:#FFFFFF;
  text-align:center;
  align-items:center;
}

.svc__card .section__head{
  justify-content:center;
  text-align:center;
  inline-size:100%;
}

.svc__card .section-title__plate{ background:none; }
.svc__card .section-title__text{ color:#FFFFFF; }

.svc__card .svc__title{ color:#FFFFFF; }

.svc__card .svc__text{
  color:rgba(255,255,255,.72);
  margin-inline:auto;
}


/* ==================================================================
   הקובייה של שירות ומעבדה — תמונה אחת על כל השטח

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

   הרצועות הכתומות מלמעלה ומלמטה נשארו — הן פסבדו-אלמנטים
   של הגריד ולכן הן מצוירות מעל התמונה.
   ================================================================== */

.svc__grid--full{
  position:relative;
  display:flex;
  min-block-size:clamp(300px, 30vw, 400px);
  background:var(--c-ink, #0A0A0A);
}

.svc__bg{
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  clip-path:none;
  background:var(--c-graphite, #2B2B2B);
}

.svc__bg img{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  display:block;
}

/* הצללה חזקה — בלעדיה טקסט לבן על תצלום פשוט נבלע */
.svc__bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(6,6,7,.92) 0%,
      rgba(6,6,7,.78) 34%,
      rgba(6,6,7,.62) 62%,
      rgba(6,6,7,.74) 100%),
    radial-gradient(120% 90% at 50% 50%,
      rgba(6,6,7,.30) 0%,
      rgba(6,6,7,.66) 100%);
}

.svc__grid--full .svc__card{
  position:relative;
  z-index:2;
  flex:1;
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(32px, 3.4vw, 52px) clamp(20px, 3.4vw, 48px);
}

.svc__grid--full .svc__title{
  color:#FFFFFF;
  font-size:clamp(1.8rem, 3.2vw, 2.9rem);
  line-height:1.04;
  letter-spacing:-.02em;
  max-width:18ch;
  margin-inline:auto;
  text-shadow:0 4px 30px rgba(0,0,0,.65);
}

.svc__grid--full .svc__text{
  color:rgba(255,255,255,.88);
  font-size:clamp(1rem, 1.35vw, 1.2rem);
  max-width:52ch;
  margin-inline:auto;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

/* ---------- הכפתור לדף המעבדה ---------- */

.svc__cta{
  margin-block-start:clamp(20px, 2.4vw, 32px);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 34px;
  background:var(--c-orange, #F14B1C);
  color:#FFFFFF;
  text-decoration:none;
  font-weight:var(--w-black, 900);
  font-size:clamp(.95rem, 1.1vw, 1.05rem);
  clip-path:var(--cut-shape);
  --cut:12px;
  transition:background .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}

.svc__cta:hover,
.svc__cta:focus-visible{
  background:var(--c-orange-deep, #C93A0F);
  transform:translateY(-2px);
}

.svc__cta svg{
  inline-size:16px;
  block-size:16px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}

.svc__cta:hover svg{ transform:translateX(-4px); }

@media (max-width:1000px){
  .svc__grid--full{ min-block-size:clamp(280px, 62vw, 360px); }
  .svc__grid--full .svc__card{ padding:clamp(26px, 7vw, 38px) clamp(18px, 5vw, 28px); }
  .svc__grid--full .svc__title{ font-size:clamp(1.6rem, 6.8vw, 2.2rem); max-width:14ch; }
}

@media (prefers-reduced-motion: reduce){
  .svc__cta,
  .svc__cta svg{ transition:none; }
  .svc__cta:hover{ transform:none; }
  .svc__cta:hover svg{ transform:none; }
}


/* ---------- הכוכבית: חדש בסניף בני ברק ---------- */

.svc__note{
  margin:clamp(14px, 1.8vw, 22px) auto 0;
  max-width:56ch;
  display:inline-flex;
  align-items:flex-start;
  gap:.45em;
  padding:9px 18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  color:#FFFFFF;
  font-size:clamp(.8rem, .95vw, .92rem);
  font-weight:var(--w-bold, 700);
  line-height:1.5;
  clip-path:var(--cut-shape);
  --cut:9px;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}

.svc__note-star{
  color:var(--c-orange, #F14B1C);
  font-weight:var(--w-black, 900);
  font-size:1.15em;
  line-height:1.2;
}

@media (max-width:1000px){
  .svc__note{
    display:flex;
    text-align:start;
    padding:8px 14px;
    font-size:.8rem;
  }
}


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

.svc__logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 1.8vw, 26px);
  margin-block-end:clamp(12px, 1.6vw, 20px);
}

.svc__logo{
  inline-size:auto;
  object-fit:contain;
  display:block;
  opacity:.96;
}

.svc__logo--house{ block-size:clamp(26px, 2.6vw, 36px); }

/* הסימניין של אקסי רחב ונמוך — גובה קטן יותר מאזן אותם */
.svc__logo--xi{ block-size:clamp(13px, 1.4vw, 19px); }

.svc__logos-sep{
  inline-size:1px;
  block-size:clamp(20px, 2.2vw, 30px);
  background:rgba(255,255,255,.28);
}

/* ---------- הכפתור: ללא קופסה, למטה בצד שמאל ---------- */

.svc__grid--full .svc__cta{
  position:absolute;
  inset-block-end:clamp(16px, 2vw, 28px);
  left:clamp(18px, 2.4vw, 36px);
  margin:0;
  padding:0 0 5px;
  background:none;
  clip-path:none;
  color:#FFFFFF;
  font-size:clamp(.88rem, 1vw, 1rem);
  border-block-end:2px solid var(--c-orange, #F14B1C);
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

.svc__grid--full .svc__cta:hover,
.svc__grid--full .svc__cta:focus-visible{
  background:none;
  color:var(--c-orange, #F14B1C);
  transform:none;
}

/* מקום לקישור כדי שלא יידבק לכוכבית */
.svc__grid--full .svc__card{ padding-block-end:clamp(54px, 5vw, 74px); }

@media (max-width:1000px){

  .svc__logos{ gap:14px; margin-block-end:12px; }
  .svc__logo--house{ block-size:26px; }
  .svc__logo--xi{ block-size:13px; }

  /* בנייד הקישור חוזר לזרימה, נצמד לשמאל */
  .svc__grid--full .svc__cta{
    position:static;
    align-self:flex-end;
    margin-block-start:16px;
  }

  .svc__grid--full .svc__card{ padding-block-end:clamp(26px, 7vw, 38px); }
}


/* ==================================================================
   הפינה השמאלית העליונה — לוגו החברות והכוכבית

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

.svc__aside{
  position:absolute;
  z-index:3;
  inset-block-start:clamp(16px, 2vw, 26px);
  left:clamp(18px, 2.4vw, 36px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(7px, .9vw, 11px);
  max-inline-size:min(44%, 300px);
}

.svc__aside .svc__logos{
  justify-content:flex-start;
  gap:clamp(9px, 1.1vw, 14px);
  margin-block-end:0;
}

.svc__aside .svc__logo--house{ block-size:clamp(18px, 1.8vw, 24px); }
.svc__aside .svc__logo--xi{   block-size:clamp(9px, .95vw, 13px); }
.svc__aside .svc__logos-sep{  block-size:clamp(13px, 1.4vw, 18px); }

.svc__aside .svc__note{
  margin:0;
  max-width:none;
  padding:6px 11px;
  gap:.35em;
  font-size:clamp(.66rem, .72vw, .75rem);
  line-height:1.45;
  --cut:7px;
}

.svc__aside .svc__note-star{ font-size:1.05em; }

@media (max-width:1000px){

  /* בנייד הקובייה נערמת, והפינה חוזרת לזרימה מעל הכרטיס */
  .svc__grid--full{ flex-direction:column; }

  .svc__aside{
    position:static;
    align-items:center;
    max-inline-size:none;
    padding:clamp(20px, 6vw, 28px) clamp(18px, 5vw, 28px) 0;
    gap:9px;
  }

  .svc__aside .svc__logos{ justify-content:center; }
  .svc__aside .svc__logo--house{ block-size:22px; }
  .svc__aside .svc__logo--xi{   block-size:11px; }
  .svc__aside .svc__note{ font-size:.7rem; }

  .svc__grid--full .svc__card{ padding-block-start:clamp(18px, 5vw, 26px); }
}


/* ==================================================================
   svc-aside-bottom

   הלוגו והכוכבית ירדו לתחתית הקובייה (שמאל למטה),
   והקישור למעבדה חזר לזרימה — ממורכז מיד מתחת לגוש הטקסט.

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

.svc__aside{
  inset-block-start:auto;
  inset-block-end:clamp(16px, 2vw, 26px);
}

.svc__grid--full .svc__cta{
  position:static;
  align-self:center;
  margin:clamp(16px, 2vw, 26px) 0 0;
}

.svc__grid--full .svc__card{
  padding-block:clamp(28px, 3vw, 44px) clamp(72px, 6.5vw, 100px);
}

@media (max-width:1000px){

  /* בנייד הפינה יורדת אל מתחת לכרטיס */
  .svc__aside{
    order:2;
    padding:0 clamp(18px, 5vw, 28px) clamp(20px, 6vw, 28px);
  }

  .svc__grid--full .svc__card{
    order:1;
    padding-block:clamp(26px, 7vw, 38px) clamp(18px, 5vw, 26px);
  }

  .svc__grid--full .svc__cta{
    align-self:center;
    margin-block-start:14px;
  }
}