/* ============================================================
   a-mon.ru · МИНИ-САЙТЫ ПОСЁЛКОВ · дизайн v2 (полная переверстка)
   Самодостаточный файл: палитра и компоненты основного сайта.
   ============================================================ */
:root{
  --bg:#f4f2ec; --surface:#fffdf8;
  --ink:#1e2226; --body:#3a4147; --muted:#707881;
  --line:#e3e0d6; --line-soft:#ece9df;
  --pine:#272f36; --pine-deep:#1a2126; --pine-mid:#3a4650;
  --brass:#b6863c; --brass-strong:#9d7028; --brass-on-dark:#d0a55e;
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--body);
  font:16px/1.55 var(--font); -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit; text-decoration:none}
.sw{max-width:1080px; margin:0 auto; padding:0 22px}
h1,h2,h3{color:var(--ink); font-weight:700; line-height:1.16; margin:0}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--brass); color:#211703; border:0; border-radius:9px;
  font:700 15px/1.2 var(--font); padding:14px 24px; cursor:pointer; text-decoration:none;
  transition:background .18s}
.btn:hover{background:var(--brass-strong); color:#fff}
.btn.ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45)}
.btn.ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* ── топбар и шапка ── */
.s-top{background:var(--pine-deep); color:#ccd3d9; font-size:13px}
.s-top .sw{display:flex; align-items:center; gap:20px; min-height:36px}
.s-top a:hover{color:#fff}
.s-top .r{margin-left:auto; display:flex; gap:18px; align-items:center}
.s-top b{color:#fff; font-weight:600}
.s-head{position:sticky; top:0; z-index:50; background:rgba(255,253,248,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.s-head .sw{display:flex; align-items:center; gap:20px; min-height:70px}
.s-logo{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.s-logo .wm b{display:block; font-size:17px; font-weight:800; letter-spacing:.16em; color:var(--ink); line-height:1.15}
.s-logo .wm span{display:block; font-size:9.5px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted)}
nav.s-nav{display:flex; gap:4px; margin-left:8px; flex-wrap:wrap}
nav.s-nav a{font-weight:600; font-size:13.5px; color:var(--body); padding:7px 9px; border-radius:8px; white-space:nowrap}
nav.s-nav a:hover{background:#f6ead3; color:var(--brass-strong)}
nav.s-nav li{list-style:none}
nav.s-nav ul{display:flex; gap:4px; margin:0; padding:0; flex-wrap:wrap}
.s-cta{margin-left:auto; display:flex; align-items:center; gap:16px; flex:0 0 auto}
.s-phone{text-align:right}
.s-phone a{font-size:16.5px; font-weight:800; color:var(--ink); white-space:nowrap}
.s-phone small{display:block; font-size:11.5px; color:var(--muted)}
.s-burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 8px; background:transparent;
  border:1.5px solid var(--line); border-radius:9px; cursor:pointer}
.s-burger span{display:block; height:2.2px; border-radius:2px; background:var(--ink);
  transition:transform .25s, opacity .2s; transform:translateZ(0)}
html.snav-open .s-burger span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
html.snav-open .s-burger span:nth-child(2){opacity:0; transform:scaleX(0)}
html.snav-open .s-burger span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}

/* мобильная панель */
.s-mnav{position:fixed; inset:0; z-index:60; scrollbar-width:none;
  background:linear-gradient(160deg, var(--pine-deep), var(--pine));
  padding:16px 24px 36px; overflow:auto; opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s}
.s-mnav::-webkit-scrollbar{display:none}
html.snav-open .s-mnav{opacity:1; visibility:visible}
html.snav-open, html.snav-open body{overflow:hidden; touch-action:none}
.s-mnav-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; min-height:46px}
.s-mnav-top b{color:#fff; font-size:16px; letter-spacing:.18em; font-weight:800}
.s-mnav-close{width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid rgba(255,255,255,.32); border-radius:9px; color:#fff; cursor:pointer}
.s-mnav nav a, .s-mnav nav li a{display:flex; justify-content:space-between; align-items:center;
  color:#fff; font-size:20px; font-weight:700; padding:14px 2px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.s-mnav nav a::after{content:"→"; color:var(--brass-on-dark); font-size:16px}
.s-mnav nav ul{list-style:none; margin:0; padding:0}
.s-mnav .x{margin-top:24px; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.s-mnav .x a.tel{color:#fff; font-size:19px; font-weight:800}
.s-mnav .x span{font-size:13px; color:#aab4bd}

/* ── герой посёлка ── */
.s-hero{position:relative; min-height:440px; display:flex; align-items:flex-end;
  background:var(--pine); overflow:hidden}
.s-hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.s-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,23,28,.18) 0%, rgba(18,23,28,.05) 40%, rgba(18,23,28,.78) 100%)}
.s-hero .sw{position:relative; z-index:1; padding-bottom:44px; padding-top:120px; width:100%}
.s-hero .eyebrow{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#e8d5b0; background:rgba(18,23,28,.5);
  padding:7px 12px; border-radius:7px; backdrop-filter:blur(3px)}
.s-hero h1{color:#fff; font-size:38px; font-weight:800; letter-spacing:-.02em;
  margin:12px 0 20px; max-width:22em; text-shadow:0 2px 18px rgba(0,0,0,.35)}
.s-hero .act{display:flex; gap:12px; flex-wrap:wrap}

/* ── контент ── */
.s-main{padding:52px 0 10px}
.s-main .cw{max-width:840px}
.s-main h2{font-size:24px; letter-spacing:-.01em; margin:34px 0 14px; padding-top:18px; position:relative}
.s-main h2::before{content:""; position:absolute; top:0; left:0; width:44px; height:3px;
  background:var(--brass); border-radius:2px}
.s-main h2:first-child{margin-top:0}
.s-main p{margin:0 0 13px}
.s-main b, .s-main strong{color:var(--ink)}
.s-main ul{list-style:none; margin:0 0 16px; padding:0}
.s-main ul li{position:relative; padding:5px 0 5px 30px}
.s-main ul li::before{content:"✓"; position:absolute; left:2px; top:4px;
  color:var(--brass-strong); font-weight:800}
.s-main img{border-radius:12px; height:auto}
.s-main a{color:var(--brass-strong)}
.s-main a:hover{color:var(--ink)}
.s-main table{border-collapse:collapse; width:100%; margin:0 0 16px}
.s-main table td, .s-main table th{border:1px solid var(--line); padding:9px 12px; font-size:14.5px}

/* галерея фото посёлка */
.s-gal{padding:26px 0 8px}
.s-gal .row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.s-gal img{width:100%; height:150px; object-fit:cover; border-radius:10px;
  border:1px solid var(--line); display:block; transition:transform .25s}
.s-gal a:hover img{transform:scale(1.04)}

/* CTA-полоса */
.s-band{margin:48px 0 0; background:linear-gradient(150deg, var(--pine-deep), var(--pine)); color:#fff}
.s-band .sw{display:flex; align-items:center; gap:28px; padding:38px 22px; flex-wrap:wrap}
.s-band h2{color:#fff; font-size:23px; letter-spacing:-.01em; max-width:18em}
.s-band p{color:#c1c8cf; margin:6px 0 0; font-size:14.5px}
.s-band .a{margin-left:auto; display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.s-band .a a.tel{color:#fff; font-size:20px; font-weight:800; white-space:nowrap}
.s-band .a span{font-size:12.5px; color:#aab4bd}

/* подвал */
.s-foot{background:var(--ink); color:#aab1b8; font-size:14px}
.s-foot .sw{display:flex; gap:30px; align-items:flex-start; padding:38px 22px 30px; flex-wrap:wrap}
.s-foot .wm b{color:#fff; letter-spacing:.16em}
.s-foot a{color:#aab1b8}
.s-foot a:hover{color:#fff}
.s-foot .r{margin-left:auto; text-align:right}
.s-foot .tel{color:#fff !important; font-weight:800; font-size:17px}
.s-foot .fine{border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#7e868d}
.s-foot .fine .sw{padding:14px 22px}

/* формы (контакты посёлков) */
.s-main input[type="text"], .s-main textarea{
  font:500 14.5px var(--font); width:100%; background:var(--surface);
  border:1.5px solid var(--line); border-radius:9px; padding:11px 13px;
  color:var(--ink); margin-bottom:10px}
.s-main input:focus, .s-main textarea:focus{border-color:var(--brass); outline:none}
.s-main .button, .s-main button[type="submit"], .s-main input[type="submit"]{
  background:var(--brass); color:#211703; border:0; border-radius:9px;
  font:700 15px var(--font); padding:13px 26px; cursor:pointer}

/* ── мобильная ── */
@media (max-width:960px){
  nav.s-nav{display:none}
  .s-burger{display:flex}
  .s-hero h1{font-size:29px}
}
@media (max-width:640px){
  .s-top{display:none}
  .s-head .sw{min-height:60px; gap:12px}
  .s-logo .wm span{display:none}
  .s-phone small{display:none}
  .s-phone a{font-size:15px}
  .s-hero{min-height:340px}
  .s-hero .sw{padding-top:80px; padding-bottom:32px}
  .s-hero h1{font-size:25px}
  .s-gal .row{grid-template-columns:repeat(2,1fr)}
  .s-gal img{height:110px}
  .s-band .a{margin-left:0; align-items:flex-start}
  .s-foot .r{margin-left:0; text-align:left}
}

/* карточная сетка контактов посёлков */
.cgrid{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; margin-top:8px}
.cgrid .cbox{flex:1 1 300px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:22px}
.cbox h2{font-size:19px !important; margin:0 0 14px !important; padding:0 !important}
.cbox h2::before{display:none !important}
.cbox address{font-style:normal; font-size:14.5px; line-height:1.6}

/* страницы с планом участков: горизонтальный скролл при широком контенте */
.plan-safe{max-width:none !important}
.s-main #tabl tr:nth-child(even) td{background:#faf8f2}
.s-main #tabl td, .s-main #tabl th{border:1px solid var(--line); padding:8px 11px; font-size:14px}
.s-main .shemabox img{border-radius:0}

.s-foot .tel, .s-band .a a.tel, .s-phone a{white-space:nowrap}

/* лайтбокс фото (универсальный, вешается скриптом футера) */
.glb{position:fixed; top:0; right:0; bottom:0; left:0; z-index:100001; background:rgba(10,13,16,.94);
  display:none; align-items:center; justify-content:center}
.glb.on{display:flex}
.glb img{max-width:92vw; max-height:90vh; border-radius:6px}
.glb button{position:fixed; border:0; background:rgba(255,255,255,.09); color:#fff; cursor:pointer;
  border-radius:50%; padding:0}
.glb-x{top:16px; right:16px; width:46px; height:46px; font:300 26px/1 inherit}
.glb-p,.glb-n{top:50%; transform:translateY(-50%); width:52px; height:52px; font:300 30px/1 inherit}
.glb-p{left:14px} .glb-n{right:14px}
.glb button:hover{background:#b6863c; color:#211703}
.glb-c{position:fixed; bottom:16px; left:50%; transform:translateX(-50%); color:#fff;
  font-size:13px; font-weight:600}

/* генплан/схема: широкое скроллится внутри себя, страница не распирается */

.pdfobject-container{max-width:100% !important; overflow:hidden}
.pdfobject-container embed, embed.pdfobject{max-width:100% !important; width:100% !important}
@media (max-width:960px){
  .s-main .cw table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* узкие экраны: шапка поддомена не должна распирать страницу */
@media (max-width:430px){
  .s-head .sw{gap:8px}
  .s-cta{gap:10px}
  .s-phone{font-size:14px}
  .s-phone b, .s-phone a{font-size:14.5px}
  .s-logo b{font-size:14.5px}
  .s-logo span{font-size:8.5px}
}

/* лендинг главной посёлка: секции из внутренних страниц */
.sl-sec{scroll-margin-top:84px}
.sl-sec .cw{border-top:1px solid var(--line); padding-top:34px}
.sl-sec .sl-h{font-size:25px; margin:0 0 18px}
.s-main.sl-sec{padding-top:0}

/* схема/генплан: скроллер-обёртка (JS футера), схема едет целиком вместе с фоном */
.shem-scroll{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px}
.shem-scroll .shemabox{max-width:none}
