/* ============================================================
   Калькулятор ипотеки — страница «Как купить?» (слаг kak-kupit)
   Десктоп 1920 + адаптивы (media-queries в конце файла).
   Грузится только на этой странице (functions.php → is_page).
   ============================================================ */

:root {
    --calc-green: #00984c;
    --calc-grey: #757575;
    --calc-green-dark: #007a3d;
    --calc-cream: #f5f5f0;
    --calc-bg: #e5e8da;
    --calc-track: #e1e4d7;
    --calc-text: #231f20;
    --calc-muted: #6a6a6a;
    --calc-bg-main: #e7eade;
    --calc-bg-project: #edefe6;
    --calc-white: #fff;
    --calc-hover: #e3e7dc;          /* ховер табов / «показать ещё» */
    --calc-dot: #a9b7b0;            /* неактивные точки + полоска справа от точки ползунка */
}

/* ----------------------------- табы ---------------------------- */
.calc_tabs_section {
    padding-top: 225px;            /* под фикс-шапку, как first_screen */
    padding-bottom: 88px;
}
.calc_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.calc_tab {
    display: inline-flex;
    align-items: center;
    padding: 27px 20px 25px;
    border-radius: 30px;
    background: var(--calc-bg);
    color: var(--calc-green);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: 0.25s;
    width: 208px;
    justify-content: center;
    text-align: center;
}
.calc_tab:hover {
    background: var(--calc-hover);
}
.calc_tab.active {
    background: var(--calc-green);
    color: var(--calc-white);
}

/* --------------------------- панели ---------------------------- */
.calc_panel {
    display: none;
}
.calc_panel.active {
    display: block;
}
.calc_stub {
    padding: 80px 0;
    text-align: center;
    color: var(--calc-muted);
    font-size: 20px;
}

/* ------------------------ HERO «Как купить?» ------------------- */
.calc_hero {
    padding: 0 0 180px;
}
/* Ряд hero без Bootstrap-сетки — ширины блоков задаются явно (пиксель-перфект). */
.calc_hero__row {
    display: flex;
    flex-wrap: wrap;           /* на узких экранах правый блок переносится вниз */
    gap: 36px;                 /* зазор между блоками */
    align-items: stretch;      /* правый блок тянется по высоте левого */
}
/* Обёртка слайдера — только позиционирование (фон/паддинги перенесены на слайд). */
.calc_hero__main {
    position: relative;
    box-sizing: border-box;
    flex: 0 1 1220px;          /* ровно 1220px; grow:0 — не растягивается, shrink:1 — ужимается на узких */
    max-width: 1220px;
    min-width: 0;
    min-height: 501px;
}
.calc_hero__slider {
    width: 100%;
    /* overflow НЕ скрываем — картинка дома может вылезать за блок (см. .calc_hero__img) */
    overflow: visible;
}
.calc_hero__slider .swiper-slide {
    height: auto;
}
/* Текстовый слайд — зелёный блок с контентом и картинкой дома. */
.calc_hero__slide {
    position: relative;
    min-height: 501px;
    padding: 41px 20px 50px 51px;
    border-radius: 26px;
    background: var(--calc-green);
    display: flex;
    align-items: flex-start;
}
/* Слайд-картинка («Это просто картинка?») — фото на весь баннер. */
/* Слайд-картинка — РОВНО 501 (фикс. height, НЕ min-height): иначе height:100% у img
   резолвится в авто = натуральную высоту фото, и высокое фото тянет слайд → main →
   (через align-items:stretch) правый блок. object-fit:cover кропает фото в 501. */
.calc_hero__slide--image {
    display: block;
    padding: 0;
    height: 501px;
    min-height: 0;
    overflow: hidden;
    background: transparent;   /* фото-баннер: под картинкой не должно быть зелёного фона */
    cursor: pointer;
}
.calc_hero__slide--image picture,
.calc_hero__slide--image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 26px;
}
.calc_hero__slide--image img {
    min-height: 0;
    object-fit: cover;
}
.calc_hero__content {
    position: relative;
    z-index: 2;
    max-width: 492px;
}
.calc_hero__title {
    color: var(--calc-white);
    font-size: 78px;
    line-height: 69.6px;
    margin: 0 0 30px;
    font-weight: 400;
}
.calc_hero__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 24px;
    line-height: 25px;
    margin: 0 0 163px;
}
.calc_hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 27px 49px 25px;
    border-radius: 30px;
    background: var(--calc-white);
    color: var(--calc-green);
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
    transition: 0.25s;
}
.calc_hero__btn:hover {
    background: var(--calc-cream);
}
.calc_hero__nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: rgba(225, 228, 215, 0.6);
    backdrop-filter: blur(4.5px);
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
}
.calc_hero__prev {
    left: 14px;
    transform: translate(-20px, -50%);
}
.calc_hero__next {
    right: 14px;
    transform: translate(20px, -50%);
}
.calc_hero__main:hover .calc_hero__nav {
    opacity: 1;
    transform: translate(0, -50%);
}
.calc_hero__nav svg {
    width: 15px;
}
/* Пагинация под баннером — как .first-pagination на главной.
   ВАЖНО: селекторы намеренно с префиксом `.calc_hero` (специфичность 0,2,0+),
   иначе swiper-bundle.min.css перебивает позицию своим
   `.swiper-pagination-bullets.swiper-pagination-horizontal {bottom:8px;left:0;width:100%}`
   (0,2,0) и «пилюля» прилипает к низу внутри баннера. */
.calc_hero .calc_hero__pagination {
    position: absolute;
    left: 7px;
    bottom: -58px;
    z-index: 7;
    display: flex;
    gap: 8px;
    width: fit-content;
    padding: 17px 20px;
    border-radius: 50px;
    background: rgba(229, 232, 218, 1);
}
.calc_hero .calc_hero__pagination .swiper-pagination-bullet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    background: var(--calc-dot);
    opacity: 1;
    transition: 0.5s;
}
.calc_hero .calc_hero__pagination .swiper-pagination-bullet-active {
    background: rgba(0, 152, 76, 1);
}
.calc_hero .calc_hero__pagination .swiper-pagination-bullet svg {
    --progress: 0;
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: 10;
    width: 16px;
    height: 16px;
    stroke-width: 4px;
    stroke: #009048;
    fill: none;
    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
    opacity: 0;
}
.calc_hero .calc_hero__pagination .swiper-pagination-bullet-active svg {
    opacity: 1;
}

.calc_hero__img {
    position: absolute;
    top: -83px;            
    right: -157px;          
    width: 874px;          
    height: 590px;          
    object-fit: contain;   
    z-index: 3;            
    pointer-events: none;  
}
/* Заглушка (пока картинка не загружена) — заполняет правую часть блока. */
.calc_hero__img--ph {
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    height: auto;
    min-height: 200px;
    background: linear-gradient(135deg, #2faa6a, #00984c);
}

.calc_hero__side {
    position: relative;
    box-sizing: border-box;    /* паддинги 29px ВХОДЯТ в 602px (иначе flexbox добавляет их сверху → блок раздувается до ~640) */
    flex: 0 1 602px;           /* ровно 602px; зазор 37 (см. .calc_hero__row) */
    max-width: 602px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    padding: 25px 29px;
    border-radius: 40px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    overflow: hidden;
}
.calc_hero__side::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;            /* градиент — над фото, под стрелкой/текстом (z-index:2) */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}
/* Фото карточки — отдельным слоем (picture/img), чтобы подменять версию по
   брейкпоинтам (как слайды hero). Лежит ПОД градиентом и контентом.
   object-position: top right — вырез под кнопку запечён в правом верхнем углу. */
.calc_hero__side-pic {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.calc_hero__side-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
}
/* Кнопка-стрелка — по типу .new .button на главной (форма, фон, ховер). */
.calc_hero__side-arrow {
    position: absolute;
    top: 7px;              /* подгони под вырез на картинке, если нужно */
    right: 3px;
    z-index: 2;
    width: 72px;
    height: 72px;
    border-radius: 28px;
    background: var(--calc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.calc_hero__side-arrow svg {
    transform: rotate(180deg);   /* ↗ → ↙ (влево-вниз) */
}
.calc_hero__side-arrow svg path {
    stroke: var(--calc-green);   /* в покое стрелка зелёная (как на главной) */
    transition: 0.3s;
}
.calc_hero__side:hover .calc_hero__side-arrow {
    background: var(--calc-green);
}
.calc_hero__side:hover .calc_hero__side-arrow svg path {
    stroke: var(--calc-white);
}
.calc_hero__side-text {
    position: relative;
    z-index: 2;
    color: var(--calc-white);
    font-size: 34px;
    line-height: 49.5px;
    font-weight: 400;
}

/* --------------------------- калькулятор ----------------------- */
.calc_section {
    padding: 0 0 181px;
}
.calc_section__title,
.calc_projects__title,
.calc_faq__title {
    font-size: 58px;
    line-height: 63.8px;
    font-weight: 400;
    color: var(--calc-text);
    margin: 0 0 60px;
}

/* Ряд калькулятора: левый блок 608, правый 1231, зазор 20 (вместо bootstrap 4/8).
   Кастомный flex поверх .row — как .calc_hero__row. Точные ширины на 1920 (≥1840),
   на десктопах поуже блоки ужимаются (shrink), <1200 — штатно встают в столбик. */
@media screen and (min-width: 1200px) {
    .calc_calc__row {
        --bs-gutter-x: 0;          /* убираем паддинги колонок и отрицательные поля .row */
        flex-wrap: nowrap;
        gap: 24px;
    }
    .calc_calc__row > .col-xl-4 {  /* левая панель */
        flex: 0 1 608px;
        width: auto;
        max-width: none;
        min-width: 0;
    }
    .calc_calc__row > .col-xl-8 {  /* правая колонка с банками */
        flex: 0 1 1231px;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

/* левая панель */
.calc_panel_left {
    background: var(--calc-bg-main);
    border-radius: 44px;
    padding: 40px 24px 40px 26px;
}
.calc_field {
    position: relative;
    margin-bottom: 24px;
}
.calc_field__label {
    display: block;
    color: var(--calc-grey);
    font-size: 20px;
    margin-bottom: 12px;
}
/* Белый бокс: значение + ползунок (+ бейдж %) */
.calc_field__box {
    position: relative;
    background: var(--calc-cream);
    border-radius: 30px;
    padding: 21px 31px 0;
}
.calc_field__value {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: var(--calc-text);
    margin-bottom: 17px;
}
/* Поля с ручным вводом (input) — сбрасываем дефолтные стили, типографику берут
   из .calc_field__value выше (тот же вид, что был у span). */
input.calc_field__value {
    width: 100%;
    border: none;
    padding: 0;
    background: transparent;
    font-family: inherit;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
.calc_field__badge {
    position: absolute;
    top: 21px;
    right: 31px;
    font-size: 20px;
    font-weight: 400;
    color: var(--calc-grey);
}
.calc_loan {
    margin: 38px 0 45px;
}
.calc_loan__label {
    display: block;
    color: var(--calc-grey);
    font-size: 20px;
    margin-bottom: 8px;
}
.calc_loan__sum {
    font-size: 38px;
    font-weight: 600;
    color: var(--calc-text);
}
.calc_submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 26px;
    border-radius: 30px;
    background: var(--calc-green);
    color: var(--calc-white);
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
    transition: 0.25s;
}
.calc_submit:hover {
    background: var(--calc-green-dark);
}
.calc_disclaimer {
    margin: 10px 0 0;
    font-size: 20px;
    color: var(--calc-muted);
}

/* --- noUiSlider кастомизация --- */
.calc_slider.noUi-target {
    height: 3px;
    border: none;
    border-radius: 4px;
    background: var(--calc-dot);     /* полоска справа от точки — #A9B7B0 */
    box-shadow: none;
    margin-top: 4px;
}
.calc_slider .noUi-connect {
    background: var(--calc-green);
}
.calc_slider .noUi-handle {
    width: 21px;
    height: 21px;
    right: -12px;
    top: -9px;
    border-radius: 50%;
    background: var(--calc-green);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: grab;
}
.calc_slider .noUi-handle:active {
    cursor: grabbing;
}
.calc_slider .noUi-handle::before,
.calc_slider .noUi-handle::after {
    display: none;
}

/* банки */
.calc_banks {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.calc_bank {
    display: flex;
    align-items: center;
    /* общий gap убран — расстояния между колонками задаются индивидуально (см. ниже) */
    padding: 22px 31px 22px 29px;
    border-radius: 14px;
    background: var(--calc-bg-main);
}
.calc_bank.is-hidden {
    display: none;
}
.calc_bank__head {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 0 0 316px;
    min-width: 0;
}
.calc_bank__logo {
    width: 106px;
    height: 106px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--calc-white);
    flex: 0 0 48px;
}
.calc_bank__logo--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--calc-green);
    color: var(--calc-white);
    font-size: 22px;
    font-weight: 700;
}
.calc_bank__name {
    font-size: 30px;
    line-height: 33.6px;
    font-weight: 400;
    color: var(--calc-text);
}
.calc_bank__col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 0 0 auto;        /* ширина по содержимому; расстояния — через margin-left ниже */
}
/* Индивидуальные расстояния между блоками строки.
   margin-left = отступ ПЕРЕД блоком. 1-й ребёнок (nth-child 1) — логотип+название. */
.calc_bank > :nth-child(2) { margin-left: 36px; }   /* до «Срок кредита» */
.calc_bank > :nth-child(3) { margin-left: 113px; }   /* до «Ставка» */
.calc_bank > :nth-child(4) { margin-left: 44px; }   /* до «Первый взнос» */
.calc_bank > :nth-child(5) { margin-left: auto; }   /* «Платёж» прижат к правому краю; замени auto на px для фикс. отступа */
.calc_bank__col--pay {
    flex: 0 0 210px;        /* фикс. ширина — платёж не «прыгает» при пересчёте сумм */
    text-align: right;
}
.calc_bank__cap {
    font-size: 20px;
    color: var(--calc-grey);
}
.calc_bank__val {
    font-size: 24px;
    line-height: 33px;
    font-weight: 600;
    color: var(--calc-text);
}
.calc_bank__col--pay .calc_bank__val {
    color: var(--calc-text);
}
.calc_banks__more-wrap {
    margin-top: 57px;
    margin-left: 150px
}
.calc_banks__more {
    padding: 26px 86px;
    border: none;
    border-radius: 30px;
    background: var(--calc-green);
    color: var(--calc-white);
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.25s;
}
.calc_banks__more:hover {
    background: var(--calc-hover);
}

/* --------------------------- проекты --------------------------- */
.calc_projects {
    padding: 0 0 160px;
}
/* Сетка карточек проектов — фикс. ширина + зазор (без Bootstrap-сетки) */
.calc_projects__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;                 /* отступ между карточками */
}
.calc_project {
    flex: 0 1 449px;        /* ровно 449px на 1920; на узких ужимается (shrink), не вылезает */
    max-width: 449px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--calc-bg-project);
    border-radius: 44px;
}
.calc_project__media {
    position: relative;
    display: block;
    border-radius: 44px;
    overflow: hidden;
    margin-bottom: 16px;
}
.calc_project__badge {
    position: absolute;
    top: 13px;
    left: 27px;
    z-index: 3;
    padding: 9px 15px 9px 8px;
    border-radius: 10px;
    background: var(--calc-green);
    font-size: 16px;
    color: var(--calc-white);
}
/* Свой слайдер (Swiper не инициализируется) — задаём структуру вручную */
.calc_project__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.calc_project__slider .swiper-wrapper {
    display: flex;
}
.calc_project__slider .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
}
.calc_project__slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 341px;
    object-fit: cover;
}
.calc_project__ph {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #cfd6c5, #aeb8a2);
}
/* Точки слайдера — как на главной (кружок + кольцо прогресса) */
/* «Пилюля» с точками под слайдером — как .first-pagination на главной */
.calc_project__dots {
    position: relative;
    z-index: 4;
    align-self: flex-start;        /* по ширине содержимого, прижата влево */
    display: inline-flex;
    gap: 8px;
    padding: 17px 20px;
    margin: 4px 0 23px 15px;     /* приподнята на нижний край картинки (как bottom:-58px на главной) */
    background: var(--calc-bg);
    border-radius: 50px;
}
.calc_project__dots .calc_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--calc-dot);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
}
.calc_project__dots .calc_dot.is-active {
    background: var(--calc-green);
}
.calc_project__dots .calc_dot svg {
    --progress: 0;
    position: absolute;
    left: -4px;
    top: -4px;
    width: 16px;
    height: 16px;
    margin: auto;
    stroke-width: 4px;
    stroke: #009048;
    fill: none;
    stroke-dasharray: 125.6;
    stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
    transform: rotate(-90deg);
    opacity: 0;
}
.calc_project__dots .calc_dot.is-active svg {
    opacity: 1;
}
.calc_project__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 24px;
    margin-bottom: 40px;
}
.calc_project__name {
    font-size: 30px;
    line-height: 33.6px;
    font-weight: 400;
    color: var(--calc-text);
}
.calc_project__apartments {
    font-size: 20px;
    color: var(--calc-grey);
}
.calc_project__price {
    font-size: 24px;
    line-height: 33px;
    font-weight: 600;
    color: var(--calc-text);
    margin-top: 4px;
}

/* Слайдер ряда карточек «Выбрать проект» — активен только на десктопе ≥1440
   (класс .is-slider вешает calc.js) и только если карточек > 4. На ≤1439 класса
   нет — карточки раскладываются существующими правилами .calc_projects__grid. */
.calc_projects__slider {
    position: relative;
}
.calc_projects__arrow {
    display: none;
}
.calc_projects__slider.is-slider {
    overflow: hidden;
}
.calc_projects__slider.is-slider .calc_projects__grid {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
    will-change: transform;
}
.calc_projects__slider.is-slider .calc_projects__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 170px;                 /* ≈ центр картинки карточки (≥1920, высота 341) */
    z-index: 6;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--calc-green);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.3s, background 0.3s;
}
.calc_projects__slider.is-slider .calc_projects__arrow--prev {
    left: 16px;
}
.calc_projects__slider.is-slider .calc_projects__arrow--next {
    right: 16px;
}
.calc_projects__arrow svg {
    width: 18px;
    height: 14px;
}
/* Неактивную стрелку (начало/конец списка) скрываем полностью.
   Специфичность 0-4-0 — чтобы перебить правило показа .is-slider ...arrow (0-3-0).
   display:none заодно снимает проблему клика «сквозь» стрелку на ссылку карточки. */
.calc_projects__slider.is-slider .calc_projects__arrow[disabled] {
    display: none;
}
@media (max-width: 1919px) {
    /* 1440–1919: картинка карточки 221 → центр стрелок ниже */
    .calc_projects__slider.is-slider .calc_projects__arrow {
        top: 110px;
    }
}

/* ----------------------------- FAQ ----------------------------- */
.calc_faq_section {
    padding: 0 0 0;
}
.calc_faq__title {
    text-align: center;
    margin-bottom: 39px;
}
.calc_faq__item {
    background: var(--calc-bg-main);
    border-radius: 44px;
    margin-bottom: 12px;
    overflow: hidden;
}
.calc_faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 24px 35px 24px 37px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 28px;
    line-height: 33.6px;
    color: var(--calc-text);
}
.calc_faq__icon {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: var(--calc-green);
}
.calc_faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.calc_faq__a-inner {
    padding: 0 50px 24px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--calc-text);
}

/* ------------- Этапы (Рассрочка / 100% оплаты) ------------- */
.calc_block__title {
    font-size: 58px;
    font-weight: 400;
    line-height: 63.8px;
    color: var(--calc-text);
    margin: 0 0 60px;
}
.calc_steps_section,
.calc_matcap_section {
    padding: 0 0 60px;
}
/* Размеры/отступы — РАССРОЧКА (базовые классы). */
.calc_steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 21px;
    row-gap: 30px;
}
.calc_step {
    background: var(--calc-bg-project);
    border-radius: 30px;
    padding: 25px 30px;
}

/* Размеры/отступы — 100% ОПЛАТЫ (отдельно от Рассрочки).
   Сейчас значения те же — меняй здесь, не трогая базовые .calc_steps/.calc_step.
   display/background наследуются от базового класса (элемент несёт оба класса);
   внутренние .calc_step__* — общие для обоих табов. */
.calc_steps--full {
    grid-template-columns: repeat(2, minmax(0, 854px));   /* блоки 854px (на узких — ужимаются, без переполнения) */
    gap: 87px;          /* зазор между колонками */
    row-gap: 55px;      /* зазор между рядами */
}
.calc_step--full {
    border-radius: 30px;
    padding: 25px 30px;
}

.calc_step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}
.calc_step__badge {
    display: inline-flex;
    align-items: center;
    padding: 25px 51px;
    border-radius: 40px;
    background: var(--calc-green);
    color: var(--calc-white);
    font-size: 24px;
    line-height: 20px;
}
.calc_step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 40%;
    border: 1px solid var(--calc-green);
    color: var(--calc-green);
    font-size: 24px;
    line-height: 20px;
}
.calc_step__title {
    font-size: 30px;
    font-weight: 400;
    line-height: 33.6px;
    color: var(--calc-text);
    margin-bottom: 10px;
}
.calc_step__text {
    font-size: 24px;
    line-height: 25px;
    color: var(--calc-grey);
}

/* ------------------------ Мат. капитал ---------------------- */
.calc_matcap {
    display: flex;
    flex-wrap: wrap;          /* блоки фикс. ширины, сами переносятся на новую строку */
    gap: 21px;
}
.calc_matcap__item {
    flex: 0 1 605px;          /* ровно 605 (одинаково на 1920 и 1440); grow:0 — не тянутся, shrink:1 — ужимаются на узких */
    max-width: 605px;
    background: var(--calc-bg-project);
    border-radius: 45px;
    padding: 25px 23px;
}
.calc_matcap__badge {
    display: inline-block;
    padding: 25px 25px 26px 19px;
    border-radius: 40px;
    border: 1px solid var(--calc-green);
    color: var(--calc-green);
    font-size: 24px;
    line-height: 20px;
    margin-bottom: 19px;
}
.calc_matcap__sum {
    display: block;
    font-size: 38px;
    font-weight: 600;
    color: var(--calc-text);
    margin-bottom: 8px;
}
.calc_matcap__text {
    margin: 0;
    font-size: 24px;
    line-height: 25px;
    color: var(--calc-grey);
}

/* ------------------------ Блок формы ------------------------ */
/* Верхний отступ блока формы — только на этой странице (перекрывает
   .back_section { padding-top: 180px } из style.css). */
.back_section.calc_contact {
    padding-top: 173px;
}

/* ============================================================
   АДАПТИВЫ
   ============================================================ */

/* ----- ШРИФТЫ: с макета 1440 и ниже (≤1919; десктоп ≥1920 — крупные) ----- */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
    .calc_section__title,
    .calc_projects__title,
    .calc_faq__title,
    .calc_block__title { font-size: 42px; }
    .calc_bank__head { flex: 0 0 180px; }
}

/* ----- HERO: на ВСЕХ адаптивах ниже десктопа (≤1919) кнопка убрана,
   кликабелен весь зелёный слайд (клик открывает форму, обработчик — calc.js).
   ВАЖНО: без min-width — иначе на 1024/768/390 кнопка снова появляется. ----- */
@media screen and (max-width: 1919px) {
    .calc_hero__btn { display: none; }
    .calc_hero__slide { cursor: pointer; }
}

/* ============================================================
   БРЕЙКПОИНТ 1440 — диапазон 1440–1919 (десктоп-макет 1920 живёт ≥1920).
   Рамку контента фиксируем на 1200px и центрируем (у .container margin:auto),
   иначе в этом диапазоне тема-контейнер раздувается до 1470/1884 и контент
   прижимается влево. Шрифты/вертикальные отступы — отдельными правилами.
   ============================================================ */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
    /* Рамка контента «резиновая»: 1200px на 1440 → 1860px на 1919, по центру (margin:auto). */
    .calc_tabs_section > .container,
    .calc_hero > .container,
    .calc_section > .container,
    .calc_projects > .container,
    .calc_faq_section > .container,
    .calc_steps_section > .container,
    .calc_matcap_section > .container {
        width: clamp(1200px, calc(1200px + (100vw - 1440px) * 660 / 479), 1860px);
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    /* gutter=0 → у вложенных .row нет отрицательных полей и паддингов колонок (контент флешем по рамке). */
    .calc_tabs_section .row,
    .calc_section .row,
    .calc_faq_section .row { --bs-gutter-x: 0; }
    .calc_tabs_section {padding-top: 125px; padding-bottom: 98px;}
    .calc_tab {padding: 18px 19px 17px; width: 170px;}

    /* --- HERO: левый блок 685, зазор 25, правый 488, высота блоков 406 --- */
    .calc_hero {padding: 0 0 184px;}
    .calc_hero__row { gap: 25px; }
    /* Ширины через width:calc, а не flex-grow: у side гориз. паддинг 58px, который при
       flex-basis:0 прибавляется к его флекс-базе и перекашивает раздачу (даёт main 651 / side 522
       вместо 685/488). Явный width (border-box — паддинг внутри) = точная пропорция, резина в %. */
    .calc_hero__main { flex: 0 0 auto; width: calc((100% - 26px) * 685 / 1173); max-width: none; min-height: 406px; }
    .calc_hero__side { flex: 0 0 auto; width: calc((100% - 26px) * 488 / 1173); max-width: none; min-height: 406px; border-radius: 40px 0 40px 40px;}
    .calc_hero__content {max-width: 320px;}
    .calc_hero__title { font-size: 58px; margin: 0 0 9px;}
    .calc_hero__text {margin: 0; padding-right: 27px;}
    /* Паддинг — только текстовому слайду; у слайда-картинки padding:0 (фото на всю площадь). */
    .calc_hero__slide:not(.calc_hero__slide--image) {padding: 18px 31px;}
    /* Текстовый слайд — не ниже 406 (контент ужат, влезает). */
    .calc_hero__slide { min-height: 406px; }
    /* Слайд-картинка — РОВНО 406: фото кропается (object-fit: cover), а не тянет высоту.
       Тут нужен height, а НЕ min-height: иначе height:100% у picture/img резолвится в
       авто = натуральную высоту фото, и картинка выше 406 растягивает блок. */
    .calc_hero__slide--image { height: 406px; min-height: 0; }
    .calc_hero__slide--image img { height: 100%; min-height: 0; }
    .calc_hero__img {top: -73px; right: -80px; width: 555px; height: 590px;}
    .calc_hero__row {gap: 26px; flex-wrap: nowrap;}
    .calc_hero__side {padding: 19px 29px;}
    .calc_hero__side-text {font-size: 24px; line-height: 45.9px;}
    .calc_hero__side-arrow {top: 0; right: -2px; width: 56px; height: 56px; border-radius: 18px;}

    /* --- КАЛЬКУЛЯТОР: левая панель 428, правая колонка 751, зазор 20 --- */
    .calc_calc__row { gap: 20px; }
    .calc_calc__row > .col-xl-4 { flex: 428 1 0; max-width: none; }
    .calc_calc__row > .col-xl-8 { flex: 751 1 0; max-width: none; }
    .calc_section__title { margin: 0 0 39px;}
    .calc_panel_left {padding: 20px 19px 20px 21px;border-radius: 24px;}
    .calc_field {margin-bottom: 14px;}
    .calc_loan {margin: 28px 0 30px;}
    .calc_loan__label {font-size: 16px; margin-bottom: 16px;}
    .calc_loan__sum {font-size: 28px; font-weight: 550;}
    .calc_disclaimer {margin: 11px 0 0; font-size: 16px;}


    .calc_section {padding: 0 0 124px;}
    /* Банк — в две строки: calc_bank__head сверху, остальные 4 колонки снизу. */
    .calc_bank {
        flex-wrap: wrap;
        row-gap: 11px;                    /* отступ между строкой head и строкой колонок (правь при желании) */
        padding: 20px 18px 22px 21px;
    }
    .calc_banks {gap: 18px;}
    .calc_bank__head { flex: 0 0 100%; }   /* первая строка целиком */
    /* Отступы 4 колонок второй строки — вручную, как на 1920; крайний (Платёж)
       прижат к концу строки через margin-left:auto. Значения правь под макет 1440. */
    .calc_bank > :nth-child(2) { margin-left: 0; }   /* перед «Срок кредита» */
    .calc_bank > :nth-child(3) { margin-left: 89px; }  /* перед «Ставка» */
    .calc_bank > :nth-child(4) { margin-left: 47px; }   /* перед «Первый взнос» */
    .calc_bank > :nth-child(5) { margin-left: auto; }   /* «Платёж» — к правому краю */
    .calc_bank__col--pay { flex: 0 0 180px; }
    .calc_banks__more-wrap { margin-left: 0; }
    .calc_bank__logo {width: 68px; height: 68px;}
    .calc_bank__name {font-size: 24px;}
    .calc_bank__col {gap: 9px;}
    .calc_bank__cap {font-size: 16px;}
    .calc_bank__val {font-size: 18px;}

    /* --- ПРОЕКТЫ: карточки 290, зазор 13 (по 4 в ряд); высоту регулируешь сам --- */
    .calc_projects {padding: 0 0 126px; }
    /* Проекты: грид из 4 равных колонок — всегда 4 в ряд; карточки тянутся вместе с рамкой
       (на 1440 ~290 → к 1919 ~455) и картинками внутри (img width:100%). Если проектов 5+,
       перенесённая карточка занимает одну колонку (как в верхней строке), а не всю строку. */
    .calc_projects__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; width: 100%;}
    .calc_project { max-width: none; border-radius: 24px;}
    .calc_projects__title {margin: 0 0 38px;}
    .calc_project__badge {top: 15px; left: 15px; padding: 9px 15px 9px 9px;}
    .calc_project__slider .swiper-slide img {height: 221px;}
    .calc_project__media {border-radius: 24px;}
    .calc_project__dots {margin: -5px 0 18px 10px;}
    .calc_project__info {margin-left: 16px; gap: 4px; margin-bottom: 26px;}
    .calc_project__name {font-size: 18px;}
    .calc_project__apartments {font-size: 16px; margin-bottom: 12px;}

    /* --- FAQ: на всю ширину рамки (снимаем offset/сужение), высоты строк не трогаем --- */
    .calc_faq_section .offset-xl-1 { margin-left: 0; }
    .calc_faq_section .col-xl-10 { flex: 0 0 100%; max-width: 100%; }
    .calc_faq__item {margin-bottom: 12.5px;}

    .back_section.calc_contact {
    padding-top: 112px;
}

    .calc_block__title {margin: 0 0 38px;}
    .calc_steps {gap: 30px;}
    .calc_step {border-radius: 40px; padding: 25px 29px;}
    .calc_step__badge {padding: 27px 51px 25px 47px;}
    .calc_matcap {width: 100%; gap: 4px; row-gap: 21px; justify-content: flex-start;}
    .calc_matcap__item {flex: 0 1 598px; max-width: 598px;}
}

/* ============================================================
   МАКЕТ 1024 — диапазон 1024–1439. Рамка контента «резиновая»:
   768px на 1024 → 1200px на 1439 (стыкуется с макетом 1440), по центру.
   Блоки тянутся за рамкой; карточки проектов фикс. (колонок больше при росте).
   ============================================================ */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    /* Резиновая рамка контента, по центру (margin:auto у .container). */
    .calc_tabs_section > .container,
    .calc_hero > .container,
    .calc_section > .container,
    .calc_projects > .container,
    .calc_faq_section > .container,
    .calc_steps_section > .container,
    .calc_matcap_section > .container {
        width: clamp(768px, calc(768px + (100vw - 1024px) * 432 / 415), 1200px);
        max-width: none;
        padding-left: 0;        /* .container = border-box: любой паддинг съедает ширину контента (768 - 3 = 765) */
        padding-right: 0;
    }
    .calc_tabs_section .row,
    .calc_section .row,
    .calc_faq_section .row { --bs-gutter-x: 0; }
    .calc_section__title,
    .calc_projects__title,
    .calc_faq__title,
    .calc_block__title { font-size: 42px; }

    /* Табы — ширина 170. */
    .calc_tabs_section {padding-top: 198px; padding-bottom: 50px;}
    .calc_tab { width: 170px; padding: 17px 20px 18px;}

    /* HERO — в две строки: правый блок уходит вниз; оба на всю ширину рамки. */
    .calc_hero__main { flex: 1 1 100%; max-width: none; min-height: 579px; }
    .calc_hero__slide {padding: 31px 20px 50px 41px; border-radius: 44px; min-height: 579px;}
    /* Слайд-картинка — фикс. height (а не min-height), чтобы фото не тянуло блок по высоте. */
    .calc_hero__slide--image { height: 579px; min-height: 0; }
    .calc_hero__slide--image img { height: 100%; min-height: 0; }
    .calc_hero {padding: 0 0 117px;}
    /* Блок во всю ширину рамки. Под макет 768×392 фиксируем это соотношение:
       на 1024 рамка = 768 → ровно 768×392; шире рамка — тянется пропорционально.
       Грузится планшетная версия фото (<picture> source ≤1439), object-fit:cover
       ложится ровно по этому соотношению, вырез под кнопку остаётся на месте. */
    .calc_hero__side { flex: 1 1 100%; max-width: none; aspect-ratio: 768 / 392; min-height: 0; }
    .calc_hero__content {max-width: 330px;}
    .calc_hero__text {padding-right: 37px;}
    .calc_hero__title { font-size: 58px; margin: 0 0 9px;}                         /* placeholder — подбери */
    .calc_hero__img { top: auto; right: -1px; bottom: 0; width: 644px; height: auto; } /* безопасно, без overflow — подбери */
    .calc_hero__row {gap: 105px;}
    .calc_hero__side {padding: 42px 39px; border-radius: 44px 0 44px 44px;}
    .calc_hero__side-text {line-height: 45.9px;}
    .calc_hero__side-arrow {top: 3px; right: 0;}
    .calc_hero .calc_hero__pagination { left: 14px; bottom: -55px; }

    /* КАЛЬКУЛЯТОР — панель и колонка банков друг под другом, на всю ширину рамки (высоты подберёшь). */
    .calc_section {padding: 0 0 118px;}
    .calc_calc__row { flex-wrap: wrap; gap: 45px; }
    .calc_calc__row > .col-xl-4,
    .calc_calc__row > .col-xl-8 { flex: 1 1 100%; max-width: none; }
    /* Банк — в две строки (head сверху, 4 колонки снизу); отступы/высоты подберёшь. */
    .calc_section__title {margin: 0 0 43px;}
    .calc_panel_left {padding: 20px 17px 21px 21px; border-radius: 24px;}
    .calc_field {margin-bottom: 14px;}
    .calc_loan {margin: 29px 0 31px;}
    .calc_loan__label {font-size: 16px; margin-bottom: 14px;}
    .calc_loan__sum {font-size: 28px; font-weight: 550;}
    .calc_disclaimer {font-size: 16px;}
    /* Банк — в две строки: calc_bank__head сверху, остальные 4 колонки снизу. */
    .calc_bank {
        flex-wrap: wrap;
        row-gap: 11px;                    /* отступ между строкой head и строкой колонок (правь при желании) */
        padding: 20px 18px 21px 21px;
    }
    .calc_banks {gap: 18px;}
    .calc_bank__head { flex: 0 0 100%; }   /* первая строка целиком */
    /* Отступы 4 колонок второй строки — вручную, как на 1920; крайний (Платёж)
       прижат к концу строки через margin-left:auto. Значения правь под макет 1440. */
    .calc_bank > :nth-child(2) { margin-left: 0; }   /* перед «Срок кредита» */
    .calc_bank > :nth-child(3) { margin-left: 89px; }  /* перед «Ставка» */
    .calc_bank > :nth-child(4) { margin-left: 47px; }   /* перед «Первый взнос» */
    .calc_bank > :nth-child(5) { margin-left: auto; }   /* «Платёж» — к правому краю */
    .calc_bank__col--pay { flex: 0 0 180px; }
    .calc_banks__more-wrap { margin-left: 0; }
    .calc_bank__logo {width: 68px; height: 68px;}
    .calc_bank__name {font-size: 24px;}
    .calc_bank__col {gap: 9px;}
    .calc_bank__cap {font-size: 16px;}
    .calc_bank__val {font-size: 18px;}

    /* ПРОЕКТЫ — карточки фикс. 372 (колонок больше при росте), column-gap 24 / row-gap 20, картинка 220, радиус 20. */
    .calc_projects__grid { gap: 20px 24px; justify-content: center; }
    .calc_project { flex: 0 0 372px; max-width: 372px; border-radius: 20px; }
    .calc_project__media { border-radius: 20px; }
    .calc_project__slider .swiper-slide img { height: 220px; }

    .calc_projects {padding: 0 0 115px;}
    .calc_projects__grid {gap: 20px 24px;}
    .calc_projects__title {margin: 0 0 39px;}
    .calc_project__badge {top: 15px; left: 20px; padding: 9px 14px 9px 9px;}
    .calc_project__dots {margin: -5px 0 20px 13px;}
    .calc_project__info {margin-left: 16px; gap: 4px; margin-bottom: 25px;}
    .calc_project__name {font-size: 18px;}
    .calc_project__apartments {font-size: 16px; margin-bottom: 12px;}

    /* FAQ — на всю ширину рамки. */
    .calc_faq_section .offset-xl-1 { margin-left: 0; }
    .calc_faq_section .col-xl-10 { flex: 0 0 100%; max-width: 100%; }

    .calc_faq__q {font-size: 20px; padding: 24px 34px 24px 37px;}
    .calc_faq__icon {font-size: 30px;}
    .calc_faq__item {margin-bottom: 12.5px;}

    .back_section.calc_contact {
    padding-top: 167px;
}

    .calc_steps {gap: 30px; row-gap: 32px;}
    .calc_block__title {margin: 0 0 38px;}
    .calc_step {border-radius: 44px; padding: 24px 29px;}
    .calc_step__badge {padding: 25px 52px 26px 47px; border-radius: 32px;}
    .calc_step__title {font-size: 24px;}
    .calc_step__text {font-size: 18px;}

    /* МАТ. КАПИТАЛ — блоки растягиваются на всю ширину рамки (по одному в ряд), не фикс. 605. */
    .calc_matcap__item { flex: 1 1 100%; max-width: none; }
    .calc_matcap {gap: 19px;}
}

/* ============================================================
   МАКЕТ 768 — диапазон 768–1023 (единый самодостаточный блок).
   Резиновая рамка контента: 404px на 768 → 828px на 1023 (на 828
   помещаются 2 карточки по 404). Крупные блоки (слайдер/боковая/
   калькулятор) тянутся на всю рамку; высоты 546/392 — как min-height.
   Карточки/этапы/маткап — grid auto-fill minmax(404px,1fr): 1→2 в ряд,
   одинокая в последней строке держит ширину колонки (404, не на всю строку).
   Шрифты/паддинги ВНУТРИ блоков — как в 1024–1439.
   Мобайл ≤767 обслуживает отдельный блок ниже (не зависит от этого).
   Порядок: рамка → заголовки → табы → hero → калькулятор → банки →
   проекты → FAQ → этапы/маткап.
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* --- РАМКА КОНТЕНТА (резиновая, по центру: margin:auto у .container) --- */
    .calc_tabs_section > .container,
    .calc_hero > .container,
    .calc_section > .container,
    .calc_projects > .container,
    .calc_faq_section > .container,
    .calc_steps_section > .container,
    .calc_matcap_section > .container {
        width: clamp(404px, calc(404px + (100vw - 768px) * 424 / 255), 828px);
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    .calc_tabs_section .row,
    .calc_section .row,
    .calc_faq_section .row { --bs-gutter-x: 0; }

    /* --- ЗАГОЛОВКИ СЕКЦИЙ — 24 (hero h1 — отдельно, 40px) --- */
    .calc_section__title,
    .calc_projects__title,
    .calc_faq__title,
    .calc_block__title { font-size: 24px; }

    /* --- ТАБЫ — в строку, ширина по контенту, перенос лишних на новую строку --- */
    .calc_tabs_section { padding-top: 110px; padding-bottom: 35px; }
    .calc_tabs { gap: 10px; }
    .calc_tab { width: auto; padding: 12px 19px 12px 20px; font-size: 16px; }

    /* --- HERO — слайдер 404×546 и боковая 404×392 тянутся на всю рамку (высоты — min-height) --- */
    .calc_hero {padding:0 0 91px;}
    .calc_hero__row {gap: 103px;}
    .calc_hero__title { font-size: 34px; margin: 0;}
    .calc_hero__main { flex: 1 1 100%; max-width: none; min-height: 546px; }
    .calc_hero__slide { flex-direction: column; padding: 30px 27px; min-height: 546px; border-radius: 34px; }
    .calc_hero__slide--image { height: 546px; min-height: 0; }
    .calc_hero__slide--image img { height: 100%; min-height: 0; }
    .calc_hero__content { max-width: 100%; }
    .calc_hero__text { font-size: 18px; padding-right: 60px; margin-bottom: 30px; }
    /* Картинка дома — ручная подгонка (как на 1440/1024): position:absolute
       относительно .calc_hero__slide. width/height — размер; top/bottom — вниз-вверх;
       left/right — влево-вправо. Сброшена статиковая раскладка (была width:100% и
       упиралась в ~350 из-за flex-shrink родителя <picture>). */
    .calc_hero__img {
        position: absolute;
        max-width: none;     /* снимаем глобальный img{max-width:100%} — он клампил ширину в 404 (= ширину слайда) */
        width: 392px;        /* ширина */
        height: 356px;       /* высота */
        top: auto;
        bottom: 0;           /* вниз-вверх: bottom (или top) */
        left: auto;
        right: 0;            /* влево-вправо: right (или left) */
        margin-top: 0;
        border-radius: 0 0 34px 22px;
    }
    .calc_hero__nav { display: none; }
    .calc_hero .calc_hero__pagination { left: 1px; bottom: -58px; }
    .calc_hero__side { flex: 1 1 100%; max-width: none; min-height: 392px; border-radius: 48px 0 48px 48px; padding: 14px 32px;}
    .calc_hero__side-arrow {top: 0; right: -2px; width: 54px; height: 54px; border-radius: 20px;}
    .calc_hero__side-text {font-size: 24px;}

    /* --- КАЛЬКУЛЯТОР — панель и банки друг под другом на всю рамку; отступы/шрифты как 1024–1439 --- */
    .calc_section {padding: 0 0 115px;}
    .calc_section__title {margin: 0 0 11px;}
    .calc_calc__row { flex-wrap: wrap; gap: 40px; }
    .calc_calc__row > .col-xl-4,
    .calc_calc__row > .col-xl-8 { flex: 1 1 100%; max-width: none; }
    .calc_panel_left { padding: 20px 17px 21px 21px; border-radius: 24px; }
    .calc_field { margin-bottom: 14px; }
    .calc_loan { margin: 29px 0 31px; }
    .calc_loan__label { font-size: 16px; margin-bottom: 14px; }
    .calc_loan__sum { font-size: 28px; font-weight: 550; }
    .calc_disclaimer { font-size: 16px; }
    .calc_submit {padding: 16px;}

    /* --- БАНКИ — карточка в 3 строки: head / (срок+ставка+взнос) / платёж(влево).
       Шрифты/паддинги — как 1024–1439; горизонтальные отступы 2-й строки — вручную (правь под макет). --- */
    .calc_banks { gap: 19px; }
    .calc_banks__more-wrap { margin-left: 0; }
    .calc_bank { flex-wrap: wrap; column-gap: 0; row-gap: 11px; padding: 20px 18px 21px 21px; }
    .calc_bank__head { flex: 0 0 100%; }              /* строка 1: иконка + название */
    .calc_bank__col { flex: 0 0 auto; gap: 9px; }     /* строка 2: срок/ставка/взнос — по контенту */
    .calc_bank > :nth-child(2) { margin-left: 0; }    /* срок кредита */
    .calc_bank > :nth-child(3) { margin-left: 84px; } /* ставка */
    .calc_bank > :nth-child(4) { margin-left: 35px; } /* первый взнос */
    .calc_bank__col--pay { flex: 0 0 100%; text-align: left; }   /* строка 3: платёж, прижат влево */
    .calc_bank > :nth-child(5) { margin-left: 0; margin-top: 9px;}    /* убираем base margin-left:auto */
    .calc_bank__logo { width: 68px; height: 68px; }
    .calc_bank__name { font-size: 24px; }
    .calc_bank__cap { font-size: 14px; }
    .calc_bank__val { font-size: 16px; }
    /* Последний блок (колонка платежа) — свой шрифт. */
    .calc_bank__col--pay .calc_bank__cap { font-size: 16px; }
    .calc_bank__col--pay .calc_bank__val { font-size: 18px; }

    /* --- ПРОЕКТЫ — grid: карточки min 404, тянутся; 1→2 в ряд; одинокая держит колонку (auto-fill).
       Высота карточки min 427; шрифты/паддинги внутри — как 1024–1439. --- */
    .calc_projects {padding: 0 0 109px;}
    .calc_projects__title {margin: 0 0 16px;}
    .calc_projects__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(404px, 1fr));
        gap: 19px;
    }
    .calc_project { max-width: none; min-height: 427px; border-radius: 24px; }
    .calc_project__media { border-radius: 20px; }
    .calc_project__slider .swiper-slide img { height: 220px; }
    .calc_project__badge { top: 15px; left: 17px; padding: 9px 14px 9px 9px; }
    .calc_project__dots { margin: -5px 0 20px 13px; }
    .calc_project__info { margin-left: 16px; gap: 4px; margin-bottom: 25px; }
    .calc_project__name { font-size: 18px; }
    .calc_project__apartments { font-size: 16px; margin-bottom: 12px; }

    /* --- FAQ — на всю рамку (min 404), текст 18, высота строки остаётся 82
       (padding + line-height 33.6 базовые — как 1024–1439). --- */
    .calc_faq__title {margin-bottom: 16px;}
    .calc_faq_section .offset-xl-1 { margin-left: 0; }
    .calc_faq_section .col-xl-10 { flex: 0 0 100%; max-width: 100%; }
    .calc_faq { min-width: 404px; }
    .calc_faq__q { font-size: 18px; padding: 22px 41px 22px 37px; height: 82px; line-height: 22px;}
    .calc_faq__icon { font-size: 30px; }
    .calc_faq__item { margin-bottom: 12.5px; }

    .back_section.calc_contact {padding-top: 145px;}

    /* --- ЭТАПЫ / МАТКАП — grid как у проектов: min 404, тянутся, 1→2 в ряд, одинокая держит колонку.
       Шрифты/паддинги — как 1024–1439. --- */
    .calc_block__title {margin: 0 0 17px; }
    .calc_steps {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(404px, 1fr));
        gap: 31px;
    }
    .calc_step { border-radius: 44px; padding: 24px 29px; }
    .calc_step__badge { padding: 25px 52px 26px 47px; border-radius: 32px; }
    .calc_step__title { font-size: 24px; line-height: 27px;}
    .calc_step__text { font-size: 18px; }
    .calc_matcap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(404px, 1fr));
        gap: 22px;
    }
    .calc_matcap__item { max-width: none; padding: 24px 23px 25px; }
    .calc_matcap__text {font-size: 18px;}
}

/* ============================================================
   МАКЕТ 390 — мобайл (≤767). По сути планшетная раскладка (шрифты/высоты/
   паддинги/структура банков — как 768–1023), но:
   • рамка резиновая 362→404: на 390 = 362 (гаттеры 14px), растёт до 404 и
     бесшовно стыкуется с планшетом (у которого на 768 ровно 404);
   • карточки/этапы/маткап — 1 в ряд (1fr); табы без фикс-ширины; заголовки 24.
   Порядок: рамка → заголовки → табы → hero → калькулятор → банки →
   проекты → FAQ → этапы/маткап.
   ============================================================ */
@media screen and (max-width: 767px) {
    /* --- РАМКА КОНТЕНТА: 100%-28px (гаттеры 14px), но не шире 404 (стык с планшетом) --- */
    .calc_tabs_section > .container,
    .calc_hero > .container,
    .calc_section > .container,
    .calc_projects > .container,
    .calc_faq_section > .container,
    .calc_steps_section > .container,
    .calc_matcap_section > .container {
        width: min(calc(100vw - 28px), 404px);
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    .calc_tabs_section .row,
    .calc_section .row,
    .calc_faq_section .row { --bs-gutter-x: 0; }

    /* --- ЗАГОЛОВКИ СЕКЦИЙ — 24 (как на планшете) --- */
    .calc_section__title,
    .calc_projects__title,
    .calc_faq__title,
    .calc_block__title { font-size: 24px; }

    /* --- ТАБЫ — без фикс-ширины (по контенту), перенос лишних --- */
    .calc_tabs_section { padding-top: 110px; padding-bottom: 16px; }
    .calc_tabs { gap: 10px; }
    .calc_tab { width: auto; padding: 12px 17px; font-size: 16px; }

    /* --- HERO — слайдер 362×546, боковая 362×392 (высоты/шрифты как планшет) --- */
    .calc_hero {padding:0 0 61px;}
    .calc_hero__title { font-size: 34px; margin: 0; }
    .calc_hero__main { flex: 1 1 100%; max-width: none; min-height: 546px; }
    .calc_hero__slide { flex-direction: column; padding: 30px 27px; min-height: 546px; border-radius: 34px; }
    .calc_hero__slide--image { height: 546px; min-height: 0; }
    .calc_hero__slide--image img { height: 100%; min-height: 0; }
    .calc_hero__content { max-width: 100%; }
    .calc_hero__text { font-size: 18px; padding-right: 20px; margin-bottom: 30px; }
    /* Картинка дома — ручная подгонка (position:absolute от .calc_hero__slide). */
    .calc_hero__img {
        position: absolute;
        max-width: none;
        width: 350px;        /* ширина (по умолчанию = ширине слайда на 390; правь под макет) */
        height: 370px;       /* высота */
        top: 185px;
        bottom: 0;           /* вниз-вверх */
        left: auto;
        right: 0;            /* влево-вправо */
        margin-top: 0;
        border-radius: 0 0 34px 44px;
    }
    .calc_hero__row {gap: 93px;}
    .calc_hero__nav { display: none; }
    .calc_hero .calc_hero__pagination { left: 0; bottom: -58px; }
    .calc_hero__side { flex: 1 1 100%; max-width: none; min-height: 392px; border-radius: 30px 0 30px 30px; padding: 14px 25px; }
    .calc_hero__side-arrow { top: 0; right: -2px; width: 54px; height: 54px; border-radius: 20px; }
    .calc_hero__side-text { font-size: 24px; }

    /* --- КАЛЬКУЛЯТОР — ширина 362; отступы/шрифты как планшет --- */
    .calc_section {padding: 0 0 72px;}
    .calc_section__title {margin: 0 0 11px;}
    .calc_calc__row { flex-wrap: wrap; gap: 40px; }
    .calc_calc__row > .col-xl-4,
    .calc_calc__row > .col-xl-8 { flex: 1 1 100%; max-width: none; }
    .calc_panel_left { padding: 20px 17px 21px 21px; border-radius: 24px; }
    .calc_field { margin-bottom: 14px; }
    .calc_loan { margin: 29px 0 31px; }
    .calc_loan__label { font-size: 16px; margin-bottom: 14px; }
    .calc_loan__sum { font-size: 28px; font-weight: 550; }
    .calc_disclaimer { font-size: 16px; }
    .calc_submit {padding: 16px;}

    /* --- БАНКИ — ширина 362, карточка в 3 строки; шрифты/паддинги как планшет --- */
    .calc_banks { gap: 19px; }
    .calc_banks__more-wrap { margin-left: 0; }
    .calc_bank { flex-wrap: wrap; column-gap: 0; row-gap: 11px; padding: 20px 18px 15px 21px; }
    .calc_bank__head { flex: 0 0 100%; }
    .calc_bank__col { flex: 0 0 auto; gap: 2px; }
    .calc_bank > :nth-child(2) { margin-left: 0; }
    .calc_bank > :nth-child(3) { margin-left: 17px; }
    .calc_bank > :nth-child(4) { margin-left: 16px; }
    .calc_bank__col--pay { flex: 0 0 100%; text-align: left; }
    .calc_bank > :nth-child(5) { margin-left: 0; margin-top: -4px; gap: 4px;}
    .calc_bank__logo { width: 68px; height: 68px; }
    .calc_bank__name { font-size: 24px; }
    .calc_bank__cap { font-size: 14px; }
    .calc_bank__val { font-size: 16px; }
    .calc_bank__col--pay .calc_bank__cap { font-size: 16px; }
    .calc_bank__col--pay .calc_bank__val { font-size: 18px; }

    /* --- ПРОЕКТЫ — 362×427, 1 в ряд; шрифты/паддинги как планшет --- */
    .calc_projects {padding: 0 0 74px;}
    .calc_projects__title {margin: 0 0 16px;}
    .calc_projects__grid { display: grid; grid-template-columns: 1fr; gap: 19px; }
    .calc_project { max-width: none; min-height: 427px; border-radius: 24px; }
    .calc_project__media { border-radius: 20px; }
    .calc_project__slider .swiper-slide img { height: 220px; }
    .calc_project__badge { top: 15px; left: 17px; padding: 9px 14px 9px 9px; }
    .calc_project__dots { margin: -5px 0 20px 9px; }
    .calc_project__info { margin-left: 16px; gap: 4px; margin-bottom: 25px; }
    .calc_project__name { font-size: 18px; }
    .calc_project__apartments { font-size: 16px; margin-bottom: 12px; }

    /* --- FAQ — ширина 362 (min-width:0, иначе 404 вылезет за рамку); остальное как планшет --- */
    .calc_faq__title {margin-bottom: 16px;}
    .calc_faq_section .offset-xl-1 { margin-left: 0; }
    .calc_faq_section .col-xl-10 { flex: 0 0 100%; max-width: 100%; }
    .calc_faq { min-width: 0; }
    .calc_faq__q { font-size: 18px; padding: 22px 30px 22px 37px; height: 82px; line-height: 22px; }
    .calc_faq__icon { font-size: 30px; }
    .calc_faq__item { margin-bottom: 12px; }

    .back_section.calc_contact {padding-top: 147px;}

    /* --- ЭТАПЫ / МАТКАП — ширина 362, 1 в ряд; шрифты/паддинги как планшет --- */
    .calc_block__title {margin: 0 0 17px; }
    .calc_steps { display: grid; grid-template-columns: 1fr; gap: 31px; }
    .calc_step { border-radius: 44px; padding: 24px 29px; }
    .calc_step__badge { padding: 25px 52px 26px 47px; border-radius: 32px; }
    .calc_step__head {margin-bottom: 27px;}
    .calc_step__title { font-size: 24px; line-height: 31px; margin-bottom: 12px;}
    .calc_step__text { font-size: 18px; }
    .calc_step--full .calc_step__title {line-height: 27px; margin-bottom: 9px;}
    .calc_matcap { display: grid; grid-template-columns: 1fr; gap: 22px; }
    .calc_matcap__item { max-width: none; padding: 24px 23px 25px; }
    .calc_matcap__badge {margin-bottom: 17px;}
    .calc_matcap__text {font-size: 18px;}
}