/* ==========================================================================
   Комплексные решения для ЦОД — дополнения к теме сайта.
   --------------------------------------------------------------------------
   Страница собрана по образцу /production/servers/, поэтому шапку, подвал,
   контейнер, форму и типографику задаёт тема (style-neo.css, media-neo.css).
   Здесь только то, чего в теме нет: пропорции баннера, два новых блока
   с плитками и их адаптив.

   Имена классов начинаются с cod-: у блока преимуществ в теме были имена
   вида grid-ad, и блокировщики рекламы скрывали его по названию.
   Типографика приведена к страницам «Серверы» и «Система управления
   и мониторинга»: заголовки 48px/700, подзаголовки плиток 20px/500,
   текст в плитках 16px/400, перечни 18px/300, вводный текст 24px/400.
   ========================================================================== */

/* ---------- 1. Главный баннер ----------
   Фотография тёмная, но к правому краю светлеет, поэтому кладём мягкое
   затемнение слева направо: белый заголовок должен читаться везде. */
.main-ban {
    position: relative;
}

.main-ban::after {
    content: "";
    position: absolute;
    inset: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: linear-gradient(90deg,
        rgba(6, 10, 18, .78) 0%,
        rgba(6, 10, 18, .58) 32%,
        rgba(6, 10, 18, .26) 62%,
        rgba(6, 10, 18, 0) 88%);
    pointer-events: none;
    z-index: 1;
}

.main-ban__cont {
    z-index: 2;
}

/* Тема рассчитана на подложку 1296×408, наша фотография другой пропорции,
   поэтому кадрируем её в тот же формат. */
.main-ban__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 408;
    object-fit: cover;
    object-position: center 55%;
}

.main-ban__cont_serv h1 {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 300;
}

/* Вторая строка заголовка. Кегль оставляем темовский, как на «Серверах»,
   а начертание возвращаем среднее: жирное делало строку заметно тяжелее
   и крупнее соседней страницы. На узких экранах своя шкала, иначе
   «для ЦОД» ломается пополам. */
.main-ban__cont_serv h1 span {
    display: inline-block;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- 2. Экспертиза полного цикла ---------- */
.cod-lead {
    margin: 56px 0 0;
}

.cod-lead h2 {
    margin: 0 0 16px;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    color: #4b4b4b;
}

/* Ограничение по ширине снято, чтобы строка не рвалась раньше времени.
   В одну строку фраза при общем кегле 24px не помещается физически:
   ей нужно 1772px при доступных 1296px. Поэтому делаем перенос ровным,
   на две строки примерно одинаковой длины, а не рваным. */
.cod-lead p {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 400;
    color: #292929;
}

/* ---------- 3. От стратегии до круглосуточной защиты ---------- */
.cod-stages {
    margin: 56px 0 0;
}

.cod-stages__title,
.cod-why__title {
    margin: 0 0 28px;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    color: #4b4b4b;
}

/* Без выравнивания по высоте плитки в ряду обрывались на разной высоте:
   списки внутри разной длины. Растягиваем их до общей высоты ряда. */
.cod-stages__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Плитки одинаковые: акцентную третью из презентации заказчик просил не делать */
.cod-stage {
    box-sizing: border-box;
    padding: 32px;
    border-radius: 8px;
    background: #fff;
}

.cod-stage__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.cod-stage__num {
    flex: 0 0 auto;
    color: var(--Main-red, #e40000);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.cod-stage__name {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #292929;
}

.cod-stage__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cod-stage__list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 300;
    color: #676767;
}

.cod-stage__list li:last-child {
    margin-bottom: 0;
}

/* Квадратный маркер вместо точки — как в презентации заказчика */
.cod-stage__list li::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--Main-red, #e40000);
}

/* ---------- 4. Почему вам нужно работать с нами ---------- */
.cod-why {
    margin: 56px 0 0;
}

.cod-why__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.cod-why__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
    min-height: 168px;
    padding: 28px 32px;
    border-radius: 8px;
    background: #fff;
}

.cod-why__text {
    min-width: 0;
}

.cod-why__text h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #292929;
}

.cod-why__text p {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
    color: #898989;
}

/* Иконки пришли разного размера (80 и 100 px) — приводим к одной высоте */
.cod-why__icon {
    flex: 0 0 auto;
    width: auto;
    height: 72px;
}

/* ---------- 5. Отступы вокруг формы ----------
   Снизу отступ держал блок «Задать вопрос». Мы его с этой страницы убрали,
   и форма упёрлась прямо в подвал — возвращаем воздух. */
.cod-why + .callback-block {
    margin-top: 56px;
    margin-bottom: 72px;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media screen and (max-width: 1100px) {
    .main-ban__cont_serv h1 {
        font-size: 48px;
    }

    .main-ban__cont_serv h1 span {
        font-size: 88px;
    }

    .cod-lead h2,
    .cod-stages__title,
    .cod-why__title {
        font-size: 36px;
    }

    .cod-lead p {
        font-size: 20px;
    }

    .cod-stage {
        padding: 28px;
    }

    /* Тема на этой ширине прячет десктопную картинку и ждёт .main-ban__mob,
       которой у нас нет. Баннер один — показываем его. */
    .main-ban__img {
        display: block !important;
        aspect-ratio: 16 / 9;
        object-position: center 55%;
    }
}

@media screen and (max-width: 900px) {
    .cod-stages__grid,
    .cod-why__grid {
        grid-template-columns: 1fr;
    }

    .cod-why__item {
        min-height: 0;
    }
}

@media screen and (max-width: 600px) {
    .main-ban__img {
        height: 420px;
        aspect-ratio: auto;
        object-position: center 50%;
    }

    .main-ban__cont_serv h1 {
        font-size: 32px;
    }

    .main-ban__cont_serv h1 span {
        font-size: 56px;
    }

    .cod-lead {
        margin-top: 36px;
    }

    .cod-lead h2,
    .cod-stages__title,
    .cod-why__title {
        font-size: 28px;
    }

    .cod-lead p {
        font-size: 18px;
    }

    .cod-stage__list li {
        font-size: 16px;
    }

    .cod-stages,
    .cod-why,
    .cod-why + .callback-block {
        margin-top: 36px;
    }

    .cod-why + .callback-block {
        margin-bottom: 40px;
    }

    .cod-stages__grid,
    .cod-why__grid {
        gap: 16px;
    }

    .cod-stage {
        padding: 24px 20px;
    }

    .cod-stage__num,
    .cod-stage__name {
        font-size: 20px;
    }

    /* На узком экране иконка уходит под текст, иначе на неё не остаётся места */
    .cod-why__item {
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 20px;
    }

    .cod-why__text h3 {
        font-size: 19px;
    }

    .cod-why__icon {
        height: 52px;
    }
}

@media screen and (max-width: 420px) {
    .main-ban__cont_serv h1 {
        font-size: 27px;
    }

    .main-ban__cont_serv h1 span {
        font-size: 44px;
    }

    .cod-why__icon {
        height: 44px;
    }
}