/* ЛОКАЛ — LocalSlot: доменно-слепой свайп-примитив (scroll-snap карусель карточек).
   Универсальный каркас «листаемых альтернатив» для выдачи /marshrut (точки) и будущих блоков.
   Разметку строит local-slot.js; этот файл — только стили. Токены — index.css.
   Свайп — нативный CSS scroll-snap (тач/трекпад бесплатно); активная карточка — через
   IntersectionObserver в JS (кросс-браузерно). scroll-state @container — прогрессивное усиление. */

.ls { position: relative; }

/* Лента: одна карточка на ширину, снап по центру, скроллбар скрыт (как .mra-pills).
   align-items:flex-start — карточки НЕ растягиваются до самой высокой (иначе короткая висит
   с пустотой под текстом длинной альтернативы); высоту слота под активную карточку ставит JS
   (updateHeight), transition:height плавно растит/ужимает блок при листании. */
.ls-viewport {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;          /* не красть вертикальный скролл / свайп-назад */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  transition: height 0.38s var(--ease-out);
}
.ls-viewport::-webkit-scrollbar { display: none; }

.ls-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;                /* не пролистывать сразу несколько */
  display: flex;                           /* карточка на всю ширину слайда (высота — по своему контенту) */
}

/* Листаемая карточка-альтернатива — выделенный люкс-блок (выбор заведения), фланкирован стрелками.
   Только внутри .ls (слоты с альтернативами); одиночные карточки без альтернатив остаются плоскими. */
.ls .ls-card {
  background:
    radial-gradient(120% 120% at 90% 0%, rgba(218, 41, 28, 0.05), transparent 58%),
    linear-gradient(165deg, var(--color-beige-light), var(--color-white));
  border: 1px solid var(--color-beige-dark);
  border-radius: var(--radius-md);
  padding: 14px 42px 24px;             /* боковые гуттеры — под стрелки, низ — под точки-пагинацию */
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.08);
  flex: 1;                             /* заполняет ширину слайда; высота — по своему контенту */
}

/* Стрелки — СЛЕВА и СПРАВА от карточки, по центру по вертикали (не бар под контентом). */
.ls-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-beige-dark); border-radius: 999px;
  background: var(--color-white); color: var(--color-black-soft); cursor: pointer;
  box-shadow: 0 3px 12px rgba(26, 26, 26, 0.12);
  transition: border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.ls-prev { left: 5px; }
.ls-next { right: 5px; }
.ls-nav svg { width: 17px; height: 17px; }
.ls-nav:hover { border-color: var(--color-red); color: var(--color-red); box-shadow: 0 5px 16px rgba(218, 41, 28, 0.20); }
.ls-nav:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }
.ls-nav[disabled] { opacity: 0; pointer-events: none; }   /* на краю стрелку прячем (не зацикливаем) */

/* Пагинация — точки по центру ВНИЗУ карточки (чётко часть блока, не «Что говорят»). */
.ls-dots {
  position: absolute; left: 0; right: 0; bottom: 9px; z-index: 2;
  display: flex; gap: 6px; justify-content: center; pointer-events: none;
}
.ls-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-beige-dark);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.ls-dot.is-active { background: var(--color-red); transform: scale(1.3); }

/* Намёк «можно листать»: лёгкое покачивание ленты влево (приоткрывает край следующей карточки) —
   привлекает к свайпу. Двойной мягкий замах. Под reduced-motion не проигрывается. */
@keyframes ls-nudge {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-20px); }
  32%  { transform: translateX(-3px); }
  49%  { transform: translateX(-15px); }
  66%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.ls-viewport.is-nudging { animation: ls-nudge 900ms var(--ease-out) 1; }

/* Узкий экран: стрелки остаются (решение владельца), но компактнее и ближе к краю —
   боковые гуттеры карточки ужаты 42→38px, больше ширины тексту. */
@media (max-width: 560px) {
  .ls-nav { width: 28px; height: 28px; }
  .ls-nav svg { width: 15px; height: 15px; }
  .ls-prev { left: 3px; }
  .ls-next { right: 3px; }
  .ls .ls-card { padding: 14px 38px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-viewport { scroll-behavior: auto; transition: none; }
  .ls-viewport.is-nudging { animation: none; }
}