/* ==========================================================================
   Единые карточки товаров на главной странице (десктоп)
   Заменяют старую систему, где у каждой карточки был свой уникальный CSS-блок
   (свой фон, своя высота, свои цвета и позиционирование).
   Теперь один компонент .home-card с двумя модификаторами по фону:
   --white и --blue, чередующимися по очереди.
   ========================================================================== */

.home-card {
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.home-card--white {
    background-color: #fff;
    background-image: url(../main-images/bg-white.jpg);
}

.home-card--blue {
    background-color: #1a6e73;
    background-image: url(../main-images/bg-blue.jpg);
}

.home-card .container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 72px;
    /* поменьше, чем раньше — иначе у широких/квадратных фото (ЛОР-комбайн
       и т.п.), упирающихся в ширину колонки, сверху остаётся лишний воздух */
    min-height: 500px;
    padding: 0 15px;
}

/* Шахматный порядок по цвету фона: синий — фото слева, текст справа;
   белый — текст слева, фото справа. Разметка (текст затем фото) одна и та же,
   меняется только визуальный порядок флекс-элементов. */
.home-card--blue .container {
    flex-direction: row-reverse;
}

/* ---------- текстовая часть ---------- */

.home-card__text {
    /* фиксированная ширина колонки — раньше пробовал "резиновую" ширину
       по содержимому заголовка, но из-за этого на карточках с коротким
       текстом фото-колонка (flex:1) раздувалась почти на всю карточку и
       смотрелась непропорционально огромной. Фикс. ширина держит фото и
       текст в одной и той же пропорции на всех карточках. */
    flex: 0 0 460px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
}

.home-card .block-title {
    /* размер подобран так, чтобы обычные (2-3 слова) заголовки помещались
       в 460px колонку в одну строку без переноса */
    font: 44px/1.2 'Roboto Light', sans-serif;
    margin: 0 0 22px;
    white-space: nowrap;
}
/* Заголовки-исключения, которые даже в одну строку не влезают в разумную
   ширину при обычном размере (составные "Отоскоп/Офтальмоскоп + Stern …") —
   уменьшенный кегль, тот же принцип "всегда одна строка". */
.home-card .block-title--compact {
    font-size: 30px;
}

/* Фирменный цвет сайта — #66c6ba, используется в заголовках и ссылках
   на светлых фонах по всему сайту, здесь та же логика. */
.home-card--white .block-title { color: #66c6ba; }
.home-card--white .block-title .thin { color: #4e4e4e; }

.home-card--blue .block-title { color: #fff; }
.home-card--blue .block-title .thin { color: rgba(255,255,255,.65); }

.home-card .item-description,
.home-card .item-description p,
.home-card .item-description div,
.home-card .item-description a,
.home-card .item-description small {
    font-family: 'Roboto Regular', sans-serif;
}
.home-card .item-description {
    font-size: 16px;
    line-height: 1.6;
}

.home-card .item-description p {
    margin: 0 0 14px;
}

.home-card--white .item-description { color: #5b6266; }
.home-card--blue .item-description { color: rgba(255,255,255,.92); }

.home-card--white .item-description a { color: #66c6ba; text-decoration: underline; }
.home-card--white .item-description a:hover { text-decoration: none; }
.home-card--blue .item-description a { color: #fff; text-decoration: underline; }
.home-card--blue .item-description a:hover { text-decoration: none; }

/* совместный проект — партнёрский логотип */
.home-card__partner {
    margin: 4px 0 16px;
}
.home-card__partner b {
    display: block;
    margin-bottom: 8px;
    font-family: 'Roboto Bold', sans-serif;
    font-weight: normal;
}
.home-card__partner img {
    display: block;
    max-width: 180px;
    height: auto;
}

/* патенты / сертификаты мелким шрифтом */
.home-card__patents {
    font-family: 'Roboto Regular', sans-serif;
    font-size: 13px;
    line-height: 1.8;
}
.home-card--white .home-card__patents { color: #8a9296; }
.home-card--blue .home-card__patents { color: rgba(255,255,255,.7); }

/* ---------- кнопка "Подробнее" ---------- */

.home-card .item-more {
    margin-top: 26px;
}
.home-card .item-more .description-more-link {
    font-family: 'Roboto Medium', sans-serif;
    font-size: 16px;
}
.home-card--white .item-more .description-more-link { color: #66c6ba; }
.home-card--white .item-more .description-more-link:after,
.home-card--white .item-more .description-more-link:before { border-color: #66c6ba; }

.home-card--blue .item-more .description-more-link { color: #fff; }
.home-card--blue .item-more .description-more-link:after,
.home-card--blue .item-more .description-more-link:before { border-color: #fff; }

/* ---------- изображение товара ---------- */

.home-card__media {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    /* фото центрируется в своей колонке по горизонтали. Раньше пробовал
       прижимать к внешнему краю (к краю страницы) — но у узких/высоких фото
       (рециркулятор и т.п., которые не заполняют колонку по ширине) это
       давало большой пустой разрыв между фото и текстом, а у широких фото
       (ЛОР-комбайн и т.п.) вплотную к тексту — разные фото выглядели
       по-разному расположенными. Центр — одинаковое, предсказуемое
       расстояние от текста независимо от пропорций конкретного фото. */
    --media-x: center;
    /* высота = высоте всей карточки (align-items: stretch у .container) */
    align-self: stretch;
    /* вертикальный "якорь" фото и отступы сверху/снизу — по умолчанию
       прижато к низу блока с маленьким отступом сверху (большинство фото
       аппаратов обрезаны снизу по ручке/подставке). Меняется модификаторами
       ниже. Отступы заданы переменными и применяются НЕ через padding
       (padding у позиционированного предка игнорируется абсолютно
       спозиционированным потомком — это padding-box, он "прозрачен" для
       inset), а напрямую через top/bottom на самой картинке. */
    --media-y: bottom;
    --media-pad-t: 16px;
    --media-pad-b: 0px;
}

/* Модификаторы вертикального положения фото — вешаются на .home-card__media
   рядом с фото конкретного товара, когда фото не подходит паттерн "снизу"
   (по умолчанию). Так новый товар просто получает нужный класс, без новых
   правил CSS:
     (нет класса)                    — прижато к НИЗУ, маленький отступ сверху
                                        (фото обрезаны снизу — большинство)
     .home-card__media--top          — прижато к ВЕРХУ, маленький отступ снизу
                                        (фото обрезаны сверху)
     .home-card__media--edge         — без отступов вообще, во всю высоту блока
                                        (фото обрезаны И сверху, И снизу)
     .home-card__media--center       — по центру, небольшие равные отступы
                                        (фото "плавающее", без обрезки)
     .home-card__media--center-loose — по центру, отступы побольше */
.home-card__media--top {
    --media-y: top;
    --media-pad-t: 0px;
    --media-pad-b: 16px;
}
.home-card__media--edge {
    /* --media-y:center тут важен — если фото чуть не той пропорции, что
       коробка, у object-fit:contain всё равно остаётся небольшой запас по
       одной из осей; center делит его пополам (немного сверху, немного
       снизу), а не отдаёт целиком верху, как было бы с --media-y:bottom */
    --media-y: center;
    --media-pad-t: 0px;
    --media-pad-b: 0px;
}
.home-card__media--center {
    --media-y: center;
    --media-pad-t: 24px;
    --media-pad-b: 24px;
}
.home-card__media--center-loose {
    --media-y: center;
    --media-pad-t: 56px;
    --media-pad-b: 56px;
}

/* Фото товара не должно перехватывать клик на себя — вся карточка
   кликабельна через .cover-link (см. .product-block в styles.css),
   и клик по картинке обязан "провалиться" до этой ссылки. */
.product-block .container .home-card__media,
.product-block .container .home-card__media img {
    pointer-events: none;
}
.home-card__media img {
    /* абсолютное позиционирование внутри .home-card__media вместо
       max-height:100% через несколько уровней flex — так размер картинки
       гарантированно не может вылезти за рамки блока ни при каких
       пропорциях фото (contain всегда вписывает целиком).
       ВАЖНО: width/height обязаны быть заданы явно (100% / calc), а не
       "auto" — у img (замещаемый элемент) с position:absolute и auto
       шириной/высотой браузер откатывается на НАТУРАЛЬНЫЙ пиксельный
       размер файла (у нас это 2000-4900px), полностью игнорируя рамки
       блока — именно это и давало "супер-зум" и вылезание за низ карточки.
       top/height через calc — переменные отступов модификатора (см. выше). */
    position: absolute;
    left: 0;
    top: var(--media-pad-t);
    width: 100%;
    height: calc(100% - var(--media-pad-t) - var(--media-pad-b));
    object-fit: contain;
    object-position: var(--media-x) var(--media-y);
    filter: drop-shadow(0 25px 30px rgba(0,0,0,.18));
}

/* ==========================================================================
   МОБИЛЬНАЯ СЕТКА (≤860px)
   Те же самые 18 .home-card, без единой правки разметки — просто на мобильном
   они складываются в сетку 2×N (обёртка .home-card-grid в index.html, на
   десктопе у неё нет своего CSS вообще, там всё как было). Показываем только
   фото и название, без описания/патентов/кнопки — по решению держать плитку
   компактной. Новый товар в сетку просто попадает сам, отдельно ничего
   добавлять не нужно.
   ========================================================================== */
@media (max-width: 860px) {

    .home-card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 15px 30px;
    }

    .home-card {
        /* декоративный полноширинный фон (сетка узлов) на маленькой плитке
           смотрится мусором — оставляем только плоский цвет */
        background-image: none;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(0,0,0,.08);
    }

    /* Шахматный порядок цветов в сетке 2×N.
       У каждой карточки уже есть свой цвет (--white/--blue), назначенный
       для десктопного чередования по вертикали — но в 2-колоночной сетке
       это раскладывается по столбцам (нечётные карточки в колонку 1,
       чётные — в колонку 2), то есть получаются сплошные вертикальные
       полосы, а не шахматка. Поэтому здесь цвет плитки переопределяется
       по её позиции в сетке (период 4: A,B,B,A,A,B,B,A…), а не по
       исходному классу карточки — вместе с цветом заголовка, чтобы текст
       не оказался того же цвета, что и фон. */
    .home-card-grid .home-card:nth-child(4n+1),
    .home-card-grid .home-card:nth-child(4n) {
        background-color: #fff;
    }
    .home-card-grid .home-card:nth-child(4n+1) .block-title,
    .home-card-grid .home-card:nth-child(4n) .block-title {
        color: #66c6ba;
    }
    .home-card-grid .home-card:nth-child(4n+1) .block-title .thin,
    .home-card-grid .home-card:nth-child(4n) .block-title .thin {
        color: #4e4e4e;
    }
    .home-card-grid .home-card:nth-child(4n+2),
    .home-card-grid .home-card:nth-child(4n+3) {
        background-color: #1a6e73;
    }
    .home-card-grid .home-card:nth-child(4n+2) .block-title,
    .home-card-grid .home-card:nth-child(4n+3) .block-title {
        color: #fff;
    }
    .home-card-grid .home-card:nth-child(4n+2) .block-title .thin,
    .home-card-grid .home-card:nth-child(4n+3) .block-title .thin {
        color: rgba(255,255,255,.65);
    }

    .home-card .container {
        display: flex;
        flex-direction: column;
        min-height: 0;
        gap: 0;
        padding: 0;
    }

    /* фото — квадратная плитка сверху, всегда первым визуально, даже если
       в разметке текст стоит перед фото (десктопная шахматка) */
    .home-card__media {
        order: -1;
        flex: none;
        align-self: auto;
        width: 100%;
        aspect-ratio: 1 / 1;
        /* на маленькой квадратной плитке индивидуальные десктопные отступы
           (--top/--edge/--center/--center-loose, заточенные под высокий
           блок) не нужны — везде одинаковый небольшой отступ и центр */
        --media-pad-t: 8px;
        --media-pad-b: 8px;
        --media-y: center;
    }

    .home-card__text {
        flex: none;
        max-width: none;
        display: block;
        padding: 6px 10px 14px;
    }

    .home-card .block-title {
        font-size: 14px;
        line-height: 1.25;
        white-space: normal;
        margin: 0;
        text-align: center;
    }

    /* «фото и название и всё» — описание, патенты, партнёрский лого и
       кнопку "Подробнее" на плитке не показываем (вся плитка кликабельна
       через .cover-link, отдельная кнопка не нужна) */
    .home-card .item-description,
    .home-card .item-more {
        display: none;
    }
}