/* SUBz — баннеры-картинки v1. Готовые постеры 2072×655: assets/banner-*-v1.webp (и облегчённые -m, 1200px).
   1) .spot__slide--img — слайд карусели каталога, подключается после spotlight-v3.css.
      На компьютере картинка видна целиком. На телефоне мелкий текст с картинки не читается, поэтому от неё
      остаётся только арт (текст скрыт маской), а заголовок, цена и кнопка — живым текстом из разметки слайда.
   2) .pbn — одиночный баннер по тем же правилам (страница «Стать продавцом»).
   3) .pb-seal — живая круглая наклейка поверх нарисованной: ставится, когда цена или комиссия изменились.
   Переменные: --cut — где на картинке кончается текст, --fx — центр арта (обе в % ширины картинки). */

.spot--img{max-width:1500px;margin-inline:auto}
.spot__pic,.pbn__pic{position:absolute;inset:0;z-index:-1;display:block;pointer-events:none}
.spot__pic img,.pbn__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out,ease)}

.pb-seal{position:absolute;aspect-ratio:1;translate:-50% -50%}
.pb-seal__ring{fill:none;stroke:rgb(255 255 255 / .3);stroke-width:.7;stroke-dasharray:2.2 2.2}
.pb-seal__top{font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;fill:rgb(255 255 255 / .62)}
.pb-seal__big{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;fill:#fff}

.pbn{position:relative;isolation:isolate;display:block;max-width:1500px;margin:0 auto 28px;overflow:hidden;border-radius:28px;background:#040c0a;color:#fff;text-decoration:none}
.pbn__txt b{display:block;font-family:var(--f-display);font-weight:800;line-height:.94;letter-spacing:-.045em}
.pbn__txt em{display:block;font-style:normal;color:#5fe0a0}

@media (min-width:821px){
  .spot__slide--img{display:block;min-height:0;padding:0;aspect-ratio:2072/655;background:#050505}
  .spot__slide--img::before,.spot__slide--img::after{content:none}
  .spot__slide--img .spot__word,.spot__slide--img .spot__art{display:none}
  .spot__slide--img .spot__txt,.pbn__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .spot__slide--img:hover .spot__pic img,.pbn:hover .pbn__pic img{transform:scale(1.02)}
  .pbn{aspect-ratio:2072/655}
  /* стрелки — на кромке баннера, чтобы не лежать на тексте картинки */
  .spot--img .spot__nav{border:0;background:#161616;box-shadow:var(--sf-hi,inset 0 1px 0 rgb(255 255 255 / .06)),0 10px 24px -10px #000;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}
  .spot--img .spot__nav:hover{background:#222}
  .spot--img .spot__nav--l{left:-22px}
  .spot--img .spot__nav--r{right:-22px}
}

@media (max-width:820px){
  .spot__slide--img{min-height:216px;background:#050505}
  .spot__slide--img::before{content:none}
  .spot__slide--img::after,.pbn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(5 5 5 / .92) 0%,rgb(5 5 5 / .7) 40%,rgb(5 5 5 / .18) 68%,transparent 86%)}
  .spot__slide--img .spot__word,.spot__slide--img .spot__art{display:none}
  /* арт — справа сверху, выглядывает из-за края; слева скрыт текст картинки, снизу арт растворяется в фоне */
  .spot__pic{inset:0 auto auto var(--at,86%);height:78%;aspect-ratio:2072/655;translate:calc(var(--fx,74%) * -1) 0;
    -webkit-mask-image:linear-gradient(90deg,transparent var(--cut,45%),#000 calc(var(--cut,45%) + 9%)),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent var(--cut,45%),#000 calc(var(--cut,45%) + 9%)),linear-gradient(180deg,#000 70%,transparent);mask-composite:intersect}
  .pbn__pic{inset:0 auto 0 var(--at,78%);aspect-ratio:2072/655;translate:calc(var(--fx,62%) * -1) 0;
    -webkit-mask-image:linear-gradient(90deg,transparent var(--cut,36%),#000 calc(var(--cut,36%) + 9%));mask-image:linear-gradient(90deg,transparent var(--cut,36%),#000 calc(var(--cut,36%) + 9%))}
  .pbn{display:grid;align-content:center;min-height:196px;margin-bottom:20px;padding:22px 20px;border-radius:22px}
  .pbn__txt{display:grid;justify-items:start;gap:10px;max-width:58%}
  .pbn__txt b{font-size:clamp(30px,9vw,42px)}
  .pbn__txt small{font-size:13px;line-height:1.4;color:rgb(255 255 255 / .76)}
  .pbn__go{display:inline-flex;align-items:center;gap:8px;height:44px;margin-top:4px;padding:0 17px;border-radius:14px;background:#fff;color:#000;font-size:14px;font-weight:700;white-space:nowrap}
  .pbn__go .ico{width:15px;height:15px}
}
@media (prefers-reduced-motion:reduce){.spot__pic img,.pbn__pic img{transition:none}}