/* AUTO-GENERATED by assemble.py — edit build/<id>.css, then re-run. */

/* ===================== hero ===================== */
/* ===== Hero section — stacked on desktop:
   "Мережа квартир / одного стандарту"  (sans)
   "7"                                   (script)
   "приміщень / за однією адресою."      (italic)
   then subtitle + CTA; price badge + language switcher pinned top-right. ===== */
.sec--hero {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: 40px;
}

/* heading lines flow into the hero column so the big "7" sits between them */
.sec--hero .hero-head { display: contents; }
.sec--hero .hero-head .hl { display: block; height: auto; line-height: 1.14; }
.sec--hero .hl-32 { order: 1; font-size: 32px; color: var(--black); }   /* Мережа квартир / одного стандарту */
.sec--hero .hero-7 {
  order: 2; position: static; left: auto; top: auto;
  width: auto; height: auto; overflow: visible;
  line-height: .82; font-size: 128px; margin: 6px 0 10px -6px;
  color: var(--brown);
}
.sec--hero .hl-36 { order: 3; font-size: 36px; }                        /* приміщень / за однією адресою. */

.sec--hero .hero-divider { display: none; }

.sec--hero .hero-sub {
  order: 4; position: static; left: auto; top: auto;
  width: 710px; height: auto; margin-top: 26px; color: var(--black);
}
.sec--hero .hero-cta {
  order: 5; position: static; left: auto; top: auto; margin-top: 24px;
  width: 302px; height: 61px;
  background: var(--brown); border-radius: 30.5px; color: var(--white);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.sec--hero .cta-label { color: var(--white); white-space: nowrap; }
.sec--hero .cta-icon  { width: 30px; height: 30px; flex: none; }

/* language switcher — top-right */
.sec--hero .hero-lang { position: absolute; left: auto; right: 0; top: 64px; width: 28px; height: 71px; }
.sec--hero .lang-btn {
  display: block; width: 100%; padding: 0; text-align: left;
  line-height: 33px; color: var(--black); cursor: pointer;
  transition: color .15s ease, opacity .15s ease;
}
.sec--hero .lang-btn:hover    { color: var(--brown); opacity: .85; }
.sec--hero .lang-btn.is-active { font-weight: 700; color: var(--brown); cursor: default; }

/* price badge — top-right (unchanged desktop placement) */
.sec--hero .hero-badge { position: absolute; left: auto; right: 144px; top: 0; width: 149px; height: 179px; }
.sec--hero .badge-bg   { left: 0; top: 0; width: 149px; height: 179px; object-fit: cover; }
.sec--hero .badge-week { left: 25px; top: 40px; width: 100px; height: 36px; color: var(--cream); }
.sec--hero .badge-price{ left: 22px; top: 80px; width: 110px; height: 24px; color: var(--white); }
.sec--hero .badge-uah  { left: 101px; top: 104px; width: 24px; height: 20px; color: var(--cream); }
.sec--hero .badge-vector { left: 15px; top: 139px; width: 12px; height: 12px; object-fit: cover; }
.sec--hero .badge-incl { left: 33px; top: 135px; width: 105px; height: 21px; color: var(--white); }

/* ===================== main ===================== */
/* Section heading + drag instruction. */
.sec--main .m-label { left:0; top:0; width:auto; height:auto; font-size:20px; font-weight:700; color:var(--black); }
.sec--main .m-subtitle { left:0; top:30px; width:auto; height:auto; font-style:italic; color:var(--brown); }

/* Two 360° cards side by side. */
.sec--main .m-card-a { left:0;   top:64px; width:438px; height:420px; }
.sec--main .m-card-b { left:452px; top:64px; width:439px; height:420px; }

/* Interactive 360° viewer fills the card. */
.sec--main .m-card { overflow:hidden; border-radius:14px; box-shadow:0 4px 16px rgba(86,73,73,.14); transition:box-shadow .18s ease, transform .18s ease; }
.sec--main .m-card:hover { box-shadow:0 10px 26px rgba(86,73,73,.24); transform:translateY(-2px); }
.sec--main .m-card .m-pano { position:absolute; left:0; top:0; width:100%; height:100%; display:block; background:#000; cursor:grab; touch-action:pan-y; }
/* bottom gradient so the room name stays legible over any (moving) photo */
.sec--main .m-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:48%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); }
/* overlays (hints only — never block dragging), all inset 12px + symmetric */
.sec--main .m-card .pano-badge { position:absolute; left:12px; top:12px; z-index:2; padding:5px 11px; border-radius:999px; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font:700 12px/1 var(--sans); letter-spacing:.03em; pointer-events:none; }
.sec--main .m-card .pano-room { position:absolute; left:12px; bottom:12px; z-index:2; max-width:calc(100% - 128px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font:700 19px/1.1 var(--sans); text-shadow:0 1px 6px rgba(0,0,0,.75); pointer-events:none; }
.sec--main .m-card .pano-hint { position:absolute; right:12px; top:12px; z-index:2; display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font:600 12px/1 var(--sans); white-space:nowrap; pointer-events:none; transition:opacity .4s ease; }
.sec--main .m-card.pano-touched .pano-hint { opacity:0; }

/* Fullscreen toggle (bottom-right). Expand icon by default, collapse when open. */
.sec--main .m-card .pano-fs {
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:0; border-radius:10px;
  background:rgba(0,0,0,.55); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background .15s ease, transform .15s ease;
}
.sec--main .m-card .pano-fs:hover  { background:rgba(0,0,0,.78); transform:translateY(-1px); }
.sec--main .m-card .pano-fs:active { transform:translateY(0); }
.sec--main .m-card .pano-fs:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.sec--main .m-card .pano-fs .pano-fs-ico { width:18px; height:18px; display:block; }
.sec--main .m-card .pano-fs .pano-fs-close { display:none; }
.sec--main .m-card .pano-fs.is-open .pano-fs-open  { display:none; }
.sec--main .m-card .pano-fs.is-open .pano-fs-close { display:block; }

/* Expanded states.
   Native fullscreen (desktop + Android) escapes the scaled .canvas transform. */
.sec--main .m-card:fullscreen,
.sec--main .m-card:-webkit-full-screen {
  width:100%; height:100%; border-radius:0; transform:none; box-shadow:none;
}
.sec--main .m-card:fullscreen::after,
.sec--main .m-card:-webkit-full-screen::after { height:32%; }
/* CSS-overlay fallback (iOS, where element fullscreen is unsupported). On phones
   the .canvas transform is already dropped, so position:fixed = viewport. */
.sec--main .m-card.is-fullscreen {
  position:fixed; inset:0; left:0; top:0; width:100vw; height:100vh;
  margin:0; border-radius:0; transform:none; box-shadow:none; z-index:9999;
}
.sec--main .m-card.is-fullscreen::after { height:32%; }
html.pano-fs-lock, body.pano-fs-lock { overflow:hidden !important; }

/* Gallery */
.sec--main .m-gallery { left:0; top:516px; width:890px; height:322px; }
.sec--main .m-gallery .g { position:absolute; object-fit:cover; display:block; }
.sec--main .m-gallery .g1 { left:0; top:0; width:438px; height:287px; transition:opacity .18s ease; }

/* Clickable thumbnails: hover/focus affordance + active outline */
.sec--main .m-gallery .g-thumb { cursor:pointer; transition:filter .15s ease, opacity .15s ease, box-shadow .15s ease; }
.sec--main .m-gallery .g-thumb:hover { filter:brightness(1.07); opacity:.9; }
.sec--main .m-gallery .g-thumb:focus-visible { outline:none; box-shadow:0 0 0 2px var(--black); }
/* 6 thumbnails in a 3×2 grid. */
.sec--main .m-gallery .g2 { left:452.35px; top:0;   width:141px; height:89px; }
.sec--main .m-gallery .g3 { left:600.35px; top:0;   width:141px; height:89px; }
.sec--main .m-gallery .g4 { left:749.35px; top:0;   width:141px; height:89px; }
.sec--main .m-gallery .g5 { left:452.35px; top:98px; width:141px; height:89px; }
.sec--main .m-gallery .g6 { left:600.35px; top:98px; width:141px; height:89px; }
.sec--main .m-gallery .g7 { left:749.35px; top:98px; width:141px; height:89px; }
.sec--main .m-gallery .m-gallery-label { position:absolute; left:0; top:302px; width:auto; height:20px; white-space:nowrap; color:var(--black); }

/* Bold caption — two <br>-separated lines. Width fits the longest line of any
   translation on one row (RU 2nd line ~335px) so the copy stays 2 lines, not 4. */
.sec--main .m-caption { left:452px; top:768px; width:344px; height:40px; color:var(--black); }

/* ===================== advantages ===================== */
/* Heading + subtitle */
.sec--advantages .adv__title    { left: 0; top: 0;    width: 890px; height: 50px; color: var(--black); }
.sec--advantages .adv__subtitle { left: 0; top: 52px; width: 890px; height: 22px; color: var(--brown); }

/* Cards — a 3 + 2 grid of fixed 280×260 boxes (children flow inside each box) */
.sec--advantages .adv__card {
  width: 280px; height: 260px;
  display: flex; flex-direction: column;
  padding: 24px;
  background: var(--white);
  border: 1px solid rgba(124, 76, 42, .14);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(86, 73, 73, .08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sec--advantages .adv__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(86, 73, 73, .14);
}
.sec--advantages .adv__card--1 { left: 0;     top: 104px; }
.sec--advantages .adv__card--2 { left: 305px; top: 104px; }
.sec--advantages .adv__card--3 { left: 610px; top: 104px; }
.sec--advantages .adv__card--4 { left: 152px; top: 388px; }
.sec--advantages .adv__card--5 { left: 457px; top: 388px; }

.sec--advantages .adv__ic   { width: 56px; height: 56px; margin-bottom: 14px; }
.sec--advantages .adv__name { margin: 0 0 8px; font: 700 17px/22px var(--sans); color: var(--charcoal); }
.sec--advantages .adv__desc { margin: 0; color: var(--black); }

/* ===================== mission ===================== */
.sec--mission .mission-bubble {
  left: 0;
  top: 0;
  width: 890px;
  height: 146px;
  display: block;
}
/* Vertically centre the copy in the bubble body (0–118px; the tail spans
   118–146px). flex centring keeps it centred for any line count / language. */
.sec--mission .mission-text {
  left: 70px;
  top: 0;
  width: 751px;
  height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Slightly smaller than ty-mission's 24/28 so the longest translation (RU)
     fits in 2 lines instead of 3. */
  font-size: 22px;
  line-height: 26px;
  color: var(--black);
  z-index: 1;
}

/* ===================== steps ===================== */
.sec--steps { overflow: visible; }

/* Heading */
.sec--steps .steps__title {
  left: 0; top: 0; width: 890px; height: 22px;
  color: var(--black);
}

/* Connector arrows */
.sec--steps .steps__arrow { top: 117px; width: 81px; height: 12px; }
.sec--steps .steps__arrow--1 { left: 138px; }
.sec--steps .steps__arrow--2 { left: 332px; }
.sec--steps .steps__arrow--3 { left: 509px; }
.sec--steps .steps__arrow--4 { left: 682px; }

/* Step columns */
.sec--steps .steps__col { top: 96px; }
.sec--steps .steps__col--1 { left: 29px;  width: 99px; }
.sec--steps .steps__col--2 { left: 230px; width: 99px; }
.sec--steps .steps__col--3 { left: 431px; width: 64px; }
.sec--steps .steps__col--4 { left: 597px; width: 78px; }
.sec--steps .steps__col--5 { left: 777px; width: 83px; }

.sec--steps .steps__circle {
  position: absolute;
  left: 50%; top: 0; transform: translateX(-50%);
  width: 54px; height: 54px;
  background: var(--charcoal);
  border-radius: 50%;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
}

.sec--steps .steps__label {
  position: absolute;
  left: 0; top: 64px; width: 100%;
  text-align: center;
  color: var(--black);
}

/* CTA button */
.sec--steps .steps__cta {
  left: 294px; top: 270px; width: 302px; height: 61px;
  background: var(--brown);
  border-radius: 30.5px;
  color: var(--white);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.sec--steps .steps__cta-label { white-space: nowrap; }
.sec--steps .steps__cta-icon  { width: 30px; height: 30px; flex: none; }

/* ===================== icons ===================== */
.sec--icons .head {
  left: 0;
  width: 760px;
  height: 71px;
  display: flex;
  align-items: center;
  color: var(--black);
}
.sec--icons .head--adv { top: 0; }
.sec--icons .head--eq { top: 293px; }

.sec--icons .col {
  position: absolute;
}
.sec--icons .col .ic {
  display: block;
  margin: 0 auto;
  object-fit: cover;
}
.sec--icons .col .lbl {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--black);
}

/* Advantages row */
.sec--icons .col-adv-a { left: 58px;  top: 131px; width: 111px; }
.sec--icons .col-adv-a .ic { width: 52px; height: 52px; }
.sec--icons .col-adv-a .lbl { top: 72px; }

.sec--icons .col-adv-b { left: 313px; top: 131px; width: 80px; }
.sec--icons .col-adv-b .ic { width: 67px; height: 67px; }
.sec--icons .col-adv-b .lbl { top: 72px; }

.sec--icons .col-adv-c { left: 503px; top: 131px; width: 135px; }
.sec--icons .col-adv-c .ic { width: 75px; height: 54px; }
.sec--icons .col-adv-c .lbl { top: 74px; }

.sec--icons .col-adv-d { left: 720px; top: 131px; width: 90px; }
.sec--icons .col-adv-d .ic { width: 58px; height: 58px; }
.sec--icons .col-adv-d .lbl { top: 72px; }

/* Equipment row */
.sec--icons .col-eq-a { left: 72px;  top: 391px; width: 91px; }
.sec--icons .col-eq-a .ic { width: 73px; height: 73px; }
.sec--icons .col-eq-a .lbl { top: 80px; }

.sec--icons .col-eq-b { left: 304px; top: 401px; width: 97px; }
.sec--icons .col-eq-b .ic { width: 70px; height: 70px; }
.sec--icons .col-eq-b .lbl { top: 70px; }

.sec--icons .col-eq-c { left: 542px; top: 405px; width: 59px; }
.sec--icons .col-eq-c .ic { width: 59px; height: 59px; }
.sec--icons .col-eq-c .lbl { top: 66px; }

.sec--icons .col-eq-d { left: 742px; top: 399px; width: 55px; }
.sec--icons .col-eq-d .ic { width: 55px; height: 55px; }
.sec--icons .col-eq-d .lbl { top: 72px; }

/* ===================== maps ===================== */
.sec--maps .maps__title {
  left: 0;
  top: 0;
  width: 445px;
  height: 71px;
  display: flex;
  align-items: center;
  color: var(--black);
}

/* Live map of the object; clicking anywhere opens that place in Google Maps
   (the iframe is pointer-events:none so clicks fall through to the link). */
.sec--maps .maps__map {
  left: 0;
  top: 113px;
  width: 445px;
  height: 259px;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
}
/* Absolute-fill so it works whether the map box height is explicit (desktop)
   or aspect-ratio-derived (mobile). */
.sec--maps .maps__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.sec--maps .maps__btn {
  left: 0;
  top: 400px;
  width: 445px;
  height: 61px;
  background: var(--brown);
  border-radius: 30.5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 138px;   /* Figma left-positions the label at x≈137.86, not centred */
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

/* ===================== rules ===================== */
.sec--rules .rules__title {
  left: 0; top: 0; width: 320px; height: 71px;
  display: flex; align-items: center;
  color: var(--black);
}
.sec--rules .rules__subtitle {
  left: 0; top: 95px; width: 323px; height: 23px;
  color: var(--brown);
}

/* Rules as flex rows: number + paragraph. Numbers stay aligned with their
   paragraphs in every language, regardless of how the text wraps. */
.sec--rules .rules__list {
  left: 0; top: 143px; width: 347px;
  display: flex; flex-direction: column; gap: 21px;
}
.sec--rules .rules__item { display: flex; align-items: baseline; }
.sec--rules .rules__num  { width: 37px; flex: none; color: var(--brown); }
.sec--rules .rules__p    { flex: 1; margin: 0; color: var(--black); }

/* Check-in / check-out times — flex blocks (clock + label, then big time). */
.sec--rules .rules__times {
  left: 3px; top: 414px; width: 344px;
  display: flex; gap: 40px;
}
.sec--rules .rules__t { display: flex; flex-direction: column; }
.sec--rules .rules__t-head { display: flex; align-items: center; gap: 8px; }
.sec--rules .rules__clock { width: 10px; height: 10px; display: block; flex: none; }
.sec--rules .rules__in-label,
.sec--rules .rules__out-label { color: var(--black); white-space: nowrap; }
.sec--rules .rules__in-line,
.sec--rules .rules__out-line { margin: 0; color: var(--black); white-space: nowrap; }

/* ===================== booking ===================== */
.sec--booking .booking__title {
  left: 67px;
  top: 0;
  width: 760px;
  height: 71px;
  display: flex;
  align-items: center;
  color: var(--black);
}

.sec--booking .booking__band {
  /* Full-bleed: break out of the 1024px canvas so the dark band spans the
     whole viewport width (on screens wider than 1024px the centred canvas
     would otherwise frame it with cream gaps). Extra-wide + centred on the
     canvas; .stage (overflow:hidden, viewport-width) clips the excess, and
     .canvas must be overflow:visible for the bleed to escape (see styles.css). */
  left: -4000px;
  top: 96px;
  width: 9024px;   /* 1024 + 2×4000 → centred on the canvas, covers ultrawide */
  height: 324px;
  background: var(--charcoal);
}

/* Content now lives inside the band; this inner box maps back to the 1024px
   canvas area (centred in the full-bleed band) so the absolute coords below
   stay in canvas space. tops are band-relative (= section top − 96). */
.sec--booking .booking__inner {
  position: absolute;
  left: 4000px; top: 0;
  width: 1024px; height: 324px;
}

.sec--booking .booking__lead {
  position: absolute;
  left: 376px;
  top: 56px;
  width: 292px;
  height: 23px;
  color: var(--cream);
}

.sec--booking .booking__desc {
  position: absolute;
  left: 349px;
  top: 127px;
  width: 346px;
  height: 60px;
  color: var(--cream);
}

.sec--booking .booking__btn {
  position: absolute;
  left: 361px;
  top: 221px;
  width: 302px;
  height: 61px;
  background: var(--cream);
  border-radius: 30.5px;
  color: var(--charcoal);
  text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}

.sec--booking .booking__btn-label { color: var(--charcoal); white-space: nowrap; }
.sec--booking .booking__btn-icon  { width: 30px; height: 30px; flex: none; }

/* ===================== footer ===================== */
.sec--footer .footer__contacts {
  left: 0;
  top: 19px;
  width: 133px;
  height: 128px;
  color: var(--black);
}
.sec--footer .footer__docs {
  left: 169px;
  top: 19px;
  width: 140px;
  height: 128px;
  color: var(--black);
}
.sec--footer .footer__heading {
  color: var(--brown);
}
.sec--footer .footer__lines {
  margin-top: 24px;   /* blank line (\n\n) between heading and contact lines */
  line-height: 27px;
}
.sec--footer .footer__doc-lines {
  margin-top: 24px;
  line-height: 27px;
  text-decoration: underline;
  white-space: nowrap;   /* keep each doc link on one line (the <br> still splits the two);
                            there's ~139px clearance to the logo, so no overlap */
}
.sec--footer .footer__logo {
  left: 445px;
  top: 0;
  width: 441px;
  height: 80px;
  display: flex;
  align-items: center;
}
.sec--footer .footer__logo-studios {
  font-weight: 400;
  color: var(--black);
}

/* assembly fix — absolutely position nested price-badge children */
.sec--hero .hero-badge > * { position: absolute; }