/* ==========================================================================
   Главная — «Наша продукция» + карточка категории

   Макет: секция `Main Section` 1:292 (1840×1232), карточка `Product Card`
   1:304 (600×491; нижний ряд 523 — у него три ряда тегов). Зазор сетки 20.
   Карточка переиспользуется на страницах каталога и заглушки, поэтому
   её стили лежат здесь, а не внутри секции.
   ========================================================================== */

/* --- Шапка секции --------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-32);
  margin-bottom: 48px;
}

.section-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* В макете подзаголовок секции разбит на две строки шириной 540
   (нода 1:294) — из-за этого шапка секции ровно 150 px, а сетка
   начинается на 198. На всю ширину контейнера он лёг бы в одну
   строку, и вся секция уехала бы вверх на 34 px. */
.section-head__text .section-subtitle { max-width: 540px; }

/* Заголовок и подзаголовок по центру: зазор 24 (58 + 24 + 34 = 116,
   нода 1:469), а не общий 32 между текстом и кнопкой. */
.section-head--center {
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

/* --- Сетка карточек ------------------------------------------------------- */

/* Ряды в макете разной высоты: 491 у верхнего и 523 у нижнего (Frame 178 и
   Frame 179), зазор между ними ровно 20. Высоту задаёт число рядов тегов, а
   не сетка — поэтому здесь честные 20, а карточка тянется сама. */
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* --- Карточка категории --------------------------------------------------- */

.cat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* От инфо-блока до тегов в макете 32 (инфо кончается на 284, теги
     начинаются на 316 у всех карточек с двумя и более рядами тегов). */
  gap: var(--space-32);
  /* Не фиксированная высота, а минимальная: 491 — это карточка с одним рядом
     тегов, при трёх рядах макет вырастает до 523. Раньше стояло `height`, и
     разницу приходилось прятать зазором сетки в 52 вместо макетных 20. */
  min-height: 491px;
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
  overflow: hidden;
  transition: background var(--dur-card) var(--ease-out);
}

/* Наведение в макете сделано вариантом компонента: подложка карточки
   уходит в синий градиент, длительность 744 мс. */
.cat-card:hover { background: var(--color-blue-50); }

.cat-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
}

.cat-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  flex: 1 1 auto;
  min-width: 0;
}

.cat-card__title {
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-28);
}

.cat-card__media {
  position: relative;
  flex-shrink: 0;
  width: 252px;
  height: 252px;
}

/* В макете дизайнер вписывал каждое фото руками: `image 162` у шести
   карточек имеет размеры 385×168, 333×193, 300×300, 284×284, 252×252 и
   376×376 — то есть широкие кадры вылезают за бокс 252 влево, а квадратные
   в него помещаются. Повторяем это правилом, а не шестью размерами:

     max-height 100 %  — по высоте фото никогда не выходит за бокс. Раньше
                         стояло `width: 152.8%` при `height: auto`, и
                         вертикальный кадр раздувался до 385 в высоту,
                         накрывая собой заголовок и теги;
     max-width 152.8 % — предел ширины, те самые 385 из макета;
     right: 0          — переполнение уходит влево, как в макете (у всех
                         шести карточек x картинки отрицательный). */
/* Настоящие фото категорий (в отличие от прозрачных вырезок макета) при
   выезде на 152.8 % влево накрывали заголовок и «Подробнее». Теперь фото
   строго внутри бокса: вписываем по большей стороне, центрируем. */
.cat-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- Тег-пилюля ------------------------------------------------------------
   Макет: `Product Tag Container`, 342 инстанса. Белая заливка, синяя
   обводка 1 px, радиус 999, отступы 12/24. По наведению заливается синим
   (вариант компонента, 744 мс). */

.cat-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* По вертикали 11, а не 12: обводка в Figma рисуется внутрь, а в браузере
     добавляется снаружи. 11 + 29 строка + 11 + 2 рамки = 53 — ровно высота
     `Product Tag Container`. С 12 выходило 55, и три ряда тегов промахивались
     мимо макета на 6 px. */
  padding: 11px var(--space-24);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
  transition: background var(--dur-card) var(--ease-out),
              color var(--dur-card) var(--ease-out);
}

.tag-pill:hover,
.tag-pill.is-active {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/* --- Ниже 1920 px --------------------------------------------------------- */

@media (max-width: 1500px) {
  .products__grid { gap: var(--space-32) var(--space-24); }
  .cat-card { height: auto; min-height: 0; }
  .cat-card__media { width: 180px; height: 180px; }
  .tag-pill { font-size: var(--fs-20); padding: var(--space-8) var(--space-16); }
}

@media (max-width: 1100px) {
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; }
}

@media (max-width: 700px) {
  .products__grid { grid-template-columns: 1fr; }

  /* Кнопка в шапке секции («Отправить сертификацию» и подобные) на телефоне
     встаёт под текстом — прижатая к левому краю таблетка выглядит обрубком,
     растягиваем на всю ширину, как остальные кнопки мобильной версии. */
  .section-head > .cta-btn { width: 100%; }

  /* Карточка на телефоне: макетная шкала (заголовок 24, пилюли 20) делала
     каждую пилюлю во всю ширину — список тегов превращался в столбик
     кнопок. Шрифт и отступы на шаг меньше — пилюли встают по две в ряд,
     карточка ужимается по высоте, а не растёт. */
  .cat-card {
    gap: var(--space-16);
    padding: var(--space-24);
  }

  .cat-card__top { gap: var(--space-16); }
  .cat-card__text { gap: var(--space-12); }
  .cat-card__title { font-size: var(--fs-20); }

  .cat-card .link-more {
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    font-size: var(--fs-16);
  }

  .cat-card .link-more__icon,
  .cat-card .link-more__icon svg { width: 20px; height: 20px; }

  .cat-card__media { width: 110px; height: 110px; }

  .tag-pill {
    padding: var(--space-8) var(--space-12);
    font-size: var(--fs-14);
    white-space: nowrap;
  }

  /* Названия подкатегорий длинные: парами в ряд они не помещаются даже
     14-м кеглем, а столбик из шести пилюль вытягивает карточку. Лента
     с горизонтальной прокруткой держит всё в одной строке и не выходит
     за поля карточки. Подсказка «дальше есть ещё» — мягкое затухание
     ленты у края: main.js (initTagFades) вешает классы is-fade-* по
     положению прокрутки, у долистанного края затухание гаснет.
     Пробовали и перенос по строкам — столбик пилюль понравился меньше. */
  .cat-card__tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cat-card__tags::-webkit-scrollbar { display: none; }

  .cat-card__tags.is-fade-end {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }

  .cat-card__tags.is-fade-start {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
            mask-image: linear-gradient(90deg, transparent, #000 48px);
  }

  .cat-card__tags.is-fade-start.is-fade-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  }
}

/* --- Телефон: карточки во весь экран (см. пояснение в front-hero.css) ------ */
@media (max-width: 700px) {
  .cat-card {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
    padding-inline: var(--side-padding);
  }
}