/*
 * О компании и Контакты. Контрольные ширины: 1920, 1440, 990, 375 — как
 * на остальных страницах сайта. «О компании» сверху вниз: крошки, hero
 * «текст + фото» с раскрытием, «чем отвечаем», «как работаем», пять шагов,
 * банки, офисы, реквизиты, призыв. «Контакты» переиспользуют карточку
 * города, реквизиты и призыв.
 *
 * Один файл на две страницы намеренно: карточка города у них одна и та же,
 * и во втором файле она разошлась бы с первым на первой же правке.
 *
 * Страница сделана по образцу ориентира (ВЗ, /o-kompanii/), но на палитре
 * и компонентах этого сайта: зелёный --w-green, Bebas в заголовках,
 * белые карточки на сером фоне.
 *
 * Отступы секций и .w-title повторяют главную: там они объявлены в home.css,
 * который сюда не подключается, а тащить весь файл главной ради двух правил
 * дороже, чем повторить их здесь.
 */

:root {
    --w-gap-l: 140px;
    --w-gap-m: 100px;
    --w-title: 60px;
}

@media (max-width: 1919px) {
    :root { --w-gap-l: 80px; --w-gap-m: 80px; --w-title: 48px; }
}

@media (max-width: 1439px) {
    :root { --w-gap-l: 60px; --w-gap-m: 60px; --w-title: 40px; }
}

@media (max-width: 989px) {
    :root { --w-title: 32px; }
}

.w-section { margin-top: var(--w-gap-l); }
.w-section--m { margin-top: var(--w-gap-m); }
.w-section--m:last-child { margin-bottom: var(--w-gap-m); }

.w-title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--w-ink);
}

/* --- Крошки: те же, что на ипотеке и в каталоге --- */
.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; }

/* --- Hero: текст слева, фото справа --- */
.w-about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    align-items: start;
    gap: 40px;
    margin-top: 40px;
}

.w-about-hero__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-about-hero__title span { color: var(--w-green); }

.w-about-hero__text {
    margin: 24px 0 0;
    color: #4d4d4d;
    font-size: 20px;
    line-height: 1.45;
}

.w-about-hero__spec {
    margin: 24px 0 0;
    color: var(--w-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.w-about-hero__lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 32px;
    margin-top: 12px;
}

.w-about-hero__list {
    margin: 0;
    padding-left: 22px;
    color: #4d4d4d;
    font-size: 17px;
    line-height: 1.6;
}

.w-about-hero__list li::marker { color: var(--w-green); }

.w-about-hero__more-btn { margin-top: 28px; }

.w-about-hero__right { border-radius: 10px; overflow: hidden; }

.w-about-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    max-height: 560px;
    object-fit: cover;
}

/* --- Раскрывающееся продолжение --- */
/* Переход по max-height: к height:auto анимация не применяется.
   После раскрытия скрипт ставит max-height: none, чтобы текст мог
   перетечь при повороте экрана. */
.w-about-more {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.w-about-more.is-open { margin-top: 32px; }

/* hidden обязан гасить блок: у скрытого элемента display задан браузером,
   но собственные правила блока его перебивают. */
.w-about-more[hidden] { display: none; }

.w-about-more__heading {
    margin: 28px 0 0;
    color: var(--w-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.w-about-more__heading:first-child { margin-top: 0; }

.w-about-more__text {
    margin: 10px 0 0;
    max-width: 1100px;
    color: #4d4d4d;
    font-size: 17px;
    line-height: 1.6;
}

/* --- Чем отвечаем: три белые карточки --- */
.w-about-promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.w-about-promise {
    padding: 32px;
    border-radius: 10px;
    background: #fff;
}

.w-about-promise__icon { display: block; width: 50px; height: 50px; }

.w-about-promise__title {
    margin: 18px 0 0;
    color: var(--w-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.w-about-promise__text {
    margin: 10px 0 0;
    color: #6e6e6e;
    font-size: 16px;
    line-height: 1.5;
}

/* --- Как мы работаем: две колонки со строчными карточками --- */
.w-about-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.w-about-fact {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 32px;
    border-radius: 10px;
    background: #fff;
}

.w-about-fact__icon { display: block; flex: none; width: 50px; height: 50px; }

.w-about-fact__title {
    margin: 0;
    color: var(--w-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.w-about-fact__text {
    margin: 8px 0 0;
    color: #6e6e6e;
    font-size: 16px;
    line-height: 1.5;
}

/* --- Пять шагов --- */
.w-about-steps__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.w-about-steps__item {
    padding: 28px 24px;
    border-radius: 10px;
    background: #fff;
}

.w-about-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--w-green);
    color: #fff;
    font-family: var(--w-font-display);
    font-size: 24px;
    line-height: 1;
}

.w-about-steps__item-title {
    margin: 16px 0 0;
    color: var(--w-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.w-about-steps__item-text {
    margin: 8px 0 0;
    color: #6e6e6e;
    font-size: 15px;
    line-height: 1.5;
}

/* --- Ипотека и банки --- */
.w-about-banks {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    padding: 40px;
    border-radius: 10px;
    background: #fff;
}

.w-about-banks__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-about-banks__text {
    margin: 14px 0 0;
    color: #6e6e6e;
    font-size: 16px;
    line-height: 1.5;
}

.w-about-banks__btn { margin-top: 24px; }

.w-about-banks__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.w-about-banks__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 12px;
    border-radius: 10px;
    background: var(--w-bg);
}

.w-about-banks__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- Офисы: карта и белая карточка, стороны чередуются --- */
.w-about-offices {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.w-about-office {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 20px;
    min-height: 360px;
}

/* Чётная карточка зеркалится: карта уезжает вправо, карточка влево.
   Порядок в разметке при этом не меняется — читалке с экрана он важен. */
.w-about-office--flip .w-about-office__map { order: 2; }

.w-about-office__map {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #e6e6e6;
}

.w-about-office__map-img,
.w-about-office__map-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Метка поверх кадра карты — как на странице проекта. */
.w-about-office__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    transform: translate(-50%, -50%);
    border-radius: 100px;
    background: #fff;
    color: var(--w-ink);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.w-about-office__pin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--w-green);
}

.w-about-office__info {
    display: flex;
    flex-direction: column;
    /* Дети тянутся во всю ширину карточки: при flex-start список прижимался
       к левому краю, а кнопка сжималась по своему тексту — она выходила уже
       чипов мессенджеров над ней. */
    align-items: stretch;
    padding: 36px;
    border-radius: 10px;
    background: #fff;
}

.w-about-office__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-about-office__address {
    margin: 14px 0 0;
    color: #6e6e6e;
    font-size: 16px;
    line-height: 1.5;
}

.w-about-office__phone {
    margin-top: 12px;
    color: var(--w-ink);
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--w-ease);
}

/*
 * Отступ над кнопкой — обычный, а не «margin-top: auto».
 *
 * Auto прижимает кнопку к низу только когда в карточке есть свободное
 * место; на невысокой карточке его нет, и кнопка вставала вплотную
 * к чипам мессенджеров. Низ карточки ей всё равно достаётся — свободное
 * место забирает список контактов (правило ниже).
 */
.w-about-office__btn {
    margin-top: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 22px;
}

/* Свободное место забирает список контактов, а не кнопка: так она остаётся
   внизу карточки, а отступ над ней не схлопывается. */
.w-about-office__info .w-contacts-list { flex: 1 0 auto; }

/* --- Реквизиты --- */
.w-about-requisites {
    margin-top: 40px;
    padding: 36px;
    border-radius: 10px;
    background: #fff;
}

.w-about-requisites__name {
    margin: 0;
    color: var(--w-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.w-about-requisites__name {
    margin-bottom: 4px;
}

/* Строка реквизита: подпись и значение, как в карточке контактов. */
.w-requisites__row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #ededed;
}

.w-requisites__label {
    color: #8b8b8b;
    font-size: 14px;
    line-height: 1.5;
}

.w-requisites__value {
    margin: 0;
    color: var(--w-ink);
    font-size: 16px;
    line-height: 1.5;
}

/* --- Призыв --- */
.w-about-cta {
    padding: 56px 40px;
    border-radius: 10px;
    background: var(--w-ink);
    text-align: center;
}

.w-about-cta__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.w-about-cta__text {
    max-width: 640px;
    margin: 16px auto 0;
    color: rgba(255, 255, 255, .72);
    font-size: 18px;
    line-height: 1.5;
}

.w-about-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

/* Вторая кнопка — контурная: на тёмном две заливки спорят друг с другом. */
.w-about-cta__link {
    background: transparent;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
}

/* --- Контакты: заголовок страницы --- */
.w-contacts-intro { margin-top: 40px; }

.w-contacts-intro__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-contacts-intro__text {
    max-width: 640px;
    margin: 16px 0 0;
    color: #4d4d4d;
    font-size: 20px;
    line-height: 1.45;
}

/* Город с телефоном, но без адреса: вместо карты — заглушка,
   иначе виджет искал бы пустую строку и показал бы случайное место. */
.w-about-office__map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    color: #8b8b8b;
    font-size: 16px;
    text-align: center;
}

.w-contacts-list {
    margin: 14px 0 0;
    padding: 0;
}

.w-contacts-list__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #ededed;
}

.w-contacts-list__row:first-child { border-top: 0; padding-top: 0; }

.w-contacts-list__label {
    color: #8b8b8b;
    font-size: 14px;
    line-height: 1.5;
}

.w-contacts-list__value {
    margin: 0;
    color: var(--w-ink);
    font-size: 16px;
    line-height: 1.5;
}

.w-contacts-list__link {
    color: var(--w-green);
    text-decoration: none;
    transition: color var(--w-ease);
}

.w-contacts-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

/* Мессенджеры — текстовые чипы: иконок VK и WhatsApp в ассетах сайта нет,
   а рисовать их «на глаз» значит получить чужие логотипы не тех цветов. */
.w-contacts-messenger {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--w-bg);
    color: var(--w-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--w-ease);
}

/* Ни один город не заполнен — страница всё равно даёт оставить заявку. */
.w-contacts-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px;
    border-radius: 10px;
    background: #fff;
}

.w-contacts-empty__text {
    margin: 0;
    color: #4d4d4d;
    font-size: 18px;
    line-height: 1.5;
}

@media (hover: hover) {
    .w-crumbs__link:hover { color: var(--w-green); }
    .w-about-office__phone:hover { color: var(--w-green); }
    .w-about-hero__more-btn:hover,
    .w-about-banks__btn:hover,
    .w-about-office__btn:hover { background: var(--w-green-hover); }
    .w-about-cta__link:hover { background: rgba(255, 255, 255, .12); }
    .w-contacts-list__link:hover { color: var(--w-green-hover); }
    .w-contacts-messenger:hover { background: #e8e8e8; }
}

/* --- 1440 --- */
@media (max-width: 1919px) {
    .w-crumbs { margin-top: 48px; }
    .w-about-hero { gap: 32px; }
    .w-about-hero__text { font-size: 18px; }
    .w-about-hero__img { min-height: 360px; max-height: 460px; }
    .w-about-banks__title { font-size: 32px; }
    .w-about-office__title { font-size: 28px; }
    .w-about-office__info { padding: 28px; }
    .w-about-office { min-height: 320px; }
    .w-contacts-intro__text { font-size: 18px; }
}

/* --- 990: карточки в два ряда, шаги по три --- */
@media (max-width: 1439px) {
    .w-crumbs { margin-top: 30px; }
    .w-about-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    /* Фото уходит под текст: в колонку 990 оно уже не помещается рядом. */
    .w-about-hero__img { min-height: 280px; max-height: 340px; }
    .w-about-promises { grid-template-columns: minmax(0, 1fr); }
    .w-about-facts { grid-template-columns: minmax(0, 1fr); }
    .w-about-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .w-about-banks {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 28px;
    }
    .w-about-office {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    /* На одной колонке зеркалить нечего: карта всегда сверху. */
    .w-about-office--flip .w-about-office__map { order: 0; }
    .w-about-office__map { height: 240px; }
    .w-about-cta { padding: 40px 28px; }
    .w-contacts-empty { padding: 28px; }
}

/* --- Мобильный --- */
@media (max-width: 989px) {
    .w-about-hero { margin-top: 24px; }
    .w-about-hero__text { font-size: 16px; }
    .w-about-hero__spec { font-size: 16px; }
    .w-about-hero__lists { grid-template-columns: minmax(0, 1fr); }
    .w-about-hero__list { font-size: 15px; }
    .w-about-hero__more-btn,
    .w-about-banks__btn,
    .w-about-office__btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 20px;
    }
    .w-about-hero__img { min-height: 200px; max-height: 240px; }
    .w-about-more__heading { font-size: 19px; }
    .w-about-more__text { font-size: 15px; }
    .w-about-promise,
    .w-about-fact,
    .w-about-steps__item { padding: 20px; }
    .w-about-fact {
        flex-direction: column;
        gap: 12px;
    }
    .w-about-promise__title { font-size: 19px; }
    .w-about-steps__list { grid-template-columns: minmax(0, 1fr); }
    .w-about-banks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w-about-banks__item { height: 76px; }
    .w-about-banks__title { font-size: 26px; }
    .w-about-office__map { height: 180px; }
    .w-about-office__info { padding: 20px; }
    .w-about-office__title { font-size: 24px; }
    .w-about-office__phone { font-size: 20px; }
    .w-about-requisites { padding: 20px; }
    .w-about-cta { padding: 32px 20px; }
    .w-about-cta__text { font-size: 16px; }
    .w-about-cta__buttons { flex-direction: column; }
    .w-about-cta__buttons .w-button { width: 100%; }
    .w-contacts-intro { margin-top: 24px; }
    .w-contacts-intro__text { font-size: 16px; }
    /* Подпись и значение в столбик: на 375 колонка в 120px съедает адрес. */
    .w-contacts-list__row,
    .w-requisites__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .w-contacts-empty { padding: 20px; }
    .w-contacts-empty__text { font-size: 16px; }
    .w-contacts-empty .w-button { width: 100%; }
}