/* Kampanjapaja hero (versio 2): leveä mainosnauha otsikon yläpuolella, koko ruudun leveydellä.
   Yksi vaakasuuntainen nauha: neliö- ja 9:16-mainokset vuorottelevat (5 staattista + 5 animoitua Premium-mainosta).
   Kuvat ja klipit viitataan suoraan kampanjapaja/mainokset/img-polkuihin. Vanha versio: hero-v1.css. */
.hx{min-width:0;width:100%;--gap:16px;--h:clamp(200px,21vw,300px);--dur:80s}
.hx-stage{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%)}
.hx-track{display:flex;width:max-content;will-change:transform}
.hx-i{position:relative;flex:none;height:var(--h);margin-right:var(--gap);overflow:hidden;background:#2a0307}
.hx-sq{width:var(--h)}
.hx-tl{width:calc(var(--h)*9/16)}
.hx-i img,.hx-i video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hx-i video{opacity:0;transition:opacity .25s;pointer-events:none}
.hx-i video.on{opacity:1}

.hx.js .hx-track{animation:hx-left var(--dur) linear infinite;animation-play-state:var(--ps,running)}
.hx:hover,.hx.is-paused{--ps:paused}
@keyframes hx-left{to{transform:translateX(-50%)}}

.hx-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 18px;margin-top:14px}
.hx-note{max-width:60ch;font:500 .8rem/1.45 var(--f-mono);color:var(--mute)}
.hx-pause{min-height:44px;padding:0 14px;border:2px solid var(--bone);background:transparent;color:var(--bone);cursor:pointer;
  font:800 .78rem/1 var(--f-mono);letter-spacing:.02em;text-transform:uppercase}
.hx-pause:hover{background:var(--bone);color:var(--black)}
.hx:not(.js) .hx-pause{display:none}

@media (max-width:720px){
  .hx{--gap:12px;--h:200px;--dur:56s}
}

/* vähennetty liike: ei liikettä, ei monistusta, ei videoita; nauha näyttää alun kuvista */
@media (prefers-reduced-motion:reduce){
  .hx.js .hx-track,.hx .hx-track{animation:none}
  .hx-clone{display:none}
  .hx-pause{display:none}
}