/* ============================================================
   Mobile layout (≤767px). The desktop is a fixed 1024px absolutely-
   positioned canvas; here we drop the scaling (see the guard in index.html)
   and reflow every section into a readable single column.
   Loaded AFTER sections.css so these rules win.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- Canvas → flowing column ---- */
  .stage  { height: auto !important; overflow: visible; }
  .canvas { position: static; width: 100%; height: auto; transform: none !important; overflow: hidden; }

  .sec {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    padding: 30px 20px;
  }
  .sec > * { position: static; inset: auto; }   /* drop desktop left/top too; clusters re-styled below */

  /* ---- One consistent section-heading scale across the whole page ---- */
  .sec--steps .steps__title,
  .sec--advantages .adv__title,
  .sec--icons .head,
  .sec--maps  .maps__title,
  .sec--rules .rules__title,
  .sec--booking .booking__title {
    font-size: 26px; line-height: 1.15; height: auto !important;
  }

  /* ===================== HERO ===================== */
  .sec--hero {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    padding-top: 22px;
  }
  .sec--hero .hero-lang {
    position: absolute; left: auto; top: 156px; right: 18px;   /* below the price badge */
    width: auto; height: auto; display: flex; gap: 6px;
  }
  .sec--hero .lang-btn { display: inline-flex; align-items: center; line-height: 1; padding: 13px 7px; }
  /* Heading order on mobile: "Мережа квартир / одного стандарту" (sans) on top,
     then the big "7", then "приміщень / за одною адресою." (italic). The heading
     lines flow into the hero column (display:contents) so the "7" can sit
     between them via flex order. Widths clear the top-right price badge. */
  .sec--hero .hero-7 {
    order: 2; width: auto; height: auto; overflow: visible;
    line-height: .78; font-size: 90px; margin: 6px 0 10px -4px;
  }
  .sec--hero .hero-head { display: contents; }
  .sec--hero .hero-head .hl { height: auto !important; line-height: 1.12; }
  .sec--hero .hl-32 { order: 1; width: calc(100% - 142px); font-size: 25px; }
  .sec--hero .hl-36 { order: 3; width: calc(100% - 142px); font-size: 28px; }   /* italic accent, below the 7 */
  .sec--hero .hero-divider { display: none; }
  /* Price badge pinned top-right (mirrors its right-side desktop placement),
     scaled to fit beside the heading. */
  .sec--hero .hero-badge {
    position: absolute; top: 0; right: 14px; left: auto; bottom: auto;   /* touches the very top */
    width: 149px; height: 179px; margin: 0;
    transform: scale(0.8); transform-origin: top right;
  }
  .sec--hero .hero-sub { order: 4; width: auto; height: auto !important; margin-top: 24px; }
  .sec--hero .hero-sub .em-32 { font-size: 22px; line-height: 1.25; }
  .sec--hero .hero-cta { order: 5; width: 100%; align-self: stretch; margin-top: 22px; }

  /* ===================== MAIN (360 + gallery) ===================== */
  .sec--main { display: flex; flex-direction: column; gap: 16px; }
  .sec--main .m-label { width: auto; height: auto; font-size: 16px; font-weight: 700; }
  .sec--main .m-card {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    aspect-ratio: 438 / 420; margin: 0;
  }
  .sec--main .m-subtitle { width: auto; height: auto; }
  .sec--main .m-card .pano-room { font-size: 17px; }
  .sec--main .m-gallery {
    position: static !important; width: auto !important; height: auto !important;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .sec--main .m-gallery .g { position: static !important; }
  .sec--main .m-gallery .g1 { order: 1; width: 100% !important; height: auto !important; aspect-ratio: 438 / 287; }
  .sec--main .m-gallery .m-gallery-label { position: static !important; order: 2; width: 100% !important; height: auto; }
  .sec--main .m-gallery .g-thumb { order: 3; width: calc((100% - 16px) / 3) !important; height: auto !important; aspect-ratio: 141 / 89; }
  .sec--main .m-caption { width: auto !important; height: auto !important; }

  /* ===================== ADVANTAGES (5 cards) ===================== */
  .sec--advantages { display: flex; flex-direction: column; gap: 14px; }
  .sec--advantages .adv__title { width: auto !important; margin-bottom: 0; }
  .sec--advantages .adv__subtitle { width: auto !important; height: auto !important; margin: -6px 0 6px; }
  .sec--advantages .adv__card {
    width: auto !important; height: auto !important;
    padding: 20px 22px;
  }
  .sec--advantages .adv__card:hover { transform: none; }   /* no hover-lift on touch */
  .sec--advantages .adv__ic { width: 52px; height: 52px; }

  /* ===================== MISSION ===================== */
  .sec--mission .mission-bubble { display: none; }
  .sec--mission .mission-text {
    width: auto !important; height: auto !important;
    border: 2px solid var(--brown); border-radius: 16px; background: var(--white);
    padding: 18px 20px; font-size: 18px; line-height: 1.4;
  }

  /* ===================== STEPS ===================== */
  .sec--steps { display: flex; flex-direction: column; }
  .sec--steps .steps__title { width: auto !important; margin-bottom: 22px; }
  .sec--steps .steps__arrow { display: none; }
  .sec--steps .steps__col { width: auto !important; display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
  .sec--steps .steps__circle { position: static !important; transform: none !important; margin: 0; flex: none; }
  .sec--steps .steps__label { position: static !important; width: auto !important; text-align: left; font-size: 16px; line-height: 1.3; }
  .sec--steps .steps__cta { width: 100% !important; align-self: stretch; margin-top: 22px; }

  /* ===================== ICONS (advantages / equipment) ===================== */
  /* Clean 2-column grid: uniform icon height + reserved label block so the two
     columns of every row line up regardless of icon size or label line-count. */
  .sec--icons { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 26px; align-items: start; }
  .sec--icons .head { grid-column: 1 / -1; display: block; width: auto !important; margin: 4px 0 0; }
  .sec--icons .head--eq { margin-top: 16px; }
  .sec--icons .col {
    position: static !important; width: auto !important;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .sec--icons .col .ic { position: static; display: block; height: 64px !important; width: auto !important; max-width: 88px; object-fit: contain; margin: 0 auto 10px; }
  .sec--icons .col .lbl { position: static !important; top: auto !important; width: 100% !important; min-height: 2.5em; line-height: 1.3; }

  /* ===================== MAPS ===================== */
  .sec--maps { display: flex; flex-direction: column; gap: 14px; }
  .sec--maps .maps__title { width: auto !important; }
  .sec--maps .maps__map { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 445 / 259; }
  .sec--maps .maps__btn { width: 100% !important; height: 54px; padding-left: 0; justify-content: center; }

  /* ===================== RULES ===================== */
  .sec--rules { display: flex; flex-direction: column; gap: 16px; }
  .sec--rules .rules__title { width: auto !important; }
  .sec--rules .rules__subtitle { width: auto !important; height: auto !important; margin-top: -6px; }
  .sec--rules .rules__list { position: static !important; width: auto !important; height: auto !important; }
  .sec--rules .rules__times {
    position: static !important; width: auto !important; height: auto !important;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 16px;
  }
  .sec--rules .rules__clock { width: 16px; height: 16px; }
  .sec--rules .rules__in-line, .sec--rules .rules__out-line { display: flex; align-items: baseline; gap: 6px; }

  /* ===================== BOOKING ===================== */
  .sec--booking { padding: 0; }
  .sec--booking .booking__title { width: auto !important; padding: 30px 20px 0; }
  .sec--booking .booking__band {
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    margin-top: 18px; padding: 32px 20px;
  }
  .sec--booking .booking__inner {
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  }
  .sec--booking .booking__lead { position: static !important; width: auto !important; height: auto !important; }
  .sec--booking .booking__desc { position: static !important; width: auto !important; height: auto !important; }
  .sec--booking .booking__btn  { position: static !important; width: 100% !important; max-width: 340px; height: 56px; }

  /* ===================== FOOTER ===================== */
  .sec--footer {
    display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
    padding: 30px 20px 110px;   /* bottom space so the fixed FAB never covers it */
  }
  .sec--footer .footer__contacts,
  .sec--footer .footer__docs,
  .sec--footer .footer__logo { width: auto !important; height: auto !important; }
  .sec--footer .footer__logo { font-size: 52px; }

  /* ===================== FLOATING CTA ===================== */
  /* Full-width sticky bottom button — a clear mobile CTA instead of a corner
     pill that overlaps content. Revealed on scroll (see .fab--peek) so it
     doesn't duplicate the hero CTA at the top. */
  .fab {
    left: 14px; right: 14px; bottom: 14px;
    width: auto; height: 54px; justify-content: center;
    transition: transform .25s ease, opacity .25s ease;
  }
  .fab--peek { opacity: 0; transform: translateY(150%); pointer-events: none; }
}