/* =========================================================================
   Блок-Строй — style.css
   Часть 1/4: переменные, сброс, типографика, контейнер, кнопки, формы
   ========================================================================= */

/* Атрибут hidden обязан скрывать: правило класса с display перебивает
   браузерное [hidden]{display:none}, и скрытый блок остаётся видимым. */
[hidden] { display: none !important; }

:root {
    /* --- Палитра (снята с дизайн-референса, тёплая земляная гамма) --- */
    --color-cream:        #F5F0E8;
    --color-cream-alt:    #F0E2D7;
    --color-cream-soft:   #F7F2ED;
    --color-charcoal:     #2E2723;
    --color-charcoal-2:   #241E1B;
    --color-terracotta:   #A8672E;
    --color-terracotta-2: #935a29;
    --color-clay:         #B58F67;
    --color-olive:        #6A6D40;
    --color-olive-2:      #5b5e36;
    --color-sage:         #D2D8C2;
    --color-taupe:        #CDC5C3;
    --color-text:         #2E2A28;
    --color-text-soft:    #55504b;
    --color-on-dark:      #F5F0E8;
    --color-on-dark-soft: #cfc7bd;
    --color-border:       #ddd0bd;
    --color-border-dark:  #453c36;
    --color-white:        #ffffff;

    /* --- Типографика --- */
    --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans:  'Karla', 'Segoe UI', Tahoma, Arial, sans-serif;

    --fs-h1: clamp(2.1rem, 1.6rem + 2.2vw, 3.6rem);
    --fs-h2: clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem);
    --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
    --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    --fs-base: 1rem;
    --fs-small: 0.875rem;
    --fs-caps: 0.8rem;

    /* --- Сетка --- */
    --container-w: 1300px;
    --container-pad: 24px;
    --content-w: 700px;

    /* --- Форма элементов --- */
    --radius: 3px;
    --radius-lg: 4px;

    /* --- Прочее --- */
    --transition: 180ms ease;
    --header-h: 128px;

    color-scheme: light;
}

/* --- Сброс --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--color-cream);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
svg { flex-shrink: 0; }

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.6em;
    color: var(--color-charcoal);
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

strong { font-weight: 700; }

button {
    font-family: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

table { border-collapse: collapse; width: 100%; }

/* --- Skip-link --- */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    background: var(--color-charcoal);
    color: var(--color-on-dark);
    padding: 10px 18px;
    border-radius: var(--radius);
    z-index: 1000;
    transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* --- Контейнер и сетка секций --- */
.container {
    width: 100%;
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.content-narrow {
    max-width: var(--content-w);
    margin-inline: auto;
}

.section {
    padding-block: clamp(48px, 6vw, 88px);
}
.section--cream { background: var(--color-cream); }
.section--cream-alt { background: var(--color-cream-alt); }
.section--cream-soft { background: var(--color-cream-soft); }
/* Правило h1..h4 { color: var(--color-charcoal) } перебивает наследуемый светлый
   цвет секции, поэтому каждый заголовок на тёмном фоне надо перекрывать явно.
   В списке были только h2 и h3: h1 оставался угольным и на .section--charcoal
   совпадал с фоном ровно (#2E2723 на #2E2723) — заголовок «Вопросы и ответы» и
   «О заводе «Блок-Строй»» были не видны вообще, а на олив-фоне давали контраст
   2,7:1. h4 добавлен, чтобы дыра не открылась снова. */
.section--olive { background: var(--color-olive); color: var(--color-on-dark); }
.section--olive h1, .section--olive h2, .section--olive h3, .section--olive h4 { color: var(--color-on-dark); }
.section--sage { background: var(--color-sage); }
.section--taupe { background: var(--color-taupe); }
.section--charcoal { background: var(--color-charcoal); color: var(--color-on-dark); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--charcoal h4 { color: var(--color-on-dark); }
.section--olive p, .section--olive .lead, .section--olive li,
.section--charcoal p, .section--charcoal .lead, .section--charcoal li {
    color: var(--color-on-dark-soft);
}
.section--olive .eyebrow, .section--charcoal .eyebrow { color: var(--color-clay); }
/* Терракота на серо-тёплом taupe (#A8672E на #CDC5C3) даёт всего 2,66:1 —
   надпись «Отзывы» тонула в фоне. Затемнённый оттенок той же терракоты
   выводит секцию на ~4:1, как у остальных eyebrow сайта на кремовом фоне. */
.section--taupe .eyebrow, .section--taupe .link-more { color: #825025; }

/* --- Декоративный баннер-шапка (без фото): о заводе, статьи, вопросы-ответы --- */
.decor-banner { text-align: center; padding-block: clamp(56px, 7vw, 96px); }
.decor-banner .breadcrumbs__list { justify-content: center; }
.decor-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--color-terracotta);
}
.decor-banner h1 { margin-bottom: 0.4em; }
.decor-banner__lead { max-width: 620px; margin-inline: auto; }

.section-head {
    margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head--center { text-align: center; }
.section-head__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--fs-caps);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 0.7em;
}

.lead {
    font-size: var(--fs-lead);
    color: var(--color-text-soft);
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--color-terracotta);
    white-space: nowrap;
}
.link-more:hover { color: var(--color-terracotta-2); text-decoration: underline; }

/* --- Кнопки: прямоугольные, радиус 3px, без pill --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--fs-small);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
    background: var(--color-terracotta);
    color: var(--color-white);
    border-color: var(--color-terracotta);
}
.btn--primary:hover { background: var(--color-terracotta-2); border-color: var(--color-terracotta-2); }

.btn--ghost {
    background: transparent;
    color: var(--color-charcoal);
    border-color: currentColor;
}
.btn--ghost:hover { background: var(--color-charcoal); color: var(--color-on-dark); }

.btn--ghost-light {
    background: transparent;
    color: var(--color-on-dark);
    border-color: var(--color-on-dark);
}
.btn--ghost-light:hover { background: var(--color-on-dark); color: var(--color-charcoal); }

.btn--dark {
    background: var(--color-charcoal);
    color: var(--color-white);
    border-color: var(--color-charcoal);
}
.btn--dark:hover { background: var(--color-charcoal-2); }

.btn--sm { padding: 10px 18px; font-size: 0.78rem; }
.btn--block { width: 100%; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.btn-row--center { justify-content: center; }

/* --- Текстовые кнопки карточек (без обводки) --- */
.text-link-btn {
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    border-bottom: 1px solid var(--color-charcoal);
    padding-bottom: 2px;
}
.text-link-btn:hover { color: var(--color-terracotta); border-color: var(--color-terracotta); }

/* --- Формы --- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.field label {
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.field input,
.field textarea,
.field select {
    padding: 13px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    width: 100%;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 1px;
    border-color: var(--color-terracotta);
}
.field textarea { min-height: 130px; resize: vertical; }

.choice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.choice-card {
    position: relative;
    display: block;
    padding: 14px 16px;
    background: var(--color-cream-soft);
    border: 1px solid var(--color-terracotta);
    border-radius: var(--radius);
    font-size: var(--fs-small);
    text-align: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
/* Радиокнопка визуально скрыта, но должна оставаться внутри своей карточки:
   .field input задаёт width:100%, и без position:relative у .choice-card
   абсолютный инпут считал ширину от вьюпорта и растягивал страницу вбок. */
.choice-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.choice-card:has(input:checked) {
    background: var(--color-terracotta);
    color: var(--color-white);
}

.form-note {
    font-size: var(--fs-small);
    color: var(--color-text-soft);
}

/* =========================================================================
   Часть 2/4: шапка, навигация, бургер, мобильное меню, футер
   ========================================================================= */

/* --- Шапка: верхняя полоса --- */
.site-header { position: relative; z-index: 100; }

.topbar {
    background: var(--color-charcoal);
    color: var(--color-on-dark-soft);
    font-size: 0.8rem;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 9px;
}
.topbar__promo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--color-on-dark);
}
.topbar__promo svg { color: var(--color-terracotta); }
.topbar__phone {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--color-on-dark);
    font-weight: 500;
}
.topbar__phone:hover { color: var(--color-clay); }

/* --- Шапка: основная панель --- */
.navbar {
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
}
.navbar__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-block: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--color-charcoal);
}
.logo svg { color: var(--color-terracotta); }
.logo__text {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.nav { flex: 1 1 auto; min-width: 0; }
.nav__list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.nav__item { position: relative; }
.nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-charcoal);
    border-radius: var(--radius);
}
.nav__link:hover, .nav__link.is-active { color: var(--color-terracotta); }
.nav__link svg { transition: transform var(--transition); }

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 8px;
    box-shadow: 0 12px 28px -12px rgba(46, 39, 35, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.dropdown--cities {
    columns: 2;
    column-gap: 8px;
    min-width: 340px;
}
.dropdown li { break-inside: avoid; }
.dropdown a {
    display: block;
    padding: 9px 12px;
    font-size: 0.9rem;
    border-radius: var(--radius);
    color: var(--color-text);
}
.dropdown a:hover { background: var(--color-cream-alt); color: var(--color-terracotta); }

.nav__item.has-dropdown:hover .dropdown,
.nav__item.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav__item.has-dropdown:hover .nav__link svg,
.nav__item.has-dropdown:focus-within .nav__link svg { transform: rotate(180deg); }

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    color: var(--color-charcoal);
}
.icon-btn:hover { background: var(--color-cream-alt); color: var(--color-terracotta); }

.navbar__cta { white-space: nowrap; }

.burger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--color-charcoal);
    border-radius: var(--radius);
}
.burger:hover { background: var(--color-cream-alt); }
.burger[aria-expanded="true"] .icon-close-shown { display: block; }

/* --- Панель поиска --- */
.search-panel {
    background: var(--color-cream-soft);
    border-bottom: 1px solid var(--color-border);
}
.search-panel__form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 14px;
    color: var(--color-text-soft);
}
.search-panel__form input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    font-size: 1rem;
    padding: 6px 0;
}
.search-panel__form input:focus { outline: none; }
.search-panel__form .icon-btn { flex: 0 0 auto; }

/* --- Мобильное меню --- */
.mobile-menu {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--color-cream);
    overflow-y: auto;
    z-index: 90;
}
.mobile-menu__inner { padding-block: 20px 40px; }
.mobile-menu__item {
    border-bottom: 1px solid var(--color-border);
}
.mobile-menu__link,
.mobile-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 4px;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-charcoal);
}
.mobile-menu__link.is-active,
.mobile-menu__link:hover { color: var(--color-terracotta); }
.mobile-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__toggle svg { transition: transform var(--transition); }
.mobile-menu__submenu { padding-bottom: 12px; }
.mobile-menu__submenu a {
    display: block;
    padding: 10px 4px 10px 16px;
    font-size: 0.95rem;
    color: var(--color-text-soft);
}
.mobile-menu__submenu a:hover { color: var(--color-terracotta); }
.mobile-menu__cta { margin-top: 24px; width: 100%; }
.mobile-menu__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    font-weight: 700;
    color: var(--color-charcoal);
}

/* --- Футер --- */
.site-footer {
    background: var(--color-charcoal);
    color: var(--color-on-dark-soft);
}
.site-footer__brand {
    text-align: center;
    padding-top: clamp(48px, 6vw, 72px);
}
.logo--footer {
    display: inline-flex;
    color: var(--color-terracotta);
    margin-bottom: 14px;
}
.site-footer__name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-on-dark);
    margin-bottom: 4px;
}
.site-footer__tagline {
    font-size: 0.9rem;
    color: var(--color-on-dark-soft);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-block: clamp(36px, 5vw, 56px);
    border-bottom: 1px solid var(--color-border-dark);
    margin-top: clamp(36px, 5vw, 56px);
}
.footer-col__title {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-dark);
    margin-bottom: 16px;
}
.footer-col__list { display: flex; flex-direction: column; gap: 11px; }
.footer-col__list a { font-size: 0.9rem; }
.footer-col__list a:hover { color: var(--color-terracotta); }

.site-footer__social {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-block: 24px;
}
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius);
    color: var(--color-on-dark-soft);
}
.site-footer__social a:hover { color: var(--color-terracotta); border-color: var(--color-terracotta); }

.site-footer__bottom {
    background: var(--color-charcoal-2);
}
.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 18px;
    font-size: 0.82rem;
}
.site-footer__bottom-links { display: flex; gap: 20px; }
.site-footer__bottom-links a:hover { color: var(--color-terracotta); }

/* =========================================================================
   Часть 3/4: стили секций
   ========================================================================= */

/* --- Хлебные крошки --- */
.breadcrumbs { margin-bottom: 18px; }
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--color-on-dark-soft);
}
.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    opacity: 0.6;
}
.breadcrumbs__item a { color: var(--color-on-dark-soft); }
.breadcrumbs__item a:hover { color: var(--color-clay); }
.breadcrumbs__item[aria-current] { color: var(--color-on-dark); }
.section--cream .breadcrumbs__list,
.section--cream-alt .breadcrumbs__list,
.section--cream-soft .breadcrumbs__list { color: var(--color-text-soft); }
.section--cream .breadcrumbs__item a,
.section--cream-alt .breadcrumbs__item a,
.section--cream-soft .breadcrumbs__item a { color: var(--color-text-soft); }
.section--cream .breadcrumbs__item[aria-current],
.section--cream-alt .breadcrumbs__item[aria-current],
.section--cream-soft .breadcrumbs__item[aria-current] { color: var(--color-charcoal); }

/* --- Фото-баннер внутренних страниц (full-bleed, H1 поверх затемнения) --- */
.page-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(260px, 34vw, 420px);
    background-size: cover;
    background-position: center;
    color: var(--color-on-dark);
}
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(46,39,35,0.35) 0%, rgba(46,39,35,0.75) 100%);
}
.page-banner__inner {
    position: relative;
    width: 100%;
    padding-block: 40px;
}
.page-banner h1 { color: var(--color-on-dark); margin-bottom: 0.3em; }
.page-banner .breadcrumbs__list,
.page-banner .breadcrumbs__item a { color: var(--color-on-dark-soft); }
.page-banner .breadcrumbs__item[aria-current] { color: var(--color-on-dark); }
.page-banner__lead { max-width: 620px; color: var(--color-on-dark-soft); font-size: var(--fs-lead); }

/* --- Hero главной --- */
.hero {
    position: relative;
    min-height: clamp(360px, 52vw, 620px);
    /* Своей высоты у героя не было — только min-height. Когда контент выше её
       (узкий экран: заголовок в 3 строки + две кнопки), секция сжималась ровно
       по контенту, и точки слайдера (position:absolute, bottom:28px) ложились
       поверх кнопки «Все виды блоков». Нижнего отступа хватает на точки, верхний
       отодвигает надзаголовок от шапки. */
    padding-block: 48px 64px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: var(--color-on-dark);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(46,39,35,0.72) 0%, rgba(46,39,35,0.32) 65%, rgba(46,39,35,0.15) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 620px; }
/* Надзаголовок лежит прямо на фото слайдера: --color-clay (#B58F67) давал на нём
   1.9-2.4 — ниже порога 3.0. Тот же глиняный оттенок, осветлённый до читаемого. */
.hero .eyebrow { color: #E8CDB0; }
.hero h1 { color: var(--color-on-dark); }
.hero__lead { font-size: var(--fs-lead); color: var(--color-on-dark-soft); margin-bottom: 1.6em; }
.hero__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 700ms ease;
}
.hero__slide.is-active { opacity: 1; }
.hero::before { z-index: 1; }
.hero__dots {
    position: absolute;
    z-index: 2;
    left: var(--container-pad);
    bottom: 28px;
    display: flex;
    gap: 8px;
}
.hero__dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(245,240,232,0.4);
    padding: 0;
}
.hero__dots button.is-active { background: var(--color-terracotta); }

/* --- Разделитель-глиф (сигнатура) --- */
.glyph-divider {
    display: flex;
    justify-content: center;
    padding-block: 8px 0;
    color: var(--color-terracotta);
}
.section--olive .glyph-divider,
.section--charcoal .glyph-divider { color: var(--color-sage); }

/* --- Строка иконок-фактов --- */
.fact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    margin-top: 32px;
}
.fact-strip__item {
    display: flex;
    align-items: center;
    gap: 14px;
}
.fact-strip__item svg { color: var(--color-terracotta); flex-shrink: 0; }
.fact-strip__value { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; color: var(--color-charcoal); display: block; }
.fact-strip__label { font-size: 0.85rem; color: var(--color-text-soft); }

/* --- Сетки карточек --- */
.grid {
    display: grid;
    gap: 28px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Карточка товара (блока) --- */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
}
.product-card__img {
    aspect-ratio: 4/3;
    overflow: hidden;
}
.product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card__title { font-size: 1.15rem; margin-bottom: 0.4em; }
.product-card__desc { font-size: 0.92rem; color: var(--color-text-soft); flex: 1; margin-bottom: 16px; }
.product-card__actions { display: flex; gap: 20px; flex-wrap: wrap; }

/* --- Карточка статьи --- */
.article-card { display: flex; flex-direction: column; }
.article-card__img {
    aspect-ratio: 16/10;
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-bottom: 16px;
}
.article-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.article-card:hover .article-card__img img { transform: scale(1.04); }
.article-card__meta { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-terracotta); margin-bottom: 8px; }
.article-card__title { font-size: 1.1rem; margin-bottom: 0.5em; }
.article-card__title a:hover { color: var(--color-terracotta); }
.article-card__excerpt { font-size: 0.92rem; color: var(--color-text-soft); }

/* --- Карточка объекта/стройки (фото + подпись) --- */
.object-card { display: block; }
.object-card__img {
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 10px;
}
.object-card__img img { width: 100%; height: 100%; object-fit: cover; }
.object-card__caption { font-size: 0.9rem; color: var(--color-text-soft); }

/* --- Карточка отзыва --- */
.review-card {
    background: var(--color-taupe);
    padding: 28px 26px;
    position: relative;
}
.review-card__quote { color: var(--color-charcoal); opacity: 0.5; margin-bottom: 10px; }
.review-card__text { font-size: 0.95rem; margin-bottom: 18px; }
.review-card__name { font-weight: 700; }
.review-card__city { font-size: 0.85rem; color: var(--color-text-soft); }
.review-card__rating { display: flex; gap: 2px; margin-top: 8px; color: var(--color-terracotta); }

/* --- Брошюра / альбом технических решений --- */
.brochure {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: center;
    background: var(--color-cream-soft);
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid var(--color-border);
}
.brochure__cover { aspect-ratio: 3/4; overflow: hidden; box-shadow: 0 18px 32px -18px rgba(46,39,35,0.4); }
.brochure__cover img { width: 100%; height: 100%; object-fit: cover; }

/* --- CTA-полоса (общая секция) --- */
.cta-banner {
    text-align: center;
}
.cta-banner .btn-row { margin-top: 28px; justify-content: center; }

/* --- Подписка (тёмная плашка) --- */
.subscribe {
    text-align: center;
}
.subscribe__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    margin: 28px 0 8px;
    opacity: 0.85;
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* --- Таблицы характеристик и расчёта --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); }
.data-table { min-width: 480px; }
.data-table th, .data-table td {
    text-align: left;
    padding: 13px 18px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
}
.data-table th {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.78rem;
    background: var(--color-cream-alt);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

/* --- Галерея кладки/фасадов --- */
.swatch-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.swatch-gallery figure { margin: 0; }
.swatch-gallery img { aspect-ratio: 1/1; object-fit: cover; width: 100%; border: 1px solid var(--color-border); }
.swatch-gallery figcaption { font-size: 0.82rem; color: var(--color-text-soft); margin-top: 8px; text-align: center; }

/* --- FAQ: превью и полный список --- */
.faq-preview__list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
    border-bottom: 1px solid var(--color-border);
    padding-block: 18px;
}
.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
    font-weight: 700;
    font-size: 1rem;
}
.faq-item__q svg { flex-shrink: 0; color: var(--color-terracotta); }
.faq-item__a { font-size: 0.94rem; color: var(--color-text-soft); margin-top: 10px; }
.faq-static .faq-item__q { font-family: var(--font-serif); font-size: 1.08rem; cursor: default; }

.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}
.faq-tab {
    padding: 10px 20px;
    border: 1px solid var(--color-charcoal);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 700;
}
.faq-tab.is-active { background: var(--color-charcoal); color: var(--color-on-dark); }
.faq-group__title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 36px;
    margin-bottom: 4px;
    color: var(--color-olive);
}

/* --- Оглавление статьи --- */
.toc {
    background: var(--color-cream-soft);
    border: 1px solid var(--color-border);
    padding: 22px 26px;
    margin-bottom: 40px;
}
.toc__title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; color: var(--color-olive); }
.toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: 8px; }
.toc li { counter-increment: toc; font-size: 0.94rem; }
.toc a::before { content: counter(toc) '. '; color: var(--color-terracotta); font-weight: 700; }
.toc a:hover { color: var(--color-terracotta); }

.article-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin-bottom: 32px;
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }

.article-body h2 { margin-top: 1.8em; }
.article-body h3 { margin-top: 1.4em; }
.article-body ul { list-style: none; margin: 1em 0; display: flex; flex-direction: column; gap: 10px; }
.article-body ul li { padding-left: 26px; position: relative; }
.article-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: var(--color-terracotta);
}
.article-body figure { margin: 2em 0; }
.article-body figure img { width: 100%; border: 1px solid var(--color-border); }
.article-body figcaption { font-size: 0.85rem; color: var(--color-text-soft); margin-top: 8px; }

/* --- Врезка (about) --- */
.callout {
    text-align: center;
    max-width: 780px;
    margin-inline: auto;
}
.callout p { font-family: var(--font-serif); font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.4; }

.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.cols-3__item h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.cols-3__item h3 svg { color: var(--color-terracotta); }
.cols-3__item p { color: var(--color-text-soft); font-size: 0.94rem; }

/* --- Команда / контактные лица --- */
.team-card { text-align: left; }
.team-card__photo { aspect-ratio: 1/1; overflow: hidden; margin-bottom: 14px; filter: grayscale(1); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-weight: 700; margin-bottom: 2px; }
.team-card__role { font-size: 0.88rem; color: var(--color-text-soft); margin-bottom: 12px; }
.team-card__phone { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; margin-bottom: 10px; }

/* --- Карта --- */
.map-block { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--color-border); }
.map-block__frame { aspect-ratio: 4/3; }
.map-block__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-block__info { padding: clamp(24px, 3vw, 40px); background: var(--color-cream-soft); display: flex; flex-direction: column; gap: 16px; }
.map-block__row { display: flex; gap: 12px; align-items: flex-start; }
.map-block__row svg { color: var(--color-terracotta); margin-top: 2px; flex-shrink: 0; }

/* --- Список ссылок по городам --- */
.geo-links {
    columns: 4;
    column-gap: 28px;
}
.geo-links li { break-inside: avoid; margin-bottom: 10px; }
.geo-links a { font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; }
.geo-links a:hover { color: var(--color-terracotta); }
.geo-links a svg { color: var(--color-terracotta); opacity: 0.7; }

/* --- Контакты: крупный телефон --- */
.phone-highlight { text-align: center; }
.phone-highlight__number {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 3.2rem);
    font-weight: 700;
    color: var(--color-terracotta);
}
.phone-highlight__caption { font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-soft); margin-top: 8px; }

/* --- Гео-страница: CTA маршрута --- */
.route-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* --- Related content (похожие материалы) --- */
.related-content .grid--3 { align-items: start; }

/* --- Расчёт калькулятора (заглушка секции на index/kontakty) --- */
.calc-note { background: var(--color-sage); padding: 24px 28px; border-left: 4px solid var(--color-olive); }

/* =========================================================================
   Часть 4/4: focus-visible, reduced-motion, медиазапросы, печать
   ========================================================================= */

/* --- Фокус для клавиатурной навигации --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 2px;
    border-radius: 2px;
}
.dropdown a:focus-visible { outline-offset: -2px; }

/* --- Появление секций при скролле (управляется JS через class .in-view) --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease, transform 500ms ease;
}
[data-reveal].in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   Медиазапросы. Mobile-first: базовые стили выше — под узкий экран,
   расширяем от 900 (планшет/навигация) и 1280 (десктоп).
   ========================================================================= */

/* ---------- ДО 1149px: шапка уходит в бургер ----------
   Логотип + 6 пунктов меню + поиск + кнопка требуют примерно 1120px ширины
   контейнера. Ниже этого порога последний пункт наезжал на кнопку «Оставить
   заявку», поэтому переключение на бургер поднято с 900px до 1150px.
   ВАЖНО: этот же порог продублирован в matchMedia в assets/js/main.js. */
@media (max-width: 1149px) {
    .navbar__actions { margin-left: auto; }
    :root { --header-h: 116px; }

    .topbar__promo span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .nav { display: none; }
    .navbar__cta { display: none; }
    .search-panel { display: none !important; }
    .icon-btn[data-search-toggle] { display: none; }
    .burger { display: inline-flex; margin-left: auto; }
    .mobile-menu[data-mobile-menu]:not([hidden]) { display: block; }

    .navbar__inner { padding-block: 14px; gap: 16px; }
    .logo__text { font-size: 1.1rem; }
}

/* ---------- ДО 899px: телефон/планшет — сетки в одну-две колонки ---------- */
@media (max-width: 899px) {
    .hero__inner { max-width: 100%; }
    .brochure { grid-template-columns: 1fr; }
    .brochure__cover { max-width: 220px; margin-inline: auto; }

    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--2 { grid-template-columns: 1fr; }
    .cols-3 { grid-template-columns: 1fr; gap: 28px; }
    .swatch-gallery { grid-template-columns: repeat(2, 1fr); }

    .map-block { grid-template-columns: 1fr; }
    .geo-links { columns: 2; }
    .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
    .site-footer__bottom-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 599px) {
    :root { --container-pad: 18px; }
    /* На узком экране длинная подпись («Что выбрать? Получить консультацию»)
       при white-space:nowrap задавала кнопке ширину больше экрана. */
    .btn { white-space: normal; text-align: center; max-width: 100%; }
    /* Длинное составное слово «керамзитобетонные» в h1 при прежнем кегле было
       шире контейнера (372px против 339px доступных на 375px). Кегль h1 на
       узком экране уменьшен так, чтобы слово помещалось целиком; hyphens/
       overflow-wrap — страховка для ещё более длинных слов. */
    :root { --fs-h1: clamp(1.8rem, 0.6rem + 4.4vw, 2.4rem); }
    h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
    .topbar__inner { flex-wrap: wrap; row-gap: 4px; }
    .grid--4, .grid--3 { grid-template-columns: 1fr; }
    .swatch-gallery { grid-template-columns: repeat(2, 1fr); }
    .geo-links { columns: 1; }
    .footer-columns { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .site-footer__social { flex-wrap: wrap; }
    .dropdown--cities { columns: 1; }
    .product-card__actions { gap: 14px; }
}

/* ---------- ОТ 1150px: показываем десктоп-навигацию ---------- */
@media (min-width: 1150px) {
    .mobile-menu { display: none !important; }
}

/* ---------- 900–1279px: планшет/малый десктоп — плотнее подвал ---------- */
@media (min-width: 900px) and (max-width: 1279px) {
    .footer-columns { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .cols-3 { gap: 22px; }
}

/* ---------- 1150–1399px: узкий десктоп — плотнее навигация ----------
   Просторные отступы пунктов (14px) включаются только с 1400px: раньше
   меню не помещается между логотипом и кнопкой «Оставить заявку». */
@media (min-width: 1150px) and (max-width: 1399px) {
    .navbar__inner { gap: 16px; }
    .nav__list { gap: 2px; }
    .nav__link { padding: 10px 8px; font-size: 0.76rem; }
}

/* ---------- ОТ 1400px: полный десктоп ---------- */
@media (min-width: 1400px) {
    .nav__link { padding: 10px 14px; }
}

/* ---------- ОТ 1440px: расширенный десктоп ---------- */
@media (min-width: 1440px) {
    :root { --container-w: 1320px; }
}

/* =========================================================================
   Печать
   ========================================================================= */
@media print {
    .site-header, .site-footer, .hero__dots, .btn, .glyph-divider,
    .search-panel, .mobile-menu, .burger { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
    .page-banner { min-height: auto; color: #000; }
    .page-banner::before { display: none; }
    .page-banner h1 { color: #000; }
}