/* Empire City — ERX responsive layer v1 (loaded last; mobile/tablet/RTL fixes only) — 2026-11-04 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.ec26 body img,html.ec26 body video,html.ec26 body iframe{max-width:100%}

/* ---------- 1. consistent page gutters (Helix rows had −15px margins but 0-padded columns → 1px gutters) ---------- */
@media (max-width:991px){
  html.ec26 body .container-inner>.row{margin-left:0!important;margin-right:0!important}
  html.ec26 body .container-inner>.row>[class*="col-"]{padding-left:0!important;padding-right:0!important}
  html.ec26 body #sp-main-body{padding-left:0!important;padding-right:0!important}
  html.ec26 body section>.container{padding-left:max(clamp(16px,4.2vw,28px),env(safe-area-inset-left))!important;padding-right:max(clamp(16px,4.2vw,28px),env(safe-area-inset-right))!important}
}

/* ---------- 2. typography on small screens ---------- */
@media (max-width:767px){
  html.ec26 body :is(h1,h2,h3,.ec-display){overflow-wrap:break-word}
  /* long single words (e.g. «МЕСТОРАСПОЛОЖЕНИЕ») must fit the line without being cut */
  html.epx-on body #epx-root .epx-head :is(h2,.epx-h2){font-size:clamp(23px,7.3vw,30px)!important}
  html.ec26 body :is(p,li,dd,td){overflow-wrap:break-word}
  /* labels must never split mid-word */
  html.ec26 body .empire-stat-label,html.ec26 body .ecx-stat span,html.ec26 body .ecx-lbl{overflow-wrap:normal!important;word-break:normal!important;-webkit-hyphens:auto;hyphens:auto}
  html.ec26 body .ecx-stat span{font-size:10.5px!important;line-height:1.3!important}
  /* iOS Safari zooms into inputs below 16px — keep form fields at 16px */
  html.ec26 body :is(input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],input[type="password"],input:not([type]),select,textarea){font-size:16px!important}
  /* comfortable tap targets */
  html.ec26 body .pagination :is(a,span,.page-link){min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- 3. fixed / sticky elements: iPhone safe areas ---------- */
html.ec26 body .sp-scroll-up{bottom:calc(24px + env(safe-area-inset-bottom))!important;right:calc(16px + env(safe-area-inset-right))!important}
html[dir="rtl"].ec26 body .sp-scroll-up{right:auto!important;left:calc(16px + env(safe-area-inset-left))!important}
html.emx-on .emx-drawer__foot{padding-bottom:max(16px,env(safe-area-inset-bottom))!important}

/* ---------- 4. RTL bugs in shared components ---------- */
/* investment-climate section: full-bleed trick used margin-left, which RTL ignores → section shifted off-screen */
html[dir="rtl"].ecx body .ecx-iv{left:auto!important;right:50%!important;margin-left:0!important;margin-right:-50vw!important}
@media (max-width:900px){
  html[dir="rtl"].ecx body .ecx-cbn__txt{right:auto!important;left:auto!important}
}

/* ---------- 5. home ---------- */
@media (max-width:767px){
  html.ec26 body .empire-experts-stats{gap:8px!important}
  html.ec26 body .empire-stat{padding:12px 8px!important;min-width:0}
  html.ec26 body .empire-stat-label{font-size:10px!important;letter-spacing:.02em!important}
}
@media (min-width:600px) and (max-width:1099px){
  html.ec26 body .heroes-mini-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html.ec26 body .empire-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (min-width:600px) and (max-width:1023px){
  html.ec26 body .empire-card-tag{white-space:nowrap;letter-spacing:.06em!important}
}

/* ---------- 6. property page ---------- */
html.epx-on body #epx-root .epx-stat__l{overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto}
/* stat tiles: never squeeze 5 tiles into one row — wrap so values/labels do not break mid-word */
@media (min-width:600px){
  html.epx-on body #epx-root .epx-stats{grid-template-columns:repeat(auto-fit,minmax(152px,1fr))!important}
  html.epx-on body #epx-root .epx-stat__v{word-break:normal!important;overflow-wrap:normal!important}
}
@media (min-width:600px) and (max-width:1023px){
  html.epx-on body #epx-root .epx-stats{max-width:none!important}
}

/* ---------- 7. catalog ---------- */
@media (max-width:767px){
  html.ecx body .ecx-gcta__act{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:10px!important;width:100%}
  html.ecx body .ecx-gcta__act .ecx-gcta__go{grid-column:1/-1;width:100%;justify-content:center}
  html.ecx body .ecx-gcta__act .ecx-btn--ghost{min-width:0;width:100%;justify-content:center;white-space:normal!important;text-align:center}
}
@media (max-width:767px){
  #epp-pop .epp-all{min-width:0;white-space:normal!important;text-align:center;line-height:1.25!important;padding:12px 16px!important}
}

/* ---------- 8. legal / long-form text readability ---------- */
html.ec26 body .com-content-article__body>p,html.ec26 body .com-content-article__body>:is(ul,ol)>li{color:rgba(226,233,244,.82)}

/* ---------- 9. photo lightbox (OS Property colorbox): dark, large touch controls ---------- */
html.ec26 body #cboxOverlay{background:#05070d!important;opacity:.94!important}
html.ec26 body #colorbox,html.ec26 body #cboxWrapper,html.ec26 body #cboxContent,html.ec26 body #cboxLoadedContent{background:transparent!important;border:0!important;box-shadow:none!important}
html.ec26 body #cboxLoadedContent{overflow:hidden!important}
html.ec26 body #cboxLoadedContent img,html.ec26 body #cboxPhoto{border-radius:16px!important;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
html.ec26 body :is(#cboxPrevious,#cboxNext,#cboxClose){width:48px!important;height:48px!important;border-radius:50%!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.24)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:0!important;color:transparent!important;text-indent:0!important;cursor:pointer;z-index:5;transition:background .2s}
html.ec26 body :is(#cboxPrevious,#cboxNext,#cboxClose):hover{background:rgba(255,255,255,.22)!important}
html.ec26 body :is(#cboxPrevious,#cboxNext)::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-65%,-50%) rotate(-45deg)}
html.ec26 body #cboxPrevious::before{transform:translate(-35%,-50%) rotate(135deg)}
html.ec26 body #cboxClose::before,html.ec26 body #cboxClose::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:#fff;border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)}
html.ec26 body #cboxClose::after{transform:translate(-50%,-50%) rotate(-45deg)}
html.ec26 body #cboxPrevious{transform:none!important;left:8px!important;top:50%!important;bottom:auto!important;margin-top:-24px!important}
html.ec26 body #cboxNext{right:8px!important;left:auto!important;top:50%!important;bottom:auto!important;margin-top:-24px!important}
html.ec26 body #cboxClose{top:8px!important;right:8px!important;bottom:auto!important}
html.ec26 body #cboxCurrent{display:block!important;left:0!important;right:0!important;bottom:6px!important;top:auto!important;text-align:center;color:rgba(230,236,246,.75)!important;font:600 13px/1 'Manrope',system-ui,sans-serif!important;letter-spacing:.04em}

/* ---------- 10. mobile drawer polish ---------- */
@media (max-width:640px){
  html.emx-on .emx-drawer__btns{grid-template-columns:1fr!important}
  html.emx-on .emx-drawer__btns>*{min-width:0;white-space:normal!important;justify-content:center}
}
/* collapsed accordions must not leak their padding */
html.emx-on .emx-m__sub .emx-m__chips{padding:0!important}
html.emx-on .emx-m__sub .emx-m__chips::before,html.emx-on .emx-m__sub .emx-m__chips::after{content:"";grid-column:1/-1;height:4px}
html.emx-on .emx-m__sub .emx-m__chips::after{height:10px}

/* ---------- 11. Bitrix24 popup forms (callback / consultation) ---------- */
html.ec26 body .b24-window-overlay{background:rgba(5,7,13,.8)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.ec26 body .erx-b24 .b24-window-popup-wrapper{width:min(560px,calc(100vw - 24px))!important;max-width:560px!important;border-radius:26px!important;background:radial-gradient(420px 220px at 100% 0%,rgba(230,181,126,.1),transparent 70%),linear-gradient(180deg,#10131b,#0a0c12)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 40px 90px -20px rgba(0,0,0,.85)!important;overflow:hidden!important;color:#fff!important}
html.ec26 body .erx-b24,html.ec26 body .erx-b24 *{font-family:'Manrope','Vazirmatn','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important}
html.ec26 body .erx-b24 .b24-form-wrapper{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html.ec26 body .erx-b24 .b24-form-header{padding:28px 64px 6px 24px!important;border:0!important;text-align:start!important}
html[dir="rtl"].ec26 body .erx-b24 .b24-form-header{padding:28px 24px 6px 64px!important}
html.ec26 body .erx-b24 .b24-form-header-title{color:#fff!important;font-size:clamp(19px,4.6vw,24px)!important;font-weight:800!important;line-height:1.2!important;text-transform:uppercase!important;letter-spacing:-.01em!important;text-align:start!important}
html.ec26 body .erx-b24 .b24-form-header-description{color:rgba(220,228,240,.72)!important;font-size:14.5px!important;line-height:1.55!important;margin-top:8px!important;text-align:start!important}
html.ec26 body .erx-b24 .b24-form-content{padding:12px 24px 24px!important;border:0!important}
html.ec26 body .erx-b24 .b24-form-control{min-height:54px!important;border-radius:14px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;font-size:16px!important;box-shadow:none!important}
html.ec26 body .erx-b24 .b24-form-control:focus{border-color:rgba(230,181,126,.6)!important;background:rgba(255,255,255,.07)!important}
html.ec26 body .erx-b24 .b24-form-control-label{color:rgba(220,228,240,.6)!important;font-size:14px!important}
html.ec26 body .erx-b24 .b24-form-field-agreement,html.ec26 body .erx-b24 .b24-form-field-agreement *{color:rgba(220,228,240,.6)!important;font-size:12px!important;line-height:1.5!important}
html.ec26 body .erx-b24 .b24-form-field-agreement a{color:#F3CFA0!important}
html.ec26 body .erx-b24 .b24-form-btn{min-height:54px!important;border-radius:999px!important;background:#fff!important;background-image:none!important;color:#070a12!important;border:0!important;font-size:15px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;box-shadow:0 14px 34px -10px rgba(0,0,0,.6)!important;transition:background .25s,transform .25s}
html.ec26 body .erx-b24 .b24-form-btn:hover{background:#F3CFA0!important;transform:translateY(-1px)}
html.ec26 body .erx-b24 .b24-window-close{width:40px!important;height:40px!important;top:16px!important;right:16px!important;left:auto!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important;background-image:none!important;border:1px solid rgba(255,255,255,.18)!important;opacity:1!important;font-size:0!important;cursor:pointer}
html[dir="rtl"].ec26 body .erx-b24 .b24-window-close{right:auto!important;left:16px!important}
html.ec26 body .erx-b24 .b24-window-close::before,html.ec26 body .erx-b24 .b24-window-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:#fff;border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)}
html.ec26 body .erx-b24 .b24-window-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
html.ec26 body .erx-b24 .b24-window-close:hover{background:rgba(255,255,255,.18)!important}
html.ec26 body .erx-b24 .b24-window-scrollable{padding-bottom:0!important}

/* ===== ERX perf 2026-11-04: LCP-honest reveal guard =====
   ec26 hides <body> with opacity:0 until ec26-ready (to avoid a flash of the legacy theme).
   Chrome does not report LCP for content first painted at opacity:0, so PSI showed NO_LCP / very late LCP.
   Same reveal moment, but via visibility (hidden content is not painted at all, so LCP is measured at the real first paint).
   Fallback reveal after 2.2s kept, exactly like the original guard. Rollback: delete this block. */
html.ec26:not(.ec26-ready) body{opacity:1!important;visibility:hidden;animation:erx-reveal 0s 2.2s forwards!important}
html.ec26.ec26-ready body{opacity:1!important;visibility:visible;transition:none!important}
@keyframes erx-reveal{to{visibility:visible}}
