/* ==========================================================================
   Карточка товара
   Одна и та же карточка в подразделе каталога, в результатах поиска
   и в подборках на карточке товара, поэтому вынесена отдельным файлом.

   Figma: 125:1782 — десктоп 312 × 424
          287:4073 — то же в ряду каталога
          125:1783 — состояние наведения (тень + подчёркнутое «Подробнее»)
          275:6087 — мобильный 168 × 284

   WP: template-parts/blocks/product-card.php
   ========================================================================== */

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 16px;
    border: 1px solid var(--c-grey-300);
    background-color: #ffffff;
    transition: box-shadow var(--transition);
}

.product-card:hover {
    box-shadow: 0 12px 40px rgba(25, 25, 25, 0.12);
}

/* --------------------------------------------------------------------------
   Фотография
   Соотношение 3:2 задано макетом: 312 × 208. Снимок в макете уже с полями,
   поэтому он не растягивается на всю плашку, а стоит по центру
   -------------------------------------------------------------------------- */

/* Пропорция взята из макета как есть: 310 × 208. Ровно 3:2 там не выходит,
   а на промежуточных ширинах плашка должна ужиматься вместе с карточкой,
   иначе банка тонет в сером поле */
.product-card__media {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 310 / 208;
}

/* Обрезка вынесена во вложенный слой: теги свисают ниже плашки
   и обрезаться не должны */
.product-card__media-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--c-grey-200);
}

.product-card__media-inner img {
    position: absolute;
    top: 4.6%;
    left: 16.45%;
    width: 67.1%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: top center;
}

/* Теги лежат на нижнем крае фотографии и на 12px свисают под него.
   Раскладку ряда даёт общий класс .tags */
.product-card__tags {
    position: absolute;
    bottom: -12px;
    left: 16px;
    z-index: 1;
}

/* В этой карточке плашки темнее общих — Grey 300 вместо Grey 200:
   под ними лежит серая подложка фотографии */
.product-card__tags .tag {
    background-color: var(--c-grey-300);
}

/* --------------------------------------------------------------------------
   Текст
   -------------------------------------------------------------------------- */

/* gap 24px — тот самый зазор, который в макете остаётся между текстом
   и ссылкой; space-between прижимает ссылку к низу, когда в ряду
   попадается карточка выше */
.product-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px;
}

/* 130px из макета: столько занимает самая длинная карточка ряда —
   с заголовком в две строки и свойствами в две. Ниже этой высоты
   текстовый блок не сжимается, поэтому все карточки одинаковые */
.product-card__top {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 130px;
}

.product-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    overflow-wrap: break-word;
    color: var(--c-grey-800);
}

/* Свойства через косую черту: тип поверхности / основа / объём */
.product-card__props {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
}

/* Разделитель приклеен к предыдущему свойству, а не к следующему:
   в макете при переносе косая черта остаётся в конце строки */
.product-card__props li:not(:last-child)::after {
    content: "/";
    margin-left: 4px;
}

/* Описание обрезано двумя строками — так в макете */
.product-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

/* Ссылка общая (.link-arrow--sm), подчёркивание в макете появляется
   при наведении на всю карточку, а не только на саму ссылку */
.product-card:hover .link-arrow {
    text-decoration: underline;
}

/* Ссылка растянута на всю карточку: кликается любая её часть */
.product-card__link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* --------------------------------------------------------------------------
   Мобильная версия — 168 × 284
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .product-card {
        gap: 16px;
    }

    /* мобильная плашка в макете 166 × 112 */
    .product-card__media {
        aspect-ratio: 166 / 112;
    }

    .product-card__tags {
        bottom: -9px;
        left: 8px;
    }

    .product-card__tags .tag {
        height: 20px;
        padding: 0 4px;
        font-size: 12px;
    }

    .product-card__body {
        justify-content: flex-start;
        gap: 8px;
        padding: 0 8px;
    }

    .product-card__top {
        min-height: 0;
    }

    .product-card__title {
        font-size: 14px;
    }

    .product-card__props {
        gap: 2px 4px;
        font-size: 12px;
    }

    /* на мобильном описание занимает три строки по 1.2 */
    .product-card__desc {
        -webkit-line-clamp: 3;
        font-size: 12px;
        line-height: 1.2;
    }

    .product-card .link-arrow--sm {
        font-size: 12px;
    }

    .product-card .link-arrow--sm img {
        width: 16px;
        height: 16px;
    }

    /* --------------------------------------------------------------------
       Сжатая карточка — лента «Похожие товары» на карточке товара
       Figma: 278:7163 — без рамки, полей, описания и ссылки
       -------------------------------------------------------------------- */

    .product-card--compact {
        padding-bottom: 0;
        border: 0;
    }

    .product-card--compact:hover {
        box-shadow: none;
    }

    /* Рамки у этой карточки нет, поэтому кадр занимает всю её ширину:
       168 × 112 против 166 × 112 у карточки в рамке */
    .product-card--compact .product-card__media {
        aspect-ratio: 3 / 2;
    }

    .product-card--compact .product-card__body {
        gap: 0;
        padding: 0;
    }

    .product-card--compact .product-card__top {
        min-height: 0;
    }

    .product-card--compact .product-card__tags {
        bottom: -10px;
        left: 0;
    }

    .product-card--compact .product-card__desc,
    .product-card--compact .link-arrow {
        display: none;
    }
}