/* Rielti — стили страницы района.
   Положить в: assets/templates/rielti/rielti-district.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#080f1c;--navy2:#0e1a2e;--navy3:#132339;--blue:#3b82f6;--blue-l:#60a5fa;
 --text:#f8fafc;--text2:#93a4bd;--text3:#5b6b85;--border:rgba(255,255,255,.09);--surface:rgba(255,255,255,.04);--r:16px;--acc:var(--acc)}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--navy);color:var(--text);overflow-x:hidden}
a{color:inherit;text-decoration:none}

nav{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;gap:16px;padding:0 32px;height:60px;background:rgba(8,15,28,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.logo{font-family:'Playfair Display',serif;font-size:21px;font-weight:800;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;flex-shrink:0}
.crumb{font-size:12.5px;color:var(--text3);display:flex;align-items:center;gap:7px}
.crumb a:hover{color:var(--blue-l)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#a78bfa);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:12px;color:#0a1628}
.ncta{padding:8px 17px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer}
.ncta:hover{opacity:.88}
.rmenu-wrap{position:relative}
.rmenu-btn{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text2);font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.rmenu-btn:hover{border-color:rgba(96,165,250,.55);color:var(--text)}
.rmenu-btn .bars{display:flex;flex-direction:column;gap:3px}
.rmenu-btn .bars i{display:block;width:13px;height:1.5px;background:currentColor;border-radius:2px}
.rmenu-pop{position:absolute;top:calc(100% + 9px);right:0;z-index:900;background:rgba(10,20,36,.985);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px;min-width:290px;box-shadow:0 26px 60px rgba(0,0,0,.7);backdrop-filter:blur(18px);display:none;grid-template-columns:1fr 1fr;gap:14px}
.rmenu-pop.open{display:grid}
.rmenu-pop h6{grid-column:1/-1;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.9px;margin:0 0 -4px 4px}
.rmenu-pop a{display:block;font-size:12.5px;color:var(--text2);padding:7px 9px;border-radius:8px}
.rmenu-pop a:hover{background:rgba(96,165,250,.14);color:var(--text)}
.rmenu-sep{grid-column:1/-1;height:1px;background:rgba(255,255,255,.09);margin:3px 0}

/* HERO */
.dhero{position:relative;margin-top:60px;padding:38px 0 34px;overflow:hidden}
.dh-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=1800&q=85') center 32%/cover;opacity:.34}
.dh-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,15,28,.98),rgba(8,15,28,.86) 45%,rgba(8,15,28,.72)),linear-gradient(180deg,rgba(8,15,28,.5),transparent 30%,rgba(8,15,28,.94))}
.dh-acc{position:absolute;top:-25%;right:6%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--acc)22,transparent 68%);pointer-events:none}
.dh-in{position:relative;z-index:5;max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:center}
.dh-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--acc)1f;border:1px solid var(--acc)55;font-size:11.5px;color:var(--acc);font-weight:600;margin-bottom:16px}
.dh-in h1{font-family:'Playfair Display',serif;font-size:clamp(32px,3.4vw,46px);font-weight:900;line-height:1.05;letter-spacing:-.8px;margin-bottom:10px}
.dh-line{font-size:15px;color:var(--acc);font-weight:500;margin-bottom:14px}
.dh-desc{font-size:14px;color:var(--text2);line-height:1.7;max-width:620px}
.dh-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dh-st{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:13px;padding:14px 16px}
.dh-st b{font-family:'Playfair Display',serif;font-size:22px;font-weight:800;color:var(--acc);display:block;line-height:1}
.dh-st span{font-size:10.5px;color:var(--text3);display:block;margin-top:5px;letter-spacing:.3px}

/* LAYOUT */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:26px;padding:30px 0 0;align-items:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.card-h{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.card-h h2{font-family:'Playfair Display',serif;font-size:15.5px;font-weight:700}
.card-h span{font-size:11.5px;color:var(--text2);background:rgba(255,255,255,.06);padding:3px 10px;border-radius:999px}

#dmap{height:430px}
#dmap .maplibregl-canvas{filter:invert(1) hue-rotate(185deg) brightness(.93) contrast(.92) saturate(.55)}
.mk{background:var(--navy2);border:1.5px solid var(--acc)99;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:all .2s}
.mk:hover,.mk.on{background:var(--acc);border-color:var(--acc);color:#0a1628;transform:scale(1.09);z-index:9}
.poi{width:32px;height:32px;border-radius:50%;background:rgba(14,26,46,.94);border:2px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.5);transition:transform .2s}
.poi:hover{transform:scale(1.16);border-color:var(--acc)}
.maplibregl-popup-content{background:var(--navy2)!important;border:1px solid var(--acc)66!important;border-radius:12px!important;padding:0!important;overflow:hidden;min-width:210px}
.maplibregl-popup-tip{border-top-color:var(--navy2)!important}
.maplibregl-popup-close-button{color:var(--text2)!important;font-size:17px!important}
.pp-img{width:100%;height:105px;object-fit:cover}
.pp-b{padding:11px 13px}
.pp-p{font-family:'Playfair Display',serif;font-size:14.5px;color:var(--acc);font-weight:700}
.pp-a{font-size:11px;color:var(--text2);margin:3px 0 8px}
.pp-btn{display:block;padding:7px;background:var(--acc);border-radius:8px;font-size:11px;font-weight:700;color:#0a1628;text-align:center}

.lst{max-height:430px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.lst::-webkit-scrollbar{width:4px}.lst::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.li{display:flex;gap:11px;background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;transition:all .2s}
.li:hover,.li.on{border-color:var(--acc);background:var(--acc)14;transform:translateX(2px)}
.li img{width:88px;height:66px;border-radius:9px;object-fit:cover;flex-shrink:0}
.li-b{flex:1;min-width:0}
.li-p{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--acc)}
.li-a{font-size:11.5px;color:var(--text2);margin:2px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-h{display:inline-block;font-size:9.5px;color:var(--text3);background:rgba(255,255,255,.06);padding:1px 7px;border-radius:999px;margin-bottom:5px}
.li-s{display:flex;gap:10px;font-size:10.5px;color:var(--text2)}
.li-s b{color:var(--text);font-weight:600}

.sec{padding:34px 0 0}
.sec h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:800;margin-bottom:16px}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.pc-box h4{font-size:12px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:11px}
.pc-box.good h4{color:#34d399}.pc-box.bad h4{color:#fb7185}
.pc-box li{list-style:none;font-size:13px;color:var(--text2);line-height:1.55;padding:6px 0 6px 22px;position:relative}
.pc-box.good li::before{content:'✓';position:absolute;left:0;color:#34d399;font-weight:700}
.pc-box.bad li::before{content:'—';position:absolute;left:0;color:#fb7185;font-weight:700}

.poig{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.poic{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:15px;transition:all .2s}
.poic:hover{border-color:var(--acc);transform:translateY(-3px)}
.poic .ic{font-size:21px;margin-bottom:9px}
.poic b{font-size:13px;display:block;margin-bottom:4px}
.poic span{font-size:11.5px;color:var(--text2);line-height:1.5}

.hoods{display:flex;gap:8px;flex-wrap:wrap}
.hood{padding:8px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;color:var(--text2)}

.nav2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:34px 0 0}
.nc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;transition:all .2s}
.nc:hover{border-color:var(--blue-l);transform:translateY(-3px)}
.nc span{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}
.nc b{font-family:'Playfair Display',serif;font-size:16px;display:block;margin-top:5px}
.nc i{font-style:normal;font-size:11.5px;color:var(--text2);display:block;margin-top:4px}

.cta{margin:38px 0 0;background:linear-gradient(125deg,var(--acc)22,rgba(124,58,237,.13));border:1px solid var(--acc)44;border-radius:20px;padding:32px 34px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h3{font-family:'Playfair Display',serif;font-size:21px;margin-bottom:7px}
.cta p{font-size:13px;color:var(--text2);max-width:440px}
.cta-b{display:flex;gap:10px;flex-wrap:wrap}
.cb{padding:12px 24px;border-radius:10px;border:none;font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.cb.p{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
.cb.s{background:rgba(255,255,255,.07);border:1px solid var(--border);color:var(--text)}

@media(max-width:1080px){.dh-in,.grid2{grid-template-columns:1fr}.poig{grid-template-columns:1fr 1fr}.nav2{grid-template-columns:1fr}}
@media(max-width:640px){.pc,.poig{grid-template-columns:1fr}nav{padding:0 16px}.crumb{display:none}.wrap,.dh-in{padding:0 18px}}

/* ═══ МОБИЛЬНАЯ ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ ═══ */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe,table{max-width:100%}
@media(max-width:900px){
  /* ни одна сетка не шире экрана */
  .hero-inner,.dh-in,.grid2,.layout,.districts-row,.pro-cta-row,.psteps,
  .stats-bar,.specs-grid,.fee-grid,.igrid,.pc,.poig,.nav2,.rf-top,.dstats{
    grid-template-columns:1fr!important;width:auto!important;max-width:100%!important}
  .hero-inner{justify-content:stretch!important;gap:26px!important}
  /* карта: ширина от экрана, высота выводится из пропорции */
  .mapcard{width:100%!important;max-width:100%!important;height:auto!important;margin:0!important}
  #wmap,#plmap,#eumap{max-height:none!important;height:auto!important;width:100%!important;
    position:static!important;padding:40px 10px 24px!important}
  #mapSlot{position:static!important}
  .dlist,.dside,.cside,.rside{display:none!important}
  /* всё, что могло быть шире экрана */
  .sidebar,.panel,.main-col,.wrap,.sec,.gallery-wrap,.hl,.hr2{max-width:100%!important}
  .gallery{grid-template-columns:1fr!important;height:auto!important}
  .gallery a:not(:first-child){display:none}
  .g-main{grid-column:1!important;grid-row:auto!important;height:230px}
  .tip,.poi-card{max-width:calc(100vw - 24px)}
  .subhoods,.chips,.filters,.hstats,.hoods{flex-wrap:wrap}
  .mfull-card{max-width:calc(100vw - 24px)!important;height:auto!important;width:100%!important}
}
@media(max-width:560px){
  .stats,.dh-stats,.a-stats,.dc-stats,.rc-stats,.cc-go,.ginvest-stats{grid-template-columns:1fr 1fr!important}
  .agrid,.dgrid,.rgrid,.cgrid,.lgrid{grid-template-columns:1fr!important}
  nav{padding:0 14px!important;gap:10px!important}
  .wrap,.sec,.hero-inner,.dh-in,.gallery-wrap,.layout{padding-left:14px!important;padding-right:14px!important}
}

/* ═══ UNIVERSAL FOOTER (Rielti) ═══ */
.rf{background:#080f1c;border-top:1px solid rgba(255,255,255,.09);padding:52px 0 28px;margin-top:0;font-family:'DM Sans',sans-serif}
.rf-in{max-width:1380px;margin:0 auto;padding:0 44px}
.rf-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.09)}
.rf-brand .rf-logo{font-family:'Playfair Display',serif;font-size:23px;font-weight:800;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;margin-bottom:11px}
.rf-brand p{font-size:12.5px;color:#93a4bd;line-height:1.65;max-width:270px}
.rf-badges{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.rf-badge{font-size:10px;color:#93a4bd;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:4px 10px}
.rf-col h5{font-size:11px;color:#f8fafc;text-transform:uppercase;letter-spacing:.9px;margin-bottom:13px;font-weight:600}
.rf-col a{display:block;font-size:12.5px;color:#93a4bd;text-decoration:none;padding:5px 0;transition:color .18s,transform .18s}
.rf-col a:hover{color:#60a5fa;transform:translateX(3px)}
.rf-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:22px;flex-wrap:wrap}
.rf-bot span{font-size:11.5px;color:#5b6b85}
.rf-bot nav{position:static!important;display:flex;gap:18px;height:auto!important;padding:0!important;background:none!important;border:none!important;backdrop-filter:none!important}
.rf-bot nav a{font-size:11.5px;color:#5b6b85;text-decoration:none}
.rf-bot nav a:hover{color:#93a4bd}
@media(max-width:900px){.rf-top{grid-template-columns:1fr 1fr}.rf-in{padding:0 20px}}
@media(max-width:520px){.rf-top{grid-template-columns:1fr;gap:24px}}