/*
 * Новый дизайн каталога (v2): шапка, подвал, кнопка-«пилюля», соцсети.
 *
 * Подключается ПОСЛЕ layout.css и только когда v2 включён на странице
 * каталога или проекта (App\Support\CatalogV2, layouts/web.blade.php).
 * Прежние шапка и подвал этим файлом не затрагиваются: всё правило —
 * через свои классы (.w-hdr2, .w-footer--v2, .w-button--pill, .w-socials).
 * Источник — утверждённый макет www/katalog3d (?hdr=r&hf=bebas).
 */

:root {
    --w2-green: #1D6047;
    --w2-green-hover: #164C38;
    --w2-footer-bg: #143528;
}

/* =====================================================================
   Кнопка-«пилюля»: Manrope, белый кружок со стрелкой справа
   ===================================================================== */

.w-button--pill {
    justify-content: flex-start;
    gap: 18px;
    height: 56px;
    padding: 0 6px 0 24px;
    border-radius: 40px;
    background: var(--w2-green);
    color: #fff;
    font-family: var(--w-font);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.w-button--pill::after {
    content: '';
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6047' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
    transition: transform var(--w-ease);
}

@media (hover: hover) {
    .w-button--pill:hover {
        background: var(--w2-green-hover);
        box-shadow: none;
    }

    .w-button--pill:hover::after { transform: translateX(3px); }
}

/* =====================================================================
   Шапка
   ===================================================================== */

.w-hdr2 {
    position: relative;
    z-index: 20;
    padding-top: 12px;
}

/* --- Верхняя строка: город, адрес, мессенджеры, телефон --- */
.w-hdr2__top {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 6px 10px;
    color: #535353;
    font-size: 13px;
    line-height: 1.2;
}

.w-hdr2__spacer { flex: 1; }

.w-hdr2__link,
.w-hdr2__tel {
    color: inherit;
    text-decoration: none;
    transition: color var(--w-ease);
}

.w-hdr2__tel {
    color: var(--w2-green);
    font-weight: 700;
    white-space: nowrap;
}

.w-hdr2__link:hover,
.w-hdr2__tel:hover { color: var(--w2-green-hover); }

/* Переключатель города — тот же партиал, что у прежней шапки, мельче. */
.w-hdr2 .w-city__trigger {
    gap: 8px;
    color: var(--w-ink);
    font-size: 13px;
}

.w-hdr2 .w-icon--location { color: var(--w2-green); }
.w-hdr2 .w-city__name--full { display: inline; }
.w-hdr2 .w-city__name--short { display: none; }

.w-hdr2 .w-city__dropdown {
    min-width: 190px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.w-hdr2 .w-city__option {
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--w-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.w-hdr2 .w-city__option:hover { background: #f1f1f1; }

.w-hdr2 .w-city__option.is-active {
    background: none;
    color: var(--w2-green);
    font-weight: 700;
}

/* --- Белая карточка: логотип, меню, кнопка --- */
.w-hdr2__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 10px 10px 30px;
    /* Овальная, как кнопки (Настя 20.10). */
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 2px rgba(0, 0, 0, .01);
}

.w-hdr2__brand {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    color: var(--w-ink);
    text-decoration: none;
}

.w-hdr2__logo { display: block; width: 56px; height: auto; }

.w-hdr2__brand-text {
    font: 700 12px/1.15 var(--w-font);
    text-transform: uppercase;
}

.w-hdr2__menu {
    display: flex;
    flex: 1;
    justify-content: center;
}

.w-hdr2__nav {
    display: flex;
    justify-content: center;
    gap: 26px;
    font: 400 23px/1 var(--w-font-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.w-hdr2__nav-link {
    color: var(--w-ink);
    text-decoration: none;
    transition: color var(--w-ease);
}

.w-hdr2__nav-link:hover,
.w-hdr2__nav-link.is-current { color: var(--w2-green); }

.w-hdr2__nav-link--soon { opacity: .45; cursor: default; }
.w-hdr2__nav-link--soon:hover { color: var(--w-ink); }

.w-hdr2__cta { flex: none; }

/* Мобильная часть панели и бургер на компьютере не видны. */
.w-hdr2__panel { display: none; }

@media (min-width: 990px) and (max-width: 1279px) {
    .w-hdr2__nav { gap: 14px; font-size: 19px; }
    .w-hdr2__brand-text { display: none; }
}

/* --- Телефон: карточка с бургером, меню панелью под ней --- */
@media (max-width: 989px) {
    .w-hdr2 { padding-top: 16px; }

    .w-hdr2__top,
    .w-hdr2__cta { display: none; }

    .w-hdr2__bar {
        justify-content: space-between;
        gap: 12px;
        padding: 10px 10px 10px 22px;
    }

    .w-hdr2__logo { width: 52px; }

    .w-hdr2 .w-burger { display: flex; border-radius: 50%; background: var(--w2-green); }
    .w-hdr2 .w-burger .w-icon--close { display: none; }
    .w-hdr2.is-open .w-burger .w-icon--burger { display: none; }
    .w-hdr2.is-open .w-burger .w-icon--close { display: block; }

    .w-hdr2__menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 30;
        display: none;
        flex-direction: column;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        padding: 8px 20px 22px;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
    }

    .w-hdr2.is-open .w-hdr2__menu { display: flex; }

    .w-hdr2__nav {
        flex-direction: column;
        gap: 0;
        font-size: 28px;
    }

    .w-hdr2__nav-link {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    .w-hdr2__panel {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-top: 18px;
    }

    /* layout.css ставит городу order: 1 для прежней панели — здесь он первый. */
    .w-hdr2__panel .w-city { order: 0; }
    .w-hdr2__panel .w-city__trigger { font-size: 16px; }

    .w-hdr2__phone {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .w-hdr2__phone-number {
        color: var(--w2-green);
        font-size: 22px;
        font-weight: 800;
        text-decoration: none;
    }

    .w-hdr2__callback {
        padding: 0 0 3px;
        border: 0;
        border-bottom: 1px dashed currentColor;
        background: none;
        color: var(--w-ink);
        font: 500 16px var(--w-font);
        opacity: .75;
        cursor: pointer;
    }

    .w-hdr2__panel-cta {
        align-self: stretch;
        justify-content: space-between;
        margin-top: 6px;
    }
}

/* =====================================================================
   Соцсети кружками
   ===================================================================== */

.w-socials {
    display: flex;
    gap: 10px;
}

.w-socials__link {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: background-color var(--w-ease), border-color var(--w-ease), color var(--w-ease);
}

.w-socials--footer .w-socials__link {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.w-socials--footer .w-socials__link:hover {
    border-color: #fff;
    background: #fff;
    color: var(--w2-footer-bg);
}

.w-socials--menu .w-socials__link {
    width: 46px;
    height: 46px;
    background: #f1f1f1;
    color: var(--w2-green);
}

/* =====================================================================
   Подвал: тёмно-зелёный, соцсети под логотипом, белая кнопка
   ===================================================================== */

.w-footer--v2 { background: var(--w2-footer-bg); }

.w-footer--v2 .w-footer__glow { filter: blur(40px); }

/* Дом не парит: мягкая тень под ним. */
.w-footer--v2 .w-footer__house {
    filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .45)) drop-shadow(0 4px 4px rgba(0, 0, 0, .35));
}

/* Логотип с соцсетями — одна ячейка сетки (grid-area logo из layout.css). */
.w-footer__brand {
    grid-area: logo;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.w-footer--v2 .w-footer__logo { align-self: auto; }

.w-footer--v2 .w-footer__callback {
    border-bottom: 1px dashed rgba(255, 255, 255, .55);
    color: rgba(255, 255, 255, .75);
}

.w-footer--v2 .w-footer__button {
    width: auto;
    max-width: 345px;
    height: 56px;
    background: #fff;
    color: var(--w2-footer-bg);
}

.w-footer--v2 .w-footer__button::after {
    background-color: var(--w2-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.w-footer--v2 .w-footer__button:hover { background: #eef2ef; }

/* Меню с «Технологией» плотнее, чтобы не наезжало на нижнюю строку. */
.w-footer--v2 .w-footer__nav { gap: 12px; margin-top: 40px; }

.w-footer--v2 .w-footer__policy,
.w-footer--v2 .w-footer__rights { font-size: 13px; opacity: .8; }

/* Ховеры без салатового: белый текст и тонкое подчёркивание. */
.w-footer--v2 .w-footer__number:hover,
.w-footer--v2 .w-footer__link:hover,
.w-footer--v2 .w-footer__policy:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

.w-footer--v2 .w-footer__nav:hover .w-footer__link:not(:hover) { opacity: .6; }

@media (min-width: 990px) and (max-width: 1439px) {
    .w-footer__brand { justify-self: center; align-items: center; }
}

@media (max-width: 989px) {
    .w-footer__brand { align-items: center; }
    .w-footer--v2 .w-footer__button { align-self: center; width: 100%; }
    .w-footer--v2 .w-footer__address { width: auto; }
}

/* =====================================================================
   Страница проекта: шапка v2 стоит над hero, а не лежит поверх него
   ===================================================================== */

.w-page--v2 .w-project-hero { margin-top: 16px; }
.w-page--v2 .w-project-hero__crumbs { margin-top: 40px; }

/* =====================================================================
   Шапка главной (вариант 4, согласован 14.10.2026): прозрачная, стеклом
   поверх фото hero — лежит над ним, а не в потоке; текст и логотип белые,
   кнопка «Подобрать дом» — белая пилюля. Панель меню на телефоне остаётся белой.
   ===================================================================== */
.w-hdr2--over { position: absolute; top: 0; right: 0; left: 0; }
.w-hdr2__logo--white { display: none; }

.w-hdr2--over .w-hdr2__top,
.w-hdr2--over .w-hdr2__link,
.w-hdr2--over .w-hdr2__tel,
.w-hdr2--over .w-hdr2__address,
.w-hdr2--over .w-city__trigger,
.w-hdr2--over .w-icon--location { color: #fff; }

.w-hdr2--over .w-hdr2__bar {
    /* Тёмное стекло (Настя 20.10): на светлом небе белое не читалось. */
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(12, 22, 17, .38);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: none;
    color: #fff;
}

.w-hdr2--over .w-hdr2__logo--dark { display: none; }
.w-hdr2--over .w-hdr2__logo--white { display: block; }
.w-hdr2--over .w-hdr2__brand { color: #fff; }

/* Кнопка на стекле — полупрозрачная с белой кромкой, кружок белый (Настя 20.10). */
body.w-page .w-hdr2--over .w-button.w-hdr2__cta {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body.w-page .w-hdr2--over .w-button.w-hdr2__cta::after { background-color: #fff; background-image: var(--w-btn-arrow-green); }

@media (min-width: 990px) {
    .w-hdr2--over .w-hdr2__nav-link { color: #fff; }
    /* На стекле поверх фото зелёный не читается (Настя 20.10): все пункты белые, наведение — лёгкое затемнение. */
    .w-hdr2--over .w-hdr2__nav-link:hover { color: #fff; opacity: .75; }
    /* На тёмном стекле — светлый мятный: насыщенный зелёный тут «кричит». */
    .w-hdr2--over .w-hdr2__nav-link.is-current { color: #C8F2D6; }
}

@media (hover: hover) {
    body.w-page .w-hdr2--over .w-button.w-hdr2__cta:hover { background-color: rgba(255, 255, 255, .26); }
    body.w-page .w-hdr2--over .w-button.w-hdr2__cta:hover::after { background-color: #fff; }
}

@media (max-width: 989px) {
    .w-hdr2--over .w-hdr2 .w-burger,
    .w-hdr2--over .w-burger { background: rgba(255, 255, 255, .2); }
}