/* ==========================================================================
   Toza Suv — слайдер акций (баннеры из админки)
   Главная (под шапкой, над hero) и «Новости и акции» (блок «Акции»).
   Разметка: views/public/partials/promo-slider.ejs · поведение: /js/promo-slider.js

   Пролистывание — нативный scroll-snap: свайп пальцем/тачпадом работает и без
   JS. Кнопки ‹ ›, точки и «пауза» есть в разметке, но видны только после
   запуска скрипта (класс .is-ready): он добавляет им действие, клавиатуру и
   автопрокрутку.

   Рамка слайда имеет фиксированные пропорции (3:1 широкий баннер, 4:5
   вертикальный), поэтому место под картинку известно заранее и вёрстка не
   прыгает при загрузке (CLS = 0). Широкий баннер — только при окне от 1200px:
   у сайта слева сайдбар (80px до 1024px, 280px дальше), и в окне меньше 1200px
   баннер 3:1 получился бы меньше ~860px в ширину — мелкий текст макета стал бы
   нечитаемым. Порог 1200px — тот же, что у <source media> в
   partials/promo-slider.ejs. Режимы задаёт шаблон классами секции:
     .promo-slider--d-wide   компьютер (от 1200px): рамка 3:1 на всю ширину;
     .promo-slider--d-poster компьютер, широких баннеров нет: вертикальный
                             баннер по центру, ширина до 520px и не выше экрана;
     .promo-slider--m-poster телефон и планшет (до 1200px): рамка 4:5 — на
                             телефоне на всю ширину (поля 16px), на планшете
                             по центру, до 520px; всегда не выше экрана;
     .promo-slider--m-wide   телефон и планшет, вертикальных баннеров нет: 3:1.
   Слайд с несовпадающими пропорциями (promo-slide--lb-d / --lb-m) вписывается
   целиком, поля заполняет размытая копия картинки — без обрезки текста.
   ========================================================================== */

.promo-slider {
  --promo-radius: 20px;
  --promo-gap: 16px;        /* поле между слайдами при свайпе и место под тень */
  --promo-pad-t: 8px;       /* запас над баннером (кольцо фокуса не обрезается) */
  --promo-pad-b: 22px;      /* запас под баннером для тени */
  --promo-bar-h: 40px;      /* полоса с точками под баннером */
  --promo-arrow: 36px;
  --promo-poster-max: 520px;
  position: relative;
  padding: 8px 0 0;         /* + запас трека 8px = 16px от шапки */
}

/* «Новости и акции»: блок идёт сразу после цветной шапки страницы. */
.promo-slider--news { padding-top: 28px; }

/* Главная: hero с градиентом начинается сразу под слайдером — сглаживаем
   стык (белый → градиент hero), иначе виден резкий край. Слой над
   декоративными «шарами» hero, но под его текстом (у текста z-index 1).
   Без акций этот файл не подключается — hero выглядит как раньше. */
.promo-slider--home ~ .hero-2026::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(64px, 11vw, 140px);
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

.promo-slider__title {
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0 0 6px;
}

/* «Новости и акции»: под слайдером — заголовок «Новости» над списком новостей
   (views/public/news.ejs), тем же стилем, что «Акции»; секция новостей ближе
   к слайдеру. Без акций этот файл не подключается, заголовок там скрыт. */
.promo-news-title {
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0 0 20px;
}
.promo-slider--news ~ .section { padding-top: 24px; }
@media (min-width: 768px) {
  .promo-slider--news ~ .section { padding-top: 40px; }
}

/* Полоса с «паузой» и точками стоит в разметке ПЕРЕД лентой (кнопка «пауза» —
   первая в порядке Tab, WAI-ARIA APG), а показывается под баннером: сетка в
   одну колонку, лента — первая строка, полоса — вторая. Порядок Tab и чтения
   диктором grid-row не меняет. */
.promo-slider__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.promo-slider__stage > .promo-slider__track { grid-row: 1; }
.promo-slider__stage > .promo-slider__bar { grid-row: 2; }

/* Пока скрипт не запустился (JS выключен, файл не загрузился, ошибка),
   стрелки, точки и «пауза» не работают — прячем их. visibility, а не display:
   место под полосой сохраняется, вёрстка не прыгает, а скрытые кнопки уходят
   из порядка Tab и от экранного диктора. Класс is-ready ставит
   /js/promo-slider.js в конце инициализации. */
.promo-slider:not(.is-ready) .promo-slider__arrow,
.promo-slider:not(.is-ready) .promo-slider__bar > * { visibility: hidden; }

/* ---------- Лента слайдов (scroll-snap) ---------------------------------- */
.promo-slider__track {
  position: relative;       /* offsetParent для слайдов — JS считает offsetLeft */
  display: flex;
  margin: 0 calc(var(--promo-gap) * -1);
  padding: var(--promo-pad-t) 0 var(--promo-pad-b);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;   /* свайп у края не листает историю браузера */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.promo-slider__track::-webkit-scrollbar { display: none; }

.promo-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 var(--promo-gap);
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;         /* быстрый свайп не перескакивает баннер */
}

/* ---------- Рамка баннера ----------------------------------------------- */
.promo-slide__frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--promo-radius);
  overflow: hidden;
  isolation: isolate;               /* скругление обрезает картинку и в Safari */
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .38), 0 2px 6px rgba(15, 23, 42, .06);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .25s ease;
}
.promo-slide__frame:focus-visible {
  outline: 3px solid var(--c-water-400, #38bdf8);
  outline-offset: 3px;
  border-radius: var(--promo-radius);
}
@media (hover: hover) {
  a.promo-slide__frame:hover {
    box-shadow: 0 20px 38px -16px rgba(15, 23, 42, .45), 0 2px 8px rgba(15, 23, 42, .08);
  }
}

.promo-slide__pic,
.promo-slide__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
}
.promo-slide__pic { z-index: 1; }
.promo-slide__bg { display: none; z-index: 0; overflow: hidden; }

/* .promo-slider в селекторе — чтобы перебить `.home-2026 img { height: auto }` */
.promo-slider .promo-slide__img,
.promo-slider .promo-slide__bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.promo-slider .promo-slide__bg img {
  transform: scale(1.15);
  filter: blur(22px) saturate(1.15);
  opacity: .9;
}

/* ---------- Стрелки ‹ › -------------------------------------------------- */
.promo-slider__arrow {
  position: absolute;
  z-index: 3;
  width: var(--promo-arrow);
  height: var(--promo-arrow);
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--c-ink-900, #0f172a);
  box-shadow: inset 0 0 0 1.5px var(--c-ink-200, #e2e8f0);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.promo-slider__arrow svg { display: block; width: 18px; height: 18px; }
.promo-slider__arrow:focus-visible {
  outline: 3px solid var(--c-water-300, #7dd3fc);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ---------- Полоса под баннером: точки + пауза --------------------------- */
.promo-slider__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--promo-bar-h);
  /* на телефоне по краям полосы стоят стрелки — точки их не задевают */
  padding: 0 calc(var(--promo-arrow) + 8px);
}
.promo-slider__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.promo-slider__dot {
  width: 24px;              /* область нажатия 24×24 при видимой точке 8px */
  height: 24px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.promo-slider__dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  /* 4,76:1 на белом — WCAG 1.4.11 требует от 3:1 (было #cbd5e1, 1,48:1) */
  background: var(--c-ink-500, #64748b);
  transition: width .3s ease, background-color .3s ease;
}
.promo-slider__dot[aria-current="true"]::before {
  width: 20px;
  background: var(--c-water-600, #0284c7);
}
.promo-slider__dot:focus-visible {
  outline: 3px solid var(--c-water-300, #7dd3fc);
  outline-offset: 0;
  border-radius: 999px;
}

.promo-slider__toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 8px;        /* слева от точек — как в разметке (первая в порядке Tab) */
  padding: 0;
  border: 1.5px solid var(--c-ink-200, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink-600, #475569);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, color .2s ease;
}
.promo-slider__toggle[hidden] { display: none; }
.promo-slider__toggle svg { display: block; width: 12px; height: 12px; }
.promo-slider__toggle .promo-slider__ic-play { display: none; }
.promo-slider__toggle.is-paused .promo-slider__ic-play { display: block; }
.promo-slider__toggle.is-paused .promo-slider__ic-pause { display: none; }
.promo-slider__toggle:focus-visible {
  outline: 3px solid var(--c-water-300, #7dd3fc);
  outline-offset: 2px;
  border-radius: 999px;
}

@media (hover: hover) {
  /* при наведении точка темнее, а не светлее базы — контраст не падает ниже 3:1 */
  .promo-slider__dot:hover::before { background: var(--c-ink-700, #334155); }
  .promo-slider__dot[aria-current="true"]:hover::before { background: var(--c-water-700, #0369a1); }
  .promo-slider__toggle:hover { border-color: var(--c-water-500, #0ea5e9); color: var(--c-water-700, #0369a1); }
  .promo-slider__arrow:hover { box-shadow: inset 0 0 0 1.5px var(--c-water-500, #0ea5e9); }
}

/* Режим высокой контрастности Windows (forced colors): фон ::before заменяется
   на Canvas, и точки пропадают. Рисуем их системными цветами. Блок стоит после
   hover-правил и включает :hover, чтобы перебить их при равной специфичности. */
@media (forced-colors: active) {
  .promo-slider__dot::before,
  .promo-slider__dot:hover::before { forced-color-adjust: none; background: CanvasText; }
  .promo-slider__dot[aria-current="true"]::before,
  .promo-slider__dot[aria-current="true"]:hover::before { background: Highlight; }
}

/* Текст только для экранного диктора («откроется в новой вкладке»). */
.promo-slider__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Телефон (до 768px) ------------------------------------------ */
@media (max-width: 767.98px) {
  /* Вертикальный баннер — на всю ширину, но не шире 520px (большой телефон,
     маленький планшет) и не выше экрана (телефон боком); по центру. */
  .promo-slider--m-poster .promo-slide__frame {
    width: min(100%, var(--promo-poster-max), max(220px, calc((100vh - 100px) * .8)));
    width: min(100%, var(--promo-poster-max), max(220px, calc((100svh - 100px) * .8)));
  }

  /* Стрелки — по краям полосы с точками, баннер не перекрывают. */
  .promo-slider__arrow { bottom: calc((var(--promo-bar-h) - var(--promo-arrow)) / 2); }
  .promo-slider__arrow--prev { left: 0; }
  .promo-slider__arrow--next { right: 0; }
}

/* ---------- Телефон и планшет (до 1200px): картинка «для телефона» ------- */
@media (max-width: 1199.98px) {
  .promo-slider--m-wide .promo-slide__frame { aspect-ratio: 3 / 1; }

  .promo-slide--lb-m .promo-slide__bg { display: block; }
  .promo-slider .promo-slide--lb-m .promo-slide__img { object-fit: contain; }
}

/* ---------- Планшет и компьютер (от 768px): стрелки на баннере ---------- */
@media (min-width: 768px) {
  .promo-slider { --promo-arrow: 44px; padding-top: 12px; }   /* 12 + 8 = 20px от шапки */
  .promo-slider--news { padding-top: 40px; }

  .promo-slider__bar { padding: 0; }

  /* Стрелки — полупрозрачные круги по центру высоты баннера, на его краях
     (наполовину снаружи — важный текст у края баннера не закрывают). */
  .promo-slider__arrow {
    top: calc((100% - var(--promo-bar-h) - var(--promo-pad-b) + var(--promo-pad-t)) / 2);
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 22px -8px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .promo-slider__arrow svg { width: 20px; height: 20px; }
}
@media (min-width: 768px) and (hover: hover) {
  .promo-slider__arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 12px 26px -8px rgba(15, 23, 42, .5), 0 0 0 1px rgba(15, 23, 42, .08);
  }
}

/* ---------- Планшет (768–1199px): вертикальный баннер по центру ---------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .promo-slider--m-poster {
    --promo-frame-w: min(100%, var(--promo-poster-max), max(320px, calc((100vh - 230px) * .8)));
  }
  .promo-slider--m-poster .promo-slide__frame { width: var(--promo-frame-w); }

  .promo-slider--m-wide .promo-slider__arrow--prev { left: calc(var(--promo-arrow) / -2); }
  .promo-slider--m-wide .promo-slider__arrow--next { right: calc(var(--promo-arrow) / -2); }
  /* Вертикальный баннер по центру: стрелки рядом с ним, на свободном поле. */
  .promo-slider--m-poster .promo-slider__arrow--prev {
    left: max(calc(var(--promo-arrow) / -2), calc(50% - var(--promo-frame-w) / 2 - var(--promo-arrow) - 16px));
  }
  .promo-slider--m-poster .promo-slider__arrow--next {
    right: max(calc(var(--promo-arrow) / -2), calc(50% - var(--promo-frame-w) / 2 - var(--promo-arrow) - 16px));
  }
}

/* ---------- Компьютер (от 1200px): широкий баннер ----------------------- */
@media (min-width: 1200px) {
  .promo-slider--d-wide .promo-slide__frame { aspect-ratio: 3 / 1; }

  .promo-slider--d-poster {
    --promo-frame-w: min(100%, var(--promo-poster-max), max(320px, calc((100vh - 230px) * .8)));
  }
  .promo-slider--d-poster .promo-slide__frame {
    width: var(--promo-frame-w);
    aspect-ratio: 4 / 5;
  }

  .promo-slide--lb-d .promo-slide__bg { display: block; }
  .promo-slider .promo-slide--lb-d .promo-slide__img { object-fit: contain; }

  .promo-slider--d-wide .promo-slider__arrow--prev { left: calc(var(--promo-arrow) / -2); }
  .promo-slider--d-wide .promo-slider__arrow--next { right: calc(var(--promo-arrow) / -2); }
  /* Вертикальный баннер по центру: стрелки рядом с ним, на свободном поле. */
  .promo-slider--d-poster .promo-slider__arrow--prev {
    left: max(calc(var(--promo-arrow) / -2), calc(50% - var(--promo-frame-w) / 2 - var(--promo-arrow) - 16px));
  }
  .promo-slider--d-poster .promo-slider__arrow--next {
    right: max(calc(var(--promo-arrow) / -2), calc(50% - var(--promo-frame-w) / 2 - var(--promo-arrow) - 16px));
  }
}

/* ---------- Старые браузеры без aspect-ratio (Safari до 15) -------------- */
@supports not (aspect-ratio: 1 / 1) {
  .promo-slide__frame::before { content: ""; display: block; padding-top: 125%; }
  @media (max-width: 1199.98px) {
    .promo-slider--m-wide .promo-slide__frame::before { padding-top: 33.3333%; }
  }
  @media (min-width: 1200px) {
    .promo-slider--d-wide .promo-slide__frame::before { padding-top: 33.3333%; }
    .promo-slider--d-poster .promo-slide__frame::before { padding-top: 125%; }
  }
}

/* ---------- Меньше движения ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .promo-slide__frame,
  .promo-slider__arrow,
  .promo-slider__dot::before,
  .promo-slider__toggle { transition: none; }
  /* автопрокрутки нет — кнопка паузы не нужна */
  .promo-slider__toggle { display: none; }
}