/* =====================================================================================================================
   АДАПТИВ — ОБЩЕЕ (владелец 2026-10-20). Три ширины: компьютер — основные стили сайта; планшет — ≤1199px (макеты 1024);
   телефон — ≤767px (макеты 390). В css/adaptive/*.css только эти два @media, в остальных CSS-файлах @media по ширине нет.
   Макеты каждого блока: «D:\YandexDisk\w2w\svn_new\ServicePomnivsegda\Дизайн блоков сайта\…\Б-NNN …\»
   (планшет-1024.jpg, телефон-390.jpg, структура.txt).

   Ленты «листать вбок»:
     .m-swipe — лента только на телефоне (1 карточка 316px + край следующей ~46px, как в макетах); на планшете и компьютере — как в основных стилях.
     .t-swipe — лента на планшете (--t-cards карточек, по умолчанию 2, + край следующей ≈ 2,15 карточки, как в макетах — --t-peek 126px) и на телефоне (1 + край).
     data-dots — точки под лентой (site.js: pvSwipeDots), видны, только когда лента прокручивается.
     --swipe-bleed — отступ родителя, если он не 28px (планшет) / 16px (телефон): лента выходит в поля до краёв экрана.
   ===================================================================================================================== */

/* Видимость по ширине — для элементов, добавленных в разметку ради планшета/телефона (и наоборот):
   .only-tm — только планшет и телефон; .only-m — только телефон; .hide-tm — скрыть на планшете и телефоне;
   .hide-m — скрыть на телефоне. Элемент с .only-* на компьютере не показывается вовсе (.only-m — и на планшете). */
.swipe-dots,
.only-tm,
.only-m { display: none; }   /* показ — revert ниже; свой display (flex/grid) задавай в своём файле: класс блока сильнее */

@media (max-width: 1199px) {
  .only-tm { display: revert; }
  .hide-tm { display: none !important; }
  .container { padding: 0 28px; }

  .t-swipe.t-swipe {
    --swipe-gap: 16px;
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: var(--swipe-gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--swipe-bleed, 28px));
    margin-right: calc(-1 * var(--swipe-bleed, 28px));
    padding: 4px var(--swipe-bleed, 28px) 10px;
    scroll-padding-inline: var(--swipe-bleed, 28px);
  }
  .t-swipe.t-swipe::-webkit-scrollbar { display: none; }
  .t-swipe.t-swipe > * {
    flex: 0 0 calc((100% - (var(--t-cards, 2) - 1) * var(--swipe-gap) - var(--t-peek, 126px)) / var(--t-cards, 2));
    width: auto;
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
  }

  .has-dots { margin-bottom: 0 !important; }   /* отступ ленты перенесён под точки (site.js) */
  .swipe-dots.is-on {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }
  .swipe-dots span {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--line, #d9dcd4);
    transition: width .2s, background-color .2s;
  }
  .swipe-dots span.is-active {
    width: 18px;
    background: var(--green-700, #1f6b36);
  }
}

@media (max-width: 767px) {
  .only-m { display: revert; }
  .hide-m { display: none !important; }
  .container { padding: 0 16px; }

  .m-swipe.m-swipe,
  .t-swipe.t-swipe {
    --swipe-gap: 12px;
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: var(--swipe-gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--swipe-bleed, 16px));
    margin-right: calc(-1 * var(--swipe-bleed, 16px));
    padding: 4px var(--swipe-bleed, 16px) 10px;
    scroll-padding-inline: var(--swipe-bleed, 16px);
  }
  .m-swipe.m-swipe::-webkit-scrollbar { display: none; }
  /* 1 карточка + край следующей — как в наборе макетов (kit/base.css .strip): карточка = ширина контента − 2 поля
     − 10px (316px при 390), от следующей видно ~46px. */
  .m-swipe.m-swipe > *,
  .t-swipe.t-swipe > * {
    flex: 0 0 calc(100% - 2 * var(--swipe-bleed, 16px) - 10px);
    width: auto;
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-dots span { transition: none; }
}

.swipe-dots.is-compact { align-items:center; flex-wrap:nowrap; }
.swipe-dots span.swipe-dots__counter { width:auto; height:auto; flex:none; border-radius:0; background:none; opacity:1; margin-left:8px; font-size:12px; line-height:18px; color:var(--muted,#657267); font-variant-numeric:tabular-nums; }