/* Экраны захвата: «Получите КП» и «Давайте созвонимся?».
   Отдельный файл, потому что блоки живут и на Главной, и на посадочных услуг,
   а new_home.css грузится только на Главной. */

/* Цветная плашка в круглой рамке — ровно как секция «Работаем с проектами
   прозрачно и честно» (.about в new_home.css): тот же #0D4DA1, тот же
   border-radius: 32px и тот же размытый градиент about-bg.svg поверх заливки.
   Экран захвата не должен теряться на белом фоне. */
.lead-kp {
    position: relative;
    overflow: hidden;

    /* тот же вертикальный ритм, что и у секций Главной (см. :root в new_home.css) */
    margin-top: var(--section-gap, 120px);
    padding: 100px 0;

    border-radius: 32px;
    background-color: #0D4DA1;
    color: #FFFFFF;
}

.lead-kp__background {
    display: block;
    position: absolute;
    left: 0;
    bottom: -180px;

    pointer-events: none;
}

.lead-kp > .container {
    position: relative;
    z-index: 1;
}

.lead-kp .container,
.lead-call .container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* Содержимое слева, иллюстрация справа — как в референсе Ready code. */
.lead-kp__grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 64px;
    align-items: center;
}

.lead-kp__illustration {
    width: 100%;
}

.lead-kp__illustration svg {
    display: block;
    width: 100%;
    height: auto;

    filter: drop-shadow(0 24px 48px rgba(8, 26, 50, 0.18));
}

/* Своя картинка из админки — предмет, вырезанный из фона (файл с прозрачностью).
   Никакой рамки и кадрирования: рамка нарисовала бы прямоугольник там, где его
   нет, и обрезала бы сам предмет по краям.
   Тень — drop-shadow, а не box-shadow: она идёт по контуру предмета, тогда как
   box-shadow обвёл бы прямоугольник файла вместе с прозрачными полями. */
.lead-kp__illustration--photo img {
    display: block;
    width: 100%;
    height: auto;

    filter: drop-shadow(0 24px 40px rgba(8, 26, 50, 0.35));
}

/* .container в теме — flex-колонка с align-items: center и text-align: center,
   поэтому внутренним блокам ширину и выравнивание задаём явно. */
.lead-kp__content {
    text-align: start;
}

.lead-kp__head {
    width: 100%;
}

.lead-kp__subtitle {
    margin-top: 20px;
    color: #D8DFE5;
    line-height: 130%;
}

.lead-kp__benefits-title {
    margin-top: 40px;
    font-weight: 600;
}

.lead-kp__benefits {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    margin: 16px 0 40px 0;
}

.lead-kp__benefit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;

    padding: 20px;
    border-radius: 20px;

    background-color: #FFFFFF;
    color: #081A32;
    text-align: start;
}

.lead-kp__benefit-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    background-color: #ECF1F6;
    color: #D7171F;

    font-weight: 700;
    font-size: 14px;
}

.lead-kp__benefit-mark img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.lead-kp__benefit h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 125%;
}

.lead-kp__controls {
    width: 100%;
    justify-content: flex-start;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Вторая кнопка рядом с «Оставить заявку». Белая заливка, а не контур:
   градиент внизу блока светлеет до бирюзового, и белый текст на нём пропадал. */
.lead-kp__example {
    color: #0D4DA1;
    font-weight: 600;

    padding: 20px 32px;
    border: 1px solid #FFFFFF;
    border-radius: 32px;

    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    background-color: #FFFFFF;

    transition: background-color .2s ease, color .2s ease;
}

.lead-kp__example:hover {
    background-color: #D7171F;
    border-color: #D7171F;
    color: #FFFFFF;
}

/* --- Давайте созвонимся? --- */

.lead-call {
    position: relative;
    overflow: hidden;

    margin-top: 120px;
    padding: 100px 0;

    border-radius: 32px;
    background: linear-gradient(#081A32, #131E2D);
    color: #FFFFFF;
}

/* Концентрические круги в углу — фон не плоский, но и без нового ассета. */
.lead-call::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -12%;

    width: 900px;
    height: 900px;

    background:
        radial-gradient(circle, transparent 0 29%, rgba(255, 255, 255, 0.05) 29% 30%, transparent 30%),
        radial-gradient(circle, transparent 0 44%, rgba(255, 255, 255, 0.04) 44% 45%, transparent 45%),
        radial-gradient(circle, transparent 0 59%, rgba(215, 23, 31, 0.10) 59% 60%, transparent 60%);

    pointer-events: none;
}

.lead-call > .container {
    position: relative;
    z-index: 1;
}

.lead-call__grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.lead-call__intro,
.lead-call__form {
    text-align: start;
}

.lead-call__text {
    margin-top: 24px;
    line-height: 130%;
    color: #D8DFE5;
}

.lead-call__bullets {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lead-call__bullets li {
    position: relative;
    padding-left: 28px;
    line-height: 130%;
}

.lead-call__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background-color: #D7171F;
}

.lead-call__alt {
    display: inline-block;
    margin-top: 32px;

    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 4px;

    transition: color .2s ease;
}

.lead-call__alt:hover {
    color: #D7171F;
}

.lead-call__form {
    padding: 8px 0 0 0;
}

.lead-call__missing {
    color: #FFD8DA;
}

/* --- форма --- */

.lead-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.lead-form__field {
    margin-bottom: 16px;
}

/* Подчёркнутые поля вместо «пилюль» — как в референсе Ready code: форма
   читается легче и не спорит с кнопками. */
.lead-form__input {
    width: 100%;
    padding: 14px 4px;

    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    background-color: transparent;

    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;

    transition: border-color .2s ease;
}

.lead-form__input::placeholder {
    color: #A7B2BE;
}

.lead-form__input:focus {
    outline: none;
    border-bottom-color: #D7171F;
}

.lead-form__textarea {
    resize: vertical;
    min-height: 72px;
}

.lead-form__file-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    cursor: pointer;
}

.lead-form__file-hint {
    color: #A7B2BE;
    font-size: 14px;
}

.lead-form__file-input {
    max-width: 220px;
    color: transparent;
    font-size: 14px;
}

.lead-form__file-input::file-selector-button {
    padding: 10px 18px;
    margin-right: 12px;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 32px;
    background-color: rgba(255, 255, 255, 0.08);

    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;

    transition: border-color .2s ease;
}

.lead-form__file-input::file-selector-button:hover {
    border-color: #D7171F;
}

.lead-form__checkbox {
    margin: 4px 0 20px 0;
    font-size: 13px;
    line-height: 130%;
    color: #A7B2BE;
}

.lead-form__checkbox a {
    color: #FFFFFF;
    text-decoration: underline;
}

/* popup-support.css делает строку согласия flex-контейнером: текст и ссылка
   становятся отдельными flex-элементами и на узком экране жмутся в две колонки.
   Здесь строка — обычный блок, а квадрат чекбокса вынесен в абсолют. */
.lead-form__checkbox .wpcf7-list-item {
    width: 100%;
}

.lead-form__checkbox .custom-checkbox + .wpcf7-list-item-label {
    display: block;
    position: relative;
    padding-left: 33px;
}

.lead-form__checkbox .custom-checkbox + .wpcf7-list-item-label::before {
    position: absolute;
    left: 0;
    top: 1px;
    margin-right: 0;
}

.lead-form__submit .send__btn {
    width: auto;
    min-width: 220px;
    padding: 18px 32px;

    border: none;
    border-radius: 32px;
    background: #D7171F;
    color: #FFFFFF;

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;

    transition: background .2s ease, color .2s ease;
}

.lead-form__submit .send__btn:hover {
    background: #FFFFFF;
    color: #D7171F;
}

/* CF7 рисует свои сообщения об ошибках — иначе они белым по белому не читаются */
.lead-call .wpcf7-not-valid-tip,
.lead-call .wpcf7-response-output,
.lead-kp .wpcf7-not-valid-tip,
.lead-kp .wpcf7-response-output {
    color: #FFD8DA;
    font-size: 14px;
    line-height: 130%;
}

.lead-call .wpcf7-response-output,
.lead-kp .wpcf7-response-output {
    margin: 16px 0 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

@media screen and (max-width: 1100px) {
    .lead-kp__grid {
        gap: 40px;
    }
}

@media screen and (max-width: 960px) {
    .lead-kp__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* С ≤960 блок и так в одну колонку, и иллюстрация просто отъедает экран
       над текстом — на планшете это те же полтора экрана, что и на телефоне.
       Прячем сразу с этого брейкпоинта, а не с 720. */
    .lead-kp__illustration {
        display: none;
    }

    .lead-call__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

@media screen and (max-width: 720px) {
    .lead-kp,
    .lead-call {
        padding: 64px 0;
    }

    /* в две колонки заголовки выгод рвутся по слогам и вылезают за карточку */
    .lead-kp__benefits {
        grid-template-columns: minmax(0, 1fr);
    }

    /* кнопки в столбик и во всю ширину — иначе стоят лесенкой разной длины.
       Тот же приём, что у .cases__button в adaptive.css вёрстки. */
    .lead-kp__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .lead-kp__controls > .button-red,
    .lead-kp__example {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .lead-form__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .lead-form__submit .send__btn {
        width: 100%;
    }
}