/* ============================================================
   Страница «Гарантия» (/informacija/garantija-informacija/)
   Сборка по макету Figma, узел 7466-69924, 04.09.2026
   ============================================================

   Почти всё взято готовым из шаблона сайта: баннер - .opt__banner
   со страницы «Оптовикам», карточки показателей - .advantage__item
   с главной, видео - .videos__item оттуда же, сетка объектов -
   компонент со страницы «Объекты». Здесь только то, чего в шаблоне
   не было: блок с цифрами, список условий, карточка сертификатов
   и полоса-заголовок «Проверено объектами».

   Файл подключается тегом <link> прямо со страницы, как это уже
   сделано для форм в /local/forms/css/. В общую склейку шаблона он
   не попадает: стили нужны на одной странице из сорока, незачем
   возить их по всему сайту. */

.guarantee-page section {
    margin: 0 0 60px 0;
}

/* ---------- Баннер ---------- */

/* У баннера «Оптовикам» одна кнопка, здесь две - ставим в ряд. */
.guarantee-page .opt__banner-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Одна кнопка - <button>, вторая - ссылка. У кнопки браузер центрирует текст
   сам, у ссылки нет: при line-height 100% и отступах по 14 точек текст
   прижимался к верху, и вторая кнопка выглядела кривой. Центрируем обе явно. */
.guarantee-page .opt__banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ---------- Наши гарантии в числах ---------- */

.guarantee__numbers .item-list {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.guarantee__numbers .item {
    max-width: calc(50% - 10px);
    width: 100%;
}

.guarantee__numbers-img {
    width: 100%;
    height: 100%;
    min-height: 405px;
    object-fit: cover;
    display: block;
}

.guarantee__lead {
    color: #2B2B2B;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    margin: 10px 0 30px 0;
}

.guarantee__digits {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Две карточки в ряд: 340 точек при колонке в 700 из макета. */
.guarantee__digit {
    box-sizing: border-box;
    max-width: calc(50% - 10px);
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    background: #F5F7FB;
}

/* В макете фон шахматный: у первой и четвёртой карточки заливка,
   у второй и третьей - прозрачный с обводкой. */
.guarantee__digit--plain {
    background: transparent;
    border: 1px solid #E7ECF3;
}

.guarantee__digit-value {
    color: #064A69;
    font-family: Manrope;
    font-size: 50px;
    font-weight: 500;
    line-height: 100%;
    margin: 0 0 10px 0;
}

.guarantee__digit-text {
    color: #2B2B2B;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
}

/* ---------- Мы отвечаем за все важные показатели ---------- */

/* Секция на всю ширину экрана, а не по контейнеру. */
.guarantee__features {
    padding: 60px 0;
}

/* В шаблоне карточка преимущества занимает треть ряда - здесь их четыре. */
.guarantee__features-list {
    margin: 30px 0 0 0;
}

.guarantee__features-list .advantage__item {
    width: calc(25% - 8px);
}

.guarantee__terms {
    margin: 30px 0 0 0;
}

.guarantee__terms-title {
    color: #064A69;
    font-family: Manrope;
    font-size: 22px;
    font-weight: 500;
    line-height: 100%;
    margin: 0 0 14px 0;
}

.guarantee__terms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Галочка нарисована фоном, чтобы не заводить картинку ради одного знака. */
.guarantee__terms-item {
    position: relative;
    padding: 0 0 0 30px;
    color: #2B2B2B;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
}

.guarantee__terms-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background: no-repeat center / 18px 17px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1.5 9.5L6.5 14.5L16.5 2.5' stroke='%2377B94C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Собственная лаборатория испытаний ---------- */

.guarantee__lab .item-list {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.guarantee__lab .item {
    max-width: calc(50% - 10px);
    width: 100%;
}

.guarantee__lab-text {
    margin: 30px 0;
}

.guarantee__lab-text p {
    color: #2B2B2B;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    margin: 0 0 10px 0;
}

.guarantee__certs {
    border-radius: 16px;
    padding: 20px;
    background: linear-gradient(94.53deg, #064A69 1.25%, #2A779A 99.65%);
    color: #FFFFFF;
}

.guarantee__certs-title {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 500;
    line-height: 100%;
    margin: 0 0 14px 0;
}

.guarantee__certs-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    margin: 0 0 20px 0;
}

/* Видео в шаблоне рассчитано на карусель высотой 250 - здесь оно
   во всю колонку и должно совпасть по высоте с текстом слева. */
.guarantee__video {
    margin: 0;
    height: 100%;
}

.guarantee__video .video {
    height: 100%;
    max-height: none;
    min-height: 427px;
}

/* ---------- Планшет ---------- */

@media screen and (max-width: 1024px) {
    .guarantee-page section {
        margin: 0 0 40px 0;
    }

    .guarantee__features-list .advantage__item {
        width: calc(50% - 5px);
    }

}

/* ---------- Телефон ---------- */

@media screen and (max-width: 768px) {
    .guarantee__numbers .item-list,
    .guarantee__lab .item-list {
        flex-direction: column;
    }

    .guarantee__numbers .item,
    .guarantee__lab .item {
        max-width: 100%;
    }

    .guarantee__numbers-img {
        min-height: 220px;
    }

    .guarantee__digit {
        max-width: 100%;
    }

    .guarantee__digit-value {
        font-size: 40px;
    }

    .guarantee__features-list .advantage__item {
        width: 100%;
    }

    .guarantee__video .video {
        min-height: 220px;
    }

}