/* ==========================================================================
   Блоки главной и страницы записи
   ========================================================================== */

/* ── Две панели: жильё и коммерция ───────────────────────────────────────── */

.panels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-5);
}

/* Композиция как в первой версии блока: содержимое по центру панели,
   а не прижато к низу. Так две панели читаются как пара равнозначных
   дверей, а не как подписи под фотографиями. */
.panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: var(--sh-card);
}

/* Картинка лежит обычным <img> под затемнением: так она кэшируется
   как изображение и грузится лениво. Раньше это был фон в style. */
.panel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-panel);
  transition: opacity var(--t-base);
}

/* На наведении затемнение чуть отступает: видно, что за текстом фотография. */
@media (hover: hover) {
.panel:hover::after { opacity: .82; }
}

.panel__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
}

/* Значок на кремовом круге — запасной вид, если картинки нет. */
.panel__icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-navy);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

/* Цветная картинка стоит на фотографии без подложки — так это было на старом
   сайте, и так дом с офисом различаются с одного взгляда. Круг под ней не
   нужен: он был нужен контурной иконке, чтобы та не терялась на снимке.
   Тень мягкая — картинка светлая, а кадр за ней местами тоже светлый. */
.panel__icon--pict {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.panel__pict {
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
}

/* Тень под текстом: затемнение оставляет фотографию видимой, а на светлом
   пятне кадра — окне или плитке — белые буквы без тени пропадают. */
.panel__title {
  font-size: var(--fs-h3);
  color: var(--c-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.panel__text {
  max-width: 34ch;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.panel__body .btn { margin-top: var(--sp-3); }

/* ── Панель на телефоне ───────────────────────────────────────────────────
   Столбиком карточка занимала почти весь экран: крупная картинка, под ней
   заголовок, под ним текст, под ним кнопка — и так дважды подряд.
   Собираем шапкой: картинка и название в строку, описание и кнопка под ними. */
@media (max-width: 640px) {
  .panel {
    min-height: 0;
  }

  .panel__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "text text"
      "btn  btn";
    align-items: center;
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
    text-align: left;
    padding: var(--sp-5) var(--sp-4);
  }

  .panel__icon {
    grid-area: icon;
    width: 52px;
    height: 52px;
  }

  .panel__icon--pict { width: auto; height: auto; }
  .panel__pict { width: 48px; height: 48px; }

  .panel__title { grid-area: title; }

  .panel__text {
    grid-area: text;
    max-width: none;
  }

  .panel__body .btn {
    grid-area: btn;
    margin-top: 0;
    width: 100%;
    white-space: nowrap;   /* подпись короткая, в строку влезает */
  }}

/* ── Как это работает ────────────────────────────────────────────────────── */

.steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-5);
  counter-reset: step;
}

.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
  overflow: hidden;
  transition: box-shadow var(--t-base), transform var(--t-base);
}@media (hover: hover) {
.steps__item:hover {
  box-shadow: var(--sh-card);
  transform: translateY(-3px);
}
}

/* Картинка шага. Фон плашки того же тона, что и рисунок, — пока картинка
   грузится, карточка не мигает белым прямоугольником. */
.steps__art {
  position: relative;
  display: block;
  background: var(--c-tint-blue);
}

.steps__art img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.steps__body {
  display: block;
  padding: var(--sp-5);
}

/* Номер лежит на картинке: он подписывает именно шаг, а не текст под ним,
   и не отнимает высоту у карточки. */
.steps__num {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 900;
  box-shadow: var(--sh-card);
}

/* Запасной вид: шаг без картинки (например, пятый, добавленный клиентом). */
.steps__num--inline {
  position: static;
  margin-bottom: var(--sp-3);
}

.steps__icon {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--c-accent);
}

.steps__title {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}

.steps__text {
  font-size: 14px;
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
}

.steps__list { margin-top: var(--sp-6); }

/* На телефоне сетка складывалась в одну колонку, и каждый шаг занимал
   почти экран целиком: квадратная картинка во всю ширину плюс текст под
   ней. Четыре шага — четыре экрана пролистывания ради четырёх фраз.
   Разворачиваем карточку в строку: картинка становится значком слева,
   текст читается справа, весь блок умещается на один экран. */
@media (max-width: 640px) {
  .steps__list { gap: var(--sp-3); }

  .steps__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: stretch;
  }

  /* Картинка тянется по высоте текста и режется по центру, иначе рядом
     с двумя строками описания остаётся белая колонка. */
  .steps__art img {
    height: 100%;
    aspect-ratio: auto;
  }

  .steps__num {
    left: 6px;
    bottom: 6px;
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .steps__body { padding: var(--sp-4); }

  .steps__title {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .steps__text {
    font-size: 13px;
    color: var(--c-text-muted);
  }}

/* ── Галерея работ ───────────────────────────────────────────────────────── */

.gallery__group + .gallery__group { margin-top: var(--sp-7); }

/* Подпись группы теперь заголовок секции, а не тихая надпись под большим
   заголовком: раз того больше нет, эта должна читаться как заголовок. */
.gallery__label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-head);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.2px;
  text-transform: none;
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}

/* Значок группы стоит сам по себе, без подложки: значки цветные, и цветная
   плашка под цветной картинкой давала два пятна вместо одного. Группы и так
   различаются — домом и зданием. */
.gallery__label-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.gallery__track { grid-auto-columns: minmax(280px, 1fr); }

.project {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-white);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}@media (hover: hover) {
.project:hover {
  border-color: var(--c-navy);
  box-shadow: var(--sh-card);
  transform: translateY(-2px);
}
}

/* Пропорцию держит сама картинка, а не обёртка: обёртку растягивал флекс
   карточки, и у последнего проекта в ряду кадр выходил ниже соседних. */
.project__media {
  display: block;
  flex-shrink: 0;
  background: var(--c-bg-panel);
}

.project__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);

  /* Тянемся на всю оставшуюся высоту карточки: у части работ город в
     подписи не указан, и без этого «Learn more» вставал сразу под
     заголовком — в ряду ссылки оказывались на разной высоте. */
  flex: 1;
}

.project__title {
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-navy);
}

.project__place {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--c-text-muted);
}

.project__cta {
  /* Прижата к низу карточки — тогда в ряду все ссылки на одной линии,
     сколько бы строк ни занял заголовок и есть ли под ним город. */
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ── Отзывы ──────────────────────────────────────────────────────────────── */

/* Фон секции задаётся модификатором l-section--light, а не самим блоком:
   иначе соседние секции нельзя чередовать, а два одинаковых фона подряд
   сливаются в одно длинное поле — граница между блоками пропадает. */
.reviews__track { grid-auto-columns: minmax(300px, 1fr); }

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
}

.review__source {
  font-family: var(--f-head);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.review__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-tint-blue);
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 800;
  color: var(--c-accent);
}

.review__name {
  display: block;
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-navy);
}

.review__stars {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 2px;
  color: var(--c-star);
}

.review__text {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
}

/* ── Зона обслуживания ───────────────────────────────────────────────────── */

.area__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--sp-8);
}

.area__map {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-card);
  line-height: 0;
}

.area__map iframe {
  width: 100%;
  min-height: 380px;
  border: 0;
}

.area__title { margin-bottom: var(--sp-4); }

.area__text {
  color: var(--c-text-soft);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-5);
}

.area__cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.area__city,
.area__city-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-bg-light);
  font-family: var(--f-head);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-navy);
}

.area__city .icon { color: var(--c-accent); }

/* Скрипт вложил внутрь кнопку — сама плашка становится пустой обёрткой,
   иначе получилось бы две подложки одна в другой. */
.area__city--action {
  padding: 0;
  background: none;
}

.area__city-btn {
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}@media (hover: hover) {
.area__city-btn:hover { background: var(--c-tint-blue); }
}

.area__city.is-active .area__city-btn {
  background: var(--c-navy);
  color: var(--c-white);
}

.area__city.is-active .icon { color: var(--c-cream); }

/* ── Страница записи ─────────────────────────────────────────────────────── */

.booking__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-6);
}

/* Колонка грида по умолчанию не сжимается уже своего содержимого. В форме
   лента дней шире колонки, поэтому без min-width:0 шаг с датами вылезал
   под боковую колонку — его рамка тянулась через всю страницу. */
.booking__form { min-width: 0; }

.booking__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}

.booking__card {
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
}

.booking__card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-cream);
}

/* В значке заголовка теперь своя иконка, а не эмодзи: ей нужен цвет
   и выравнивание по центру строки. */
.booking__card-mark {
  display: inline-flex;
  align-items: center;
  color: var(--c-accent);
}

.booking__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.booking__row + .booking__row { margin-top: var(--sp-4); }

.booking__row-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  margin-top: 2px;
  color: var(--c-accent);
}

.booking__strong {
  display: block;
  font-family: var(--f-head);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-navy);
  overflow-wrap: anywhere;   /* длинная почта не должна распирать колонку */
}

a.booking__strong { transition: color var(--t-fast); }@media (hover: hover) {
a.booking__strong:hover { color: var(--c-accent); }
}

.booking__note {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.booking__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.booking__chip {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-tint-green);
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-green);
}

/* ── Узкие экраны ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .area__inner,
  .booking__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .area__map { order: 2; }
  .area__map iframe { min-height: 300px; }

  .booking__aside { position: static; }}