/* Homepage hero rotator — styles (server-rendered markup in NINJA_Hero::render).
   Extracted from the old JS-injected CSS (Slice 3, 2026-06-22). Enqueued in <head>
   so the hero is styled on first paint — no flash. */
#hm-mondial-hero{display:none!important}
#hm-hero-preview{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);aspect-ratio:3168/1344;background:#1c1210;overflow:hidden;font-family:Heebo,Assistant,sans-serif;margin-bottom:18px}
#hm-hero-preview .hpv-s{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;text-decoration:none;display:block;pointer-events:none}
#hm-hero-preview .hpv-s.on{opacity:1;pointer-events:auto}
#hm-hero-preview .hpv-s img{width:100%;height:100%;object-fit:cover;display:block}
#hm-hero-preview .hpv-scrim{position:absolute;inset:0;background:linear-gradient(290deg,rgba(10,6,6,.34),rgba(10,6,6,.05) 50%,transparent 64%)}
#hm-hero-preview .hpv-copy{position:absolute;right:4%;top:50%;transform:translateY(-50%);text-align:right;direction:rtl;z-index:3;max-width:48%;line-height:1.05}
#hm-hero-preview .hpv-hook{display:block;width:fit-content;margin-left:auto;background:#d81f35;color:#fff;font-weight:900;border-radius:2px;font-size:clamp(13px,2.4vw,24px);padding:clamp(6px,1vw,11px) clamp(12px,1.7vw,20px);margin-bottom:clamp(6px,1vw,10px)}
#hm-hero-preview .hpv-title{display:inline-block;width:fit-content;margin-left:auto;background:#fff;color:#151515;font-weight:900;border-radius:2px;padding:clamp(11px,1.7vw,24px) clamp(15px,2.1vw,30px);box-shadow:0 14px 40px rgba(0,0,0,.3)}
#hm-hero-preview .hpv-head{display:block;line-height:.98;font-size:clamp(26px,5.2vw,56px)}
#hm-hero-preview .hpv-t2{font-size:clamp(33px,7vw,82px)}
#hm-hero-preview .hpv-sub{display:block;font-weight:500;color:#3c3c3c;line-height:1.16;margin-top:clamp(6px,1vw,14px);font-size:clamp(12px,1.7vw,23px);max-width:94%}
#hm-hero-preview .hpv-cta{display:block;width:fit-content;margin-left:auto;margin-top:clamp(8px,1.1vw,12px);background:#d81f35;color:#fff;font-weight:800;border-radius:2px;font-size:clamp(13px,2.4vw,24px);padding:clamp(9px,1.2vw,15px) clamp(15px,1.9vw,26px)}
#hm-hero-preview .hpv-dots{position:absolute;bottom:clamp(8px,1.4vw,20px);left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:5}
#hm-hero-preview .hpv-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:.3s}
#hm-hero-preview .hpv-dots button.on{background:#fff;width:22px;border-radius:5px}
#hm-hero-preview .hpv-scallop{position:absolute;left:0;right:0;bottom:-1px;height:8px;z-index:6;background:#fff;-webkit-mask:radial-gradient(circle 6px at 8px 8px,#000 6px,transparent 6.5px) 0 100%/16px 8px repeat-x;mask:radial-gradient(circle 6px at 8px 8px,#000 6px,transparent 6.5px) 0 100%/16px 8px repeat-x}
@media(max-width:680px){
  #hm-hero-preview{aspect-ratio:2.05}
  #hm-hero-preview .hpv-s img{object-position:25% center}
  #hm-hero-preview .hpv-copy{max-width:50%}
  #hm-hero-preview .hpv-hook{font-size:11.5px;padding:5px 11px;margin-bottom:5px}
  #hm-hero-preview .hpv-title{padding:8px 12px}
  #hm-hero-preview .hpv-head{font-size:21px}
  #hm-hero-preview .hpv-t2{font-size:29px}
  #hm-hero-preview .hpv-sub{font-size:10.5px;margin-top:5px;line-height:1.12}
  #hm-hero-preview .hpv-cta{font-size:11.5px;padding:7px 13px;margin-top:6px}
}
