/* V1.16: panoramic banner, lower-left copy, edge arrows and pagination dots.
   Loaded after premium.css/carousel.css; compatible with existing hero.js. */
.hero.shell{width:100%;max-width:none;margin:0 auto 24px;border:0;border-radius:0;background:#0c0d10;box-shadow:none;overflow:hidden}
.hero .hero-stage{height:clamp(360px,33.333vw,640px);min-height:0;max-height:none;aspect-ratio:auto}
.hero-stage>picture{width:100%;height:100%;inset:0;background:#101116}
.hero-stage>picture img{display:block;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:brightness(.88) saturate(.94)}
.hero-stage>.hero-shade{background:linear-gradient(0deg,#0c0d10 0%,#0c0d1080 16%,transparent 55%),linear-gradient(90deg,#090b1170,transparent 65%)}
.hero .hero-copy{left:max(8%,calc((100% - 1420px)/2 + 48px));bottom:88px;width:62%;max-width:820px}
.hero h1{font-size:clamp(29px,3vw,48px);line-height:1.15;letter-spacing:-.9px;font-weight:750;margin:12px 0;text-shadow:0 2px 16px #0008}
.hero .hero-eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 10px}
.hero-copy>p:not(.hero-eyebrow){font-size:12px;line-height:1.6;margin:6px 0;color:#e2dce0}
.hero-copy .download{margin-top:12px;padding:13px 26px;border-radius:24px}
.hero-stage .hero-center{top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;padding:0 0 0 4px;display:grid;place-items:center;z-index:3;color:#fff;background:#17191f55;border:1px solid #ffffff75;box-shadow:0 0 0 7px #ffffff08;backdrop-filter:blur(8px)}
.hero .hero-bottom{position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;background:none;pointer-events:none;z-index:4;display:block}
.hero-bottom #heroThumbs{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;justify-content:center;gap:10px;width:max-content;max-width:70%;height:auto;overflow:auto;padding:8px;pointer-events:auto;scrollbar-width:none}
.hero-bottom #heroThumbs button{flex:0 0 10px;width:10px;height:10px;min-width:10px;aspect-ratio:1;margin:0;border:0;border-radius:50%;background:#ffffff66;box-shadow:none;opacity:1;transform:none;transition:background .2s,box-shadow .2s}
.hero-bottom #heroThumbs button:first-child,.hero-bottom #heroThumbs button:last-child{margin:0}
.hero-bottom #heroThumbs button img{display:none}
.hero-bottom #heroThumbs button:hover{transform:none;background:#fff}
.hero-bottom #heroThumbs button[aria-pressed=true]{background:var(--accent);opacity:1;box-shadow:0 0 0 4px #e8bf781b}
.hero-bottom>.shuffle{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;padding:0;pointer-events:auto;background:#ffffffd9;color:#17191f;border:0;font-size:20px}
.hero-bottom>#heroPrev{left:20px}.hero-bottom>#heroNext{right:20px}
@media(max-width:650px){
 .hero .hero-stage{height:460px;min-height:0;aspect-ratio:auto}
 .hero .hero-copy{left:8%;bottom:62px;width:84%;max-width:none}
 .hero h1{font-size:28px;line-height:1.16;letter-spacing:-.6px;margin:9px 0}
 .hero .hero-eyebrow{font-size:9px;margin-bottom:6px}
 .hero-copy>p:not(.hero-eyebrow){font-size:10px;margin:4px 0}
 .hero-copy .download{padding:11px 20px;margin-top:8px}
 .hero-stage .hero-center{width:55px;height:55px}
 .hero-bottom>.shuffle{width:30px;height:30px;font-size:16px;top:36%}
 .hero-bottom>#heroPrev{left:9px}.hero-bottom>#heroNext{right:9px}
 .hero-bottom #heroThumbs{bottom:16px}
}
@media(prefers-reduced-motion:reduce){.hero-bottom #heroThumbs button{transition:none}}

/* V1.19: do not stretch low-resolution portrait artwork to desktop width.
   Keep intrinsic size where possible, scale down when the viewport is smaller. */
@media(min-width:651px){
 .hero.shell{width:calc(100% - 40px);max-width:1420px;margin:18px auto 24px;border-radius:18px}
 .hero .hero-stage{height:clamp(380px,40vw,520px)}
 .hero-stage>picture img{inset:auto;left:72%;top:50%;width:auto;height:auto;max-width:48%;max-height:100%;object-fit:contain;transform:translate(-50%,-50%);filter:none}
 .hero-stage>picture{background:radial-gradient(ellipse at 70% 50%,#29252b,#101116 78%)}
 .hero-stage>.hero-shade{background:linear-gradient(90deg,#101116aa,transparent 55%);pointer-events:none}
 .hero .hero-copy{left:6%;width:40%;bottom:80px;max-width:540px}
 .hero h1{font-size:clamp(26px,3vw,42px)}
 .hero-stage .hero-center{left:72%;top:50%}
}

/* V1.17: portrait artwork on phones. Text sits below, never over the poster.
   A bounded image viewport plus contain preserves every source aspect ratio. */
@media(max-width:650px){
 .hero.shell{--poster-height:clamp(280px,112vw,460px);width:calc(100% - 24px);max-width:440px;height:auto;margin:12px auto 24px;border:1px solid #ffffff12;border-radius:16px;background:#121419}
 .hero .hero-stage{height:auto;min-height:0;max-height:none;aspect-ratio:auto;padding-top:var(--poster-height);overflow:hidden}
 .hero-stage>picture{top:0;left:0;right:0;bottom:auto;width:100%;height:var(--poster-height);background:#121419}
 .hero-stage>picture img{inset:auto;left:50%;top:50%;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform:translate(-50%,-50%);filter:none}
 .hero-stage>.hero-shade{top:0;bottom:auto;height:var(--poster-height);background:linear-gradient(0deg,#12141975,transparent 12%);pointer-events:none}
 .hero .hero-copy{position:relative;inset:auto;width:100%;max-width:none;padding:20px 20px 22px;background:#121419}
 .hero h1{font-size:24px;line-height:1.25;letter-spacing:-.4px;margin:8px 0;text-shadow:none;overflow-wrap:anywhere}
 .hero .hero-eyebrow{font-size:9px;line-height:1.5;margin:0 0 6px}
 .hero-copy>p:not(.hero-eyebrow){font-size:11px;line-height:1.6;margin:5px 0}
 .hero-copy .download{margin-top:12px;padding:11px 20px}
 .hero-stage .hero-center{top:calc(var(--poster-height)/2);left:50%;width:52px;height:52px;transform:translate(-50%,-50%);font-size:20px}
 .hero-bottom>.shuffle{top:calc(var(--poster-height)/2);width:30px;height:30px;background:#15171cc7;color:#fff;border:1px solid #ffffff45}
 .hero-bottom #heroThumbs{top:calc(var(--poster-height) - 34px);bottom:auto;background:#10111680;border-radius:20px;gap:9px;padding:8px 11px}
}

/* V3.3: center chevrons independently of the hidden legacy text. */
.hero .hero-bottom > #heroPrev,
.hero .hero-bottom > #heroNext {
  display: block;
  width: 44px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(232, 191, 120, .28);
  border-radius: 14px;
  background: rgba(22, 24, 30, .78);
  color: #e8bf78;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hero .hero-bottom > #heroPrev::before,
.hero .hero-bottom > #heroNext::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  pointer-events: none;
}
.hero .hero-bottom > #heroPrev::before { transform: translate(-50%, -50%) translateX(2px) rotate(-135deg); }
.hero .hero-bottom > #heroNext::before { transform: translate(-50%, -50%) translateX(-2px) rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .hero .hero-bottom > #heroPrev:hover,
  .hero .hero-bottom > #heroNext:hover {
    background: rgba(66, 52, 33, .94);
    border-color: rgba(232, 191, 120, .75);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  }
}
.hero .hero-bottom > #heroPrev:focus-visible,
.hero .hero-bottom > #heroNext:focus-visible {
  outline: 2px solid #e8bf78;
  outline-offset: 4px;
}
.hero .hero-bottom > #heroPrev:active,
.hero .hero-bottom > #heroNext:active { background: #4a3924; }
@media (max-width: 650px) {
  .hero .hero-bottom > #heroPrev,
  .hero .hero-bottom > #heroNext {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(22, 24, 30, .72);
  }
  .hero .hero-bottom > #heroPrev { left: 8px; }
  .hero .hero-bottom > #heroNext { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-bottom > #heroPrev,
  .hero .hero-bottom > #heroNext { transition: none; }
}