/* ============================================================
   components.css — переиспользуемые UI-компоненты (_components.html.j2)
   Подключать ПОСЛЕ /css/style.css. Токены — var(--accent) и т.п.,
   fallback — палитра Monad (#f37a0a / #f6f3f1 / #27a367).
   ============================================================ */

.chips-block { margin: 0; }

/* ── Свайп-карточки: компактный горизонтальный показ текстовых блоков ── */
.swipe-cards {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 14px;
  margin: 0 -4px;
  scrollbar-width: thin;
}
.swipe-cards::-webkit-scrollbar { height: 6px; }
.swipe-cards::-webkit-scrollbar-thumb { background: var(--border, #e7e1da); border-radius: 100px; }

.swipe-card {
  position: relative;
  flex: 0 0 78%;
  max-width: 340px;
  scroll-snap-align: start;
  background: var(--panel-2, #f6f3f1);
  border: 1px solid var(--border, #e7e1da);
  border-radius: 16px;
  padding: 18px 20px;
  transition: border-color .15s ease;
}
.swipe-card:hover, .swipe-card:focus-within { border-color: var(--accent, #f37a0a); }

.swipe-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-bg, #fdeee2); color: var(--accent, #f37a0a);
  font: 700 13px/1 var(--f-mono, monospace); margin-bottom: 10px;
}
.swipe-card__title { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--txt, #242424); }
.swipe-card__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--txt-dim, #6b675f); }

/* Мобайл: карточка занимает почти весь экран (одна видна + край следующей — hint на свайп) */
@media (max-width: 390px) {
  .swipe-card { flex-basis: 86%; padding: 16px; }
}
/* Планшет: 2 карточки видны одновременно */
@media (min-width: 600px) {
  .swipe-card { flex-basis: 46%; }
}
/* Десктоп: фиксированная ширина карточки, остальное — скролл при необходимости */
@media (min-width: 768px) {
  .swipe-card { flex-basis: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-cards { scroll-behavior: auto; }
}