/* ==========================================================================
   BEAST THEME — הסקשנים החדשים: מותגים, לפני/אחרי, סרטון אווירה, סניפים
   קובץ עצמאי. משתמש במשתני ה-CSS הקיימים של תבנית tokens.css עם ערכי גיבוי,
   כך שאם tokens.css כבר נטען בעמוד — הוא פשוט יורש את הצבעים והמידות האמיתיים.
   כל המחלקות כאן מתחילות בקידומת bx- כדי שלא יתנגשו בשום מחלקה קיימת.
   ========================================================================== */

.bx-section { direction: rtl; }

/* -- כלי עזר: קטימת פינות באלכסון (שמאל-עליון + ימין-תחתון), 3 גדלים -- */
.bx-cut-sm {
  clip-path: polygon(
    var(--plate-cut, 10px) 0, 100% 0,
    100% calc(100% - var(--plate-cut, 10px)), calc(100% - var(--plate-cut, 10px)) 100%,
    0 100%, 0 var(--plate-cut, 10px)
  );
}
.bx-cut-md {
  clip-path: polygon(
    var(--cut, 12px) 0, 100% 0,
    100% calc(100% - var(--cut, 12px)), calc(100% - var(--cut, 12px)) 100%,
    0 100%, 0 var(--cut, 12px)
  );
}
.bx-cut-lg {
  clip-path: polygon(
    var(--cut-media, 20px) 0, 100% 0,
    100% calc(100% - var(--cut-media, 20px)), calc(100% - var(--cut-media, 20px)) 100%,
    0 100%, 0 var(--cut-media, 20px)
  );
}

/* מסגרת מקווקוות סביב צורה קטומה — שכבת מילוי בצבע הקו + שכבה פנימית מוקטנת
   באותה שיטה שמתועדת ב-README של התבנית (clip-path מוחק border רגיל) */
.bx-cut-outline { position: relative; background: var(--bx-edge-color, var(--c-orange, #F14B1C)); }
.bx-cut-outline > .bx-cut-outline__fill {
  position: absolute; inset: var(--bx-edge, 1.5px);
  background: var(--bx-fill-color, var(--c-plate, #F6F2EC));
}

/* ==========================================================================
   1. עובדים עם מיטב החברות — רצועת לוגואים
   ========================================================================== */
.bx-brands {
  position: relative; z-index: 3;
  margin-top: calc(var(--bx-brands-lift, 28px) * -1);   /* מטפס מעט על הגיבור */
  padding: 0;
  background: var(--c-ink, #0A0A0A);
  overflow: hidden;
}

.bx-brands__rail {
  height: var(--bx-rail-h, 24px);
  background: repeating-linear-gradient(135deg, var(--c-orange, #F14B1C) 0 26px, var(--c-ink, #0A0A0A) 26px 52px);
}
.bx-brands__rail--bottom { transform: scaleX(-1); }

.bx-brands__inner { max-width: var(--wrap, 1280px); margin: 0 auto; padding: 26px var(--gutter, 20px); text-align: center; }

.bx-brands__eyebrow {
  font-size: 14px; font-weight: 500; color: var(--c-slate, #8A8A8A); margin: 0 0 6px;
}
.bx-brands__title {
  font-weight: 900; font-size: clamp(22px, 3vw, 32px); color: var(--c-ink, #0A0A0A); margin: 0 0 32px;
}
.bx-brands__title span { color: var(--c-orange, #F14B1C); }

.bx-brands__track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.bx-brands__marquee {
  display: flex; align-items: center; gap: 56px;
  width: max-content; list-style: none; margin: 0; padding: 8px 28px;
  animation: bx-marquee 30s linear infinite;
}
.bx-brands__track:hover .bx-brands__marquee,
.bx-brands__track:focus-within .bx-brands__marquee { animation-play-state: paused; }
@keyframes bx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bx-brands__logo { flex: 0 0 auto; display: flex; align-items: center; height: 44px; }
.bx-brands__logo img,
.bx-brands__logo .bx-brands__placeholder {
  max-height: 42px; width: auto;
  /* הלוגואים שקופים וכהים — נהפוך אותם ללבן כדי שייראו על השחור */
  filter: brightness(0) invert(1) opacity(.72);
  transition: filter .25s ease;
}
.bx-brands__logo:hover img, .bx-brands__logo:focus-within img { filter: brightness(0) invert(1); }\n.bx-brands__logo:hover .bx-brands__placeholder,
.bx-brands__logo:hover .bx-brands__placeholder { filter: none; }
.bx-brands__placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border: 1px dashed var(--c-hairline, #E6E6E6);
  color: var(--c-slate, #8A8A8A); font-size: 13px; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .bx-brands__marquee { animation: none; flex-wrap: wrap; justify-content: center; width: auto; overflow-x: auto; }
}

/* ==========================================================================
   3. לפני / אחרי — סליידר השוואה
   ========================================================================== */
.bx-ba { padding: 64px 0; background: var(--c-surface, #fff); }
.bx-ba__inner { max-width: var(--wrap, 1280px); margin: 0 auto; padding: 0 var(--gutter, 20px); }
.bx-ba__head { display: flex; justify-content: flex-start; margin-bottom: 28px; }

.bx-ba__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none;
  background: var(--c-graphite, #2B2B2B);
}
.bx-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bx-ba__after { z-index: 1; }
.bx-ba__before { z-index: 2; clip-path: inset(0 0 0 var(--bx-pos, 50%)); }
/* הערה: ב-clip-path inset הצד השני מוזז לפי מיקום הידית; ב-RTL זה נשאר עקבי כי מדובר בפיקסלים פיזיים */

.bx-ba__handle {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  right: var(--bx-pos, 50%); transform: translateX(50%);
  width: 3px; background: var(--c-orange, #F14B1C); pointer-events: none;
}
.bx-ba__handle::before {
  content: "\00BB"; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--c-orange, #F14B1C);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.bx-ba__tag {
  position: absolute; top: 16px; z-index: 4;
  padding: 6px 16px; font-weight: 700; font-size: 14px; color: #fff;
  background: var(--c-orange, #F14B1C);
}
.bx-ba__tag--after { right: 16px; }
.bx-ba__tag--before { left: 16px; background: rgba(255,255,255,.9); color: var(--c-ink, #0A0A0A); }

/* ==========================================================================
   4. סרטון אווירה — נפתח בגלילה
   ========================================================================== */
.bx-atmo { position: relative; height: 260vh; background: var(--c-canvas, #FFFFFF); }
/* top ולא 0: הראש קבוע למעלה, והמסגרת נדבקת בדיוק מתחתיו */
.bx-atmo__sticky { position: sticky; top: var(--head-actual, 0px); height: calc(100vh - var(--head-actual, 0px)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bx-atmo__frame {
  position: relative; overflow: hidden; background: var(--c-graphite, #2B2B2B);
  width: calc(38% + (100% - 38%) * var(--bx-p, 0));
  height: calc(32vh + (100vh - var(--head-actual, 0px) - 32vh) * var(--bx-p, 0));
  clip-path: polygon(
    calc(var(--cut-media, 20px) * (1 - var(--bx-p, 0))) 0, 100% 0,
    100% calc(100% - var(--cut-media, 20px) * (1 - var(--bx-p, 0))),
    calc(100% - var(--cut-media, 20px) * (1 - var(--bx-p, 0))) 100%,
    0 100%, 0 calc(var(--cut-media, 20px) * (1 - var(--bx-p, 0)))
  );
  will-change: width, height;
}
.bx-atmo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bx-atmo__caption {
  position: absolute; bottom: 24px; right: 24px; z-index: 2; color: #fff;
  font-weight: 900; font-size: clamp(18px, 2.4vw, 30px);
  opacity: var(--bx-p, 0); transition: opacity .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .bx-atmo { height: auto; }
  .bx-atmo__sticky { position: relative; height: auto; padding: 40px 0; }
  .bx-atmo__frame { width: 100%; height: 60vh; clip-path: none; border-radius: 0; }
}

/* ==========================================================================
   5. מחכים לכם בסניפים שלנו
   ========================================================================== */
.bx-branch { padding: 64px 0; background: var(--c-surface, #fff); }
.bx-branch__inner { max-width: var(--wrap, 1280px); margin: 0 auto; padding: 0 var(--gutter, 20px); }
.bx-branch__head { display: flex; justify-content: flex-start; margin-bottom: 28px; }
.bx-branch__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px) { .bx-branch__grid { grid-template-columns: 1fr; } }

.bx-branch__card { display: flex; flex-direction: column; }
.bx-branch__photo {
  position: relative; height: 240px; background-size: cover; background-position: center;
}
.bx-branch__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.8), transparent 55%);
}
.bx-branch__name { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding: 18px; margin: 0; color: #fff; font-weight: 900; font-size: 26px; }

.bx-branch__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; background: var(--c-plate, #F6F2EC);
}
.bx-branch__meta { font-size: 14px; color: var(--c-ink, #0A0A0A); }
.bx-branch__meta div { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.bx-branch__meta a { color: inherit; text-decoration: none; }
.bx-branch__meta svg { flex: none; width: 16px; height: 16px; color: var(--c-orange, #F14B1C); }

.bx-branch__whatsapp {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 18px; background: var(--c-orange, #F14B1C); color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: background .2s ease;
}
.bx-branch__whatsapp:hover { background: var(--c-orange-deep, #C93A0F); }