/* ============================================================
   КАТАЛОГ ПЛИТКАМИ — ОБЩАЯ КАРТОЧКА

   Решение заказчика от 03.09.2026, вторая редакция: каталоги должны
   быть ПОХОЖИ на блок услуг главной, а не уходить от него. Первая
   попытка (линии на 1С, цветная заливка на маркетплейсах) отличалась
   слишком сильно и с главной не рифмовалась.

   Поэтому здесь ровно язык `.svc__card`: белая поверхность, тот же
   радиус, та же тень, тот же подъём при наведении. Отличается у каждой
   страницы ОДНА вещь, и она в своём файле cat-t*.css:

     1С          — знак в углу карточки, номер бейджем в рамке
     маркетплейсы— асимметричная сетка: первая карточка на две доли
     MAX         — крупное скругление, знак в строке с номером
     скрипты     — две широкие колонки, черта между шапкой и составом
     сайты       — бенто: две крупные плитки и четыре мелкие

   Так страницы читаются одной семьёй, но ни одна не выглядит копией
   соседней. Типографика каталога общая и лежит в c1-catalog.css.
   ============================================================ */
.c1cat{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.1vw, 20px);
}

.c1cat__row{
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:clamp(10px, .9vw, 14px);
  padding:clamp(18px, 1.5vw, 28px);
  background:var(--surface);
  border-radius:var(--r-card);
  /* Как на главной: карточка держится одной тенью, обводки нет.
     Обводка с тенью вместе давали лишний контур на белом. */
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.c1cat__row:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
}

/* Текст лежит выше знака и не даёт ему себя перекрыть — то же правило,
   что у карточек услуг на главной.

   ВАЖНО: строка номера (.c1cat__mark) из этого правила исключена и
   остаётся static. Иначе она становится позиционированной, и знак,
   который лежит внутри неё, считает свои top/bottom ОТ НЕЁ, а не от
   карточки. Поймано 03.09 на маркетплейсах: знак просили в нижний
   угол карточки, а он вставал под строкой номера — на 470px выше дна.
   Поэтому поднимаем не саму строку, а её содержимое. */
.c1cat__body,
.c1cat__side,
.c1cat__num{ position:relative; z-index:1; }
.c1cat__mark{ position:static; }

/* Знак по умолчанию идёт строкой с номером. Страницы, где он уезжает
   в угол, переопределяют это у себя. */
.c1cat__mark{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(10px, 1vw, 16px);
}
.c1cat__art{ width:84px; max-width:84px; flex:0 0 auto; }

.c1cat__sub{ margin-bottom:0; }
.c1cat__list{ gap:.5em; }
.c1cat__list li{ font-size:clamp(13px, .92vw, 14.5px); }

@media (max-width: 1000px){
  .c1cat{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .c1cat{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .c1cat__row{ transition:none; }
  .c1cat__row:hover{ transform:none; }
}