/* ← ./banner.css */
/* WiFi MAX MESH — bezeq.co.il home-page banner
   Bezeq Private. RTL. 7 breakpoints.

   HOW TO TUNE
   Every cut is one block of custom properties under the matching @media.
   Geometry is % of the 1600px stage, so it scales inside a cut; type is px.
   bp-1920 is measured 1:1 off the Figma export — change it only on purpose.
   The other cuts are derived starting points.                              */

@font-face{font-family:"SimplerPro";src:url("./font/simplerpro_bezeq_hebrew2-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SimplerPro";src:url("./font/simplerpro_bezeq_hebrew2-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"SimplerPro";src:url("./font/simplerpro_bezeq_hebrew2-black.woff2") format("woff2");font-weight:900;font-display:swap}

.bz-banner{
  /* ---- brand tokens ---- */
  --navy:#010636;
  --cyan:#6EDCFB;
  --blue:#0073FF;
  --action:#056AE5;
  --pink:#F74A84;
  /* GlowButton "ocean": the stop sequence repeats so the 400% pan loops */
  --cta-grad:linear-gradient(45deg,#6edcfb,#26a5ff,#056ae5,#022a5f,#0073ff,#6edcfb,#26a5ff,#056ae5,#022a5f,#0073ff);
  --cta-speed:24s;
  --font:"SimplerPro",Arial,sans-serif;
  --shadow-txt:0 1px 4px rgba(0,0,0,.25);

  /* ---- MOBILE (below 992) — measured 1:1 on the 360 artwork ----
     A different structure from the desktop: the presenter sits top LEFT, the
     stacked lockup top RIGHT, and the card runs the full width beneath them.
     --m is the mobile scale: 1 at 360, rising with the viewport but capped so
     the composition still fits the 470px height.                            */
  /* the 360 artwork is the mobile design. Its vertical stack already fills the
     470px height, so --m cannot grow; wider phones and tablets get the same
     composition on a capped, centred stage instead of a stretched one. */
  --m:1;  /* the stage is capped at 360 below 992, so the design never stretches */

  --h:470px;
  --stage:100%;

  --presenter-l:3.89%;  --presenter-t:calc(4px * var(--m));  --presenter-w:36.39%;
  --presenter-nudge:0px;

  --col-l:5.69%;        --col-w:88.89%;
  --lockup-l:39.95%;    --lockup-t:calc(35px * var(--m));    --lockup-w:69.37%;
  --lockup-ar:221.98/114.64;

  --glow-l:-14%;        --glow-t:calc(-40px * var(--m));     --glow-w:84%;

  --eyebrow-t:calc(28px * var(--m));   --eyebrow-s:calc(14px * var(--m));

  --card-t:calc(168px * var(--m));
  --card-pad:calc(16px * var(--m)) calc(20px * var(--m)) calc(17px * var(--m));
  --card-gap:calc(11px * var(--m));
  --card-radius:calc(16px * var(--m));

  --caption-s:calc(17px * var(--m));
  --icon-k:var(--m);
  --label-s:calc(14px * var(--m));
  --plus-s:calc(20px * var(--m));
  --item-gap:calc(6px * var(--m));

  --bar-h:calc(33px * var(--m));
  --bar-s:calc(17px * var(--m));
  --bar-radius:calc(10px * var(--m));

  --cta-gap:calc(16px * var(--m));
  --cta-h:calc(40px * var(--m));
  --cta-s:calc(16px * var(--m));

  --legal-b:calc(14px * var(--m));
  --legal-s:calc(11px * var(--m));
  --legal-w:94%;
  --logoglow-blur:calc(10px * var(--m));

  position:relative;
  direction:rtl;
  font-family:var(--font);
  color:#fff;
  background:var(--navy);
  overflow:hidden;
  isolation:isolate;
}

.bz-banner *{box-sizing:border-box}

.bzb__field{position:relative;height:var(--h);width:100%;overflow:hidden}

/* the swoosh bleeds off the left edge of the viewport, not the stage */
.bzb__swoosh{
  display:none;
  position:absolute;top:0;bottom:0;left:0;
  height:100%;width:auto;max-width:none;
  object-fit:cover;object-position:left top;
  pointer-events:none;z-index:0;
  /* the artwork is cropped at the card's edge; fade and soften the tail so the
     cut is not readable as a hard end to the swoosh */
  filter:blur(var(--swoosh-blur));
  -webkit-mask-image:var(--swoosh-fade);
          mask-image:var(--swoosh-fade);
}

.bzb__stage{
  position:relative;z-index:1;
  height:100%;width:var(--stage);max-width:360px;margin-inline:auto;
}

/* ---------------------------------------------------------------- art -- */
/* MOBILE: the presenter is clipped at the card's top edge, so nothing of him
   reads through the glass card beneath it */
.bzb__figure{
  display:block;position:absolute;z-index:1;pointer-events:none;
  top:var(--presenter-t);
  left:calc(var(--presenter-l) + var(--presenter-nudge));
  width:var(--presenter-w);
  height:calc(var(--card-t) - var(--presenter-t));
  overflow:hidden;
}
.bzb__presenter{
  display:block;position:static;width:100%;height:auto;
  pointer-events:none;
}

/* the glow behind the presenter — mobile and tablet only, where the swoosh is off */
.bzb__glow{
  position:absolute;z-index:0;pointer-events:none;
  left:var(--glow-l);top:var(--glow-t);
  width:var(--glow-w);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(110,220,251,0.14) 0%,
    rgba(0,115,255,0.117) 28%,
    rgba(0,115,255,0.059) 52%,
    rgba(0,115,255,0.018) 70%,
    rgba(1,6,54,0) 82%);
  filter:blur(10px);
}

.bzb__lockup{
  position:absolute;top:var(--lockup-t);
  left:var(--lockup-l);
  width:var(--lockup-w);
  aspect-ratio:var(--lockup-ar);
  z-index:3;pointer-events:none;
}
.bzb__lockup img{position:absolute;height:auto}
/* soft bloom behind the lockup — geometry and colours lifted from the supplied frame */
.bzb__logoglow{
  position:absolute;left:-11.78%;top:38.60%;width:106.95%;height:46.96%;
  border-radius:50%;
  background:linear-gradient(24deg,#010636 0%,#37A8FD 50%,#010636 100%);
  opacity:.38;
  filter:blur(var(--logoglow-blur));
}
/* children are % of the lockup box, measured off the 1920 artwork */
/* mobile lockup: the stacked two-line logo, measured on the 360 artwork */
.bzb__logo--wide{display:none}
.bzb__logo--stack{left:3.10%; top:0;      width:80.73%}
.bzb__mesh{left:0;            top:71.82%; width:57.80%}
.bzb__star{left:64.14%;       top:6.46%;  width:35.86%}
/* the sparkle sits ON the arc: last in paint order, screened so it adds light */
.bzb__star{mix-blend-mode:screen}

/* ------------------------------------------------------------ content -- */
.bzb__col{
  position:absolute;top:0;
  left:var(--col-l);
  width:var(--col-w);height:100%;
  z-index:4;
}

.bzb__eyebrow{
  position:absolute;top:var(--eyebrow-t);inset-inline:0;
  /* right-aligned to the column's edge, as measured on both artworks */
  margin:0;text-align:right;
  font-weight:700;font-size:var(--eyebrow-s);line-height:1.25;
  text-shadow:var(--shadow-txt);
}

/* card + CTA travel together: the gap between them is a token, so it survives
   any change to the card's own height (comment: 24px between plate and button) */
.bzb__stack{
  position:absolute;top:var(--card-t);inset-inline:0;
  display:flex;flex-direction:column;gap:var(--cta-gap);
}

.bzb__card{
  display:flex;flex-direction:column;align-items:center;gap:var(--card-gap);
  padding:var(--card-pad);
  border-radius:var(--card-radius);
  background:linear-gradient(180deg,rgba(5,106,229,.22) 0%,rgba(5,106,229,.11) 100%);
  border:1px solid rgba(110,220,251,.22);
  backdrop-filter:blur(34px);-webkit-backdrop-filter:blur(34px);
}

.bzb__caption{
  margin:0;text-align:center;
  font-weight:900;font-size:var(--caption-s);line-height:1.15;
  text-shadow:var(--shadow-txt);
}

.bzb__items{
  direction:ltr;align-items:flex-end;
  display:flex;align-items:flex-end;justify-content:center;
  gap:var(--item-gap);
  margin:0;padding:0;list-style:none;width:100%;
}
.bzb__item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
/* the three marks are NOT the same height in the artwork; each keeps its own,
   and a fixed icon band bottom-aligns them so the labels sit on one line */
.bzb__item img{
  width:auto;filter:drop-shadow(var(--shadow-txt));

  height:calc(var(--icon-k) * var(--icon-own));
}
.bzb__item{justify-content:flex-end}
.bzb__item--enhancer img{--icon-own:35px}
.bzb__item--wifi7    img{--icon-own:23.5px}
.bzb__item--internet img{--icon-own:26.5px}
.bzb__item>img{margin-top:auto}
.bzb__items{min-height:calc(var(--icon-k) * 35px + 4px + 1.15em)}
.bzb__item span{
  direction:rtl;white-space:normal;text-wrap:balance;text-align:center;
  font-weight:400;font-size:var(--label-s);line-height:1.15;
  text-shadow:var(--shadow-txt);
}
.bzb__plus{
  font-weight:400;font-size:var(--plus-s);line-height:1;
  align-self:flex-end;margin-bottom:calc(var(--label-s) * 1.15 + 10px);
  text-shadow:var(--shadow-txt);
}

.bzb__bar{
  margin:0;width:100%;height:var(--bar-h);
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--bar-radius);
  background:var(--pink);
  font-weight:700;font-size:var(--bar-s);line-height:1;
  white-space:nowrap;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
  box-shadow:0 0 5.8px rgba(16,16,16,.31);
}

/* CTA — the design system's GlowButton, ported 1:1: an animated gradient
   border panning 400% over 12s, plus the same gradient blurred behind it as a
   halo. Gradient stops, timing and the -2px ring are the component's own. */
@keyframes bz-glow-pan{
  0%{background-position:0 0}
  50%{background-position:400% 0}
  100%{background-position:0 0}
}

.bzb__cta-wrap{
  position:relative;isolation:isolate;
  display:flex;flex:0 0 auto;
  height:var(--cta-h);
}
.bzb__cta-wrap::before,
.bzb__cta-wrap::after{
  content:"";position:absolute;inset:calc(-2px * var(--scale, 1));
  border-radius:999px;pointer-events:none;
  background:var(--cta-grad);
  background-size:400% 400%;
  animation:bz-glow-pan var(--cta-speed) linear infinite;
}
.bzb__cta-wrap::after{
  filter:blur(calc(18px * var(--scale, 1)));
  opacity:.6;transition:opacity .2s ease;
}

.bzb__cta{
  position:relative;z-index:1;width:100%;
  height:var(--cta-h);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:none;
  background:var(--navy);                      /* --ink-900 in the system */
  color:#fff;text-decoration:none;
  font-weight:700;font-size:var(--cta-s);line-height:1;
  transition:transform .18s ease;
}
@media (hover:hover){
  .bzb__cta-wrap:hover{transform:translateY(-2px)}
  .bzb__cta-wrap:hover::after{opacity:.9}
}
.bzb__cta-wrap{transition:transform .18s ease}
.bzb__cta:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.bzb__legal{
  position:absolute;z-index:5;left:50%;transform:translateX(-50%);
  bottom:var(--legal-b);width:var(--legal-w);max-width:1600px;
  margin:0;text-align:center;
  font-weight:400;font-size:var(--legal-s);line-height:1.35;
  white-space:var(--legal-wrap,normal);
  color:rgba(255,255,255,.92);
}
/* scrim so the legal line stays readable over the artwork */
.bzb__field::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:58px;z-index:4;
  background:linear-gradient(180deg,rgba(1,6,54,0) 0%,rgba(1,6,54,.9) 60%,rgba(1,6,54,.96) 100%);
  pointer-events:none;
}

/* ================================= DESKTOP (992 and up) — ONE structure =====
   The 1920 design is the optimum and is kept at full size for as long as it
   fits. Narrower cuts are absorbed in this order:
     1. the side margins close   (flex centring does this on its own)
     2. the gap between the presenter and the card closes, 134px -> 40px
     3. only when that is spent does --scale shrink the whole composition
   Below 992 a different structure takes over (defined above).              */
@media (min-width:992px){
  .bz-banner{
    --h:595px;

    /* measured at 1920 */
    --fig-w:408.5px;      /* presenter slot   */
    --col-base:400px;     /* card + CTA       */

    --stage-w:min(100vw, 1600px);
    --over:71px;          /* the lockup overhangs the card to the right */

    /* side margins, measured at 1600: they close first, each absorbing half of
       whatever the cut is missing, down to a floor. The right floor keeps the
       lockup's overhang inside the banner. */
    --ml:clamp(16px,  calc(330px - (1600px - var(--stage-w)) / 2), 330px);
    --mr:clamp(87px,  calc(328px - (1600px - var(--stage-w)) / 2), 328px);

    /* space-between then hands the remainder to the gap, which is what closes
       next; --gap-min is its floor */
    --gap-min:40px;

    /* scale is the last resort: it only moves once even the floors do not fit */
    --scale:min(1, calc((var(--stage-w) - 16px - 87px)
                        / (408.5px + var(--gap-min) + 400px)));
    --presenter-nudge:calc(32px * var(--scale));

    --eyebrow-t:calc(38px * var(--scale));
    --card-t:calc(215px * var(--scale));

    --eyebrow-s:calc(21px * var(--scale));
    --caption-s:calc(23px * var(--scale));
    --label-s:calc(15px * var(--scale));
    --plus-s:calc(24px * var(--scale));
    --item-gap:calc(10px * var(--scale));
    --icon-k:var(--scale);

    --card-pad:calc(26px * var(--scale)) calc(14px * var(--scale)) calc(11px * var(--scale));
    --card-gap:calc(17px * var(--scale));
    --card-radius:calc(20px * var(--scale));

    --bar-h:calc(35px * var(--scale));
    --bar-s:calc(23px * var(--scale));
    --bar-radius:calc(12px * var(--scale));

    --cta-gap:calc(24px * var(--scale));
    --cta-h:calc(58px * var(--scale));
    --cta-s:calc(24px * var(--scale));

    --legal-b:calc(7px * var(--scale));
    /* one line on every desktop cut: 14px is the measured size, and below the
       width where the line stops fitting the size follows the viewport */
    --legal-s:min(14px, calc(min(100vw, 1600px) / 1162px * 0.96 * 14px));
    --legal-w:96%;
    --legal-wrap:nowrap;

    --logoglow-blur:calc(18px * var(--scale));
  }

  .bzb__stage{
    max-width:1600px;
    /* LTR for the row only, so the presenter stays physically left and the
       card physically right, as measured; the content inside stays RTL */
    direction:ltr;
    display:flex;justify-content:space-between;align-items:stretch;
    gap:var(--gap-min);
    padding-inline:var(--ml) var(--mr);
  }
  .bzb__col{direction:rtl}

  .bzb__figure{
    position:relative;flex:0 0 auto;
    top:auto;left:auto;height:auto;overflow:visible;   /* no clip on desktop */
    width:calc(var(--fig-w) * var(--scale));
  }
  .bzb__presenter{
    position:absolute;top:auto;left:0;
    bottom:calc(-292px * var(--scale));          /* the measured crop at 1920 */
    width:100%;height:auto;
  }

  .bzb__col{
    position:relative;flex:0 0 auto;left:auto;
    width:calc(var(--col-base) * var(--scale));
    height:auto;
  }
  /* the lockup is wider than the card and overhangs it to the right, exactly
     as measured: 479.2 wide against a 400 card */
  .bzb__lockup{
    left:auto;right:calc(-71px * var(--scale));
    top:calc(-2px * var(--scale));
    width:calc(479.2px * var(--scale));
  }

  .bz-banner{--lockup-ar:479.2/201.6}
  .bzb__eyebrow{text-align:center}   /* desktop centres it over the lockup */
  .bzb__logo--wide{display:block;left:2.50%; top:17.49%;width:83.07%}
  .bzb__logo--stack{display:none}
  .bzb__mesh{left:16.51%;top:69.90%;width:46.91%}
  .bzb__star{left:66.72%;top:0;width:33.29%}

  .bzb__swoosh{display:block}
  .bzb__glow{display:none}
}

@media (prefers-reduced-motion:reduce){
  .bzb__cta{transition:none}
  .bzb__cta-wrap::before,.bzb__cta-wrap::after{animation:none}
  .bzb__cta-wrap{transition:none}
}

/* template fit: the bezeq.co.il header overlays the slider; the live home banner
   (#banner_homepage-6) clears it with the same 69px on every width */
#banner-private-hp-wifi-max-mesh{margin-top:69px}

/* site hardening (measured on bezeq.co.il/testnew/home):
   slick.css sets `.slick-slide img{display:block}` (0,1,1), which beats the
   class-only display switches above; the site's `a:hover / a:visited / a:active`
   colours (0,1,1) beat .bzb__cta. The id raises these rules over the template. */
#banner-private-hp-wifi-max-mesh .bzb__swoosh{display:none}
#banner-private-hp-wifi-max-mesh .bzb__presenter{display:block}
#banner-private-hp-wifi-max-mesh .bzb__logo--wide{display:none}
#banner-private-hp-wifi-max-mesh .bzb__logo--stack{display:block}
@media (min-width:992px){
  #banner-private-hp-wifi-max-mesh .bzb__swoosh{display:block}
  #banner-private-hp-wifi-max-mesh .bzb__logo--wide{display:block}
  #banner-private-hp-wifi-max-mesh .bzb__logo--stack{display:none}
}
#banner-private-hp-wifi-max-mesh .bzb__cta,
#banner-private-hp-wifi-max-mesh .bzb__cta:link,
#banner-private-hp-wifi-max-mesh .bzb__cta:visited,
#banner-private-hp-wifi-max-mesh .bzb__cta:hover,
#banner-private-hp-wifi-max-mesh .bzb__cta:focus,
#banner-private-hp-wifi-max-mesh .bzb__cta:active{color:#fff;text-decoration:none}

/* mobile tweaks (below 992), from the design review:
   the presenter 5% smaller, scaled from the card's top edge so his head moves
   down from the banner's top; the eyebrow 2px lower */
@media (max-width:991.98px){
  #banner-private-hp-wifi-max-mesh .bz-banner{--eyebrow-t:calc(30px * var(--m))}
  #banner-private-hp-wifi-max-mesh .bzb__presenter{
    transform:scale(.95);
    transform-origin:50% calc(var(--card-t) - var(--presenter-t));
  }
}