/* Фактурный фон и hero без плашки — на всех страницах. Управляется классом
   .bg-plaster на <body> (подключается вместе с этим файлом в shell()).
   Откат: удалить одну строку <link> и один класс на <body> в build/lib.mjs.

   Меняем только: фон страниц/секций, фактуру, цвет плашек и их границ,
   разделители, силу теней, чуть более тёмный --muted (нужно для AA на
   плотном сером фоне). Синий, оранжевый, подложки иконок (кроме лёгкого
   притемнения на 3–4%), тексты, структура и разметка — не трогаем. */

.bg-plaster{
  /* ---------- палитра фона: «Цемент» (активна) ---------- */
  --bg-1:#f0efec;
  --bg-2:#e8e6e1;
  --bg-3:#dedbd4;
  --line:#d3cfc7;
  --shadow:0 1px 2px rgba(40,36,30,.06), 0 12px 28px rgba(40,36,30,.10);

  /* ---------- запасной тон «Бетон» — раскомментировать вместо «Цемента» ----------
  --bg-1:#eef0f3; --bg-2:#e5e8ec; --bg-3:#d9dde3; --line:#ccd2da;
  */

  /* ---------- запасной тон «Песок» ----------
  --bg-1:#f3f0e9; --bg-2:#ebe6db; --bg-3:#e0d9cb; --line:#d6cec0;
  */

  /* ---------- затемнение первого экрана: «Сталь» (по образцу клиента — стальная табличка) ---------- */
  --hero-steel:#2c3236;
  --hero-steel-rgb:44,50,54;

  /* ---------- плашки: «Молочный» (активен, пара к «Цементу») ---------- */
  --card:#fbfaf7;
  --card-line:#e4e0d8;
  --card-hover:#ffffff;

  /* ---------- запасные плашки ----------
  «Чисто белый» — строго и технично:
  --card:#ffffff; --card-line:#e7e3db;
  «Бумажный» — спокойный, каталожный, под B2B:
  --card:#f7f5f0; --card-line:#e0dbd1;
  «Голубоватый» — в тон бренду, брать с фоном «Бетон»:
  --card:#fafcff; --card-line:#dde5f0;
  */

  /* приглушённый текст на плотном сером фоне тем же серым не проходит AA —
     этот оттенок темнее глобального --muted на 1.5–2 ступени */
  --muted:#4f5f72;

  background:var(--bg-2);
}

/* ---------- текстура: три слоя на чистом CSS, без внешних файлов ---------- */
.bg-plaster{
  /* зерно штукатурки — по умолчанию на всех текстурных секциях */
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.28'/%3E%3C/svg%3E");
  /* разводы кельмы — только hero и форма */
  --trowel:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.014'%20numOctaves='4'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='600'%20height='600'%20filter='url(%23t)'%20opacity='0.16'/%3E%3C/svg%3E");
  /* чертёжная сетка — только светлый вариант (для тёмного блока УК/ТСЖ своя, ниже) */
  --grid:repeating-linear-gradient(0deg,rgba(20,32,46,.045) 0 1px,transparent 1px 40px),
         repeating-linear-gradient(90deg,rgba(20,32,46,.045) 0 1px,transparent 1px 40px);
  --grid-dark:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 40px),
              repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 40px);
}

/* Зерно и ритм тона — на любой странице, по позиции секции в <main>, а не по
   конкретным id (структура у каждого шаблона своя). hero — свой навy-тон ниже,
   .uk (единственный намеренно тёмный акцентный блок, только на главной) и
   .closing (акцентный светло-синий баннер на страницах услуг) не трогаем —
   зерно на них не кладём, тон не перебиваем. */
.bg-plaster main > section:not(.hero):not(.uk):not(.closing):not(.form-sec){
  background-image:var(--grain);
  background-size:160px 160px;
}
.bg-plaster main > section:not(.hero):not(.uk):not(.closing):not(.form-sec):nth-of-type(odd){ background-color:var(--bg-1); }
.bg-plaster main > section:not(.hero):not(.uk):not(.closing):not(.form-sec):nth-of-type(even){ background-color:var(--bg-2); }
/* форма заявки — самый плотный тон и разводы кельмы, как у hero: акцентная точка на любой странице */
.bg-plaster main > section.form-sec{
  background-color:var(--bg-3);
  background-image:var(--grain),var(--trowel);
  background-size:160px 160px,600px 600px;
}
/* hero — свой тон и разводы кельмы (плюс тонировка под текст, см. ниже) */
.bg-plaster .hero{
  background-color:var(--bg-3);
  background-image:var(--grain),var(--trowel);
  background-size:160px 160px,600px 600px;
}

/* блок «Управляющим компаниям и ТСЖ» — цвет (тёмно-синий) не трогаем,
   это единственный намеренно тёмный акцентный блок сайта; зерно на тёмном
   не видно, поэтому кладём только миллиметровку — тонкий намёк на смету */
.bg-plaster .uk{ background-image:var(--grid-dark); }

/* ---------- плашки: светлее фона, поверх зерна, без своей текстуры ---------- */
.bg-plaster .card,
.bg-plaster .reason,
.bg-plaster .step,
.bg-plaster .sro,
.bg-plaster .checklist--lg li,
.bg-plaster .checklist--gold li,
.bg-plaster .minis li{
  background-color:var(--card);
  background-image:none;
  border:1px solid var(--card-line);
  box-shadow:var(--shadow);
}
.bg-plaster .section--paper .card,
.bg-plaster .on-dark .checklist--gold li{ border-color:var(--card-line); }
.bg-plaster .reason{ border-radius:var(--radius); padding:24px 22px; }

/* наведение — плашка «подсвечивается» до чисто белого и слегка всплывает */
.bg-plaster .svc:hover{
  background-color:var(--card-hover);
  border-color:#cfd9e8;
  box-shadow:0 16px 38px rgba(40,36,30,.14);
}

/* цветные подложки иконок остаются как есть — чуть притемняем, чтобы не «светились» на молочном */
.bg-plaster .card .svc__icon,
.bg-plaster .reason__ic{ filter:brightness(.96); }

/* ---------- первый экран: без белой плашки под текстом, текст прямо на фото ----------
   Плашка визуально спорила с фактурным фоном и выглядела «приклеенной». Вместо неё —
   фото тонировано в стальной серый (по пожеланию клиента, образец — стальная
   табличка с золотой гравировкой), текст светлый. Лёгкий диагональный блик
   поверх тонировки — «глянец» металла. */
.bg-plaster .hero__text{
  max-width:640px;
  background:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.bg-plaster .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(var(--hero-steel-rgb),.78) 0%,rgba(var(--hero-steel-rgb),.92) 100%);
}
@media (min-width:900px){
  .bg-plaster .hero::after{
    background:
      linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,.09) 30%,rgba(255,255,255,0) 44%),
      linear-gradient(90deg,var(--hero-steel) 0%,var(--hero-steel) 28%,rgba(var(--hero-steel-rgb),.86) 44%,rgba(var(--hero-steel-rgb),.35) 66%,rgba(var(--hero-steel-rgb),.14) 100%),
      linear-gradient(0deg,var(--hero-steel) 0,transparent 26%);
  }
}
.bg-plaster .hero h1,
.bg-plaster .hero__tag{ color:#ffffff; }
.bg-plaster .hero .lead{ color:#e6ecf2; } /* светлее --dmuted: измерено по реальным пикселям, с запасом от локальных светлых пятен фото */
.bg-plaster .hero .quality{ color:#ffffff; }
.bg-plaster .hero .quality li+li::before{ color:var(--accent); }
.bg-plaster .hero .eyebrow{ color:#ffffff; opacity:.92; }
.bg-plaster .hero .crumbs li{ color:var(--dmuted); }
.bg-plaster .hero .crumbs a{ color:#ffffff; }
.bg-plaster .hero .crumbs a:hover{ text-decoration:underline; }
.bg-plaster .hero .crumbs [aria-current]{ color:#ffffff; font-weight:600; }
.bg-plaster .hero .crumbs li+li::before{ color:var(--dline); }
.bg-plaster .hero .btn--ghost{
  border-color:var(--dline);
  color:#ffffff;
  background:rgba(255,255,255,.08);
}
.bg-plaster .hero .btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }

/* печать — фактура ни к чему; браузеры фоновые картинки не печатают по умолчанию,
   но hero__bg — это <img>, а не фон, его нужно скрыть отдельно и вернуть тёмный текст */
@media print{
  .bg-plaster,
  .bg-plaster *{ background-image:none !important; }
  .bg-plaster .hero__bg{ display:none; }
  .bg-plaster .hero h1,
  .bg-plaster .hero__tag,
  .bg-plaster .hero .plate__in,
  .bg-plaster .hero .quality,
  .bg-plaster .hero .eyebrow,
  .bg-plaster .hero .crumbs a,
  .bg-plaster .hero .crumbs [aria-current]{ color:var(--ink); }
  .bg-plaster .hero .lead,
  .bg-plaster .hero .crumbs li{ color:var(--muted); }
}