/* ==================================================================
   КЕДРОВЫЙ ДОМ — стили сайта
   Все размеры перенесены из Figma 1:1 (макет 1440 px).
   Цвета вынесены в CSS-переменные — их меняет админка.
================================================================== */

:root {
  --navy:        #1a3a56;
  --accent:      #2c5f8a;
  --gold:        #7a5230;
  --muted:       #5a6a7e;
  --ink:         #2a2218;
  --border:      #ddeaf5;
  --cream:       #f8f6f2;
  --pale:        #eef5fb;
  --photo-bg:    #dce7ee;
  --photo-stroke:#a9c0cb;
  --busy:        #b94d4d;
  --range:       #dceaf4;
  --off:         #e7eaed;
  --off-text:    #929aa2;
  --foot-text:   #a0c4e0;
  --foot-muted:  #7a9ab8;
  --foot-line:   #4a7fa5;
  --success:     #2e6b50;
  --white:       #ffffff;

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --alt:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* У Cormorant по умолчанию «старостильные» цифры — как строчные буквы, часть
   уходит под строку. Рядом с заглавными («ХАУС 117») это выглядит неровно,
   поэтому везде включаем цифры высотой с заглавные. !important нужен потому,
   что сокращённая запись `font: …` ниже сбрасывает эту настройку у элемента. */
*, *::before, *::after { font-variant-numeric: lining-nums !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 14px/1.365 var(--sans);
  -webkit-font-smoothing: antialiased;
  opacity: 1;
  transition: opacity .32s ease;   /* мягкий переход между страницами */
}
body.is-leaving { opacity: 0; }

img { max-width: 100%; }

.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ---------- типовые элементы ---------- */

.eyebrow {
  margin: 0;
  font: 500 11px/1.365 var(--sans);
  letter-spacing: 2.2px;
  color: var(--gold);
}

.section-title {
  margin: 0;
  font: 600 43px/1.21 var(--serif);
  color: var(--navy);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font: 700 13px/1 var(--sans);
  transition: opacity .15s ease, background-color .15s ease;
}
.btn:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26, 58, 86, .18); }

.btn--primary { background: var(--accent); color: var(--white); }
.btn--outline { background: var(--white); color: var(--accent); border: 1px solid var(--accent); }
.btn--light   { background: var(--white); color: var(--accent); }

/* ---------- фотография на фоне секции ---------- */

.about, .availability, .gallery, .prices, .reviews {
  position: relative;
  overflow: hidden;
}
.sec-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sec-photo .photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.sec-photo.has-image .photo__img { display: block; }
.sec-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  transition: opacity .3s ease;
}
.about  .sec-veil, .gallery .sec-veil, .reviews .sec-veil { background: var(--white); }
.availability .sec-veil { background: var(--cream); }
.prices .sec-veil { background: var(--pale); }

.about__inner, .availability__inner, .gallery__inner,
.prices__inner, .reviews__inner { position: relative; z-index: 1; }

/* ---------- плейсхолдер фотографии ---------- */

.photo {
  position: relative;
  background: var(--photo-bg);
  border: 1px solid var(--photo-stroke);
  border-radius: 8px;
  overflow: hidden;
}
.photo__mountains {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Пока не подставлены фотографии, заглушки не показываем —
   иначе при обновлении страницы на секунду мелькают «горы». */
.photo__mountains, .photo__caption { opacity: 0; }
.kedr-ready .photo__mountains,
.kedr-ready .photo__caption { opacity: 1; transition: opacity .35s ease; }
.photo__mountains path {
  fill: var(--photo-stroke);
  stroke: #000;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.photo__caption {
  position: absolute;
  left: 18px;
  bottom: 22px;
  font: 700 10px/1.2 var(--alt);
  letter-spacing: 1.2px;
  color: var(--navy);
}
.photo.has-image .photo__mountains,
.photo.has-image .photo__caption { display: none; }
.photo.has-image .photo__img { display: block; }

/* ==================================================================
   ШАПКА (высота 92 = 91 + разделитель 1 px)
================================================================== */

.header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  height: 91px;
  display: flex;
  align-items: center;
}
.logo { text-decoration: none; display: block; }
.logo__name {
  display: block;
  font: 700 18px/1.21 var(--serif);
  color: var(--navy);
}
.logo__tagline {
  display: block;
  margin-top: 3px;
  font: 700 9px/1.365 var(--sans);
  letter-spacing: 1.7px;
  color: var(--gold);
}
.nav {
  margin-left: auto;
  display: flex;
  gap: 42px;
}
.nav a {
  font: 700 10px/1.4 var(--sans);
  color: var(--ink);
  text-decoration: none;
}
.nav a:hover { color: var(--accent); }
.header__call {
  margin-left: 192px;
  width: 132px;
  height: 42px;
  font: 700 13px/1 var(--serif);
  flex: none;
}

/* ==================================================================
   ПЕРВЫЙ ЭКРАН (712 px)
================================================================== */

.hero {
  position: relative;
  height: 712px;
  background: var(--cream);
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 8px;
}
.hero__panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: var(--white);
  opacity: var(--hero-panel-opacity, .82);
}
.hero__inner { height: 100%; }
.hero__text {
  padding-top: 183px;
  width: 540px;
}
.hero .eyebrow { letter-spacing: 2.5px; }
.hero__title {
  margin: 24px 0 0;
  font: 600 55px/1.21 var(--serif);
  color: var(--navy);
}
.hero__lead {
  margin: 21px 0 0;
  font: 400 15px/1.365 var(--sans);
  color: var(--muted);
}
.hero__buttons {
  margin-top: 39px;
  display: flex;
  gap: 14px;
}
.hero__buttons .btn--primary { width: 206px; height: 52px; }
.hero__buttons .btn--outline { width: 190px; height: 52px; }
.hero__price {
  margin: 40px 0 0;
  font: 400 14px/1.365 var(--sans);
  color: var(--ink);
}

/* ==================================================================
   О ДОМЕ (528 px)
================================================================== */

.about { height: 528px; background: var(--white); }
.about__inner { display: flex; padding-top: 98px; }
.about .section-title { margin-top: 13px; }
.about__left  { width: 630px; flex: none; }
.about__right { width: 615px; flex: none; padding-top: 58px; }

.about__text {
  margin: 0;
  font: 400 21px/1.365 var(--sans);
  color: var(--muted);
}
.facts {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--facts-gap, 104px);
  row-gap: 26px;
}
.fact { min-width: 104px; text-align: center; }
.fact__value {
  font: 400 33px/1.365 var(--sans);
  color: var(--accent);
}
.fact__label {
  font: 400 17px/1.365 var(--sans);
  color: var(--muted);
}
.amenities {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 235px 235px;
  gap: 21px 26px;
}
.amenity {
  height: 42px;
  background: var(--cream);
  border: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 400 14px/1.365 var(--sans);
  color: var(--ink);
}

/* удобство с фотографией — нажимается и открывает снимок */
.amenity--photo {
  cursor: pointer;
  transition: background-color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.amenity--photo:hover {
  background: var(--pale);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(26, 58, 86, .12);
}
.amenity--photo:active { transform: translateY(0); box-shadow: none; }
.amenity__icon {
  display: flex;
  color: var(--accent);
  opacity: .75;
}

/* ==================================================================
   ДОСТУПНОСТЬ / КАЛЕНДАРЬ (730 px)
================================================================== */

.availability { min-height: 620px; padding-bottom: 90px; background: var(--cream); }
.availability__inner { padding-top: 98px; }
.availability .section-title { margin-top: 13px; }
.availability__text {
  margin: 12px 0 0;
  font: 400 19px/1.365 var(--sans);
  color: var(--muted);
}
.availability__btn {
  margin-top: 78px;
  width: 235px;
  height: 55px;
  font: 400 16px/1 var(--sans);
}
.availability__note {
  margin: 18px 0 0;
  font: 400 17px/1.365 var(--sans);
  color: var(--muted);
}

.cal-card {
  position: absolute;
  left: 500px;
  top: 92px;
  width: 700px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 34px 26px;
}
.cal-card__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal-card__month {
  text-align: center;
  font: 700 14px/1.365 var(--sans);
  color: var(--navy);
}
.cal-card__btn {
  width: 28px;
  height: 28px;
  flex: none;
  background: var(--pale);
  border: 0;
  border-radius: 7px;
  font: 400 12px/1 var(--alt);
  color: var(--navy);
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.cal-card__btn:hover:not(:disabled) { background: var(--range); }
.cal-card__btn:disabled { opacity: .3; cursor: default; }
.cal-week {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: 8px;
  text-align: center;
  font: 700 11px/1.2 var(--alt);
  color: var(--muted);
}
.cal-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  transition: opacity .25s ease;   /* плавная смена месяца */
}
.cal-day {
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1.2 var(--alt);
  color: var(--navy);
}
.cal-day--busy {
  background: var(--busy);
  border-color: var(--busy);
  color: var(--white);
}
.cal-day--empty { border-color: transparent; background: transparent; }
.cal-grid.is-swapping { opacity: 0; }
.cal-legend {
  margin-top: 18px;
  font: 400 11px/1.365 var(--sans);
  color: var(--muted);
}
.cal-legend .is-busy { color: var(--busy); }

/* ==================================================================
   ГАЛЕРЕЯ (650 px)
================================================================== */

.gallery { min-height: 650px; background: var(--white); padding-bottom: 1px; }
.gallery__inner { padding-top: 98px; }
.gallery .section-title { margin-top: 13px; }
/* стрелки листания — под плиткой, по центру */
.gallery__pager {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: 400 12px/1 var(--alt);
  color: var(--muted);
}
.gallery__pager[hidden] { display: none; }
.gallery__btn {
  width: 42px;
  height: 42px;
  background: var(--pale);
  border: 0;
  border-radius: 7px;
  font: 400 13px/1 var(--alt);
  color: var(--navy);
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.gallery__btn:hover:not(:disabled) { background: var(--range); }
.gallery__btn:disabled { opacity: .3; cursor: default; }
/* Четыре равные колонки — из них складываются все форматы фотографий */
.gallery__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 166px;
  grid-auto-flow: dense;   /* пустоты в плитке заполняются сами */
  gap: 18px;
}
.gallery__grid .photo {
  cursor: zoom-in;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.gallery__grid .photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(26, 58, 86, .16);
}
.gallery__grid .photo__img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.gallery__grid .photo:hover .photo__img { transform: scale(1.04); }

/* ==================================================================
   ЦЕНЫ (618 px)
================================================================== */

.prices { height: 618px; background: var(--pale); }
.prices__inner { padding-top: 98px; }
.prices .section-title { margin-top: 13px; }
.prices__grid { margin-top: 32px; display: flex; gap: 24px; }

.price-card {
  width: 380px;
  height: 260px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px 28px;
}
.price-card--hl { border: 2px solid var(--accent); padding: 31px 27px; }
.price-card__period { font: 700 11px/1.365 var(--sans); color: var(--gold); }
.price-card__price  { margin-top: 31px; font: 400 33px/1.365 var(--sans); color: var(--navy); }
.price-card__note   { margin-top: 5px;  font: 700 13px/1.365 var(--sans); color: var(--muted); }

/* ==================================================================
   ОТЗЫВЫ (610 px)
================================================================== */

.reviews { height: 610px; background: var(--white); }
.reviews__inner { padding-top: 98px; }
.reviews .section-title { margin-top: 13px; }
.reviews__grid { margin-top: 34px; display: flex; gap: 24px; }

.review {
  width: 380px;
  height: 250px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 28px 40px;
  display: flex;
  flex-direction: column;
}
.review__stars  { font: 400 16px/1.21 var(--alt); color: var(--gold); }
.review__text   { margin-top: 23px; font: 400 14px/1.365 var(--sans); color: var(--ink); }
.review__author { margin-top: auto; font: 700 12px/1.365 var(--sans); color: var(--muted); }

/* ==================================================================
   ФИНАЛЬНЫЙ БЛОК + ФУТЕР (750 px)
================================================================== */

.final {
  position: relative;
  height: 750px;
  background: var(--navy);
  overflow: hidden;
}
.final__photo { position: absolute; inset: 0; }
.final__photo .photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.final__photo.has-image .photo__img { display: block; }
.final__veil {
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: var(--final-veil, 1);
  transition: opacity .3s ease;
}
.final__inner { position: relative; padding-top: 120px; }
.final .eyebrow { color: var(--foot-text); letter-spacing: 0; }
.final__title {
  margin: 25px 0 0;
  font: 600 44px/1.21 var(--serif);
  color: var(--white);
}
.final__btn {
  margin-top: 42px;
  width: 210px;
  height: 54px;
}
.final__line {
  margin-top: 152px;
  height: 1px;
  background: var(--foot-line);
}
.footer { margin-top: 46px; display: flex; }
.footer__col--1 { width: 550px; padding-top: 2px; }
.footer__col--2 { width: 350px; }
.footer__logo {
  font: 600 17px/1.21 var(--serif);
  color: var(--foot-text);
}
.footer__address {
  margin-top: 8px;
  font: 400 13px/1.365 var(--sans);
  color: var(--foot-muted);
}
.footer__text {
  font: 400 13px/1.365 var(--sans);
  color: var(--foot-text);
}

/* ==================================================================
   СТРАНИЦА БРОНИРОВАНИЯ
================================================================== */

.booking-page { background: var(--cream); min-height: 100vh; }

.bheader {
  background: var(--white);
  height: 86px;
  display: flex;
  align-items: center;
}
.bheader .logo__tagline { letter-spacing: 0; }

.bmain { padding-top: 59px; padding-bottom: 96px; }
.bstep {
  margin: 0;
  font: 500 11px/1.365 var(--sans);
  color: var(--gold);
}
.btitle {
  margin: 16px 0 0;
  font: 600 39px/1.21 var(--serif);
  color: var(--navy);
}
.btext {
  margin: 9px 0 0;
  font: 400 15px/1.365 var(--sans);
  color: var(--muted);
}
.blayout { margin-top: 42px; display: flex; gap: 40px; align-items: flex-start; }

.bcal {
  position: relative;
  width: 830px;
  min-height: 510px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 33px 34px;
  flex: none;
}
.bcal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bcal__month {
  font: 400 22px/1.21 var(--alt);
  color: var(--navy);
}
.bnav-btn {
  width: 42px;
  height: 42px;
  background: var(--pale);
  border: 0;
  border-radius: 7px;
  font: 400 13px/1 var(--alt);
  color: var(--navy);
  cursor: pointer;
}
.bnav-btn:disabled { opacity: .35; cursor: default; }
.bweek {
  margin-top: 23px;
  display: grid;
  grid-template-columns: repeat(7, 92px);
  column-gap: 14px;
  font: 400 11px/1.2 var(--alt);
  color: var(--muted);
}
.bweek span { padding-left: 6px; }
.bweek span:nth-child(6), .bweek span:nth-child(7) { color: var(--gold); }
.bgrid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(7, 92px);
  gap: 10px 14px;
}
.bday {
  height: 57px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--white);
  padding: 9px 13px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color .12s ease;
}
.bday__num   { display: block; font: 400 16px/1.21 var(--alt); color: var(--ink); }
.bday__price { display: block; margin-top: 4px; font: 400 10px/1.2 var(--alt); color: var(--muted); }
.bday--empty { border-color: transparent; background: transparent; cursor: default; }
.bday--off {
  background: var(--off);
  border-color: var(--off);
  cursor: not-allowed;
}
.bday--off .bday__num { color: var(--off-text); }
.bday--free:hover { background: var(--pale); }
.bday--range { background: var(--range); }
.bday--edge  { background: var(--accent); }
.bday--edge .bday__num, .bday--edge .bday__price { color: var(--white); }

.btooltip, .bbadge {
  position: absolute;
  background: var(--ink);
  border-radius: 7px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 11px/1 var(--alt);
  pointer-events: none;
  z-index: 3;
}
.btooltip { height: 42px; padding: 0 24px; }
.bbadge   { height: 38px; padding: 0 20px; }
.btooltip[hidden], .bbadge[hidden] { display: none; }

/* плашка гаснет сама, чтобы не закрывать даты */
.btooltip, .bbadge { transition: opacity .4s ease; }
.btooltip.is-fading, .bbadge.is-fading { opacity: 0; }

/* предупреждение — красным, чтобы отличалось от подсказки */
.bbadge--warning { background: var(--busy); }

.btooltip:not([hidden]), .bbadge:not([hidden]) { animation: zoomIn .25s cubic-bezier(.22,.61,.36,1); }

.bsummary {
  width: 330px;
  height: 430px;
  background: var(--navy);
  border-radius: 12px;
  padding: 36px 30px 17px;
  display: flex;
  flex-direction: column;
  flex: none;
}
.bsummary__title { font: 400 11px/1.2 var(--alt); color: var(--foot-text); }
.bsummary__empty-title {
  margin-top: 60px;
  font: 400 18px/1.365 var(--sans);
  color: var(--white);
}
.bsummary__empty-text {
  margin-top: 15px;
  font: 400 13px/1.21 var(--alt);
  color: var(--foot-text);
}
.bsummary__label { font: 400 10px/1.2 var(--alt); color: var(--foot-text); }
.bsummary__in    { margin-top: 39px; }
.bsummary__out   { margin-top: 26px; }
.bsummary__date  { margin-top: 9px; font: 400 17px/1.365 var(--sans); color: var(--white); }
.bsummary__nights{ margin-top: 36px; font: 400 14px/1.21 var(--alt); color: var(--range); }
.bsummary__price { margin-top: 19px; font: 400 28px/1.365 var(--sans); color: var(--white); }
.bsummary__btn   { margin-top: auto; width: 270px; height: 48px; border-radius: 7px; }
.bsummary__btn:disabled { opacity: .45; cursor: default; }
.bsummary__note  { margin-top: 8px; font: 400 11px/1.365 var(--sans); color: var(--foot-text); }

/* ==================================================================
   ОВЕРЛЕИ (форма и «заявка отправлена»)
================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 58, 86, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}
.overlay[hidden] { display: none; }

.modal {
  position: relative;
  width: 540px;
  max-width: 100%;
  background: var(--white);
  border-radius: 14px;
  padding: 42px;
}
.modal--book    { min-height: 590px; }

.modal__title {
  margin: 0;
  font: 600 28px/1.21 var(--serif);
  color: var(--navy);
}
.modal__close {
  position: absolute;
  right: 42px;
  top: 34px;
  width: 42px;
  height: 42px;
  background: var(--pale);
  border: 0;
  border-radius: 7px;
  font: 400 13px/1 var(--alt);
  color: var(--navy);
  cursor: pointer;
}
.modal__dates { margin-top: 18px; font: 400 14px/1.365 var(--sans); color: var(--muted); opacity: .6; }
.modal__sum   { margin-top: 9px;  font: 400 22px/1.365 var(--sans); color: var(--navy); }

.field { margin-top: 28px; }
.field + .field { margin-top: 13px; }
.field__label { display: block; font: 400 10px/1.365 var(--sans); color: var(--gold); }
.field input {
  margin-top: 6px;
  width: 456px;
  max-width: 100%;
  height: 45px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 16px;
  font: 400 14px/1.365 var(--sans);
  color: var(--ink);
}
.field input::placeholder { color: var(--muted); }
.field input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.modal__submit {
  margin-top: 45px;
  width: 456px;
  max-width: 100%;
  height: 52px;
  border-radius: 7px;
}
.modal__consent {
  margin-top: 16px;
  text-align: center;
  font: 400 10px/1.365 var(--sans);
  color: var(--muted);
}

/* ==================================================================
   ПРОСМОТР ФОТО (лайтбокс)
================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 32, 46, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 88px;
  animation: fadeIn .28s ease;
}
.lightbox[hidden] { display: none; }

.lightbox__stage {
  position: relative;
  max-width: 1100px;
  width: 100%;
  height: 100%;
  overflow: hidden;   /* увеличенная фотография не вылезает за экран */
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__frame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: var(--photo-bg);
  animation: zoomIn .35s cubic-bezier(.22,.61,.36,1);
}
.lightbox__frame img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  border-radius: 10px;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__frame.is-zoomed img { cursor: grab; border-radius: 0; }
.lightbox__frame.is-instant img { transition: none; }
.lightbox__frame.is-dragging img { cursor: grabbing; }

/* Увеличенная фотография может выходить за рамку — обрезаем по экрану */

.lightbox__zoom {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
}
.lightbox__zoom button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: 400 17px/1 var(--alt);
  cursor: pointer;
  transition: background-color .2s ease;
}
.lightbox__zoom button:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.lightbox__zoom button:disabled { opacity: .35; cursor: default; }
.lightbox__zoom span {
  min-width: 52px;
  text-align: center;
  color: #dbe7f1;
  font: 400 12px/1 var(--alt);
}
.lightbox__placeholder {
  width: min(900px, 80vw);
  height: min(560px, 60vh);
  position: relative;
  border: 1px solid var(--photo-stroke);
  border-radius: 10px;
}
.lightbox__caption {
  margin-top: 20px;
  color: #dbe7f1;
  font: 400 14px/1.4 var(--sans);
  letter-spacing: .4px;
  text-align: center;
}
.lightbox__count {
  margin-top: 6px;
  color: rgba(219, 231, 241, .55);
  font: 400 12px/1.4 var(--alt);
  text-align: center;
}
.lightbox__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 400 18px/1 var(--alt);
  cursor: pointer;
  transition: background-color .2s ease;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__nav--prev { left: -70px; }
.lightbox__nav--next { right: -70px; }
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 400 18px/1 var(--alt);
  cursor: pointer;
  transition: background-color .2s ease;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .24); }

/* ==================================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ И ПЕРЕХОДЫ
================================================================== */

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* первый экран проявляется сразу при загрузке */
.hero__text > * { animation: riseIn .8s cubic-bezier(.22,.61,.36,1) backwards; }
.hero__text > *:nth-child(1) { animation-delay: .05s }
.hero__text > *:nth-child(2) { animation-delay: .14s }
.hero__text > *:nth-child(3) { animation-delay: .23s }
.hero__text > *:nth-child(4) { animation-delay: .32s }
.hero__text > *:nth-child(5) { animation-delay: .41s }

.btn, .nav a, .footer__link {
  transition: opacity .25s ease, background-color .25s ease, color .25s ease,
              transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.btn:active { transform: translateY(0); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .hero__text > *, .lightbox, .lightbox__frame { animation: none; }
  .btn:hover { transform: none; box-shadow: none; }
  body { transition: none; }
}

/* ==================================================================
   ССЫЛКИ В ФУТЕРЕ
================================================================== */

.footer__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer__link:hover { border-bottom-color: currentColor; }

/* ==================================================================
   КНОПКА «НА ГЛАВНУЮ» НА СТРАНИЦЕ БРОНИРОВАНИЯ
================================================================== */

.bheader .container { display: flex; align-items: center; }
.bback {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--accent);
  text-decoration: none;
  font: 700 11px/1 var(--sans);
  letter-spacing: .6px;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.bback:hover { border-color: var(--accent); background: var(--pale); transform: translateX(-3px); }
.bback span:first-child { font: 400 14px/1 var(--alt); }

/* ==================================================================
   ПРОВЕРКА ФОРМЫ
================================================================== */

.field__error {
  display: none;
  margin-top: 5px;
  font: 400 11px/1.3 var(--sans);
  color: var(--busy);
}
.field.has-error input { border-color: var(--busy); background: #fdf6f6; }
.field.has-error .field__error { display: block; animation: fadeIn .2s ease; }
.field.has-error { margin-bottom: 4px; }

/* ==================================================================
   ЭКРАН «ЗАЯВКА ОТПРАВЛЕНА»
================================================================== */

.modal--success {
  width: 480px;
  padding: 46px 44px 38px;
  text-align: center;
  overflow: hidden;
}
.modal--success::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--success));
}
.success { display: block; padding: 0; }

.success__badge {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(46, 107, 80, .12);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: zoomIn .45s cubic-bezier(.22,.61,.36,1) backwards;
}
.success__badge svg { width: 84px; height: 84px; }
.success__badge circle {
  fill: var(--success);
  stroke: none;
}
.success__badge path {
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: drawCheck .5s .3s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0 } }

.success__title {
  margin: 22px 0 0;
  font: 600 32px/1.21 var(--serif);
  color: var(--navy);
}
.success__text {
  margin: 10px 0 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--muted);
}
.success__card {
  margin-top: 26px;
  background: var(--pale);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 18px;
  text-align: left;
}
.success__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  font: 400 13px/1.3 var(--sans);
  color: var(--muted);
}
.success__row + .success__row { border-top: 1px solid var(--border); }
.success__row b { font: 700 14px/1.3 var(--sans); color: var(--navy); }
.success__row--total b { font: 400 20px/1.2 var(--sans); color: var(--accent); }

.success__btn { margin-top: 24px; width: 100%; height: 50px; border-radius: 7px; }
.success__note {
  margin: 14px 0 0;
  font: 400 11px/1.4 var(--sans);
  color: var(--muted);
}

/* ==================================================================
   АДАПТИВ — макет 1440 сохраняется до 1248 px, ниже перестраивается
================================================================== */

@media (max-width: 1247px) {
  .container { width: auto; margin: 0 24px; }

  /* название слева, «Позвонить» справа, меню — строкой ниже */
  .header__inner { height: auto; padding: 16px 0; flex-wrap: wrap; gap: 14px 16px; }
  .logo { flex: 1 1 auto; }
  .header__call {
    order: 2;
    margin-left: auto;
    width: auto;
    height: 38px;
    padding: 0 15px;
    font-size: 12px;
  }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; gap: 20px; flex-wrap: wrap; }

  /* Первый экран — как на большом экране: фотография на фоне, текст поверх */
  .hero { height: auto; min-height: 600px; padding-bottom: 64px; }
  .hero__photo { position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0; }
  .hero__panel { display: block; width: 100%; }
  .hero__text { padding-top: 96px; width: auto; max-width: 540px; }
  .hero__title { font-size: 40px; }
  .hero__buttons { flex-wrap: wrap; }

  /* Порядок блоков: заголовок, описание, удобства, цифры */
  .about { height: auto; padding-bottom: 64px; }
  .about__inner { display: flex; flex-direction: column; padding-top: 64px; }
  .about__left, .about__right { display: contents; }
  .about .eyebrow       { order: 1; }
  .about .section-title { order: 2; }
  .about__text          { order: 3; margin-top: 22px; }
  .amenities            { order: 4; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  /* цифры о доме — всегда одной строкой, поровну по ширине */
  .facts {
    order: 5;
    margin-top: 40px;
    flex-wrap: nowrap;
    column-gap: 10px;
    justify-content: space-between;
  }
  .fact { flex: 1 1 0; min-width: 0; }
  .fact__value { font-size: 28px; }
  .fact__label { font-size: 14px; }

  /* Порядок блоков: заголовок, календарь, кнопка, условия заезда */
  .availability { height: auto; padding-bottom: 64px; }
  .availability__inner { display: flex; flex-direction: column; padding-top: 64px; }
  .availability .eyebrow       { order: 1; }
  .availability .section-title { order: 2; }
  .availability__text          { order: 3; }
  .cal-card                    { order: 4; }
  .availability__btn           { order: 5; margin-top: 32px; }
  .availability__note          { order: 6; }
  .cal-card {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    height: auto;
    min-height: 0;              /* без пустого места под сеткой */
    margin-top: 32px;
    padding: 28px 20px 24px;
  }
  .cal-week, .cal-grid { grid-template-columns: repeat(7, 1fr); column-gap: 6px; }
  .cal-grid { margin-top: 10px; row-gap: 6px; }

  .gallery { height: auto; padding-bottom: 64px; }
  .gallery__inner { padding-top: 64px; }
  /* две колонки: «шире вдвое» и «крупное» занимают всю ширину,
     «вертикальное» — половину в два ряда, форматы продолжают работать */
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }

  .prices, .reviews { height: auto; padding-bottom: 64px; }
  .prices__inner, .reviews__inner { padding-top: 64px; }
  /* карточки делят ширину поровну: три в ряд на планшете, одна — на телефоне */
  .prices__grid, .reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .price-card, .review { width: auto; height: auto; min-height: 200px; }
  .price-card__price { font-size: 28px; }

  .final { height: auto; padding-bottom: 64px; }
  .final__inner { padding-top: 64px; }
  .final__title { font-size: 34px; }
  .final__line { margin-top: 56px; }
  /* футер: три колонки на планшете, одна на телефоне */
  .footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
  .footer__col--1, .footer__col--2 { width: auto; }

  .blayout { flex-wrap: wrap; }
  .bcal { width: 100%; height: auto; min-height: 0; padding-bottom: 24px; }
  .bweek, .bgrid { grid-template-columns: repeat(7, 1fr); column-gap: 6px; }
  .bgrid { row-gap: 6px; }
  .bday { padding: 8px; }
  .bsummary { width: 100%; height: auto; padding-bottom: 30px; }
  .bsummary__btn { width: 100%; margin-top: 32px; }
  .btooltip, .bbadge { height: 32px; padding: 0 12px; font-size: 10px; }

  .modal--book { min-height: 0; }
  .modal--success { width: 100%; padding: 34px 24px 28px; }
  .lightbox { padding: 68px 16px 24px; }
  .lightbox__nav--prev { left: 4px; }
  .lightbox__nav--next { right: 4px; }
  .lightbox__nav { width: 42px; height: 42px; background: rgba(255,255,255,.2); }
  .bheader .container { flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .bheader { height: auto; }
  .modal { padding: 28px; }
  .modal__close { right: 20px; top: 20px; }
  .field input, .modal__submit { width: 100%; }
}

/* ---------- совсем узкие экраны: календарь без цен в ячейках ---------- */

@media (max-width: 700px) {
  .prices__grid, .reviews__grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }

  .bday { height: 46px; padding: 6px; display: flex; align-items: center; justify-content: center; }
  .bday__price { display: none; }
  .bday__num { font-size: 14px; }
  .cal-day { height: 40px; font-size: 12px; }
  .btitle { font-size: 30px; }
  .bsummary { padding: 26px 22px; }
}

/* ---------- поле-ловушка для роботов и ошибка отправки ---------- */

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.send-error {
  margin: 18px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  background: #fdf6f6;
  border: 1px solid #f0d6d6;
  font: 400 13px/1.5 var(--sans);
  color: var(--busy);
}
.send-error[hidden] { display: none; }
.send-error a { color: var(--busy); font-weight: 700; white-space: nowrap; }

/* Keep calendar cells inside the card on narrow phones. */
@media (max-width: 700px) {
  .bcal { padding-left: 16px; padding-right: 16px; }
  .bweek, .bgrid, .cal-week, .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .bday, .cal-day { min-width: 0; }
  .bday { padding-left: 2px; padding-right: 2px; }
}
/* The stage clips enlarged images; navigation must stay inside its bounds. */
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__stage > div { min-width: 0; max-width: 100%; }