/*
  Сквозная карточка товара каталога (159:4599 и повторы). Используется в
  сетке /catalog/, компонент components/product-card.njk.
  Иконка круглой стрелки .icon--card-cta — общий сквозной компонент, её
  базовые цвета (круг = accent, стрелка = белая) заданы в
  solutions-slider.css (там же, где она впервые появилась) — здесь только
  hover-инверсия цветов, специфичная для этой карточки.
*/
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: 0 10px 30px rgba(15, 15, 20, 0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  /* Постоянный композиторский слой. Без него браузер поднимает карточку в
     отдельный слой на время анимации трансформы и сносит его по
     transitionend — содержимое перерастеризовывается уже в слое страницы,
     с другим округлением, и текст с кнопкой дёргаются на 1px ровно в
     момент окончания подъёма (одновременная анимация box-shadow гарантирует,
     что слой не считается непрозрачным). Пишется в базовое правило, не в
     :hover: слой и так создаётся на старте анимации, а сносится не тогда.
     Тот же дефект и то же лечение, что у карточки модели (model-card.css). */
  will-change: transform;
}

/* [hidden] через JS-фильтр (initCatalogFilter, main.js) — без этого правила
   proигрывает по порядку каскада с .product-card{display:flex} той же
   специфичности (правило автора после UA-стиля побеждает), и карточка
   продолжает отображаться несмотря на атрибут hidden. */
.product-card[hidden] {
  display: none;
}

.product-card:hover {
  box-shadow: 0 20px 45px rgba(15, 15, 20, 0.1);
  transform: translateY(-2px);
}

.product-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Паддинг только вертикальный: изображение (159:4609 — координаты
     полностью совпадают с рамкой карточки, без инсета) должно идти
     враспор по бокам, поэтому боковой паддинг задан отдельно на каждом
     текстовом элементе (title/excerpt/badge/cta), а не здесь. */
  padding: 30px 0;
  color: inherit;
}

/* Резерв высоты — на ОБЁРТКЕ .product-card__head целиком (не на title и
   excerpt по отдельности): заголовок/описание/плашка должны свободно
   «прилипать» друг к другу и сдвигаться как единый блок в зависимости от
   объёма своего текста (это нормально) — фиксировать нужно только
   ОБЩУЮ высоту этой группы, чтобы картинка и кнопка ниже не скакали.
   264px = реальный максимум в данных: заголовок 4 строки (128+14 margin)
   + описание 3 строки (60+20 margin) + плашка (~42 с margin-bottom). */
.product-card__head {
  min-height: 264px;
}

.product-card__title {
  margin: 0 0 14px;
  padding: 0 30px;
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-heading-dark);
  /* Длинные слова из будущей WP-админки ("автоматизированные",
     "фармацевтических" и т.п.) не должны вылезать за рамку карточки.
     Основной механизм переноса — точечный мягкий перенос (­) прямо в
     тексте контента (см. _data/catalog.json — "автоматизи­рованные"):
     он даёт полный контроль над МЕСТОМ переноса, в отличие от hyphens:
     auto, который на этой ширине карточки сам иногда вставляет ВТОРОЙ
     дефис в оставшемся фрагменте ("ав-томатизиро-ван-ные" вместо одного
     "автоматизи-рованные") — поэтому hyphens здесь сознательно не задан.
     overflow-wrap:break-word — только safety-net на случай, если редактор
     впишет новый длинный заголовок БЕЗ ручного мягкого переноса: для
     текущего текста ничего не меняет (перенос уже случается по ­ раньше,
     остаток и так помещается), а для будущих слов без ­ не даёт им
     физически вылезти за карточку (без hyphens:auto — двойного дефиса
     тоже не будет, break-word не вставляет свой дефис, просто рвёт
     строку). */
  overflow-wrap: break-word;
}

.product-card__excerpt {
  margin: 0 0 20px;
  padding: 0 30px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-heading-mid);
}

/* display:inline-block вместо align-self:flex-start — плашка теперь
   лежит внутри блочной обёртки .product-card__head (не прямого flex-child
   .product-card__link, как раньше), align-self там ни на что не влияет,
   а <p> по умолчанию блочный и растягивался на всю ширину карточки. */
.product-card__badge {
  display: inline-block;
  margin: 0 0 10px 30px;
  padding: 8px 12px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--color-surface);
  white-space: nowrap;
}

.product-card__image {
  /* position — под ::after ниже; на раскладку flex-колонки не влияет. */
  position: relative;
  /* Без отступа — в Figma (159:4609/159:4610) кнопка «Подробнее» стоит
     вплотную к низу фото (0px, не 20px), карточка была на 20px выше цели. */
  aspect-ratio: 315 / 250;
}

/* Фейд фото в фон карточки сверху и снизу — тот же приём и те же цвета,
   что у .model-card__media::after. Старые товары его не заметят: их файлы
   в этой зоне уже #fdfdfd, замерено. */
.product-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--color-surface) 0.85%, transparent 14%),
    linear-gradient(to top, var(--color-surface) 0.72%, transparent 18%);
}

.product-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto 30px 0;
  height: 65px;
  padding: 0 20px 0 30px;
  border: 1px solid var(--color-slider-pill-border);
  border-radius: var(--radius-pill);
  transition: border-color 0.35s ease;
}

/* Ховер (правки 2026-08-05, п.5): заливка пилюли и цвет текста не меняются
   вообще, обводка светло-серая → чуть темнее, а эллипс со стрелкой растёт
   на 15% от центра и доворачивается на 45° вправо. Всё за 0,35 с. */
.product-card:hover .product-card__cta {
  border-color: var(--color-slider-pill-border-hover);
}

.product-card__cta-label {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.product-card__cta .icon--card-cta {
  width: 25px;
  height: 25px;
  transition: transform 0.35s ease;
}

/* rotate(45deg) — иконка рисует стрелку вверх-вправо (↗), поворот по часовой
   доводит её до горизонтальной (→). Крутится весь SVG, а не только путь
   стрелки: круг вписан в вьюбокс ровно по центру и при повороте вокруг
   центра визуально не меняется. */
.product-card:hover .product-card__cta .icon--card-cta {
  transform: scale(1.15) rotate(45deg);
}

/*
  Мобильная адаптация (600px,
  база 390px). Ширину карточки (330px) отдельно не задаём — сетка уже
  1 колонка (catalog.css), карточка растягивается на всю доступную
  ширину, которая сама выходит 330px за счёт 30px-инсета .catalog-layout.
  .product-card__head{min-height:264px} — десктопный резерв высоты нужен
  только для выравнивания карточек по рядам многоколоночной сетки; в
  одну колонку это не требуется, убираем (auto — ближе к wp-readiness).
*/
@media (max-width: 599.98px) {
  .product-card__head {
    min-height: auto;
  }

  .product-card__title {
    padding: 0 min(30px, calc(30 / 390 * 100vw));
    margin-bottom: min(10px, calc(10 / 390 * 100vw));
    font-size: min(20px, calc(20 / 390 * 100vw));
    line-height: min(32px, calc(32 / 390 * 100vw));
  }

  .product-card__excerpt {
    padding: 0 min(30px, calc(30 / 390 * 100vw));
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(20px, calc(20 / 390 * 100vw));
  }

  .product-card__badge {
    margin: 0 0 min(10px, calc(10 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
  }

  .product-card__cta {
    margin: auto min(30px, calc(30 / 390 * 100vw)) 0;
    height: min(65px, calc(65 / 390 * 100vw));
    padding: 0 min(20px, calc(20 / 390 * 100vw)) 0 min(30px, calc(30 / 390 * 100vw));
  }
}