/* Kampanjapaja hero: pyörivä mainosnäyttämö (5 staattista + 5 animoitua Premium-mainosta).
   Leveällä kaksi pystysuuntaista nauhaa vastakkaisiin suuntiin, kapealla kaksi vaakanauhaa.
   Kuvat ja klipit viitataan suoraan kampanjapaja/mainokset/img-polkuihin. */
.hx{min-width:0;width:100%;max-width:600px;margin-left:auto;--gap:16px;--dur-a:56s;--dur-b:96s}
.hx-stage{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);height:clamp(460px,44vw,620px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%)}
.hx-col{min-width:0;overflow:hidden}
.hx-track{display:flex;flex-direction:column;will-change:transform}
.hx-i{position:relative;flex:none;margin-bottom:var(--gap);overflow:hidden;background:#2a0307}
.hx-sq .hx-i{aspect-ratio:1/1}
.hx-tl .hx-i{aspect-ratio: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-sq .hx-track{animation:hx-up var(--dur-a) linear infinite;animation-play-state:var(--ps,running)}
.hx.js .hx-tl .hx-track{animation:hx-down var(--dur-b) linear infinite;animation-play-state:var(--ps,running)}
.hx:hover,.hx.is-paused{--ps:paused}
@keyframes hx-up{to{transform:translateY(-50%)}}
@keyframes hx-down{from{transform:translateY(-50%)}to{transform:none}}
@keyframes hx-left{to{transform:translateX(-50%)}}
@keyframes hx-right{from{transform:translateX(-50%)}to{transform:none}}

.hx-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 18px;margin-top:14px}
.hx-note{max-width:44ch;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}

/* kapea näyttö: vaakanauhat allekkain, tekstin alla */
@media (max-width:980px){
  .hx{max-width:none;margin:8px 0 0;--gap:12px}
  .hx-stage{display:flex;flex-direction:column;height:auto;-webkit-mask-image:none;mask-image:none}
  .hx-col{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .hx-track{flex-direction:row;width:max-content}
  .hx-i{margin:0 var(--gap) 0 0}
  .hx-sq .hx-i{height:clamp(116px,24vw,190px)}
  .hx-tl .hx-i{height:clamp(206px,42vw,330px)}
  .hx.js .hx-sq .hx-track{animation-name:hx-left}
  .hx.js .hx-tl .hx-track{animation-name:hx-right}
}

/* vähennetty liike: ei liikettä, ei videoita, vain staattinen asettelu (3 + 3 mainosta) */
@media (prefers-reduced-motion:reduce){
  .hx.js .hx-track,.hx .hx-track{animation:none}
  .hx-stage{display:flex;flex-direction:column;height:auto;-webkit-mask-image:none;mask-image:none}
  .hx-col{-webkit-mask-image:none;mask-image:none}
  .hx-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);width:auto;transform:none}
  .hx-i{margin:0;width:100%;height:auto}
  .hx-sq .hx-i,.hx-tl .hx-i{height:auto}
  .hx-i:nth-child(n+4),.hx-clone{display:none}
  .hx-pause{display:none}
}