/* =====================================================================
   EMPIRE CITY 2026 — responsive layer (all screen sizes)
   Loads after empire-2026.css. Scoped to html.ec26 like the rest.
   Breakpoints: <=359 tiny phones · <=575 phones · 576-767 large phones
                768-991 tablets · 992-1199 laptops · >=1600 / 1920 / 2400 big screens
   ===================================================================== */

/* ---------- global safety: nothing wider than the screen ---------- */
html.ec26, html.ec26 body { overflow-x: clip; }
html.ec26 body :is(img, video, embed, object):not([class*="n2-"]):not(.n2-section-smartslider *) { max-width: 100%; }
html.ec26 body :is(img, video):not([class*="n2-"]):not(.n2-section-smartslider *):not([src*=".svg"]) { height: auto; }
html.ec26 body :is(p, li, h1, h2, h3, h4, h5, h6, td, th, a, span, dd, dt, label) { overflow-wrap: break-word; }
html.ec26 body table { max-width: 100%; }
html.ec26 { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ===================== TABLETS (768-991): one mobile header ===================== */
@media (max-width: 991px) {
  /* the desktop second bar (contacts / champions / language / logo) duplicates the fixed mobile bar */
  html.ec26 section#sp-top2 { display: none !important; }
  /* the main menu behaves like on phones: hidden until the burger is pressed */
  html.ec26 #maximenuck270 .maximenumobiletogglerck + ul.maximenuck,
  html.ec26 #maximenuck111 .maximenumobiletogglerck + ul.maximenuck { display: none !important; }
  html.ec26 #maximenuck270 .maximenumobiletogglerck:checked + ul.maximenuck,
  html.ec26 #maximenuck111 .maximenumobiletogglerck:checked + ul.maximenuck { display: block !important; }
  html.ec26 div#maximenuck270.maximenuckh { height: auto !important; }
  html.ec26 div#maximenuck270.maximenuckh ul.maximenuck { height: auto !important; padding-left: 0 !important; }
  html.ec26 div#maximenuck270.maximenuckh ul.maximenuck > li { float: none !important; width: 100% !important; box-sizing: border-box; padding-left: 0 !important; padding-right: 0 !important; margin-right: 0 !important; }
  html.ec26 div#maximenuck270.maximenuckh ul.maximenuck li > div.floatck { position: relative !important; left: 0 !important; right: 0 !important; width: 100% !important; margin-left: 0 !important; }
}

/* ===================== HOME: property search ("Более 2 500 объектов") ===================== */
@media (max-width: 900px) {
  html.ec26 .hero .filter-bar { padding: 0 16px 56px !important; margin-top: 32px !important; }
  html.ec26 .hero .filter-inner { grid-template-columns: minmax(0, 1fr) !important; padding: 14px !important; gap: 10px !important; }
  html.ec26 .hero .filter-inner > * { min-width: 0 !important; }
  html.ec26 .hero .filter-inner .custom-select { min-width: 0; }
  html.ec26 .hero .filter-inner .custom-select > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ec26 .hero .filter-inner button { width: 100% !important; white-space: normal !important; padding: 15px 12px !important; letter-spacing: .12em !important; }
  html.ec26 .hero .hero-content { padding: 56px 16px 0 !important; }
  html.ec26 .hero .hero-title { padding: 0 !important; overflow-wrap: break-word; }
}
@media (min-width: 600px) and (max-width: 900px) {
  html.ec26 .hero .filter-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html.ec26 .hero .filter-inner > :last-child { grid-column: 1 / -1; }
  html.ec26 .hero .filter-inner .custom-select { font-size: 12px !important; padding: 13px 12px !important; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  html.ec26 .hero .filter-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important; }
  html.ec26 .hero .filter-inner button { padding-left: 18px !important; padding-right: 18px !important; letter-spacing: .1em !important; }
}
@media (max-width: 359px) {
  html.ec26 .hero .hero-title { font-size: 26px !important; }
}

/* ===================== SMART SLIDER: text columns on phones ===================== */
@media (max-width: 767px) {
  /* desktop side offsets (e.g. 90px left margin) are not carried to phones */
  html.ec26 .n2-ss-layer-col > .n2-ss-layer:not(.n2-ss-layer--absolute) { margin-left: 0 !important; margin-right: 0 !important; }
  html.ec26 .n2-ss-section-main-content { padding-left: 16px !important; padding-right: 16px !important; }
  html.ec26 .n2-ss-layer-row-inner { margin-left: 0 !important; margin-right: 0 !important; }
  html.ec26 .n2-ss-layer-row-inner > .n2-ss-layer { margin-left: 0 !important; margin-right: 0 !important; }
  html.ec26 .n2-ss-section-main-content .n2-ss-layer-row { padding-left: 0 !important; padding-right: 0 !important; }
  /* big display words must fit the column instead of being clipped */
  html.ec26 .n2-section-smartslider .ec-display { overflow-wrap: break-word !important; max-width: 100%; }
  /* buttons inside sliders wrap instead of running off the screen */
  html.ec26 .n2-section-smartslider :is(.n2-ss-button-container, .n2-ss-item-button) { max-width: 100% !important; }
  html.ec26 .n2-section-smartslider :is(.n2-ss-button-container a, .ec-btn, button) { white-space: normal !important; max-width: 100% !important; }
  html.ec26 .n2-section-smartslider :is(.n2-ss-button-container a, .ec-btn, button) * { white-space: normal !important; }
}
@media (max-width: 400px) {
  html.ec26 #n2-ss-6 .n2-ss-item-content.ec-display, html.ec26 #n2-ss-6 [class*="n2-font-"].ec-display { font-size: 34px !important; }
}

/* "Готовый каталог" slider: heading fits the text column on tablets */
@media (min-width: 576px) and (max-width: 991px) {
  html.ec26 #n2-ss-5 .n2-ss-highlighted-heading-wrapper, html.ec26 #n2-ss-5 .n2-ss-highlighted-heading-wrapper * { font-size: clamp(28px, 4.3vw, 40px) !important; }
}

/* ===================== HOME: experts block numbers ===================== */
@media (max-width: 575px) {
  html.ec26 .empire-experts-stats { gap: 8px !important; }
  html.ec26 .empire-experts-stats .empire-stat { flex: 1 1 0 !important; min-width: 0 !important; }
  html.ec26 .empire-stat-label { letter-spacing: .1em !important; font-size: 10px !important; overflow-wrap: anywhere; }
}

/* ===================== CATALOG GRID (apartments / villas) ===================== */
@media (min-width: 576px) and (max-width: 991px) {
  html.ec26 #propertyContainer.grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
}
@media (max-width: 575px) {
  html.ec26 #propertyContainer.grid-view { grid-template-columns: minmax(0, 1fr) !important; }
}
html.ec26 #propertyContainer .property-card { min-width: 0 !important; width: auto !important; }
html.ec26 #propertyContainer .property-card__price-wrapper { flex-wrap: wrap; gap: 8px; }
@media (max-width: 991px) {
  html.ec26 #propertyContainer .property-card__price { font-size: clamp(22px, 6vw, 30px) !important; }
}

/* ===================== FOOTER ===================== */
@media (max-width: 991px) {
  html.ec26 #sp-footerblock1 .row { display: flex !important; flex-wrap: wrap !important; }
  html.ec26 #sp-footerblock1 #sp-footer-area-1 { flex: 0 0 100% !important; max-width: 100% !important; order: 1; }
  /* area 2 holds two modules: the privacy link and the "Недвижимость" menu - lay them out separately */
  html.ec26 #sp-footerblock1 #sp-footer-area-2, html.ec26 #sp-footerblock1 #sp-footer-area-2 > .sp-column { display: contents !important; }
  html.ec26 #sp-footerblock1 #sp-footer-area-2 > .sp-column > .sp-module { flex: 0 0 50% !important; max-width: 50% !important; padding: 0 16px !important; margin: 34px 0 0 !important; order: 2; box-sizing: border-box; }
  html.ec26 #sp-footerblock1 #sp-footer-area-2 > .sp-column > .sp-module:has(#mod-custom122) { order: 4; flex-basis: 100% !important; max-width: 100% !important; text-align: center; margin-top: 28px !important; }
  html.ec26 #sp-footerblock1 #sp-footer-area-3 { flex: 0 0 50% !important; max-width: 50% !important; order: 3; margin-top: 34px !important; padding: 0 16px !important; }
  html.ec26 #sp-footerblock1 [id^="sp-footer-area"] + [id^="sp-footer-area"] { margin-top: 34px !important; }
  html.ec26 #sp-footerblock1 ul.menu a { letter-spacing: .1em !important; }
  /* social links were hidden on phones */
  html.ec26 #sp-bottom-nav { display: block !important; flex: 0 0 100% !important; max-width: 100% !important; }
  html.ec26 #sp-bottom-nav p { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; white-space: normal !important; }
  html.ec26 #sp-bottom-nav p > span { flex: 0 0 100%; margin-bottom: 4px; }
  html.ec26 #sp-bottom-nav p > a { flex: 0 0 auto; display: inline-flex; }
  html.ec26 #sp-bottom-nav img[src*="ec-soc-"] { width: 30px !important; height: 30px !important; max-width: none !important; }
  html.ec26 #sp-footerblock2 { padding-bottom: 72px !important; }
  html.ec26 #sp-footerblock2 :is(p, span) { text-align: center !important; }
}
@media (min-width: 576px) and (max-width: 991px) {
  html.ec26 #sp-footerblock1 #sp-footer-area-2 > .sp-column > .sp-module:not(:has(#mod-custom122)), html.ec26 #sp-footerblock1 #sp-footer-area-3 { padding-left: 8% !important; }
}

/* ===================== GENERIC CONTENT ON PHONES ===================== */
@media (max-width: 575px) {
  /* buttons never run off the screen */
  html.ec26 :is(.btn, .button, .ec-btn, .ec-btn-ghost, .sppb-btn, [class*="b24-web-form-popup-btn"]):not(#sp-head-fix *) { max-width: 100%; white-space: normal !important; }
  html.ec26 .container, html.ec26 .container-fluid { padding-left: 16px; padding-right: 16px; }
  /* scroll-to-top button smaller, out of the way of footer text */
  html.ec26 .sp-scroll-up { width: 36px !important; height: 36px !important; right: 12px !important; bottom: 12px !important; }
}

/* ===================== BIG SCREENS ===================== */
@media (min-width: 1600px) {
  html.ec26 :is(#sp-main, .body-innerwrapper) > section > .container,
  html.ec26 section[id^="sp-"] > .container { max-width: 1480px !important; }
  html.ec26 .hero :is(.hero-content, .filter-bar) { max-width: 1480px !important; }
  /* slider texts line up with the page grid instead of hugging the screen edge */
  html.ec26 #n2-ss-6 .n2-ss-slide-limiter { max-width: 1560px !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (min-width: 1920px) {
  html.ec26 :is(#sp-main, .body-innerwrapper) > section > .container,
  html.ec26 section[id^="sp-"] > .container { max-width: 1640px !important; }
  html.ec26 .hero :is(.hero-content, .filter-bar) { max-width: 1640px !important; }
  html.ec26 #n2-ss-6 .n2-ss-slide-limiter { max-width: 1720px !important; }
  html.ec26 body { font-size: 16px; }
}
@media (min-width: 2400px) {
  html.ec26 :is(#sp-main, .body-innerwrapper) > section > .container,
  html.ec26 section[id^="sp-"] > .container { max-width: 1960px !important; }
  html.ec26 .hero :is(.hero-content, .filter-bar) { max-width: 1960px !important; }
  html.ec26 #n2-ss-6 .n2-ss-slide-limiter { max-width: 2040px !important; }
}

/* ===== EC-ML: RTL languages (ar, fa, ur) — numbers, prices and phones stay left-to-right ===== */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .property-card__price-wrapper,
html[dir="rtl"] .info-block_text,
html[dir="rtl"] .payment-plan_block .ec-display {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .info-block_text { text-align: center; }

/* EC-ML: home pages of the added languages use the slider menu only (same as ru/en/fa) */
body[data-page="empire-arabic"] section#sp-top1,
body[data-page="empire-french"] section#sp-top1,
body[data-page="empire-germany"] section#sp-top1,
body[data-page="empire-hi"] section#sp-top1,
body[data-page="empire-italy"] section#sp-top1,
body[data-page="empire-nl"] section#sp-top1,
body[data-page="empire-pl"] section#sp-top1,
body[data-page="empire-pt"] section#sp-top1,
body[data-page="empire-spanish"] section#sp-top1,
body[data-page="empire-turkey"] section#sp-top1,
body[data-page="empire-ur"] section#sp-top1,
body[data-page="empire-zh"] section#sp-top1
 { display: none; }
/* EC-ML: RTL phones — keep the header logo off the screen edge */
@media (max-width: 767.98px) {
  html[dir="rtl"] #sp-head-fix-1 img.ec-swapped { margin-right: 14px; }
}