/* Start:/local/templates/novatek/components/bitrix/news.detail/autogas/style.css?177278265713234*/
/* Базовые стили контейнера */
.autogas-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 15px;
    box-sizing: border-box;
}

.autogas-container h1 {
    font-size: 46px;
    line-height: 55px;
    max-width: 920px;
    margin: 48px 0;
}

.autogas-container h2 {
    font-size: 36px;
    line-height: 43px;
    margin-bottom:48px;
}

.autogas-container img {
    max-width: 100%;
    height: auto;
}

/* Верхняя сетка (3 колонки) */
.ags-top-grid {
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    gap: 0;
    align-items: flex-start;
    margin-bottom: 100px;
    position: relative;
}

/* Левая колонка: 1 строка, 1 колонка */
.ags-col-left {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Средняя колонка: 1 строка, 2 колонка */
.ags-col-mid {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 60px;
}

/* Правая колонка: занимает с 1 по 2 строку, 3 колонка */
.ags-col-right {
    grid-row: 1 / span 2;
    grid-column: 3;

    align-self: stretch;

    display: flex;
    flex-direction: column;
}

/* Блок с рамкой внутри правой колонки */
.ags-consumers-box {
    border: 1px dashed #3366cc;
    padding: 25px;
    border-radius: 5px;
    text-align: center;
    background: white;

    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: stretch;
}


/* Нижний блок: 2 строка, занимает с 1 по 2 колонку (объединяет их) */
.ags-bottom-grid {
    grid-row: 2;
    grid-column: 1 / span 2; /* Растягиваем на ширину левой и средней колонок */
    padding-top: 120px;
    padding-right: 90px;
}

.ags-source {
    text-align: center;
    font-size: 16px;
    border-bottom: 3px solid #3366cc;
    padding-bottom: 10px;
    width: 217px;
}

.ags-icon-plant {
    background: #3366cc;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

/* Стрелки на CSS */
.ags-arrow-down {
    width: 3px;
    height: 95px;
    background-color: #3366cc;
    position: relative;
    margin-bottom: 20px;
}
.ags-arrow-down::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: -6px;
    border-width: 15px 8.5px 0 8.5px;
    border-style: solid;
    border-color: #3366cc transparent transparent transparent;
}

.ags-truck-wrapper {
    position: relative;
    width: 100%;
    /* Прижимаем содержимое к правому краю колонки */
    display: flex;
    justify-content: flex-end;
    z-index: 5; /* Чтобы грузовик был поверх соединительных линий */
}

.ags-truck-img {
    /* ВАЖНО: отменяем стандартное ограничение ширины шаблона сайта,
       иначе картинка сожмется под размер колонки и не вылезет за края */
    max-width: none !important;

    /* Сохраняем пропорции картинки */
    height: auto;
    position: relative;
}

/* Средняя колонка */

.ags-variant {
    padding-left: 54px;
}

/* Основная тонкая линия (1px) */
.ags-variant-divider {
    width: 100%;
    height: 1px;
    background-color: #4061A6; /* Заданный цвет */
    margin-top: 30px;    /* Отступ вверх до 1 варианта */
    margin-bottom: 24px; /* Отступ вниз до 2 варианта */
    position: relative;
}

/* Толстая линия стрелки (3px ширина, 55px длина) */
.ags-variant-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Идеальное центрирование по вертикали на 1px линии */
    width: 55px;
    height: 3px;
    background-color: #4061A6;
}

/* Острие стрелки (длина 15px, ширина основания 17px) */
.ags-variant-divider::after {
    content: '';
    position: absolute;
    left: 55px; /* Начинается ровно там, где заканчивается линия 55px */
    top: 50%;
    transform: translateY(-50%); /* Центрируем острие по вертикали */

    border-style: solid;

    /* border-width: ВЕРХ ПРАВО НИЗ ЛЕВО */
    /* 17px пополам = 8.5px (верх и низ). 15px - длина (левая рамка выталкивает вправо) */
    border-width: 8.5px 0 8.5px 15px;
    border-color: transparent transparent transparent #4061A6;
}

.ags-variant {
    background: #fff;
}

.ags-var-title {
    font-size: 16px;
    margin-bottom: 15px;
}
.ags-var-title .ags-var-pre {
    font-size: 20px;
    font-weight: bold;
}
.ags-var-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 1.4;
}
.ags-var-content img {
    width: 50%;
    flex-shrink: 0;
}
.ags-var-content p {
    max-width: 250px;
    padding-right: 24px;
}

/* Правая колонка (Потребители) */


.ags-cons-title {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 25px;
}

.ags-consumer-item {
    margin-bottom: 20px;
    margin-top: 8px;
    font-size: 16px;
}
.ags-consumer-item:last-child {
    margin-bottom: 0;
}
.ags-consumer-item img {
    display: block;
    margin: 0 auto 10px;
    object-fit: contain;
}

.ags-list-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.ags-list-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #3366cc;
    color: #3366cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.ags-list-text {
    font-size: 16px;
    line-height: 1.5;
    padding-top: 4px;
    text-align: justify;
}

.section2-img {
    max-width: 100%;
    margin-bottom: 100px;
}


/* =========================================
   БЛОК: ПРИМЕРЫ ПРОЕКТОВ (autogas-projects)
   ========================================= */
.autogas-projects {
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 0 15px 40px;
    font-family: Arial, sans-serif;
    color: #333;
}

.autogas-projects h2 {
    font-size: 36px;
    line-height: 43px;
    margin-bottom:48px;
}

/* Главная сетка: левая(1 часть) - центр(2 части) - правая(1 часть) */
.agp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.agp-col {
    display: flex;
    flex-direction: column;
}

/* Шапка колонки (номер и текст) */
.agp-header {
    text-align: center;
    min-height: 80px; /* Чтобы заголовки разной длины не ломали высоту */
}

.agp-num {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}

.agp-title {
    font-size: 16px;
    line-height: 19px;
}

/* Галерея внутри обычных колонок (1 фото в ряд) */
.agp-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agp-col-wide {
    grid-column: span 2;
}

/* Галерея в широкой колонке */
.agp-col-wide .agp-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px; /* Внутренний отступ между картинками */
    padding: 0 4px;
}

/* Сами картинки (и серые заглушки) */
.agp-img {
    width: 100%;
    /* Задаем пропорции, чтобы картинки были одинаковыми блоками */
    aspect-ratio: 4 / 3;
    object-fit: cover; /* Обрезает картинку по центру, если пропорции не совпадают */
    border-radius: 8px; /* Скругление углов как на макете */
    display: block;
    background-color: #d1d1d1; /* Цвет серых квадратов (если картинка не загрузится или прозрачная) */
}


/* =========================================
   БЛОК: КАК ИНИЦИИРОВАТЬ ПРОЕКТ
   ========================================= */

/* Внешний контейнер с серым фоном на всю ширину */
.init-section-wrapper {
    background-color: #f4f5f7; /* Подберите точный цвет пипеткой с макета, если он отличается */
    width: 100%;
    padding: 80px 0;
    margin-top: 60px; /* Отступ от предыдущего блока */
    font-family: Arial, sans-serif;
    color: #000;
}

/* Внутренний ограничитель 1200px */
.init-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Главный заголовок */
.init-main-title {
    font-size: 36px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 50px;
    color: #111;
}

/* Шаги (1, 2, 3) */
.init-step {
    margin-bottom: 40px;
}
.init-step:last-child {
    margin-bottom: 0;
}

/* Заголовок шага (20px) */
.init-step-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
}
.init-step-num {
    flex-shrink: 0;
}

/* Список с галочками */
.init-check-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-left: 30px; /* Отступ чтобы список начался под текстом, а не под цифрой */
}

.init-check-item {
    display: flex;
    align-items: center; /* Центрируем иконку и текст по вертикали */
    gap: 15px;
    font-size: 16px;
}

/* Иконка галочки (32x25px) */
.init-check-icon {
    width: 32px;
    height: 25px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Сетка контактов */
.init-contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 400px)); /* Две колонки, но не шире 400px каждая */
    gap: 40px;
    margin-left: 30px;
    margin-top: 25px;
}

/* Карточка контакта */
.init-contact-card {
    display: flex;
    flex-direction: column;
}

/* ФИО (16px, bold) */
.init-contact-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Блок с email */
.init-contact-email-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Иконка @ (28x28px) */
.init-at-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Ссылка email */
.init-email-link {
    font-size: 16px;
    color: #4061A6; /* Синий цвет с макета */
    text-decoration: none;
    transition: color 0.3s ease;
}
.init-email-link:hover {
    color: #2b457c; /* Цвет при наведении */
    text-decoration: underline;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 991px) {
    .ags-top-grid {
        grid-template-columns: 1fr;
    }

    /* Сбрасываем жесткую сетку для мобилок, элементы пойдут друг за другом */
    .ags-col-left,
    .ags-col-mid,
    .ags-col-right,
    .ags-bottom-grid {
        grid-row: auto;
        grid-column: auto;
    }
    .ags-arrow-right {
        display: none; /* Скрываем боковые стрелки на мобилке */
    }
    .ags-var-content {
        flex-direction: column;
        text-align: center;
    }
    .ags-truck-wrapper {
        justify-content: center; /* Центрируем фуру на мобилке */
        margin-top: 20px;
    }

    .ags-truck-img {
        max-width: 100% !important;
    }

    .agp-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .agp-header {
        min-height: auto;
    }

    .agp-col-wide {
        grid-column: auto;
    }

    /* В широкой колонке на мобилке тоже делаем 1 фото в ряд, чтобы не было слишком мелко */
    .agp-col-wide .agp-gallery {
        grid-template-columns: 1fr;
        padding: 0;
    }
}


/* End */
/* /local/templates/novatek/components/bitrix/news.detail/autogas/style.css?177278265713234 */