/*
 * EUX Hero - full-bleed montage hero, scoped under .eux-hero3.
 * Class names deliberately differ from the child theme's hero_bg_slider
 * (.hero-bg*) so the two never collide.
 */
.eux-hero3{
  --eh-dark:#111010;
  --eh-white:#ffffff;
  --eh-gap:22px;
  --eh-tilt:15deg;
  --eh-col-w:340px;
  --eh-maxw:1290px;
  font-family:"Open Sans",Helvetica,sans-serif;color:var(--eh-white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.eux-hero3 *,.eux-hero3 *::before,.eux-hero3 *::after{box-sizing:border-box}
.eux-hero3 p,.eux-hero3 h1{margin:0;padding:0}

/* full-bleed breakout: the shortcode renders inside a WPBakery column */
.eux-hero3 .eh-hero{
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  min-height:100vh;
  background:var(--eh-dark);
  overflow:hidden;
  display:flex;flex-direction:column;
  isolation:isolate;
}

/* ---------- montage ---------- */
.eux-hero3 .eh-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.eux-hero3 .eh-bg-cols{
  position:absolute;top:50%;right:-70px;left:auto;
  transform:translateY(-50%) rotate(var(--eh-tilt));
  display:flex;gap:var(--eh-gap);height:240%;
}
.eux-hero3 .eh-col{width:var(--eh-col-w);flex:0 0 var(--eh-col-w);overflow:visible}
.eux-hero3 .eh-slides{display:flex;flex-direction:column;gap:var(--eh-gap);will-change:transform}
.eux-hero3 .eh-slides.eh-down{animation:ehScrollDown 150s linear infinite}
.eux-hero3 .eh-slides.eh-up{animation:ehScrollUp 150s linear infinite}
.eux-hero3 .eh-slide img{width:100%!important;height:auto!important;max-width:none!important;display:block;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);margin:0!important}
.eux-hero3 .eh-tile{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.eux-hero3 .eh-tile img{max-width:64%!important;max-height:32%!important;width:auto!important;height:auto!important;object-fit:contain;border-radius:0;box-shadow:none;margin:0!important}
.eux-hero3 .eh-tile.vw{background:#001e50}
.eux-hero3 .eh-tile.skoda{background:#0e3a2f}
.eux-hero3 .eh-tile.pep{background:#0a2540}
.eux-hero3 .eh-tile.xpel{background:#0b0b0b;border:1px solid rgba(255,255,255,.07)}
.eux-hero3 .eh-tile.one{background:#0c3b3a}
@keyframes ehScrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes ehScrollDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* hover highlight (desktop pointers only) */
@media (hover:hover) and (pointer:fine){
.eux-hero3 .eh-slide{position:relative;pointer-events:auto;cursor:pointer}
.eux-hero3 .eh-slide > img,
.eux-hero3 .eh-slide > .eh-tile{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,filter .5s ease;backface-visibility:hidden}
.eux-hero3 .eh-slide::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;background:linear-gradient(180deg,rgba(17,16,16,0) 45%,rgba(17,16,16,.42) 100%);opacity:1;transition:opacity .5s ease}
.eux-hero3 .eh-slides:hover{animation-play-state:paused!important}
.eux-hero3 .eh-slide:hover{z-index:6}
.eux-hero3 .eh-slide:hover::after{opacity:0}
.eux-hero3 .eh-slide:hover > img,
.eux-hero3 .eh-slide:hover > .eh-tile{transform:scale(1.08);filter:brightness(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 32px 7px rgba(255,255,255,.5),0 28px 64px rgba(0,0,0,.55)}
.eux-hero3 .eh-col:has(.eh-slide:hover){z-index:6}
}

/* readability veil */
.eux-hero3 .eh-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,#111010 0%,#111010 34%,rgba(17,16,16,.72) 50%,rgba(17,16,16,.2) 66%,rgba(17,16,16,0) 80%),
    linear-gradient(180deg,rgba(17,16,16,.55) 0%,rgba(17,16,16,0) 16%,rgba(17,16,16,0) 82%,rgba(17,16,16,.45) 100%);
}

/* ---------- hero body ---------- */
.eux-hero3 .eh-main{
  position:relative;z-index:3;
  flex:1 1 auto;width:100%;max-width:var(--eh-maxw);margin:0 auto;
  padding:130px 30px 60px;display:flex;align-items:center;
  pointer-events:none;
}
.eux-hero3 .eh-copy{max-width:680px;padding-bottom:40px;pointer-events:auto}
.eux-hero3 .eh-review{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 16px;margin-bottom:40px;background:transparent}
.eux-hero3 .eh-stars{display:inline-flex;gap:3px}
.eux-hero3 .eh-review .eh-text{font-size:15px;font-weight:600;color:var(--eh-white)!important;white-space:nowrap}
.eux-hero3 h1.eh-headline{font-family:"Plus Jakarta Sans",sans-serif!important;font-weight:800!important;font-size:clamp(42px,5.4vw,70px)!important;line-height:.98!important;letter-spacing:-.02em!important;color:var(--eh-white)!important;text-transform:none!important;margin:0!important;padding:0!important}
.eux-hero3 .eh-accent{width:88px;height:4px;background:#7038e2;border-radius:2px;margin:28px 0}
.eux-hero3 .eh-subcopy{font-family:"Open Sans",Helvetica,sans-serif;font-size:clamp(17px,1.4vw,21px);line-height:1.5;font-weight:400;color:rgba(255,255,255,.9)!important;max-width:440px}

/* trusted row */
.eux-hero3 .eh-trusted{margin-top:52px;padding-top:30px;border-top:1px solid rgba(255,255,255,.15)}
.eux-hero3 .eh-trusted-label{font-family:"Open Sans",sans-serif;font-size:14px;font-weight:400;color:rgba(255,255,255,.72)!important;margin:0 0 22px}
.eux-hero3 .eh-trusted-logos{display:flex;align-items:center;flex-wrap:nowrap;gap:16px}
.eux-hero3 .eh-trusted-logos img{height:23px!important;width:auto!important;max-width:none!important;display:block;opacity:.9;filter:brightness(0) invert(1)!important;margin:0!important;border-radius:0;box-shadow:none}
.eux-hero3 .eh-trusted-logos img[alt="Panetta Mercato"]{height:20px!important}
.eux-hero3 .eh-trusted-logos img[alt="Volkswagen"]{height:27px!important}
.eux-hero3 .eh-trusted-logos img[alt="1Cover Travel Insurance"]{height:27px!important}
.eux-hero3 .eh-trusted-logos img[alt="Skoda"]{height:27px!important}

/* ---------- CTAs ---------- */
.eux-hero3 .eh-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.eux-hero3 a.eh-cta{
  display:inline-flex!important;align-items:center;gap:9px;
  font-family:"Open Sans",sans-serif!important;font-size:15px!important;font-weight:600!important;
  border-radius:15px!important;padding:14px 26px!important;cursor:pointer;text-decoration:none!important;
  border:1.5px solid transparent!important;white-space:nowrap;box-shadow:none!important;line-height:1.4!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease!important;
}
.eux-hero3 a.eh-cta-primary,.eux-hero3 a.eh-cta-primary:visited{background:var(--eh-white)!important;color:#111!important}
.eux-hero3 a.eh-cta-primary:hover,.eux-hero3 a.eh-cta-primary:focus{background:var(--eh-white)!important;color:#111!important;transform:translateY(-1px);box-shadow:0 12px 32px rgba(0,0,0,.5)!important}
.eux-hero3 a.eh-cta-secondary,.eux-hero3 a.eh-cta-secondary:visited{background:transparent!important;color:var(--eh-white)!important;border-color:rgba(255,255,255,.5)!important}
.eux-hero3 a.eh-cta-secondary:hover,.eux-hero3 a.eh-cta-secondary:focus{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.6)!important;color:var(--eh-white)!important;transform:translateY(-1px)}
.eux-hero3 .eh-arrow{width:8px;height:8px;border-right:1.8px solid currentColor;border-top:1.8px solid currentColor;transform:rotate(45deg)}

@media (prefers-reduced-motion:reduce){
  .eux-hero3 .eh-slides{animation:none!important}
}
@media (max-width:1150px){
  .eux-hero3 .eh-copy{max-width:100%}
}
@media (max-width:760px){
  .eux-hero3 .eh-main{padding:96px 20px 40px}
  .eux-hero3 .eh-review{margin-bottom:24px}
  .eux-hero3 h1.eh-headline{font-size:clamp(36px,10.5vw,46px)!important;line-height:1.04!important}
  .eux-hero3 .eh-accent{margin:20px 0}
  .eux-hero3 .eh-subcopy{font-size:19px}
  /* half-width, left-aligned CTAs so the montage stays visible */
  .eux-hero3 .eh-cta-row{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
  .eux-hero3 a.eh-cta{width:50%;min-width:190px;justify-content:center;padding:13px 16px!important;font-size:14px!important}
  .eux-hero3 .eh-trusted{margin-top:36px;padding-top:0;border-top:none}
  .eux-hero3 .eh-trusted-label{display:flex;align-items:center;gap:14px;text-align:center;font-size:13px;color:rgba(255,255,255,.85)!important;margin-bottom:26px}
  .eux-hero3 .eh-trusted-label::before,.eux-hero3 .eh-trusted-label::after{content:"";flex:1 0 24px;height:1px;background:rgba(255,255,255,.25)}
  /* six logos in two rows of three; Jaggards' wordmark is much wider than
     the rest so it runs smaller to look the same visual weight */
  .eux-hero3 .eh-trusted-logos{flex-wrap:wrap;justify-content:center;gap:18px 20px}
  .eux-hero3 .eh-trusted-logos img{height:22px!important}
  .eux-hero3 .eh-trusted-logos img[alt="Panetta Mercato"]{height:15px!important}
  /* darker veil so copy stays readable over the montage */
  .eux-hero3 .eh-veil{background:linear-gradient(180deg,rgba(17,16,16,.9) 0%,rgba(17,16,16,.78) 45%,rgba(17,16,16,.94) 100%)}
}