/*
 * Ипотека от 6%. Контрольные ширины макета: 1920, 1440, 990, 375.
 * Крошки и заголовок, банки, калькулятор из двух карточек, программы табами.
 */

.w-crumbs {
    margin-top: 60px;
    color: #1e2529;
    font-size: 14px;
    line-height: 1;
}

.w-crumbs__link { color: inherit; text-decoration: none; transition: color var(--w-ease); }
.w-crumbs__current { color: #8b8b8b; }

/* --- Заголовок --- */
.w-mortgage-intro {
    max-width: 676px;
    margin: 40px auto 0;
    text-align: center;
}

.w-mortgage-intro__title {
    max-width: 578px;
    margin: 0 auto;
    color: var(--w-ink);
    font-family: var(--w-font-display);
    font-size: 60px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.w-mortgage-intro__title span { color: var(--w-green); }

.w-mortgage-intro__text {
    max-width: 529px;
    margin: 12px auto 0;
    color: #6e6e6e;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.w-mortgage-intro__text b { color: #172315; font-weight: 700; }

/* --- Банки: на десктопе ряд, ниже 1440 — лента --- */
.w-banks-row { margin-top: 60px; }

.w-banks-row__track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-banks-row__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 162px;
    border-radius: 10px;
    background: #fff;
}

.w-banks-row .w-banks__logo { display: block; max-width: 60%; max-height: 60%; object-fit: contain; }
.w-banks-row .w-banks__logo--sber, .w-banks-row .w-banks__logo--vbrr { max-width: 92%; max-height: 90%; }
.w-banks-row .w-banks__logo--metallinvest { max-width: 84%; max-height: 66%; }
.w-banks-row .w-banks__logo--centrinvest { max-width: 74%; max-height: 80%; }

.w-banks-row__dots { display: none; justify-content: center; gap: 4px; margin-top: 16px; }
.w-banks-row__dot { width: 10px; height: 10px; border-radius: 50%; background: #d5dfdb; transition: background-color var(--w-ease); }
.w-banks-row__dot.is-active { background: var(--w-green); }

/* --- Калькулятор --- */
.w-calc { margin-top: 128px; }
/* .w-title живёт в стилях главной — здесь заголовок описан сам. */
.w-calc__title {
    margin: 0;
    color: var(--w-ink);
    font-family: var(--w-font-display);
    font-size: 60px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.w-calc__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 60px;
}

.w-calc__card { border-radius: 10px; background: #fff; }
.w-calc__sliders { display: flex; flex-direction: column; gap: 30px; padding: 30px; }

.w-slider { display: flex; flex-direction: column; gap: 6px; }

.w-slider__label { color: #172315; font-size: 16px; font-weight: 600; line-height: 1; }

/* Настоящий range лежит поверх декоративного трека прозрачным: ползунок
   и заливка рисуются по --fill, курсор и клавиатура работают как у range. */
.w-slider__box {
    position: relative;
    height: 56px;
    margin-top: 2px;
    border-radius: 4px;
    background: #f5f5f5;
}

.w-slider__value {
    position: absolute;
    left: 16px;
    top: 19px;
    color: #172315;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.w-slider__track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: #d5dfdb;
    pointer-events: none;
}

.w-slider__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--fill, 50%);
    border-radius: 0 10px 10px 0;
    background: var(--w-green);
}

.w-slider__thumb {
    position: absolute;
    top: 50%;
    left: var(--fill, 50%);
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: var(--w-green);
    box-shadow: 0 0 0 0 rgba(40, 142, 98, .25);
    transition: box-shadow var(--w-ease);
}

.w-slider__box:hover .w-slider__thumb { box-shadow: 0 0 0 5px rgba(40, 142, 98, .2); }

.w-slider__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.w-slider__input:focus-visible + .w-slider__track { outline: 2px solid var(--w-green); outline-offset: 4px; }

.w-slider__limits {
    display: flex;
    justify-content: space-between;
    color: #797979;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.w-calc__results {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
    padding: 40px 30px;
}

.w-calc__stats {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding-bottom: 30px;
    border-bottom: 1px dashed #adadad;
}

.w-calc__stat { display: flex; flex-direction: column; gap: 10px; }
.w-calc__stat dt { color: #172315; font-size: 14px; font-weight: 600; line-height: 1; }
.w-calc__stat dd { margin: 0; color: var(--w-green); font-size: 34px; font-weight: 700; line-height: 1; white-space: nowrap; }

.w-calc__actions { display: flex; flex-direction: column; gap: 20px; }
.w-calc__btn { width: 100%; height: 72px; padding: 0 30px; font-size: 26px; }

/* --- Программы --- */
.w-programs { display: flex; flex-direction: column; align-items: center; gap: 30px; margin: 120px 0 130px; }

.w-programs__tabs {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
}

.w-programs__tab {
    padding: 16px 20px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: rgba(33, 33, 33, .6);
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--w-ease), background-color var(--w-ease);
}

.w-programs__tab.is-active { padding: 16px 30px; background: var(--w-green); color: #f5f5f5; font-weight: 700; }
.w-programs__tab:focus-visible { outline: 2px solid var(--w-green); outline-offset: 2px; }

.w-program {
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    background: #fff;
}

.w-program[hidden] { display: none; }

.w-program__title {
    margin: 0;
    color: var(--w-ink);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.w-program__body {
    display: grid;
    grid-template-columns: minmax(0, 840px) 683px;
    justify-content: center;
    align-items: start;
    gap: 30px;
    margin-top: 66px;
}

.w-program__photo {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 480px;
    border-radius: 20px;
    object-fit: cover;
}

.w-program__box {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 35px;
    border: 1px solid var(--w-green);
    border-radius: 10px;
    background: rgba(40, 142, 98, .1);
}

.w-program__intro { margin: 0; color: var(--w-ink); font-size: 24px; font-weight: 500; line-height: 1.3; }
.w-program__intro a { color: var(--w-green); }

.w-program__eligible-title { margin: 0; color: var(--w-ink); font-size: 20px; font-weight: 600; line-height: 1; }

.w-program__eligible {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: -10px 0 0;
    padding: 0;
    list-style: none;
}

.w-program__eligible-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 204px;
    color: var(--w-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

/* Иконки из макета — альфа-маски, красятся в зелёный фоном. */
.w-program__icon {
    display: block;
    width: 60px;
    height: 60px;
    background: var(--w-green);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.w-program__info { display: flex; flex-direction: column; gap: 28px; }

.w-program__note {
    margin: 0;
    padding: 20px 28px;
    border: 1px solid var(--w-green);
    border-radius: 10px;
    background: rgba(40, 142, 98, .1);
    color: var(--w-ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.w-program__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    margin: 0;
    padding-bottom: 28px;
    border-bottom: 1px dashed #adadad;
}

.w-program__stat { display: flex; flex-direction: column; gap: 10px; }
.w-program__stat dt { color: #172315; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; }
.w-program__stat dd { margin: 0; color: var(--w-green); font-size: 34px; font-weight: 700; line-height: 1; white-space: nowrap; }

.w-program__list-title { margin: 0; padding-left: 22px; color: var(--w-ink); font-size: 24px; font-weight: 600; line-height: 1; }

.w-program__list {
    margin: -2px 0 0;
    padding-left: 24px;
    color: var(--w-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.w-program__list li + li { margin-top: 16px; }

.w-program__text { margin: 0; color: var(--w-ink); font-size: 16px; line-height: 20px; }
.w-program__text + .w-program__text { margin-top: -19px; }

@media (hover: hover) {
    .w-crumbs__link:hover { color: var(--w-green); }
    .w-programs__tab:not(.is-active):hover { color: #212121; background: #f3f3f3; }
}

/* --- 1440 --- */
@media (max-width: 1919px) {
    .w-crumbs { margin-top: 48px; }
    .w-mortgage-intro { margin-top: 40px; }
    .w-mortgage-intro__title { max-width: 452px; font-size: 48px; }
    .w-mortgage-intro__text { max-width: 409px; font-size: 16px; }
    .w-banks-row { margin-top: 40px; }
    .w-banks-row__item { height: 131px; }
    .w-calc { margin-top: 92px; }
    .w-calc__title { font-size: 48px; }
    .w-calc__grid { margin-top: 42px; }
    .w-calc__stat dd { font-size: 28px; }
    .w-calc__btn { height: 64px; font-size: 24px; }
    .w-programs { margin: 80px 0 100px; }
    .w-program__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .w-program__intro { font-size: 20px; }
    .w-program__stat dd { font-size: 28px; }
    .w-program__stats { gap: 24px 30px; }
}

/* --- 990 --- */
@media (max-width: 1439px) {
    .w-mortgage-intro__title { font-size: 40px; }
    .w-banks-row__track {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .w-banks-row__track::-webkit-scrollbar { display: none; }
    .w-banks-row__item { flex: 0 0 216px; scroll-snap-align: start; }
    .w-banks-row__dots { display: flex; }
    .w-calc { margin-top: 60px; }
    .w-calc__title { font-size: 40px; }
    .w-calc__grid { gap: 16px; margin-top: 36px; }
    .w-calc__sliders { gap: 20px; padding: 20px; }
    .w-calc__results { gap: 30px; padding: 24px 20px; }
    .w-calc__stats { flex-wrap: wrap; gap: 20px 30px; padding-bottom: 20px; }
    .w-calc__stat dd { font-size: 24px; }
    .w-calc__btn { height: 56px; padding: 0 20px; font-size: 20px; }
    .w-programs { gap: 24px; margin: 60px 0 80px; }
    .w-program { padding: 30px; }
    .w-program__title { font-size: 26px; }
    .w-program__body { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
    .w-program__photo { max-height: 360px; }
    .w-program__box { gap: 30px; padding: 20px 24px; }
    .w-program__intro { font-size: 18px; }
    .w-program__stat dd { font-size: 26px; }
}

/* --- Мобильный --- */
@media (max-width: 989px) {
    .w-crumbs { margin-top: 30px; }
    .w-mortgage-intro { margin-top: 40px; }
    .w-mortgage-intro__title { max-width: 335px; font-size: 32px; }
    .w-mortgage-intro__text { font-size: 14px; }
    .w-banks-row { margin-top: 30px; }
    .w-calc { margin-top: 40px; }
    .w-calc__title { font-size: 32px; }
    .w-calc__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
    .w-slider__box { height: 47px; }
    .w-slider__value { top: 15px; }
    .w-slider__track { height: 5px; }
    .w-slider__thumb { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
    .w-calc__results { gap: 20px; padding: 20px; }
    .w-calc__stats { gap: 30px 40px; }
    .w-calc__stat dd { font-size: 34px; }
    .w-calc__actions { gap: 10px; }
    .w-calc__btn { height: 52px; font-size: 20px; }
    .w-programs { gap: 14px; margin: 40px 0 60px; }
    .w-programs__tabs { flex-wrap: wrap; justify-content: center; width: 100%; gap: 6px; }
    .w-programs__tab { padding: 12px 14px; font-size: 15px; }
    .w-programs__tab.is-active { padding: 12px 18px; }
    .w-program { padding: 20px 14px; border-radius: 10px; }
    .w-program__title { font-size: 22px; }
    .w-program__body { margin-top: 24px; }
    .w-program__box { padding: 16px; gap: 24px; }
    .w-program__intro { font-size: 16px; }
    .w-program__eligible { flex-direction: column; gap: 16px; }
    .w-program__eligible-item { max-width: none; }
    .w-program__stats { gap: 20px 30px; }
    .w-program__stat dd { font-size: 26px; }
    .w-program__list-title { padding-left: 0; font-size: 20px; }
    .w-program__list { padding-left: 20px; }
}