/* home-rooms.css — "Номера" section (sticky text column + vertical photo gallery)
   Breakpoints (canon): mobile <=767 · tablet 768-1023 · desktop >=1024 · large >=1440 · xl >=1920
   Layout: stacked (text above gallery) up to 1023; two-column with a sticky text
   column from 1024 up. No absolute positioning — flex + grid only. */

.home-rooms {
  background: #fffced;
  color: #000;
  padding-bottom: 51px;
}

/* fixed top / bottom paddings per the macet (header excluded — it is a fixed
   overlay). Mobile (375–767): top 56, bottom 51. */
.home-rooms__inner {
  padding: 56px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.home-rooms__aside-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-rooms .home-display-subtitle {
  margin: 0 0 16px;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: 0;
}

.home-rooms__text {
  margin: 0 0 24px;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.3;
  color: #000;
}

.home-rooms__button {
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  min-height: 49px;
  padding: 0 32px;
  border-color: #c6c1a1;
  color: #000;
  font-size: 12px;
  letter-spacing: 2.4px;
}

.home-rooms__gallery {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-room-panel {
  overflow: hidden;
  width: 100%;
  height: 202px;
}

.home-room-panel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #d9cfbf;
}

/* the panel becomes a role="button" (tabindex 0) tap target on tablet & below;
   kill the browser's default tap-highlight and focus outline entirely */
.home-room-panel {
  -webkit-tap-highlight-color: transparent;
}

.home-room-panel:focus,
.home-room-panel:focus-visible {
  outline: none;
}

/* tap-to-zoom (and its cursor) only where the gallery stacks — tablet & below */
@media (max-width: 1023px) {
  .home-room-panel__image {
    cursor: zoom-in;
  }
}

/* ---------- Tablet 768-1023: still stacked, larger photos ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-rooms {
    padding-bottom: 48px;
  }

  .home-rooms__inner {
    margin-inline: auto;
    padding-top: 72px;
    padding-inline: 32px;
    gap: 48px;
  }

  .home-rooms .home-display-subtitle {
    font-size: 60px;
    line-height: 50px;
  }

  .home-rooms__text {
    font-size: 20px;
  }

  .home-rooms__gallery {
    gap: 24px;
  }

  .home-room-panel {
    height: 380px;
  }
}

/* ---------- Desktop >=1024: two columns, sticky text on the left ---------- */
@media (min-width: 1024px) {
  .home-rooms {
    /* photo height ramps 380px (1024) → 600px (1440) so it tracks the widening
       gallery column and the photo never goes flat/horizontal (was clamp 30vw,
       which stayed ~384 while the column grew to ~760 → a 2:1 photo at 1280). */
    /* photo height for the 50/50 columns → ~1.4 landscape aspect (the half-width
       column is ~443–565px, so /1.4 ≈ 316–404). */
    --rooms-photo-h: clamp(316px, 31.5vw, 404px);
    /* fixed top padding (macet). Also the sticky offset for the copy box, so the
       copy lands centred on the first photo. Keep in sync with inner padding-top. */
    --rooms-pad-top: 72px;
    padding-bottom: 0;
  }

  /* fixed top / bottom paddings per the macet: 1024 → top 72, bottom 48. */
  .home-rooms__inner {
    width: min(100% - 96px, 1180px);
    margin: 0 auto;
    padding: var(--rooms-pad-top) 0 48px;
    display: grid;
    /* 50/50 — copy column and gallery column are equal; the photo fills its half
       at ~1.4 aspect. (>=1440 overrides back to a wide gallery to match the macet.) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 clamp(24px, 4vw, 56px);
    align-items: stretch;
  }

  .home-rooms__aside {
    align-self: stretch;
  }

  /* Copy box is exactly one photo tall and the copy is centred in it; it sticks
     at top = the block's top padding, so the box overlaps the FIRST photo and the
     copy reads centred on it. As the gallery scrolls the box stays put and the
     LAST photo lands in it right as it unsticks → copy centred on first AND last
     photo. This needs NO bottom spacer, so the macet's fixed paddings are kept. */
  .home-rooms__aside-inner {
    position: sticky;
    top: var(--rooms-pad-top);
    min-height: var(--rooms-photo-h);
    justify-content: center;
  }

  .home-rooms .home-display-subtitle {
    font-size: 60px;
    line-height: 50px;
  }

  .home-rooms__text {
    font-size: 20px;
    line-height: 1.3;
  }

  .home-rooms__gallery {
    gap: 24px;
  }

  .home-room-panel {
    height: var(--rooms-photo-h);
  }
}

/* ---------- Large desktop >=1440: full-scale photos ---------- */
@media (min-width: 1440px) {
  .home-rooms {
    --rooms-photo-h: 600px;
    --rooms-pad-top: 96px;
  }

  /* Align to the site content container (same as the header). The grid is
     [leading gutter (flex) | copy | gap | photos]: photos are pinned to the
     content's RIGHT edge (level with the header CTA), and copy/gap/photos ramp
     from the 1440 macet (532/26/754) to the 1920 macet (597/178/910). On wide
     screens the leading gutter grows so the copy starts at the 2nd column; at
     1440 it is 0 so the copy sits at the left edge. */
  .home-rooms__inner {
    width: var(--site-content-width);
    padding-bottom: 84px;
    grid-template-columns:
      minmax(0, 1fr)
      clamp(532px, calc(532px + (100vw - 1440px) * 0.1354), 597px)
      clamp(26px, calc(26px + (100vw - 1440px) * 0.3167), 178px)
      clamp(754px, calc(754px + (100vw - 1440px) * 0.325), 910px);
    gap: 0;
  }

  .home-rooms__aside {
    grid-column: 2;
  }

  .home-rooms__gallery {
    grid-column: 4;
  }

  .home-rooms .home-display-subtitle {
    margin-bottom: 16px;
    font-size: 70px;
    line-height: 75px;
  }

  .home-rooms__text {
    margin-bottom: 48px;
    font-size: 24px;
    line-height: 1.35;
  }

  .home-rooms__gallery {
    gap: 48px;
  }

  .home-room-panel {
    height: 600px;
  }
}

/* ---------- XL >=1920: only the paddings differ; the >=1440 ramp already
   reaches the 1920 macet (copy 597 / gap 178 / photos 910, pinned right). ---------- */
@media (min-width: 1920px) {
  .home-rooms {
    --rooms-pad-top: 105px;
  }

  .home-rooms__inner {
    padding-bottom: 55px;
  }

  .home-rooms__gallery {
    gap: 40px;
  }
}