/**
 * carousel-lazy.css — скелетоны ленивых каруселей главной sferacar.ru.
 *
 * Подключение ТОЛЬКО на главной sferacar.ru, после custom.css:
 *   <link href="/netcat_template/template/sferacar/css/carousel-lazy.css?v=1" rel="stylesheet">
 *
 * Все селекторы начинаются с [data-lazy-pages] — на других сайтах и блоках
 * без этого атрибута стили не применяются вообще.
 * После AJAX-подмены классы скелетона (`sf-lazy-ph`, `card--skeleton`) снимаются.
 */

/* Плейсхолдер занимает место карточки 1:1, чтобы не было CLS. */
[data-lazy-pages] .sf-lazy-ph {
  pointer-events: none;
}

/* Сам .item-плейсхолдер выглядит как карточка-скелетон (внутренней начинки нет). */
[data-lazy-pages] .item.card--skeleton {
  min-height: 420px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(100deg, #e3e8ef 40%, #eef2f7 50%, #e3e8ef 60%);
  background-size: 200% 100%;
  animation: sf-sk-pulse 1.4s ease-in-out infinite;
}

@keyframes sf-sk-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Уважаем reduced motion: статичная плашка вместо пульса. */
@media (prefers-reduced-motion: reduce) {
  [data-lazy-pages] .item.card--skeleton {
    animation: none;
    background: #e3e8ef;
  }
}

/* Скелетон статей: .item-плейсхолдер компактнее карточки авто (~превью). */
[data-lazy-pages] .item.card--skeleton.sf-lazy-ph--preview {
  min-height: 220px;
}