/*! AVE Design Studio — CTA «Консультация эксперта» (php-helpers/cta-expert.php) */

.cx {
    --cx-red: #c80000;
    --cx-red-hover: #a90000;
    --cx-muted: rgba(255, 255, 255, .72);
    --cx-soft: rgba(255, 255, 255, .56);
    position: relative;
    padding: 120px 0 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }

.cx__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
    grid-template-areas: "info person form";
    column-gap: 32px;
    padding: 0 52px;
    border-radius: 24px;
    background: #121317 url(/images/cta/cta-bg.webp) 50% 50% / cover no-repeat;
    color: #fff;
    box-shadow: 0 30px 70px -30px rgba(18, 19, 23, .55);
    isolation: isolate;
}
.cx__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(420px 360px at 50% 78%, rgba(200, 0, 0, .26), transparent 70%),
        linear-gradient(90deg, rgba(18, 19, 23, .9) 0%, rgba(18, 19, 23, .55) 50%, rgba(18, 19, 23, .9) 100%);
}

/* ---------- Слева: заголовок и контакты ---------- */

.cx__info { grid-area: info; align-self: center; padding: 60px 0 56px; }

.cx .cx__title {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: 38px;
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-transform: none;
    color: #fff;
}
.cx .cx__title b { display: block; font-weight: 800; }
.cx__lead { margin: 0 0 34px; font-size: 17px; line-height: 1.5; color: var(--cx-muted); }
.cx__hours { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--cx-muted); }
.cx__hours b { font-weight: 700; color: #fff; }

.cx .cx__phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.005em;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    transition: color .15s ease;
}
.cx .cx__phone:hover { color: #ff6b5e; }
.cx__phone svg {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 50%;
    background: var(--cx-red);
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
}
.cx__msg { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; }
.cx .cx__msg-label { max-width: 9.5em; margin: 0 6px 0 0; font-size: 15px; line-height: 1.35; color: #fff; }
.cx .cx__msg-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
    transition: transform .15s ease, filter .15s ease;
}
.cx .cx__msg-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cx .cx__msg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cx__msg-btn--tg { background: #2aabee; }
.cx__msg-btn--wa { background: #25d366; }
.cx__msg-btn svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cx__mail { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--cx-soft); }
.cx .cx__mail a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.cx .cx__mail a:hover { color: #ff6b5e; text-decoration-color: currentColor; }

/* ---------- Центр: фото выходит за верхний край карточки ---------- */

.cx__person { grid-area: person; position: relative; margin: 0; min-height: 100%; }
.cx .cx__photo {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 400px;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
}
.cx__caption {
    position: absolute;
    left: -86px;
    bottom: 138px;
    padding: 10px 14px 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(18, 19, 23, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    line-height: 1.3;
    white-space: nowrap;
}
.cx__caption b { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.cx__caption span { display: block; margin-top: 2px; font-size: 12px; color: var(--cx-muted); }

/* ---------- Справа: форма ---------- */

.cx__form { grid-area: form; align-self: center; padding: 52px 0 46px; }
.cx .cx__form-title { margin: 0 0 16px; font-size: 26px; font-weight: 700; line-height: 1.25; color: #fff; }
.cx .cx__list { margin: 0 0 22px; padding: 0; list-style: none; }
.cx .cx__list li {
    position: relative;
    margin: 0 0 7px;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cx-muted);
}
.cx .cx__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(200, 0, 0, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b5e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") 50% 50% / 11px no-repeat;
}
.cx__nojs { margin: 0; color: var(--cx-muted); }
.cx .cx__nojs a { color: #fff; font-weight: 700; }

/* forms.js: тип expert */
.ave-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.cx .ave-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cx .ave-form { color: var(--cx-muted); }
.cx .ave-form .ave-field__input {
    height: 58px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 16px;
}
.cx .ave-form .ave-field__input:focus { border-color: var(--cx-red); box-shadow: 0 0 0 4px rgba(255, 107, 94, .28); }
.cx .ave-field.is-invalid .ave-field__input { border-color: #ff6b5e; }
.cx .ave-field__error,
.cx .ave-form__alert { color: #ff8a80; }
.cx .ave-btn {
    gap: 12px;
    min-height: 58px;
    margin-top: 12px;
    border-radius: 12px;
    font-size: 15px;
    box-shadow: 0 14px 30px -12px rgba(200, 0, 0, .7);
}
.cx .ave-btn .ave-icon { font-size: 18px; transition: transform .2s ease; }
.cx .ave-btn:hover .ave-icon { transform: translate(2px, -2px); }
.cx .ave-btn.is-blocked { opacity: .7; box-shadow: none; }
.cx .ave-btn.is-blocked:hover .ave-icon { transform: none; }
.cx .ave-btn:focus-visible { outline-color: #fff; }
.cx .ave-btn.is-loading .ave-icon { display: none; }
.cx .ave-consents { margin-top: 14px; }
.cx .ave-consent { font-size: 12.5px; color: var(--cx-soft); }
.cx .ave-consent a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.cx .ave-consent a:hover { color: #ff6b5e; }
.cx .ave-consent__box { border-color: rgba(255, 255, 255, .45); background: transparent; }
.cx .ave-field--consent.is-invalid .ave-consent__box { border-color: #ff6b5e; }

.cx .ave-success { padding: 8px 0; text-align: left; }
.cx .ave-success__icon { width: 56px; height: 56px; margin-bottom: 14px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 30px; }
.cx .ave-success__title { color: #fff; }
.cx .ave-success__text { margin-left: 0; color: var(--cx-muted); }
.cx .ave-success__phone { color: var(--cx-soft); }
.cx .ave-success__phone a { color: #fff; }

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

/* Карточка уже — плашка не должна наезжать на кнопки мессенджеров */
@media (max-width: 1399px) {
    .cx__caption { left: -62px; }
}

@media (max-width: 1199px) {
    .cx__card { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); column-gap: 24px; padding: 0 36px; }
    .cx .cx__title { font-size: 32px; }
    .cx .cx__phone { font-size: 22px; gap: 10px; }
    .cx__phone svg { width: 32px; height: 32px; padding: 8px; }
    .cx .cx__photo { width: 340px; }
    .cx__caption { left: -12px; }
    .cx .cx__form-title { font-size: 22px; }
    .cx .cx__list li { font-size: 14px; }
}

/* Планшет: контакты и фото в ряд, форма — панель во всю ширину, на которой «стоит» фото */
@media (max-width: 991px) {
    .cx { padding: 110px 0 60px; }
    .cx__card {
        grid-template-columns: minmax(0, 1fr) 260px;
        grid-template-areas: "info person" "form form";
        padding: 0 32px 32px;
    }
    .cx__info { padding: 48px 0 40px; }
    .cx__lead { margin-bottom: 26px; }
    .cx .cx__photo { width: 300px; }
    .cx__caption { left: -60px; bottom: 104px; }
    .cx__form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
        align-items: center;
        padding: 30px 30px 28px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 18px;
        background: rgba(18, 19, 23, .82);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .cx .cx__form-title { grid-column: 1 / -1; }
    .cx .cx__list { margin: 0; }
    .cx__holder { grid-column: 2; grid-row: 2; }
}

/* Телефон: текст → фото → форма */
@media (max-width: 767px) {
    .cx { padding: 40px 0 48px; }
    .cx__card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "info" "person" "form";
        padding: 0 14px 14px;
        border-radius: 20px;
        background-image: url(/images/cta/cta-bg-800.webp);
    }
    .cx__card::before { background: radial-gradient(260px 240px at 50% 52%, rgba(200, 0, 0, .3), transparent 70%), rgba(18, 19, 23, .7); }
    .cx__info { padding: 32px 8px 8px; text-align: center; }
    .cx .cx__title { font-size: 28px; }
    .cx__lead { margin-bottom: 20px; font-size: 16px; }
    .cx .cx__phone { font-size: 22px; }
    .cx__msg { justify-content: center; margin-top: 20px; }
    .cx .cx__msg-label { text-align: left; }
    .cx__mail { margin-top: 14px; }
    .cx__person { display: flex; justify-content: center; min-height: 0; margin-top: 4px; }
    .cx .cx__photo { position: static; width: 230px; transform: none; }
    .cx__caption { left: 50%; right: auto; bottom: 70px; padding: 8px 12px 9px; transform: translateX(-135px); text-align: left; }
    .cx__caption b { font-size: 14px; }
    .cx__caption span { font-size: 11.5px; }
    .cx__form { display: block; padding: 24px 18px 20px; }
    .cx .cx__form-title { font-size: 21px; }
    .cx .cx__list { margin-bottom: 18px; }
}

@media (max-width: 359px) {
    .cx__caption { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cx .ave-btn .ave-icon, .cx .cx__phone, .cx .cx__msg-btn { transition: none; }
    .cx .cx__msg-btn:hover { transform: none; }
}