/* Карточки «Полезная информация»: cover на squarish-файлах срезает каски/головы. */

.useful-card__image {
    overflow: hidden;
    border-radius: 8px;
}

/* Слайды на всю ширину вьюпорта слайдера; без ложного gap в transform. */
.useful-block__slider-wrapper {
    gap: 0;
}

.useful-block__slider-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.useful-block__slider-slide[hidden] {
    display: none !important;
}

.useful-card {
    width: 100%;
}

/* Desktop: стрелки/пагинация не нужны */
@media (min-width: 768px) {
    #useful .useful-block__slider-controls {
        display: none !important;
    }
}

/*
 * Mobile: текст не должен перекрывать фото.
 * Desktop-схема (image + overlay в одной ячейке grid) остаётся с 768px.
 */
@media (max-width: 767px) {
    /* Стрелки/пагинация на мобиле не нужны — листание свайпом */
    .useful-block__slider-controls {
        display: none !important;
    }

    /*
     * overflow:hidden у .useful-block__slider режет box-shadow снизу.
     * Запас под blur 15px; по бокам тень уже видна за счёт margin у content-inner.
     */
    .useful-block__slider {
        padding-bottom: 16px;
        box-sizing: border-box;
    }

    .useful-card {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .useful-card__image,
    .useful-card__content {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
    }

    .useful-card__image img {
        height: 220px !important;
        object-fit: cover;
        object-position: center center;
    }

    .useful-card--video .useful-card__image img,
    .useful-card--care .useful-card__image img,
    .useful-card--tech .useful-card__image img {
        object-position: left center;
    }

    .useful-card__content {
        display: block;
        padding: 0;
        margin-top: -28px;
        position: relative;
        z-index: 1;
    }

    /* Карточка текста чуть уже фото: боковые поля + сброс margin-left:auto из shop-main */
    .useful-card__content-inner {
        margin: 0 12px !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 308px;
        padding: 18px 16px;
        box-sizing: border-box;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .useful-card__title {
        min-height: 48px; /* до 2 строк заголовка */
    }

    .useful-card__text {
        flex: 1 1 auto;
        margin-block: 0 !important;
        min-height: 96px; /* ~4 строки 16/24 */
    }

    .useful-card__link {
        margin-top: auto;
    }
}

/* Охрана труда / обучающие видео: широкий кадр 1024×406, каска слева, текст справа. */
.useful-card--video .useful-card__image img {
    object-fit: cover;
    object-position: left center;
    background-color: #d5e0e0;
}

/* Правила ухода: широкий кадр 1024×406, люди слева/центр, текст справа. */
.useful-card--care .useful-card__image img {
    object-fit: cover;
    object-position: left center;
}

/* Таблицы размеров: широкий кроп 2.52:1, макушки в кадре. */
.useful-card--sizes .useful-card__image img {
    object-fit: cover;
    object-position: center center;
}

/* Технологии: широкий кадр 1024×406, люди и техника слева, текст справа. */
.useful-card--tech .useful-card__image img {
    object-fit: cover;
    object-position: left center;
}