/**
 * Mobile + old WebView compatibility for homepage (zerkalo-proart.ru)
 *
 * Goals:
 * 1) Fallbacks when :has() / overflow:clip / @container are missing
 *    (Safari <15.4, Chrome WebView <105, old Android browsers).
 * 2) Landscape phones: hero must fit short viewport.
 * 3) Contain horizontal carousels so the page does not rubber-band sideways.
 *
 * Loaded after zerkalo-home-pc-redesign.css on index.html only.
 */
html {
  overflow-x: hidden;
}

body.home-layout-ref {
  overflow-x: hidden;
  max-width: 100%;
}

/* --- :has(.home-first-module) fallback via body.home-has-first-module (index.html) --- */
body.home-layout-ref.home-has-first-module {
  --zp-site-header-gap: 0;
  --zp-hero-header-gap: 10px;
  --zp-hero-copy-drop: 0px;
  --zp-hero-under-header: calc(
    env(safe-area-inset-top, 0px) + var(--zp-fixed-header-h) + var(--zp-hero-header-gap, 10px)
  );
}

body.home-layout-ref.home-has-first-module .nav-tray,
body.home-layout-ref.home-has-first-module .nav-toggle {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

body.home-layout-ref.home-has-first-module #navMobile[hidden] {
  pointer-events: none !important;
  visibility: hidden !important;
}

body.home-layout-ref.home-has-first-module #top.hero {
  padding-top: var(--zp-hero-under-header);
  box-sizing: border-box;
}

@media (max-width: 1319px) {
  body.home-layout-ref.home-has-first-module #top.hero {
    padding-top: var(--zp-hero-under-header);
  }
}

/* overflow:clip → hidden for Safari 15 / old Chromium
   НЕ ставить overflow-x на .home-first-module: при hidden/clip
   браузер делает overflow-y ≠ visible и срезает наезд pillars
   (border-radius 60px поверх фиолетового героя). */
body.home-layout-ref #top.hero,
body.home-layout-ref #top .zp-hero-wrap.wrap,
body.home-layout-ref #top .zp-hero-carousel,
body.home-layout-ref #top .zp-hero-carousel__stage {
  overflow-x: hidden;
}

/* Order steps / cases: keep swipe inside the section, not the document */
body.home-layout-ref section.zp-process.zp-order-steps--scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body.home-layout-ref section.zp-process.zp-order-steps--scroll .zp-process__inner,
body.home-layout-ref section.zp-process.zp-order-steps--scroll .zp-order-steps__scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

@media (max-width: 1319px) {
  body.home-layout-ref section.zp-process.zp-order-steps--scroll .zp-order-steps__track {
    max-width: 100%;
    min-width: 0;
    /* track itself scrolls */
    overflow-x: auto;
  }
}

body.home-layout-ref section.zp-home-cases {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body.home-layout-ref .zp-home-cases__scroller,
body.home-layout-ref .zp-home-cases__grid {
  max-width: 100%;
  min-width: 0;
}

/* --- Landscape phones / short viewports (old SE landscape, foldables) --- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  body.home-layout-ref {
    --zp-fixed-header-h: 48px;
    --zp-hero-header-gap: 6px;
  }

  body.home-layout-ref .header {
    min-height: 48px;
  }

  body.home-layout-ref .home-first-module {
    gap: 8px;
    padding-bottom: 16px;
  }

  /* Mobile hero module is fixed 636px in redesign — too tall for landscape */
  body.home-layout-ref #top .zp-hero-carousel {
    --zp-hero-m-module-h: min(100dvh - 56px, 100vh - 56px, 300px);
    --zp-hero-m-pillars-overlap: 12px;
    --zp-hero-m-controls-space: calc(var(--zp-hero-m-pillars-overlap) + 28px);
    height: var(--zp-hero-m-module-h) !important;
    min-height: var(--zp-hero-m-module-h) !important;
    max-height: var(--zp-hero-m-module-h) !important;
    margin-bottom: calc(-1 * var(--zp-hero-m-pillars-overlap, 12px));
  }

  body.home-layout-ref #top .zp-hero-carousel__stage {
    max-height: calc(var(--zp-hero-m-module-h) - var(--zp-hero-m-controls-space)) !important;
  }

  body.home-layout-ref #top .hero-copy__top {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: 100% !important;
  }

  body.home-layout-ref #top .zp-hero-slide[data-hero-mobile-layout='stack'] .hero-quick-gallery {
    max-height: min(38vh, 140px) !important;
    aspect-ratio: auto !important;
  }

  body.home-layout-ref #top .zp-hero-carousel__controls {
    margin-top: 2px;
    margin-bottom: 2px;
  }
}

/* Very narrow phones (≤320): keep tap targets and single-column pillars readable */
@media (max-width: 360px) {
  body.home-layout-ref .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  body.home-layout-ref .home-first-module #zp-pillars-panel-print .zp-pillars__grid,
  body.home-layout-ref .home-first-module #zp-pillars-panel-processing .zp-pillars__grid {
    gap: 10px;
  }
}

/* Prefer reduced motion on weak/old devices */
@media (prefers-reduced-motion: reduce) {
  body.home-layout-ref .zp-pillar__slideshow img,
  body.home-layout-ref #top .zp-hero-slide {
    transition: none !important;
    animation: none !important;
  }
}