/* =========================================================
   Строймонтажрегион — стили раздела «Статьи»
   Подключается в stati/index.html и во всех статьях.
   Токены и шапка/подвал совпадают с главной страницей.
   ========================================================= */
:root{
  --navy:#2A3A5E;
  --navy-2:#36486F;
  --sky:#E7F0F9;
  --sky-2:#D7E6F4;
  --mint:#E3F1E7;
  --sun:#FCF2D4;
  --white:#FFFFFF;
  --signal:#F2B705;
  --signal-text:#7A5A05;
  --green:#3B8A58;
  --green-2:#2E6E45;
  --line:#BFD2E3;
  --fg:#24324F;
  --fg-2:#566581;
  --rule:rgba(42,58,94,.18);
  --rule-2:rgba(42,58,94,.10);
  --pad:clamp(18px,4vw,56px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;line-height:1.6;color:var(--fg);background:var(--white);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3,h4{margin:0;line-height:1.16;letter-spacing:-.015em;font-weight:600}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:0 26px;font:600 16px/1 "IBM Plex Sans",sans-serif;text-decoration:none;text-align:center;
  border:2px solid transparent;cursor:pointer;border-radius:2px}
.btn-signal{background:var(--signal);color:#2A2205;border-color:var(--signal)}
.btn-signal:hover{background:#FFC61A;border-color:#FFC61A}
.btn-line{background:transparent;color:var(--fg);border-color:var(--rule)}
.btn-line:hover{border-color:currentColor}

/* ---------- шапка (как на главной) ---------- */
header{position:sticky;top:0;z-index:60;background:var(--navy);color:#EEF3F9}
.bar{display:flex;align-items:center;gap:20px;min-height:70px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;min-height:48px}
.logo b{font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1}
.logo .mark{width:auto;height:42px;display:block;flex:0 0 auto}
.logo b span{font-weight:400;color:#A9B8D0}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{font-size:15px;text-decoration:none;color:#A9B8D0;padding:6px 0;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--signal)}
.hcall{display:flex;flex-direction:column;gap:1px;text-decoration:none;white-space:nowrap;min-height:48px;justify-content:center}
.hcall .ico{display:none}
.hcall b{font-size:17px;font-weight:600}
.hcall span{font-size:12.5px;color:#A9B8D0}
.burger{display:none;width:46px;height:46px;flex:0 0 auto;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(237,239,238,.28);cursor:pointer;padding:0;border-radius:2px}
.burger i{display:block;position:relative;width:20px;height:2px;background:var(--signal)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--signal)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
@media (max-width:1200px){
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;display:none;
    background:var(--navy-2);padding:4px var(--pad) 12px;border-bottom:2px solid var(--signal);
    max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto}
  .nav[data-open]{display:flex}
  .nav a{font-size:16px;padding:14px 0;border-bottom:1px solid rgba(237,239,238,.12)}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--signal);padding-left:12px}
  .hcall{margin-left:auto}
  .burger{display:flex}
}
@media (max-width:600px){
  .bar{gap:10px}
  .logo b{font-size:16px}
  .logo .mark{height:36px}
  .hcall b,.hcall span{display:none}
  .hcall .ico{display:block}
  .hcall{flex:0 0 46px;width:46px;min-height:46px;align-items:center;justify-content:center;border:1px solid rgba(237,239,238,.28);border-radius:2px;margin-left:auto}
}
@media (max-width:420px){
  .bar{gap:8px}
  .logo{gap:7px}
  .logo b{font-size:14.5px}
  .logo .mark{height:30px}
}
@media (max-width:389px){
  .logo b{font-size:13px;letter-spacing:-.01em}
  .logo .mark{height:26px}
  .hcall,.burger{width:44px;height:44px;min-height:44px;flex-basis:44px}
}
@media (max-width:359px){
  :root{--pad:14px}
  .logo b{display:none}
  .logo .mark{height:36px}
}

/* ---------- хлебные крошки ---------- */
.crumbs{font-size:14px;color:var(--fg-2);margin:0 0 18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 8px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--fg-2);text-decoration:none;display:inline-block;padding:11px 0}
.crumbs a:hover{color:var(--fg);text-decoration:underline}
.crumbs [aria-current]{color:var(--fg);padding:11px 0}

/* ---------- заголовочная полоса ---------- */
.intro{background:var(--sky);padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(30px,4.5vw,56px);border-bottom:1px solid var(--line)}
.intro h1{font-size:clamp(28px,4vw,46px);max-width:26ch;font-weight:700;text-wrap:balance}
.intro .lede{margin:16px 0 0;color:var(--fg-2);font-size:17.5px;max-width:60ch}

/* ---------- список статей ---------- */
.catalog{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(52px,7vw,88px)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(22px,3vw,32px)}
.chip{font:500 15px/1.2 "IBM Plex Sans",sans-serif;color:var(--fg);background:var(--white);
  border:1px solid var(--line);border-radius:2px;padding:0 14px;min-height:44px;cursor:pointer}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:700px){
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
    padding:0 var(--pad) 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}

.alist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px}
.acard{outline:1px solid var(--line)}
.alist:not(:has(.acard)){display:none}
.acard{background:var(--white);display:flex}
.acard>a{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;text-decoration:none;width:100%;border-top:4px solid transparent}
.acard>a:hover{border-top-color:var(--signal)}
.acard>a:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.acat{font-size:14px;font-weight:600;color:var(--green-2)}
.acard h2{font-size:19px;line-height:1.25}
.acard p{margin:0;font-size:15px;color:var(--fg-2)}
.ameta{margin-top:auto;padding-top:6px;font-size:14px;color:var(--fg-2)}
@media (max-width:980px){.alist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.alist{grid-template-columns:1fr}.acard>a{padding:18px 18px 20px}}

.more{display:flex;justify-content:center;margin-top:24px}
.empty{background:var(--sky);border-left:4px solid var(--signal);padding:clamp(22px,3vw,34px);max-width:780px}
.empty h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:10px}
.empty p{color:var(--fg-2);max-width:60ch}
.empty .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.catalog:has(.acard) .empty-all{display:none}
.catalog:not(:has(.acard)) .filters{display:none}
@media (max-width:480px){.empty .acts .btn,.cta-band .acts .btn{flex:1 1 100%}}

/* ---------- страница статьи ---------- */
.post-head .acat{display:inline-block;margin-bottom:12px}
.post-meta{margin:18px 0 0;font-size:14.5px;color:var(--fg-2);display:flex;flex-wrap:wrap;gap:4px 20px}

.post{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,64px);padding-top:clamp(30px,4vw,52px);padding-bottom:clamp(40px,6vw,72px)}
.post-toc-nav{position:sticky;top:94px;align-self:start}
.post-toc{font-size:14.5px}
.post-toc summary{display:none}
.post-toc p{font-weight:600;margin:0 0 10px}
.post-toc ol{margin:0;padding-left:1.3em}
.post-toc li{margin-bottom:8px}
.post-toc a{color:var(--fg-2);text-decoration:none}
.post-toc a:hover{color:var(--fg);text-decoration:underline}
@media (max-width:960px){
  .post{grid-template-columns:minmax(0,1fr)}
  .post-toc-nav{position:static}
  .post-toc{background:var(--sky);border-left:4px solid var(--signal);padding:0 18px}
  .post-toc summary{display:list-item;cursor:pointer;font-weight:600;padding:14px 0;min-height:48px}
  .post-toc p{display:none}
  .post-toc ol{padding:0 0 12px 1.3em}
  .post-toc li{margin-bottom:0}
  .post-toc a{display:block;padding:10px 0}
}

.prose{max-width:74ch;font-size:17px;line-height:1.68}
.prose .lead{font-size:19px;color:var(--fg-2);line-height:1.55}
.prose h2{font-size:clamp(22px,2.6vw,29px);margin:46px 0 14px;padding-top:22px;border-top:3px solid var(--signal)}
.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:20px;margin:30px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:1.35em}
.prose li{margin-bottom:8px}
.prose a{color:var(--navy);text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose figure{margin:26px 0}
.prose figcaption{font-size:14.5px;color:var(--fg-2);margin-top:8px}
.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid var(--navy);color:var(--fg)}

.note{background:var(--sky);border-left:4px solid var(--navy);padding:18px 22px;margin:22px 0}
.note.warn{background:var(--sun);border-left-color:var(--signal)}
.note.ok{background:var(--mint);border-left-color:var(--green)}
.note p:last-child{margin-bottom:0}
.note b:first-child{display:block;margin-bottom:4px}

.faq{border-top:1px solid var(--rule);margin:10px 0 20px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:600;padding:14px 28px 14px 0;position:relative;list-style:none;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;line-height:1;color:var(--signal-text)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 14px}

.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 8px}

.inline-cta{background:var(--navy);color:#EEF3F9;padding:22px 24px;margin:30px 0;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;border-radius:2px}
.inline-cta p{margin:0;flex:1 1 320px;font-size:16.5px;line-height:1.5}
.inline-cta p b{display:block;font-size:19px;margin-bottom:4px}
.prose .inline-cta a.btn{color:#2A2205;text-decoration:none}
@media (max-width:480px){.inline-cta .btn{flex:1 1 100%}}

.related{background:var(--sky);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.related>.wrap>h2{font-size:clamp(22px,2.8vw,32px);margin-bottom:22px}

/* ---------- таблицы (как на главной) ---------- */
.ptab{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:15.5px;line-height:1.5}
.ptab caption{text-align:left;font-weight:600;font-size:16px;padding-bottom:10px}
.ptab th{text-align:left;font-weight:600;font-size:14px;color:var(--fg-2);padding:9px 12px 9px 0;border-bottom:2px solid var(--navy)}
.ptab th:last-child,.ptab td:last-child{text-align:right;padding-right:0;white-space:nowrap}
.ptab td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule-2);vertical-align:top}
.ptab td:last-child{font-weight:600}
.ptab small{display:block;color:var(--fg-2);font-size:14px;line-height:1.4;font-weight:400}
.tnote{font-size:14.5px;color:var(--fg-2);margin:6px 0 16px}
@media (max-width:560px){
  .ptab,.ptab tbody,.ptab tr,.ptab td{display:block;width:100%}
  .ptab thead{display:none}
  .ptab tr{border-bottom:1px solid var(--rule);padding:12px 0}
  .ptab td{border:0;padding:2px 0;white-space:normal!important}
  .ptab td:first-child{font-weight:600}
  .ptab td[data-label]::before{content:attr(data-label) ": ";color:var(--fg-2);font-weight:400;font-size:14px}
  .ptab td:last-child{text-align:left;font-size:17px;color:var(--signal-text)}
}

/* ---------- полоса «запросить смету» ---------- */
.cta-band{background:var(--sun);padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:clamp(22px,2.8vw,32px);margin-bottom:8px}
.cta-band p{margin:0;color:var(--fg-2);max-width:56ch}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- подвал ---------- */
footer{background:var(--navy);color:#A9B8D0;padding:26px 0 calc(34px + env(safe-area-inset-bottom));font-size:14px}
.flogo{margin-bottom:20px}
.flogo .fmark{width:auto;height:60px;display:block}
.flogo b{display:block;margin-top:8px;font-size:17px;font-weight:700;letter-spacing:.13em;color:#EEF3F9}
@media (max-width:520px){.flogo .fmark{height:48px}.flogo b{font-size:14px;letter-spacing:.1em}}
@media (max-width:340px){.flogo b{font-size:12px;letter-spacing:.06em}}
.fbar{display:flex;flex-wrap:wrap;gap:2px 26px;align-items:center;padding-top:16px;border-top:1px solid rgba(238,243,249,.16)}
.fbar a{text-decoration:none;display:inline-block;padding:12px 0}
.fbar a:hover{color:#EEF3F9}

/* ---------- баннер cookie ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy-2);border-top:3px solid var(--signal);
  padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom));color:#EEF3F9;display:none}
.ck[data-show]{display:block}
.ck-in{max-width:1240px;margin:0 auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ck p{margin:0;font-size:14.5px;color:#A9B8D0;max-width:78ch;flex:1 1 380px;line-height:1.55}
.ck a{color:#EEF3F9;text-decoration:underline;text-underline-offset:2px}
.ck a:hover{color:var(--signal)}
.ck .btn{min-height:46px;flex:0 0 auto}
@media (max-width:700px){
  .ck{padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom))}
  .ck-in{gap:12px}
  .ck p{font-size:13px;line-height:1.45;flex:1 1 100%}
  .ck .btn{min-height:44px;padding:0 22px;font-size:15px;width:100%}
}
@media (max-height:480px){
  .ck p{font-size:12.5px;line-height:1.4}
  .ck{padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
}
.acard h3{font-size:19px;line-height:1.25}
.acard>a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- блок контактов в конце статьи ---------- */
.contacts{background:var(--sky);border-left:4px solid var(--navy);padding:24px 26px;margin:44px 0 0}
.prose .contacts h2{margin:0 0 10px;padding:0;border:0;font-size:clamp(21px,2.4vw,26px)}
.contacts dl{display:grid;grid-template-columns:200px minmax(0,1fr);margin:16px 0 0;font-size:16px}
.contacts dt,.contacts dd{padding:9px 0;border-top:1px solid var(--rule)}
.contacts dt{color:var(--fg-2);font-size:15px;padding-right:12px}
.contacts dd{margin:0;font-weight:500}
.prose .contacts dd a{color:var(--fg)}
.contacts-cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0!important}
.prose .contacts-cta a.btn{text-decoration:none;color:#2A2205}
.prose .contacts-cta a.btn-line{color:var(--fg)}
@media (max-width:560px){
  .contacts{padding:20px 18px}
  .contacts dl{grid-template-columns:1fr}
  .contacts dd{border-top:0;padding-top:0}
  .contacts-cta .btn{flex:1 1 100%}
}

/* таблицы, где последняя колонка — текст, а не цена */
.ptab-text th:last-child,.ptab-text td:last-child{text-align:left;white-space:normal}
.ptab-text td:last-child{font-weight:400}
.ptab-text td:first-child{font-weight:600}