/* Back-office Home content in the player app (T3, connected mode): hero slides (main slider and side rail),
   the announcement bar, and the same slide markup in the back-office preview (which loads only this file). */

/* ---------- main hero slider: more than the built-in two slides ---------- */
.hero-slider[data-slide="2"] .hs-slides{transform:translateX(-200%)}
.hero-slider[data-slide="3"] .hs-slides{transform:translateX(-300%)}
.hero-slider[data-slide="4"] .hs-slides{transform:translateX(-400%)}
.hero-slider[data-slide="5"] .hs-slides{transform:translateX(-500%)}
.hero-slider[data-slide="6"] .hs-slides{transform:translateX(-600%)}
.hero-slider[data-slide="7"] .hs-slides{transform:translateX(-700%)}
.hero-slider[data-slide="8"] .hs-slides{transform:translateX(-800%)}
.hero-slider[data-slide="9"] .hs-slides{transform:translateX(-900%)}
.hero-slider[data-slide="10"] .hs-slides{transform:translateX(-1000%)}
.hero-slider[data-slide="11"] .hs-slides{transform:translateX(-1100%)}
.hero-slider[data-slide="12"] .hs-slides{transform:translateX(-1200%)}

/* ---------- one slide ---------- */
.hs-cms{position:relative;overflow:hidden;background:#000;color:#fff}
.hs-cms .hr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.hs-cms .hr-img.hr-fit-contain{object-fit:contain}
.hs-cms .hr-img.hr-fit-fill{object-fit:fill}
.hs-cms .hr-scrim{position:absolute;inset:0;pointer-events:none}
.hs-cms .hr-scrim-left{background:linear-gradient(90deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 78%)}
.hs-cms .hr-scrim-bottom{background:linear-gradient(0deg,rgba(0,0,0,.82) 0,rgba(0,0,0,0) 70%)}
.hs-cms .hr-scrim-full{background:rgba(0,0,0,.5)}
.hs-cms .hr-copy{position:absolute;top:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;gap:8px;max-width:60%;padding:24px 28px;box-sizing:border-box}
.hs-cms .hr-copy.hr-a-center{right:0;max-width:none;align-items:center;text-align:center}
.hs-cms .hr-copy.hr-a-right{left:auto;right:0;align-items:flex-end;text-align:right}
.hs-cms .hr-v-top{justify-content:flex-start}
.hs-cms .hr-v-middle{justify-content:center}
.hs-cms .hr-v-bottom{justify-content:flex-end}
.hs-cms .hr-eyebrow{font:800 11px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.85}
.hs-cms .hr-head{margin:0;font:900 clamp(24px,2.5vw,42px)/1 Manrope,system-ui,sans-serif;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.hs-cms .hr-sub{margin:0;font:600 13px/1.45 Manrope,system-ui,sans-serif;color:#fff;opacity:.9}
.hs-cms .hr-cta{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:10px;background:#e3262f;color:#fff;font:800 13px/1 Manrope,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.hs-cms .hr-a-center .hr-cta{align-self:center}
.hs-cms .hr-a-right .hr-cta{align-self:flex-end}
.hs-cms.hr-theme-gold .hr-cta{background:#f2c14e;color:#1a1300}
.hs-cms.hr-theme-light .hr-cta{background:#fff;color:#101214}
.hs-cms .hr-cta:hover{filter:brightness(1.08)}
.hs-cms .hr-full{position:absolute;inset:0;z-index:2}
.hs-cms .hr-hot{position:absolute;z-index:2;border-radius:10px}
.hs-cms :is(.hr-cta,.hr-full,.hr-hot):focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* ---------- side rail (and the preview): its own small slider, slide or fade ---------- */
.hr-side{position:relative;overflow:hidden;padding:0!important;background:#000}
.hr-side .hr-track{position:absolute;inset:0;display:flex;transition:transform .6s cubic-bezier(.4,.1,.2,1)}
.hr-side .hr-slide{position:relative;flex:0 0 100%;width:100%;height:100%}
.hr-side .hr-slide[aria-hidden="true"]{visibility:hidden;transition:visibility 0s .6s}
.hr-side[data-slide="1"] .hr-track{transform:translateX(-100%)}
.hr-side[data-slide="2"] .hr-track{transform:translateX(-200%)}
.hr-side[data-slide="3"] .hr-track{transform:translateX(-300%)}
.hr-side[data-slide="4"] .hr-track{transform:translateX(-400%)}
.hr-side[data-slide="5"] .hr-track{transform:translateX(-500%)}
.hr-side[data-slide="6"] .hr-track{transform:translateX(-600%)}
.hr-side[data-slide="7"] .hr-track{transform:translateX(-700%)}
.hr-side[data-slide="8"] .hr-track{transform:translateX(-800%)}
.hr-side[data-slide="9"] .hr-track{transform:translateX(-900%)}
.hr-side[data-slide="10"] .hr-track{transform:translateX(-1000%)}
.hr-side[data-slide="11"] .hr-track{transform:translateX(-1100%)}
.hr-side.hr-fade .hr-track{transform:none}
.hr-side.hr-fade .hr-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s,visibility 0s .6s}
.hr-side.hr-fade .hr-slide[aria-hidden="false"]{opacity:1;transition:opacity .6s}
.hr-side .hs-cms .hr-img{object-position:50% 0} /* a side tile keeps the top of its art unless a focal point is set */
.hr-side .hs-cms .hr-copy{max-width:none;padding:16px}
.hr-side .hs-cms .hr-head{font-size:clamp(20px,1.7vw,28px)}
.hr-dots{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.45)}
.hr-dots button{width:8px;height:8px;min-width:0;min-height:0;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer;transition:width .3s,background .3s}
.hr-dots button[aria-current="true"]{width:20px;background:#fff}
.hr-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:700px){
  .hr-hide-m,body .promo-rail .pr-card.hr-hide-m{display:none!important}
  body .promo-rail .pr-track:has(> .pr-mascot.hr-hide-m) > .pr-hero{flex:1 1 100%!important;width:100%!important}
  .hs-cms .hr-copy{max-width:80%;padding:16px 18px;gap:6px}
  .hs-cms .hr-head{font-size:22px}
  .hs-cms .hr-sub{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.hr-side .hr-track,.hr-side.hr-fade .hr-slide{transition:none}}

/* ---------- announcement bar (under the maintenance banner, every page) ---------- */
html body .ver-banner.ann-bar{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 48px 8px 16px;position:relative;font-size:13.5px;font-weight:600;line-height:1.35;text-align:center;color:#fff;background:#163a63;background-image:none}
html body .ver-banner.ann-bar.ann-success{background-color:#103b26}
html body .ver-banner.ann-bar.ann-warning{background-color:#7a4b00}
html body .ver-banner.ann-bar.ann-promo{background-color:#8f1720}
html body .ver-banner.ann-bar.ann-rg{background-color:#2a2d35}
html body .ver-banner.ann-bar .ann-link{color:#fff;text-decoration:underline;text-underline-offset:3px}
html body .ver-banner.ann-bar .ann-link:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
html body .ver-banner.ann-bar .ann-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.14);background-image:none;color:#fff;font:700 18px/1 system-ui,sans-serif;cursor:pointer}
html body .ver-banner.ann-bar .ann-x:hover{background:rgba(255,255,255,.26)}
html body .ver-banner.ann-bar .ann-x:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- back-office preview frame ---------- */
.hr-pv{position:relative;width:100%;border-radius:14px;overflow:hidden;background:#0b0c0e}
.hr-pv>.hr-side{position:absolute;inset:0}
.hr-pv .hr-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:18px;cursor:pointer}
.hr-pv .hr-prev{left:8px}
.hr-pv .hr-next{right:8px}
.hr-pv-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:12px;color:#9ba0ab;font:600 13px/1.4 system-ui,sans-serif;text-align:center}
