/* ==========================================================================
   Москва завтра — styles
   БЭМ: блоки с префиксом b-, элементы — block__element (без вложенных селекторов)
   Масштаб 1:1 с макетом (2400px) — размеры макета достигаются на ≥1200px,
   на меньших экранах пропорционально уменьшаются (mobile-first).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Цвета */
  --color-accent: #0062f5;      /* синий — даты, ссылки, стрелки, точки */
  --color-accent-dark: #0052cc; /* ховер акцентных кнопок */
  --color-ink: #333333;         /* основной тёмный текст */
  --color-ink-soft: #4d4d4d;    /* приглушённый текст / плейсхолдер */
  --color-text: #000000;        /* абзацы */
  --color-logo: #5eb6e8;        /* пилюли логотипа «Москва завтра» */
  --color-bg: #ffffff;          /* фон страницы */
  --color-surface: #ffffff;     /* карточки, поля */
  --color-footer: #333333;      /* футер */
  --color-line: #e6e6e6;        /* разделители */
  --color-muted: #a3a3a3;       /* серый текст крошек */
  --color-control-border: #d5d5d5; /* обводка контролов шапки на белом (внутр. страницы) */

  /* Типографика (базовые — мобильные; на ≥1200 → размеры макета 1:1) */
  --font-main: "Montserrat", "Proxima Nova", "Segoe UI", Arial, sans-serif;
  --fs-h1: 26px;                /* hero заголовок; на ≥1280 — fluid до 76px при 2400 */
  --lh-h1: 1.2;                 /* line-height заголовка; на ≥1280 — fluid до 100px при 2400 */
  --fs-h2: 22px;                /* заголовок секции (макет 32) */
  --fs-card-title: calc(var(--fs-hero-desc) * 1.2); /* карточка = 1.2× описания слайдера (24:20 @2400) */
  --fs-body: 15px;              /* дефолт body */
  --fs-meta: var(--fs-hero-desc);                   /* дата = размеру описания слайдера (20:20 @2400) */
  --fs-ui: 16px;               /* навигация, кнопки, поиск (макет 22-24) */
  --fs-logo: 18px;             /* текст логотипа «Москва завтра» (макет 24) */
  --fs-hero-desc: 14px;        /* подзаголовок слайдера; на ≥1200 плавно 16→20 (макет 20) */
  /* внутренняя страница (мелкие — кратно описанию слайдера, держат пропорцию) */
  --fs-page-title: 28px;       /* H1 материала; на ≥1280 → 40→50 (макет ~50) */
  --fs-page-date: 18px;        /* дата над H1; на ≥1280 → 22→30 (макет 30) */
  --fs-crumbs: var(--fs-hero-desc);              /* крошки (20 @2400) */
  --fs-article: calc(var(--fs-hero-desc) * 1.1); /* текст описания (~22 @2400) */
  --fs-address: var(--fs-hero-desc);             /* адрес (20 @2400) */
  --fs-address-title: calc(var(--fs-hero-desc) * 1.4); /* «Адрес» (28 @2400) */
  --fs-more: calc(var(--fs-hero-desc) * 1.4);    /* «+N» на плитке (28 @2400) */
  --fs-lightbox: calc(var(--fs-hero-desc) * 1.1);  /* описание в лайтбоксе (22 @2400) */
  --fs-lightbox-meta: calc(var(--fs-hero-desc) * 0.9); /* дата/фотограф (18 @2400) */
  --lb-ctrl: 44px;             /* круглые кнопки лайтбокса (крестик/стрелки); ≥1280 → 52 (макет ~48) */
  /* фильтр в шапке (дропдаун) — базовые мобильные; на ≥1280 → размеры макета @2400 */
  --fs-filter-label: 20px;     /* лейбл поля (Округ/Район/…); ≥1280 → 44 */
  --fs-filter-field: 15px;     /* плейсхолдер/значение/опции; ≥1280 → 30 */
  --filter-pill-h: 48px;       /* высота поля-пилюли; ≥1280 → 83 */
  --filter-panel-w: min(360px, calc(100vw - 32px)); /* ширина панели; ≥1280 → 700 */
  --filter-pad: 20px;          /* внутренние поля панели; ≥1280 → 47 */
  --filter-radius: 18px;       /* скругление панели; ≥1280 → 24 */

  /* Раскладка (базовые — мобильные) */
  --container: 2100px;          /* контент по макету (1:1) */
  --gutter: 20px;               /* боковые поля контейнера */
  --grid-gap: 30px;             /* промежуток между карточками (макет 60) */
  --row-gap: 40px;              /* промежуток между рядами */
  --header-h: 46px;             /* высота элементов шапки; на ≥1200 плавно 54→69 (макет) */
  --header-pad: 24px;           /* верх/низ отступ содержимого шапки; на ≥1200 плавно 58→75 */
  --logo-ring: 3px;             /* голубая «обводка» вокруг пилюли «Москва» */
  --icon-circle: 38px;          /* кружки лупы/фильтра/пина (равны); на ≥1200 плавно 42→50 */
  --btn-h: 40px;                /* высота pill-кнопки; на ≥1200 плавно 47→60 (макет 60) */
  --radius-pill: 999px;         /* pill-кнопки/поля */
  --radius-card: 8px;
  --radius-gallery: 12px;       /* скругление изображений галереи / карты-адреса */
  --hero-min: 540px;            /* пол высоты слайдера (под контент); иначе — по aspect-ratio 2400:1100 до 1100px */
  --footer-h: 150px;            /* высота футера; на ≥1280 → 235→300 (макет 300) */
  --dot-size: 16px;             /* точки пагинации; на ≥1280 → 24→30 (макет 30) */

  /* Прочее */
  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.08);
  --transition: 0.2s ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* всегда резервируем место под вертикальный скроллбар — тогда центрированный
     контейнер (шапка, контент) стоит одинаково на всех страницах независимо от
     того, прокручивается ли страница, и не «прыгает» при открытии фильтра/лайтбокса */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-bg);
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

/* ---------- Layout helper ---------- */
.b-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Доступность: фокус с клавиатуры + skip-ссылка ---------- */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
/* поле поиска: без второй обводки-outline при фокусе — только синяя рамка (см. :focus ниже) */
.b-search__input:focus-visible { outline: none; border-color: var(--color-accent); }

.b-skip {
  position: absolute;
  left: 14px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  transition: top var(--transition);
}

.b-skip:focus { top: 14px; }

/* ==========================================================================
   b-logo — переиспользуемый логотип «Москва завтра»
   ========================================================================== */
.b-logo {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
  padding: var(--logo-ring) 26px var(--logo-ring) var(--logo-ring); /* голубая «обводка» 4px */
  border-radius: var(--radius-pill);
  background: var(--color-logo);
  white-space: nowrap;
}

.b-logo__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--header-h) - var(--logo-ring) * 2);
  padding: 0 20px 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.b-logo__mark {
  width: calc(var(--header-h) - var(--logo-ring) * 2 - 12px);
  height: calc(var(--header-h) - var(--logo-ring) * 2 - 12px);
  border-radius: 50%;
  background: var(--color-logo);
}

.b-logo__name,
.b-logo__accent {
  font-size: var(--fs-logo);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.b-logo__name { color: var(--color-logo); }

.b-logo__accent { color: var(--color-surface); }

/* ==========================================================================
   b-search — поле поиска с иконкой
   ========================================================================== */
.b-search { position: relative; flex: 1 1 auto; min-width: 0; }

.b-search__input {
  width: 100%;
  height: var(--header-h);
  padding: 0 calc(var(--icon-circle) + 46px) 0 28px;  /* справа: лупа + крестик */
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-main);   /* было Arial (input не наследует шрифт) — п.6 «вес» */
  font-size: var(--fs-ui);
  outline: none;
  transition: border-color var(--transition);
}

.b-search__input::placeholder { color: #808080; }  /* светлее (п.6 «цвет»); было ink-soft #4d4d4d */

/* нативный крестик type=search прячем — используем свою кнопку .b-search__clear
   (кросс-браузерно, всегда видна при наличии текста) */
.b-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* кастомный крестик очистки — слева от лупы, показывает JS при наличии текста */
.b-search__clear {
  position: absolute;
  top: 50%;
  right: calc(var(--icon-circle) + 16px);
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.b-search__clear.is-visible { display: inline-flex; }
.b-search__clear:hover { color: var(--color-accent); }
.b-search__clear-svg { width: 16px; height: 16px; }

.b-search__input:focus { border-color: var(--color-accent); }

/* лупа в кружке с тёмной обводкой */
.b-search__icon {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-circle);
  height: var(--icon-circle);
  border: 1px solid var(--color-control-border);
  border-radius: 50%;
  color: var(--color-ink);
  background: var(--color-surface);
  /* pointer-events: none; */
}

/* глиф вписан во всю кнопку — во viewBox 49 у иконки свой внутренний отступ */
.b-search__icon-svg { width: 100%; height: 100%; }

/* ==========================================================================
   b-icon-btn — квадратная иконка-кнопка (фильтр, карта)
   ========================================================================== */
.b-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-circle);
  height: var(--icon-circle);
  padding: 0;
  border: 1px solid var(--color-control-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color var(--transition), box-shadow var(--transition);
}

.b-icon-btn:hover { color: var(--color-accent); box-shadow: var(--shadow-card); }

.b-icon-btn--accent { color: var(--color-accent); }

.b-icon-btn__icon { width: 100%; height: 100%; }

/* ==========================================================================
   Фильтр в шапке — дропдаун (Округ / Район / Застройщик). Только стр. материала.
   Контролы — нативные <select>, стилизованы под макет. При открытии панели фон
   затемняется голубым оверлеем (как в лайтбоксе). Открытие селектов — нативное.
   ========================================================================== */
.b-filter { position: relative; display: inline-flex; }

/* при открытии — кнопку+панель над затемнением (активная иконка, как в макете) */
.b-filter.is-open { z-index: 300; }

/* главная: шапка-оверлей имеет свой stacking-context (z-index:10) — снимаем его при
   открытом фильтре, иначе панель окажется под затемнением; шапка остаётся затемнённой */
body.is-filter-open .b-top .b-header { z-index: auto; }

/* затемнение страницы — голубой оверлей (совпадает с лайтбоксом) */
.b-filter__overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 98, 245, 0.85);
  -webkit-backdrop-filter: blur(8px);   /* размытие контента под оверлеем (п.7) */
  backdrop-filter: blur(8px);
}

.b-filter__overlay[hidden] { display: none; }

body.is-filter-open { overflow: hidden; }

.b-filter__panel {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  z-index: 200;
  width: var(--filter-panel-w);
  padding: calc(var(--filter-pad) + 22px) var(--filter-pad) var(--filter-pad);
  background: var(--color-surface);
  border-radius: var(--filter-radius);
  box-shadow: 0 24px 64px rgba(0, 40, 110, 0.22);
}

.b-filter__panel[hidden] { display: none; }

.b-filter__field { margin-bottom: 24px; }   /* шаг между полями по макету (без <br> в разметке) */

.b-filter__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-filter-label);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-ink);
}

.b-filter__control { position: relative; }

/* нативный select под pill из макета (общий вид для фильтра шапки и фильтра карты) */
.b-filter__select,
.chosen-container,
.b-mapfilter__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--filter-pill-h);
  padding: 0 calc(var(--filter-pill-h) * 0.62) 0 30px;
  border: 1px solid var(--color-control-border);
  border-radius: calc(var(--filter-pill-h) / 2);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--fs-filter-field);
  color: var(--color-ink);
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--transition);
}

.b-filter__select:hover,
.b-filter__select:focus-visible,
.b-mapfilter__select:hover,
.b-mapfilter__select:focus-visible { outline: none; border-color: var(--color-accent); }

/* плейсхолдер (первый disabled option value="") — серый */
.b-filter__select:required:invalid,
.b-mapfilter__select:required:invalid { color: var(--color-ink-soft); }

.b-filter__select option,
.b-mapfilter__select option { color: var(--color-ink); }

/* синий треугольник поверх select (клики проходят к select) */
.b-filter__caret,
.b-mapfilter__caret {
  position: absolute;
  right: calc(var(--filter-pill-h) * 0.34);
  top: 50%;
  width: 0.73em;
  height: 0.47em;
  font-size: var(--fs-filter-label);
  transform: translateY(-50%);
  color: var(--color-accent);
  pointer-events: none;
}

.b-filter__submit { margin-top: 4px; }

/* смартфон: панель не помещается справа от иконки — растягиваем по ширине шапки */
@media (max-width: 767.98px) {
  .b-header { position: relative; }
  .b-filter { position: static; }
  .b-filter__panel {
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* ==========================================================================
   b-partner — партнёрский логотип «Агентство городских новостей Москва»
   ========================================================================== */
.b-partner {
  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 30px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.b-partner__img { display: block; height: calc(var(--header-h) - 22px); width: auto; }

/* ==========================================================================
   b-button — pill-кнопка (белый фон, синий текст, стрелка). Переиспользуемая.
   ========================================================================== */
.b-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: var(--btn-h);
  padding-inline: 18px;
  border: 3px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: var(--fs-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--transition), color var(--transition);
}

/* ховер — инверсия (синяя заливка, белый текст) */
.b-button:hover { background: var(--color-accent); color: #fff; }

.b-button__arrow { width: 17px; height: 10px; flex: none; color: currentColor; }

/* Модификатор: сплошная синяя заливка (белый текст) */
.b-button--solid {
  background: var(--color-accent);
  color: #fff;
}

.b-button--solid:hover { background: var(--color-accent-dark); }

/* ==========================================================================
   b-header — верхняя панель навигации
   ========================================================================== */
/* верхний блок: слайдер + шапка-оверлей над ним */
.b-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* по умолчанию шапка в потоке (внутренние страницы, на белом) */
.b-header { background: transparent; }

/* в контексте слайдера (главная) — шапка оверлеем поверх изображения через
   grid-overlay (обе в ячейке 1/1), НЕ position:absolute. Так горизонтальное
   позиционирование шапки идентично внутренним страницам и не зависит от
   absolute-контекста / скроллбара / DPI (иначе логотип «гулял» между стр.). */
.b-top .b-header,
.b-top .b-hero { grid-area: 1 / 1; }

.b-top .b-header {
  align-self: start;
  position: relative;
  z-index: 10;
}

.b-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;                    /* логотип↔поиск и поиск↔партнёр ~44px (как в макете) */
  padding-block: var(--header-pad) 0;  /* низ задаёт контент под шапкой (hero / b-page) */
}

.b-header__logo { flex: none; }

.b-header__search { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }

.b-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.b-header__partner { flex: none; }

/* ==========================================================================
   b-hero — слайдер (slick). В шапке страницы.
   ========================================================================== */
.b-hero { position: relative; background: #dfe7ee; }

.b-hero__slide { position: relative; }

/* картинка задаёт высоту слайда: пропорция 2400:1100, но не ниже --hero-min
   (пол под контент) и не выше 1100px (шире 2400px высота фиксируется). Всегда cover. */
.b-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 2400 / 1100;
  min-height: var(--hero-min);
  max-height: 1100px;
  overflow: hidden;
}

.b-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* светлый градиент слева до центра — читаемость тёмного текста на фото */
.b-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /*background: linear-gradient(to right, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 52%);*/
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 52%);
  pointer-events: none;
}

/* контент — абсолютным оверлеем поверх картинки, по центру, с отступом под шапку */
.b-hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-pad) + var(--header-h) + 24px);
  padding-bottom: 20px;                /* смещение контента ниже центра, как в макете */
  pointer-events: none;
}

.b-hero__box {
  pointer-events: auto;
  max-width: 1100px;
}

.b-hero__titles { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.b-hero__title { margin: 0; display: flex; align-items: stretch; }

/* синяя вертикальная полоса-акцент слева, вплотную к плашке */
.b-hero__title::before {
  content: "";
  flex: none;
  width: 8px;
  background: var(--color-accent);
}

.b-hero__title-text {
  display: flex;
  align-items: center;
  padding: 0 0.4em;                /* без вертикальных паддингов: высота плашки = line-height */
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: 0.05em;          /* межбуквенное +5% (п.5); было -0.01em */
}

.b-hero__desc {
  max-width: 240px;
  margin: 18px 0 24px;
  padding-left: 25px;
  /*color: var(--color-text);*/
  /*font-size: var(--fs-hero-desc);*/
  color: #fff;
  font-size: calc(var(--fs-hero-desc) * 1.2);
  line-height: 1.2;
}

.b-hero__cta { margin-left: 25px; }

/* ---- slick pagination (синие точки) ---- */
.b-hero .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex !important;
  justify-content: center;
  gap: calc(var(--dot-size) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-hero .slick-dots li { width: var(--dot-size); height: var(--dot-size); }

/* синий круг в белом кольце */
.b-hero .slick-dots button {
  width: var(--dot-size);
  height: var(--dot-size);
  box-sizing: border-box;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  opacity: 0.4;                 /* неактивные — прозрачные */
  font-size: 0;
  color: transparent;
  transition: opacity var(--transition);
}

.b-hero .slick-dots .slick-active button { opacity: 1; }

/* ==========================================================================
   b-section-title — заголовок секции с синим акцентом. Переиспользуемый.
   ========================================================================== */
.b-section-title { margin: 0 0 26px; }

.b-section-title__text {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: 0.05em;          /* межбуквенное +5% (п.4/5) */
  color: var(--color-ink);
}

.b-section-title__accent {
  display: block;
  width: 75px;
  height: 5px;
  margin-top: 10px;
  background: var(--color-accent);
}

/* ==========================================================================
   b-card — карточка материала. Переиспользуемая.
   ========================================================================== */
.b-card { display: flex; flex-direction: column; }

.b-card__image-wrap {
  aspect-ratio: 480 / 324;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-line);
}

.b-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

.b-card:hover .b-card__image { transform: scale(1.04); }

.b-card__date {
  margin-top: 14px;
  color: var(--color-accent);
  font-size: var(--fs-meta);
  font-weight: 700;
}

.b-card__title {
  margin: 10px 0 0;
  color: var(--color-ink);
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1.2;
}

.b-card__text {
  margin: 10px 0 0;
  color: var(--color-ink);
  font-size: var(--fs-card-title);   /* в макете текст = размеру заголовка (24px @2400) */
  font-weight: 400;
  line-height: 1.2;
}

/* ==========================================================================
   b-materials — секция «Актуальные материалы»
   ========================================================================== */
.b-materials { padding-block: 48px 64px; }

.b-materials__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--grid-gap);
  row-gap: var(--row-gap);
}

.b-materials__cta { margin-top: 40px; margin-left: 25px; }

/* ==========================================================================
   b-footer
   ========================================================================== */
.b-footer { background: var(--color-footer); color: #fff; }

.b-footer__inner {
  display: flex;
  align-items: center;
  min-height: var(--footer-h);
}

/* ==========================================================================
   Внутренняя страница материала: b-page, b-breadcrumbs, b-page-title,
   b-gallery, b-map-card, b-article
   ========================================================================== */
.b-page { padding-top: 58px; padding-bottom: 70px; }

/* --- хлебные крошки --- */
.b-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 60px;             /* отступ до заголовка по дизайну (п.15) — крошки не липнут */
  font-size: var(--fs-crumbs);
  color: var(--color-muted);
}

.b-breadcrumbs__item { color: var(--color-muted); transition: color var(--transition); }

.b-breadcrumbs__item:hover { color: var(--color-accent); }

.b-breadcrumbs__item--current { color: var(--color-accent); pointer-events: none; }

.b-breadcrumbs__sep { color: var(--color-muted); }

/* «Все материалы»: секция сразу за крошками уже имеет свой padding-top —
   гасим его, чтобы отступ до заголовка был единым (только от .b-breadcrumbs, п.15) */
.b-breadcrumbs + .b-materials { padding-top: 0; }

/* --- заголовок страницы --- */
.b-page-title { margin: 0 0 44px; }   /* верхний отступ задаёт .b-breadcrumbs margin-bottom (п.15) */

.b-page-title__date {
  display: block;
  margin-bottom: 14px;
  font-size: var(--fs-page-date);
  font-weight: 700;
  color: var(--color-accent);
}

.b-page-title__text {
  margin: 0;
  font-size: var(--fs-page-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;          /* межбуквенное +5% (п.5); было -0.01em */
  color: var(--color-ink);
}

.b-page-title__accent {
  display: block;
  width: 75px;
  height: 5px;
  margin-top: 22px;
  background: var(--color-accent);
}

/* --- галерея: главное фото | миниатюры 2×2 | карта-адрес --- */
.b-gallery {
  display: grid;
  grid-template-columns: 704fr 670fr 706fr;
  gap: 11px;
}

.b-gallery__main {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-gallery);
	aspect-ratio:1.05;
}

.b-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.b-gallery__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 8px;
}

.b-gallery__thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-gallery);
}

.b-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.b-gallery__thumb:hover img { transform: scale(1.05); }

/* плитка «ещё N изображений» */
.b-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  background: rgba(0, 62, 160, 0.55);
  color: #fff;
  font-size: var(--fs-more);
  font-weight: 400;
}

.b-gallery__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.78em;
  height: 0.78em;
  border: 0.055em solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

.b-gallery__more-icon svg { width: 0.3em; height: 0.5em; }

/* --- карта + адрес --- */
.b-map-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-accent);   /* синяя рамка карты (п.9) */
  border-radius: var(--radius-gallery);
  overflow: hidden;
}

.b-map-card__map {
  position: relative;           /* якорь для оверлеев карты (зум/линейка/fallback) */
  flex: 1 1 0;                  /* растягивается на оставшуюся высоту карточки */
  min-height: 240px;           /* пол высоты (для reflow планшет/мобайл) */
  background: #eef4fb;          /* фон на время загрузки карты */
}

.b-map-card__frame { display: block; width: 100%; height: 100%; border: 0; }

/* Компактные контролы карты в невысокой карточке материала — чтобы зум+линейка
   умещались над нижним рядом Яндекса (кнопка «Открыть Яндекс Карты») и не вылезали */
.b-map-card__map .b-mapview__tools { top: 12px; left: 12px; width: 42px; gap: 8px; }
.b-map-card__map .b-mapview__zoom { gap: 8px; padding: 8px 6px; }
.b-map-card__map .b-mapview__zoom-btn { width: 28px; height: 28px; font-size: 18px; }
.b-map-card__map .b-mapview__zoom-range { height: 48px; }

.b-map-card__address {
  border-top: 1px solid var(--color-line);
  padding: 24px 34px 30px;
}

.b-map-card__title {
  margin: 0 0 12px;
  font-size: var(--fs-address-title);
  font-weight: 700;
  letter-spacing: 0.05em;          /* межбуквенное +5% (п.5) */
  color: var(--color-accent);
}

.b-map-card__text {
  margin: 0;
  font-size: var(--fs-address);
  line-height: 1.45;
  color: var(--color-ink);
}

/* --- описание --- */
.b-article { margin-top: 54px; }

.b-article__text {
  margin-top: 30px;
  max-width: 1600px;
  color: var(--color-ink);
  font-size: var(--fs-article);
  line-height: 1.5;
}

.b-article__text p { margin: 0 0 0.5em; }

/* «Похожие проекты» на внутренней странице — без внешних паддингов секции */
.b-materials--page { padding: 0; margin-top: 125px; }

/* ==========================================================================
   Лайтбокс галереи — GLightbox (локально, MIT). Оформление под макет
   _src/LightBox.png: голубой оверлей, белая карточка (фото + подпись),
   круглые контролы, точки как у слайдера. Переопределяем классы GLightbox
   (скин .glightbox-clean); подпись — HTML .b-lb-cap; точки — .b-lb-dots (JS).
   ========================================================================== */

/* голубой оверлей (как в макете лайтбокса) */
.glightbox-container .goverlay { background: rgba(0, 98, 245, 0.85); }

/* карточка: фото сверху + подпись снизу, белая, скруглённая */
.glightbox-container .ginner-container {
  display: flex;
  flex-direction: column;   /* GLightbox на десктопе ставит row — переопределяем */
  width: min(2200px, 92vw);
  max-width: min(2200px, 92vw);
  height: auto;             /* GLightbox на мобильном ставит 100vh → белые пустоты */
  max-height: calc(100vh - 100px);
  background: var(--color-surface);
  border-radius: 16px;
  overflow: hidden;
}

/* фото — на всю ширину карточки, широкая пропорция как в макете, cover */
.glightbox-container .gslide-media { width: 100%; box-shadow: none !important; }

/* Медиа-область фото: бледно-серая база + размытый дубль текущего фото под ним
   (заполняет пустое пространство рядом с портретом вместо белого фона).
   --lb-bg (url картинки) выставляет js/lightbox.js на каждый слайд. */
.glightbox-container .gslide-image {
  width: 100%;
  position: relative;              /* контекст для блюр-подложки */
  background: #f4f4f4;             /* бледно-бледно-серая база */
  overflow: hidden;
}
.glightbox-container .gslide-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lb-bg);
  background-size: cover;
  background-position: center;
  filter: blur(30px);
  transform: scale(1.15);          /* прячем размытые края */
  opacity: 0.5;                    /* приглушаем — «бледный» дубль поверх серого */
  z-index: 0;
  pointer-events: none;
}

.glightbox-container .gslide-image img {
  position: relative;              /* поверх блюр-подложки */
  z-index: 1;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: calc(100vh - 260px) !important;
  /*aspect-ratio: 2199 / 976;*/
  object-fit: cover;
}
/* Портретные (вертикальные) фото — вписываем ПО ВЫСОТЕ, без обрезки: ширина по
   натуральной пропорции, по центру карточки (класс .is-portrait ставит js/lightbox.js
   по natural-размерам). Горизонтальные остаются как в макете — правило выше. */
.glightbox-container .gslide-image img.is-portrait {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 260px) !important;
  margin: 0 auto;         /* центрируем узкое фото в широкой карточке */
  display: block;
  object-fit: contain;
}

/* подпись под фото (вставляется JS в карточку): дата + фотограф | описание */
.b-lb-cap {
  display: flex;
  align-items: center;
  gap: clamp(56px, 11vw, 254px);
  padding: 40px 46px;
  background: var(--color-surface);
}

.b-lb-cap__meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-lightbox-meta);
}

.b-lb-cap__date { color: var(--color-accent); font-weight: 600; }

.b-lb-cap__author { color: var(--color-ink); }

.b-lb-cap__descr {
  flex: 1 1 auto;
  max-width: 745px;
  margin: 0;
  font-size: var(--fs-lightbox);
  line-height: 1.35;
  color: var(--color-ink);
}

/* круглые контролы (крестик/стрелки) — белые, как в макете */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  width: var(--lb-ctrl);
  height: var(--lb-ctrl);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: 50%;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover { background: #f2f2f2; }

.glightbox-clean .gclose svg path,
.glightbox-clean .gnext svg path,
.glightbox-clean .gprev svg path { fill: var(--color-ink-soft); }

.glightbox-clean .gclose svg { width: 40%; height: auto; }

.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg { width: 34%; height: auto; }

.glightbox-clean .gclose { top: 40px; right: 40px; }

.glightbox-clean .gprev,
.glightbox-clean .gnext { top: 50%; transform: translateY(-50%); }

.glightbox-clean .gprev { left: calc((100vw - min(2200px, 92vw)) / 2 + 20px); }

.glightbox-clean .gnext { right: calc((100vw - min(2200px, 92vw)) / 2 + 20px); }

/* точки-пагинация (как у слайдера главной); позицию по низу фото задаёт JS */
.b-lb-dots {
  position: absolute;
  z-index: 100000;
  display: flex;
  gap: calc(var(--dot-size) * 2);
  transform: translate(-50%, -50%);
}

.b-lb-dots__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  box-sizing: border-box;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--transition);
}

.b-lb-dots__dot.is-active { opacity: 1; }

/* ==========================================================================
   Страница «Карта объектов» (map.html): b-map-head, b-mapfilter, b-mapview,
   пины/кластеры/балун (маркеры Яндекс JS API 3.0 — DOM-элементы из js/map.js)
   ========================================================================== */

/* заголовок + фильтры над картой в одну строку (на узких — стопкой) */
.b-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: 26px;
}

.b-map-head .b-section-title { margin-bottom: 0; }

/* ряд фильтров над картой (пока только вёрстка; логика — отдельная задача) */
.b-mapfilter {
  --filter-pill-h: 46px;           /* компактнее, чем в дропдауне шапки */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.b-mapfilter__field { position: relative; flex: 0 1 auto; }

.b-mapfilter__select { min-width: 150px; padding-right: calc(var(--filter-pill-h) * 0.9); }

/* каретка фильтра карты — по кеглю поля (мельче), иначе большой треугольник
   лезет под текст (размер от --fs-filter-label давал ~32px на 2400) */
.b-mapfilter__caret { font-size: var(--fs-filter-field); }

.b-mapfilter__submit { flex: 0 0 auto; }

/* иконка сброса фильтров карты — синие круговые стрелки, без подложки (НОВОЕ п.1) */
.b-mapfilter__reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--filter-pill-h);
  height: var(--filter-pill-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  cursor: pointer;
  transition: transform var(--transition), color var(--transition);
}
.b-mapfilter__reset:hover { transform: rotate(-60deg); }
.b-mapfilter__reset-svg { width: auto; height: 66%; }   /* иконка 35×45 — размер по высоте */

/* --- карта --- */
.b-mapview {
  position: relative;
  aspect-ratio: 21 / 12;
  min-height: 420px;
  max-height: 1160px;
  border: 1px solid var(--color-accent);   /* синяя рамка карты (п.8, стр. /map/) */
  border-radius: var(--radius-gallery);
  background: #eef4fb;              /* фон на время загрузки/офлайн */
  overflow: hidden;
}

.b-mapview__canvas { position: absolute; inset: 0; }

/* инструменты карты (верх-лево): зум + масштабная линейка под ним.
   Ширина колонки = ширине пилюли зума (34 кнопка + 2×8 паддинг + 2 бордюр = 52px),
   align-items:center → линейка центрируется относительно зума (шире зума —
   симметрично выступает, без клиппинга). */
.b-mapview__tools {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 10;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* зум-контрол (кастомный, как на макете) */
.b-mapview__zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: 14px;                /* менее скруглённый, как в макете (п.12) */
  box-shadow: none;                    /* без тени (п.12) */
}

/* масштабная линейка — перенесена из копирайтов Яндекса под зум, в цветах сайта,
   без подложки: только синие чёрточки + подпись (шириной ≈ пилюле зума) */
.b-mapview__scale {
  display: flex;
  align-items: flex-end;
  justify-content: center;                                /* линейка по центру колонки (= центр зума) */
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.b-mapview__scale:empty { display: none; }               /* пока линейка не перенесена */

.b-mapview__scale .ymaps3--map-copyrights__scale { position: static !important; bottom: auto !important; }

/* ⊏──⊐-линейка: без фонов и скругления, только тонкие синие чёрточки
   (нижняя линия + боковые засечки). border-radius Яндекса убираем — иначе
   бордюры превращаются в скруглённую «недообводку». */
.b-mapview__scale .ymaps3--map-scale_line {
  position: relative !important;                          /* якорь для абсолютной подписи */
  background: transparent !important;                    /* убираем чёрную заливку-линию */
  border-width: 0 1px 1px 1px !important;                /* ⊔: без верхней грани */
  border-color: var(--color-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-accent) !important;
}

/* подпись — абсолютом НАД линией, по центру, с точным зазором 4px
   (_line центрирует её по вертикали, поэтому вынимаем из потока) */
.b-mapview__scale .ymaps3--map-scale_label {
  position: absolute !important;
  left: 50% !important;
  bottom: 100% !important;
  transform: translateX(-50%) !important;
  margin: 0 0 -4px 0 !important;
  padding: 0 !important;
  background: none !important;                            /* без белого фона */
  color: var(--color-accent) !important;                 /* подпись «10 км» — синяя */
  font-family: inherit;
  font-weight: 700;
  line-height: 1 !important;                              /* убрать leading — зазор точный */
  white-space: nowrap;
}

.b-mapview__zoom-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-control-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.b-mapview__zoom-btn:hover { border-color: var(--color-accent); }

.b-mapview__zoom-range {
  -webkit-appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 120px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* запасной экран */
.b-mapview__fallback {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: #eef4fb;
}

.b-mapview__fallback[hidden] { display: none; }

.b-mapview__fallback-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-ink); }

.b-mapview__fallback-note { margin: 0; font-size: 15px; color: var(--color-ink-soft); }

/* --- маркеры (DOM-элементы, создаются в js/map.js) --- */
/* пин объекта — синий поинтер как в шапке; тип острия в точке координаты */
.b-pin {
  transform: translate(-50%, -100%);   /* остриё капли в точке координаты */
  transform-origin: 50% 100%;          /* ховер-масштаб от острия — оно не смещается */
  width: 40px;
  height: 62px;                        /* капля по макету (глиф обрезан по контуру в map.js) */
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(0, 40, 110, 0.35));
  transition: transform var(--transition);
}

/* наведение — немного крупнее (позиционирующий translate сохраняем) */
.b-pin:hover { transform: translate(-50%, -100%) scale(1.12); }

.b-pin__svg { display: block; width: 100%; height: 100%; }

.b-pin__svg svg { display: block; width: 100%; height: 100%; }

/* активная капля (открыт балун) — белая с синим центром (инверсия), п.10 */
.b-pin--active { color: #fff; }
.b-pin--active .b-pin__svg svg path + path { fill: var(--color-accent); }

/* кластер — белый круг с синей обводкой и синим числом */
.b-cluster {
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 40, 110, 0.25);
  cursor: pointer;
  transition: transform var(--transition);
}

.b-cluster:hover { transform: translate(-50%, -50%) scale(1.12); }

/* балун объекта (фото + заголовок + «Подробно») — фиксированный оверлей ПО ЦЕНТРУ
   карты (не привязан к пину), поэтому всегда виден целиком; пин центрируется картой */
.b-mapballoon {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, calc(100% - 32px));
  padding: 18px;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);   /* синяя рамка (п.11) */
  border-radius: 16px;
  box-shadow: none;                          /* без тени (п.11) */
}

.b-mapballoon__close {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.b-mapballoon__title { margin: 0 22px 0 0; font-size: 16px; font-weight: 700; color: var(--color-ink); }

.b-mapballoon__img {
  display: block;
  width: 100%;
  margin: 12px 0 14px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
}

.b-mapballoon__cta { width: 100%; justify-content: center; }

/* карта: планшет/смартфон */
@media (max-width: 991.98px) {
  .b-map-head { justify-content: flex-start; }
  .b-mapfilter { width: 100%; }
  .b-mapfilter__field { flex: 1 1 30%; }
  .b-mapview { aspect-ratio: 4 / 3; }
}

@media (max-width: 575.98px) {
  .b-mapfilter__field { flex: 1 1 100%; }
  .b-mapview { aspect-ratio: 3 / 4; min-height: 460px; }
}

/* галерея: планшет (<1280) — 2 колонки, карта-адрес на всю ширину под ними */
@media (max-width: 1279.98px) {
  .b-gallery { grid-template-columns: 1fr 1fr; }
	.b-gallery__main {aspect-ratio:1;}
  .b-map-card { grid-column: 1 / -1; flex-direction: row; }
  .b-map-card__address { border-top: none; border-left: 1px solid var(--color-line); display: flex; flex-direction: column; justify-content: center; }
}

/* галерея: смартфон (<768) — в один столбец */
@media (max-width: 767.98px) {
  .b-gallery { grid-template-columns: 1fr; }
  .b-gallery__main { aspect-ratio: 1; }
  .b-map-card { flex-direction: column; }
  .b-map-card__address { border-top: 1px solid var(--color-line); border-left: none; }
}

/* лайтбокс (GLightbox): смартфон — фото 4:3, подпись в столбик, контролы у краёв */
@media (max-width: 767.98px) {
  .glightbox-container .ginner-container { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .glightbox-container .gslide-image img { aspect-ratio: 4 / 3; max-height: 60vh !important; }
  /* портрет на смартфоне — по высоте, без обрезки и без принудительной пропорции */
  .glightbox-container .gslide-image img.is-portrait { aspect-ratio: auto; width: auto !important; max-height: 60vh !important; }
  .glightbox-mobile .glightbox-container .gslide-description {
    position: static;
    background: var(--color-surface);
    padding: 0;
    max-height: none;
  }
  .glightbox-mobile .glightbox-container .gslide-desc { color: var(--color-ink); }
  .glightbox-container .gdesc-inner { padding: 20px; }
  .b-lb-cap { flex-direction: column; align-items: stretch; gap: 12px; }
  .glightbox-clean .gclose { top: 16px; right: 16px; }
  .glightbox-clean .gprev { left: 10px; }
  .glightbox-clean .gnext { right: 10px; }
}

/* ==========================================================================
   Адаптив (по ТЗ): смартфон 320+, планшет 768+, десктоп 1280+.
   Колонки карточек: <768 — 1; 768–1279 — 2; ≥1280 — 4.
   База — мобильная; десктопная версия (1:1 + мягкое масштабирование) — на ≥1280.
   ========================================================================== */

/* ≥576 sm — крупнее hero-заголовок (колонка карточек всё ещё 1) */
@media (min-width: 576px) {
  :root { --fs-h1: 30px; --fs-page-title: 32px; }
}

/* ≥768 md — ПЛАНШЕТ (по ТЗ): 2 колонки, партнёрский логотип, крупнее шапка/текст */
@media (min-width: 768px) {
  :root {
    --fs-h1: 36px;
    --header-h: 50px;
    --header-pad: 40px;
    --icon-circle: 40px;
    --fs-hero-desc: 15px;
    --fs-page-title: 36px;
    --fs-page-date: 20px;
    --btn-h: 44px;
    --footer-h: 200px;
    --dot-size: 20px;
    --gutter: 24px;
  }
  .b-hero__desc { max-width: 300px; }
  .b-materials__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≥992 lg — планшет крупнее (колонок по-прежнему 2, наследуются от sm) */
@media (min-width: 992px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 28px;
    --fs-body: 17px;
    --fs-ui: 19px;
    --fs-logo: 21px;
    --header-h: 54px;
    --header-pad: 58px;
    --icon-circle: 42px;
    --fs-hero-desc: 16px;
    --fs-page-title: 40px;
    --fs-page-date: 22px;
    --btn-h: 47px;
    --grid-gap: 44px;
    --hero-min: 600px;
  }
}

/* ≥1280 — ДЕСКТОП (граница десктоп/планшет по ТЗ): 4 колонки + размеры макета 1:1.
   Заголовок слайдера пропорционален ширине: при 2400 → 76px / lh 100px
   (76/2400=3.1667vw, 100/2400=4.1667vw), шире 2400 фиксируется (clamp max).
   Размеры шапки/кнопки/описания мягко масштабируются 1280→2400 (клампы). */
@media (min-width: 1280px) {
  :root {
    --fs-h1: clamp(40.5px, 3.1667vw, 76px);
    --lh-h1: clamp(53.3px, 4.1667vw, 100px);
    --fs-h2: 30px;                 /* по макету Map.png (cap-height 21 → ~30); было 32 (п.4) */
    /* карточки — мягкое масштабирование 1280→2400 (макетные при 2400) */
    --fs-body: clamp(17px, calc(17px + (100vw - 1280px) * 0.002679), 20px);
    --fs-ui: 22px;
    --fs-logo: clamp(24px, calc(24px + (100vw - 1280px) * 0.005357), 30px);
    --header-h: clamp(54px, calc(54px + (100vw - 1280px) * 0.013393), 69px);
    --header-pad: clamp(58px, calc(58px + (100vw - 1280px) * 0.015179), 75px);
    --logo-ring: 4px;
    --icon-circle: clamp(42px, calc(42px + (100vw - 1280px) * 0.005357), 48px);
    --fs-hero-desc: clamp(16px, calc(16px + (100vw - 1280px) * 0.003571), 20px);
    --fs-page-title: clamp(40px, calc(40px + (100vw - 1280px) * 0.008929), 50px);
    --fs-page-date: clamp(22px, calc(22px + (100vw - 1280px) * 0.007143), 30px);
    --lb-ctrl: clamp(48px, calc(48px + (100vw - 1280px) * 0.003571), 52px);
    --fs-filter-label: clamp(30px, calc(30px + (100vw - 1280px) * 0.0125), 44px);
    --fs-filter-field: clamp(22px, calc(22px + (100vw - 1280px) * 0.007143), 30px);
    --filter-pill-h: clamp(58px, calc(58px + (100vw - 1280px) * 0.022321), 83px);
    --filter-panel-w: clamp(520px, calc(520px + (100vw - 1280px) * 0.160714), 700px);
    --filter-pad: clamp(32px, calc(32px + (100vw - 1280px) * 0.013393), 47px);
    --filter-radius: 24px;
    --btn-h: clamp(47px, calc(47px + (100vw - 1280px) * 0.011607), 60px);
    --gutter: 30px;
    --grid-gap: 60px;
    --row-gap: 60px;
    --hero-min: 680px;
    --footer-h: clamp(235px, calc(235px + (100vw - 1280px) * 0.058036), 300px);
    --dot-size: clamp(24px, calc(24px + (100vw - 1280px) * 0.005357), 30px);
  }
  .b-materials__grid { grid-template-columns: repeat(4, 1fr); }
  .b-hero__desc { max-width: 440px; }
  .b-hero__box { max-width: 1300px; }   /* заголовок в 1 строку (Montserrat шире) */
  /* фильтр над картой — по макету Map.png (пилюля 50 / текст 22 при 2400),
     мельче дропдауна шапки; кнопка «Показать» в ряд по высоте */
  .b-mapfilter {
    --filter-pill-h: clamp(44px, calc(44px + (100vw - 1280px) * 0.005357), 50px);
    --fs-filter-field: clamp(16px, calc(16px + (100vw - 1280px) * 0.005357), 22px);
    --btn-h: clamp(44px, calc(44px + (100vw - 1280px) * 0.005357), 50px);
  }
  .b-mapfilter__select { min-width: clamp(180px, 14vw, 240px); }
}

/* ≥1400 xxl */
@media (min-width: 1400px) {
  :root { --gutter: 40px; }
}

/* ---- мобильная шапка/hero (перенос поиска) ---- */
@media (max-width: 767.98px) {
  .b-header__inner { flex-wrap: wrap; }
  .b-header__search { order: 3; flex-basis: 100%; }
  .b-header__partner { display: none; }

  /* шапка в два ряда (лого + поиск) — отодвигаем контент ниже */
  .b-hero__content { padding-top: calc(var(--header-pad) * 2 + var(--header-h) * 2 + 24px); }
  .b-hero__box { max-width: 100%; }
}

@media (max-width: 575.98px) {
  .b-hero__desc { max-width: 100%; }
}