/* _shared/widget-carousel.css — reusable swipeable widget carousel.
   Side arrows INSIDE the viewport (left/right), dot indicators BELOW, slide+fade
   animation. Two modes:
     .wcar--always  — carousel at every width (home dashboard cells)
     .wcar--mobile  — carousel only <1024px; on desktop becomes a plain vertical
                      stack (page asides: one swipe-cell on phone, stacked on PC). */

.wcar { position: relative; display: flex; flex-direction: column; }
.wcar__vp { overflow: hidden; border-radius: var(--r-card); flex: 1 1 auto; }
.wcar__track {
  display: flex; height: 100%; will-change: transform;
  transition: transform .55s cubic-bezier(.4, 1.25, .55, 1);   /* springy slide */
}
.wcar__slide { flex: 0 0 100%; min-width: 100%; display: flex; }
.wcar__slide > * { margin: 0 !important; width: 100%; }
/* content of the active slide rises + fades in — the lively bit */
.wcar__slide.is-active > * { animation: wcarIn .5s var(--ease-ui, ease) both; }
@keyframes wcarIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.985); }
  100% { opacity: 1; transform: none; }
}

/* side arrows — bare chevrons inside the slot (no circle, so content isn't hidden) */
.wcar__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 24px; height: 44px; padding: 0; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  color: var(--ink-faint); font: 400 28px/1 var(--font-body); cursor: pointer;
  opacity: .5; transition: opacity .15s, color .15s, transform .12s;
}
.wcar__arrow:hover { opacity: 1; color: var(--accent); }
.wcar__arrow:active { transform: translateY(-50%) scale(.82); }
.wcar__arrow--prev { left: 1px; }
.wcar__arrow--next { right: 1px; }

/* dot indicators — below (robust against the LK's global button min-height).
   Кнопка 44×44 (зона нажатия), видимая точка — ::before; отрицательные поля сжимают шаг
   до 26px, чтобы точки не «разъезжались» (владелец: «точки далеко друг от друга»). */
.wcar__dots { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 4px; line-height: 0; }
.wcar__dot { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0 -9px;
  border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
  flex: 0 0 auto; display: grid; place-items: center; line-height: 0; position: relative; }
.wcar__dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 99px; background: var(--ink-faint, var(--hair));
  transition: background .2s var(--ease-ui), width .2s var(--ease-ui), opacity .2s var(--ease-ui);
}
.wcar__dot.is-active::before { background: var(--accent); width: 20px; }
.wcar__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -10px; border-radius: 99px; }

/* phone/tablet: стрелки компактные у краёв (владелец: «пропали стрелки» — остаются);
   точки главной (.wcar--always) лежат ПОВЕРХ нижнего поля карточки (04.09): полоса 44px
   не добавляет высоты, расстояние между виджетами = gap сетки. Видимая точка — 8px выше
   нижней кромки карточки; зона нажатия 44×44 сохранена, отрицательные поля держат шаг 26px. */
@media (max-width: 1023px) {
  .wcar__arrow { width: 34px; height: 44px; opacity: .6; font-size: 26px; }
  .wcar__arrow--prev { left: 0; } .wcar__arrow--next { right: 0; }
  .wcar--always[data-count]:not([data-count="1"]) .wcar__slide > * { padding-inline: 30px !important; }
  .wcar__dots { margin-top: 0; }
  .wcar--always .wcar__dots { position: absolute; left: 0; right: 0; bottom: -14px; height: 44px; margin: 0; z-index: 4; pointer-events: none; }
  .wcar--always .wcar__dot { pointer-events: auto; }
  .wcar__dot::before { opacity: .45; }
  .wcar__dot.is-active::before { opacity: 1; }
  /* на тёмной/акцентной карточке точки светлые (иначе кобальт на кобальте не виден) */
  .wcar--always:has(.wcar__slide.is-active > .widget--accent) .wcar__dot::before,
  .wcar--always:has(.wcar__slide.is-active > .widget--dark) .wcar__dot::before { background: rgba(251, 249, 244, .6); }
  .wcar--always:has(.wcar__slide.is-active > .widget--accent) .wcar__dot.is-active::before,
  .wcar--always:has(.wcar__slide.is-active > .widget--dark) .wcar__dot.is-active::before { background: #FBF9F4; }
}

/* single widget — no controls */
.wcar[data-count="1"] .wcar__arrow,
.wcar[data-count="1"] .wcar__dots { display: none; }
.wcar[data-count="1"] .wcar__slide { opacity: 1; transform: none; }

/* mobile-only carousels collapse to a plain vertical stack on desktop */
@media (min-width: 1024px) {
  .wcar--mobile { display: block; }
  .wcar--mobile .wcar__vp { overflow: visible; flex: none; }
  .wcar--mobile .wcar__track { display: block; height: auto; transform: none !important; }
  .wcar--mobile .wcar__slide { min-width: 0; display: block; opacity: 1; transform: none; margin-bottom: 16px; }
  .wcar--mobile .wcar__slide:last-child { margin-bottom: 0; }
  .wcar--mobile .wcar__slide > * { width: auto; }
  .wcar--mobile .wcar__slide.is-active > * { animation: none; }
  .wcar--mobile .wcar__arrow,
  .wcar--mobile .wcar__dots { display: none; }
}