/* =====================================================================
   STNDV.RU — visual polish layer (2026-11)
   Loaded last in header.php. Scoped overrides only; nothing here
   changes markup or business logic. Rollback = remove the <link>.
   ===================================================================== */

:root {
    --st-navy: #1255a8;
    --st-navy-deep: #0e4589;
    --st-ink: #2c3e50;
    --st-ink-soft: #55606b;      /* 6.4:1 on white — replaces #7f8c8d (3.5:1) for small text */
    --st-beige: #c8b489;
    --st-gutter: 16px;
    --st-focus: 0 0 0 3px rgba(18, 85, 168, .35);
}

/* ---------- Browser surfaces ---------- */
::selection { background: rgba(18, 85, 168, .18); color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--st-navy) !important;
    outline-offset: 2px !important;
}

/* ---------- Dark photo sections: fixed backgrounds break on touch devices
   (iOS ignores them, Android repaints on every scroll). Keep the photo,
   drop the parallax below desktop. ---------- */
@media (max-width: 1024px), (hover: none) {
    #main_how,
    #zayavka_form,
    .whoweare, #whoweare,
    .main_ipoteka_links, #main_ipoteka_links,
    section#main_ipoteka_links.new,
    #top_article,
    #article .top_block {
        background-attachment: scroll !important;
        background-size: cover !important;
    }
}

/* =====================================================================
   1. HEADER — 768px (iPad portrait) showed BOTH headers; the desktop one
      collapsed into a 400px column. Below 769px only the mobile header.
   ===================================================================== */
@media (max-width: 768px) {
    #conteiner > header.desktop { display: none !important; }
    header.header_mobile { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
}
/* 320–374px: CTA in the mobile header ran under the centred logo */
@media (max-width: 374px) {
    .header_mobile .hm_contact_row a.zayavka {
        padding: 6px 10px !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
}

/* =====================================================================
   2. LAYOUT CONTAINERS — fixed 1088px text container overflowed the
      viewport at 1024px (horizontal scroll on 12 page types).
   ===================================================================== */
@media (max-width: 1120px) {
    #conteiner .text-pege,
    #conteiner .text-pege .center {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #conteiner .text-pege { padding-left: 24px !important; padding-right: 24px !important; }
    #conteiner .text-pege h1 { overflow-wrap: break-word; }
    .actions-list { max-width: 100% !important; box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important; }
    .actions-list .actions-item { max-width: 100% !important; box-sizing: border-box !important; }
    .hypothec .risks, .hypothec .risks .risks_wrapper { max-width: 100% !important; box-sizing: border-box !important; }
}
/* /ipoteka/: «Риски…» heading kept a 690px width inside a narrower box */
@media (max-width: 1120px) {
    .hypothec .risks .risks_title { width: auto !important; max-width: 100% !important; }
}
/* Home «Почему мы» at tablet: bootstrap .row (-15px margins) inside a 10px gutter */
@media (max-width: 768px) {
    #main_why .main_s_text > .row { margin-left: 0 !important; margin-right: 0 !important; }
}
/* /kommercheskaya-nedvizhimost/: horizontal filter fixed at 965px */
@media (max-width: 1060px) {
    .filter_horisont_kommerc_style .kvr_list_title,
    .filter_horisont_kommerc_style .kvr_list_body { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
}
/* «Спасибо» modal: <span style="margin:100px"> around the Telegram link made
   every page 340–360px wide on 320px phones (and clipped the header CTA) */
@media (max-width: 480px) {
    .modal_send_form .hero-banner-form a > span[style*="margin"] { margin-left: 0 !important; margin-right: 0 !important; }
}
/* «Ещё не нашли?» form and short forms were 50px wider than a 320px screen */
@media (max-width: 480px) {
    #conteiner > form.find_else,
    #conteiner > form.find_else > div { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
    #short_form form .but input,
    .znakom, .znakom > *, .tabs, .tabs > section { max-width: 100% !important; box-sizing: border-box !important; }
    .znakom .call_phone_1 a { white-space: normal !important; overflow-wrap: anywhere; }
}
/* Long Russian words in caps headings / narrow columns pushed 320px pages to 340–363px */
@media (max-width: 480px) {
    h1.cat_ttl, #conteiner h1, #conteiner h2 { overflow-wrap: break-word; }
    .region_page .cultur_bl .desc .text, .region_page .cultur_bl .desc .title { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
}

/* Long SEO text on catalog pages ran edge-to-edge (10px gutters) */
@media (max-width: 768px) {
    .catalog-text-block,
    .catalog-text-block.section,
    #conteiner .text-pege .catalog-text-block {
        padding-left: var(--st-gutter) !important;
        padding-right: var(--st-gutter) !important;
        box-sizing: border-box !important;
    }
    .catalog-text-block p, .catalog-text-block li { line-height: 1.6 !important; }
}

/* =====================================================================
   3. CATALOG (/novostroiki/ and all filtered listings)
   Float layout + a 1000px spacer left uneven gaps, cards touching at
   1280px and a single column at 1024px. Same markup, real grid.
   ===================================================================== */
@media (min-width: 769px) {
    #catalog .center:has(> .second_filter_pos) { position: relative; }
    #catalog .center:has(> .second_filter_pos) > .second_filter_pos {
        width: 300px !important;
        left: 0 !important;
        box-sizing: border-box !important;
    }
    #catalog .center:has(> .second_filter_pos) > .lst {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 24px;
        align-items: start;
        padding-left: 324px !important;
        min-height: 1180px;
        box-sizing: border-box !important;
    }
    #catalog .center:has(> .second_filter_pos) > .lst > .under_filter_block { display: none !important; }
    #catalog .center:has(> .second_filter_pos) > .lst > .item {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }
    #catalog .center:has(> .second_filter_pos) > .lst > :not(.item) { grid-column: 1 / -1; min-width: 0; }
    #catalog .center:has(> .second_filter_pos) > .lst > :not(.item) .center,
    #catalog .center:has(> .second_filter_pos) > .lst > .center { width: auto !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
}
@media (min-width: 769px) and (max-width: 1140px) {
    #catalog .center:has(> .second_filter_pos) { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }
    #catalog .center:has(> .second_filter_pos) > .second_filter_pos { left: 20px !important; }
}
@media (min-width: 769px) {
    #catalog .center:has(> .second_filter_pos) > .lst > .item img.bg { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }
}
@media (min-width: 1280px) {
    #catalog .center:has(> .second_filter_pos) > .second_filter_pos { width: 340px !important; }
    #catalog .center:has(> .second_filter_pos) > .lst { padding-left: 368px !important; }
}
/* Mobile: the working filter was hidden entirely; show it collapsed
   behind the existing «Поиск новостройки» toggle */
@media (max-width: 768px) {
    body #conteiner #catalog .second_filter_pos,
    body #catalog .second_filter_pos { display: block !important; }
    #catalog_filter .irs2 > .irs { clear: both; margin-top: 14px !important; }
    /* collapsed by default in CSS (the toggle script writes inline display, which still wins);
       before, the filter rendered open (~400px) and folded 6s later — CLS 0.25 on phones */
    #catalog .second_filter_pos #catalog_filter,
    #catalog .second_filter_pos .ukazhite.mobile,
    #catalog .second_filter_pos .search-input-wrap,
    #catalog .second_filter_pos #main_search_form > .but { display: none; }
}
.pager .prev_page.disabled, .pager .next_page.disabled { color: #6b7480 !important; }

/* =====================================================================
   4. HOME
   ===================================================================== */
/* «Как мы работаем»: cards were hard-set to 170px inside 340px columns */
#main_how .steps .step { width: auto !important; max-width: none !important; }
@media (min-width: 769px) {
    #main_how .steps .step br.hidden_m { display: none; }
    #main_how .steps .step > div { max-width: 260px; margin-left: auto; margin-right: auto; font-size: 15px !important; line-height: 1.5 !important; }
}
@media (max-width: 768px) {
    #main_how .steps .step > div { font-size: 13px !important; line-height: 1.45 !important; }
}
/* Video cards: play icon sat on top of 3-line titles on phones */
@media (max-width: 768px) {
    a.show-video-player::after { top: 30px !important; }
}
/* Empty section kept 120px of padding on phones */
@media (max-width: 768px) {
    #main_ipoteka_links.new:not(:has(*:not(br))) { padding: 0 !important; }
}

/* =====================================================================
   5. ЖК DETAIL — investor forecast slider: labels collided on phones
   ===================================================================== */
.b-profit-slider.b-border-slider { border: 1px solid #dfe5ec !important; border-radius: 16px !important; box-shadow: 0 6px 24px rgba(20, 40, 70, .06) !important; }
@media (max-width: 768px) {
    .b-profit-slider .b-profit-slider-cur-price { display: none !important; }
    .b-profit-slider .profit-slider { height: auto !important; margin: 34px 0 48px !important; position: relative; }
    .b-profit-slider .irs-grid { top: 30px !important; bottom: auto !important; }
    .b-profit-slider .irs-grid-text { font-size: 11px !important; line-height: 1.25 !important; }
    .b-profit-slider .irs-grid-text.js-grid-text-1,
    .b-profit-slider .irs-grid-text.js-grid-text-3 { visibility: hidden !important; }
}

/* =====================================================================
   6. TEXT & CONTRAST (WCAG AA)
   ===================================================================== */
.min_text, .min_price, span.min_text.min_price, .short_form .ob_pole, #short_form .ob_pole { color: var(--st-ink-soft) !important; }
input::placeholder, textarea::placeholder { color: #6b7480 !important; opacity: 1; }
/* consent labels and «* обязательные поля» were 9–10px */
.promo_application_label, .promo_application_label span,
.yes_pd, .yes_pd a, .ob_pole,
label[for*="yes_pd"], .chechbox_yes_pd + label {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

/* Системная настройка «уменьшить движение»: гасим bounceIn/slide-анимации и плавный скролл */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Yandex map canvas (tiles) ran past its box at 768px on /locacii/ and developer pages */
.bx-yandex-view-map, .bx-yandex-map, ymaps.ymaps-map, ymaps[class$="-map"] { overflow: hidden !important; }

/* Catalog card on phones: price box hung 20px past the photo and «Своб. план» ran into «от»
   (.kv_name had a fixed 40px width) */
@media (min-width: 577px) and (max-width: 768px) {
    #catalog .center > .lst { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
    #catalog .center > .lst > .item { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
    #catalog .center > .lst > :not(.item), #catalog .center > .lst > .under_filter_block { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 768px) {
    #catalog .lst > .item img.bg { width: 100% !important; height: auto !important; aspect-ratio: 330 / 350; object-fit: cover; }
    #catalog .lst > .item .plashka .right-bottom { left: auto !important; right: 15px !important; width: auto !important; min-width: 0 !important; max-width: calc(100% - 30px) !important; box-sizing: border-box !important; padding-right: 8px !important; }
    #catalog .lst > .item .plashka .all_price { width: auto !important; }
    #catalog .lst > .item .plashka .all_price > span { white-space: nowrap !important; }
}
.plashka .all_price .kv_name { width: auto !important; min-width: 40px; }

/* Floating MAX / Telegram buttons: 60px circles covered buttons and text on phones.
   Sizes are inline !important, so scale the container instead. */
@media (max-width: 480px) {
    .stndv_floating_widgets_container { transform: scale(.78); transform-origin: right bottom; }
}