/* Главная страница RentalSPb. Композиция утверждена 14.07.2026. */

.home-hero {
  padding: var(--space-4) 0 var(--space-5);
  background: var(--color-surface);
}
.home-hero__stage {
  position: relative;
  overflow: hidden;
  min-height: max(760px, calc(100dvh - var(--header-height) - 40px));
  border-radius: var(--radius-xl);
  background: var(--color-text);
  box-shadow: var(--shadow-md);
}
.home-hero__media,
.home-hero__slide,
.home-hero__slide picture,
.home-hero__scrim { position: absolute; inset: 0; }
.home-hero__slide {
  opacity: 0;
  transition: opacity 400ms linear;
}
.home-hero__slide[data-active="true"] { z-index: 1; opacity: 1; }
.home-hero__slide picture { display: block; }
.home-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-desktop-x, 60%) var(--hero-desktop-y, 50%);
}
.home-hero__scrim {
  z-index: 2;
  width: min(820px, 82%);
  height: 76%;
  background: var(--hero-scrim);
  pointer-events: none;
}
.home-hero__slide--scrim-strong .home-hero__scrim { background: var(--hero-scrim-strong); }
.home-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: inherit;
  padding: var(--space-5);
}
.home-hero__copy { max-width: 640px; }
.home-hero h1 {
  max-width: 620px;
  color: var(--color-on-media);
  font-size: clamp(2rem, 1.55rem + 2.1vw, 3.25rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: var(--shadow-text-on-media);
}
.home-hero__lead {
  max-width: 560px;
  margin-top: var(--space-3);
  color: var(--color-on-media-soft);
  font-size: 17px;
  line-height: 1.55;
  text-shadow: var(--shadow-text-on-media-soft);
}
.home-hero__controls {
  position: absolute;
  z-index: 3;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(17, 24, 39, 0.82);
  color: var(--color-on-media);
  box-shadow: var(--shadow-sm);
}
.home-hero__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.home-hero__control:hover { background: rgba(255, 255, 255, 0.14); }
.home-hero__control:active { transform: scale(0.96); }
.home-hero__control:focus-visible { outline: 3px solid var(--color-bg); outline-offset: 2px; }
.home-hero__counter {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 52px;
  color: var(--color-on-media-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.home-hero__counter strong { color: var(--color-on-media); font-size: 16px; }
.home-hero__play-icon { display: none; }
.home-hero__stage[data-user-paused="true"] [data-hero-toggle] > .icon { display: none; }
.home-hero__stage[data-user-paused="true"] .home-hero__play-icon,
.home-hero__stage[data-user-paused="true"] .home-hero__play-icon .icon { display: inline-flex; }

.home-booking {
  width: 100%;
  margin-top: var(--space-7);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}
.home-booking__status { min-height: 24px; padding: var(--space-4); color: var(--color-text-muted); text-align: center; }
.home-booking__widget { display: grid; grid-template-columns: minmax(210px, 0.8fr) minmax(0, 3fr); gap: var(--space-2); align-items: stretch; min-width: 0; min-height: 64px; }
.home-booking__widget .bnovo-widget-shell,
.home-booking__widget #_bn_widget_ { width: 100%; max-width: 100%; }
.home-booking__group { position: relative; z-index: 2; display: grid; align-content: center; min-width: 0; min-height: 62px; padding: 8px 38px 8px 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); color: var(--color-text); }
.home-booking__group::after { content: ""; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); pointer-events: none; transform: translateY(-70%) rotate(45deg); }
.home-booking__group > span { color: var(--color-text-muted); font-size: 12px; line-height: 1.2; }
.home-booking__group select { width: 100%; min-width: 0; padding: 2px 0 0; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 15px; font-weight: 550; line-height: 1.25; text-overflow: ellipsis; appearance: none; cursor: pointer; }
.home-booking__group:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.home-booking__widget iframe { max-width: 100%; }
.home-booking__error,
.home-booking__fallback { display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-4); text-align: center; }
.home-booking__error > div { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.home-booking__error { display: none; }
.home-booking[data-bnovo-state="ready"] .home-booking__status { display: none; }
.home-booking[data-bnovo-state="error"] .home-booking__widget,
.home-booking[data-bnovo-state="error"] .home-booking__status { display: none; }
.home-booking[data-bnovo-state="error"] .home-booking__error { display: grid; }
.home-page .b24-widget-button-popup { display: none !important; }

.home-section { padding: var(--section-padding-block) 0; }
.home-section__header { max-width: 710px; margin-bottom: var(--space-6); }
.home-section__header h2 { letter-spacing: -0.03em; }
.home-section__header p { margin-top: var(--space-2); color: var(--color-text-muted); }
.home-listings__count { font-variant-numeric: tabular-nums; }
.home-section__header--action { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); max-width: none; }
.home-section__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.home-section__link:hover { text-decoration: none; }
.home-section__footer { display: flex; justify-content: center; margin-top: var(--space-6); }
.home-empty { padding: var(--space-7); border-radius: var(--radius-lg); background: var(--color-surface); text-align: center; }
.home-empty p { margin-top: var(--space-2); color: var(--color-text-muted); }

.home-districts { background: var(--color-surface); }
.home-districts__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); min-width: 0; }
.home-district-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: var(--radius-lg);
  color: var(--color-text-invert);
}
.home-district-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.home-district-card__shade { position: absolute; inset: 0; background: var(--photo-scrim); }
.home-district-card__content { position: absolute; inset: auto var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 6px; }
/* Названия районов — длинные слова без пробелов, перенос внутри слова
   не даёт им выехать за карточку. */
.home-district-card__content strong { font-family: var(--font-heading); font-size: var(--fs-h3); overflow-wrap: anywhere; }
.home-district-card__content > span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); }
.home-district-card:hover { color: var(--color-text-invert); text-decoration: none; }

.home-advantages { padding: var(--section-padding-block) 0; }
.home-advantages__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.home-advantage { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.home-advantage__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); }
.home-advantage--2 .home-advantage__icon { background: var(--color-secondary-soft); color: var(--color-secondary); }
.home-advantage--3 .home-advantage__icon { background: var(--color-success-soft); color: var(--color-success); }
.home-advantage--4 .home-advantage__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.home-advantage h3 { font-size: var(--fs-h4); }
.home-advantage p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-body-sm); }

.home-contact { padding: var(--section-padding-block) 0; }
.home-contact__panel {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  box-shadow: var(--shadow-primary);
}
.home-contact__panel h2, .home-contact__panel p { color: var(--color-text-invert); }
.home-contact__panel p { max-width: 630px; margin-top: var(--space-3); color: var(--color-on-media-soft); }
.home-contact__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.home-contact__primary { background: var(--color-bg); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.home-contact__secondary { border-color: var(--color-border-on-media); background: transparent; color: var(--color-text-invert); box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .home-district-card:hover img { transform: scale(1.025); }
  .home-contact__primary:hover { background: var(--color-primary-soft); color: var(--color-primary-active); }
  .home-contact__secondary:hover { border-color: var(--color-bg); background: var(--color-on-media-hover); }
}

@media (min-width: 600px) {
  .home-districts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-district-card:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  /* Четыре района ложатся 2×2: широкая первая карточка оставила бы одну в хвосте. */
  .home-districts__grid:has(> :nth-child(4)) .home-district-card:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
  .home-advantages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-contact__actions { flex-direction: row; }
}

@media (min-width: 1024px) {
  .home-hero { padding: var(--space-4) 0 var(--space-6); }
  .home-hero__stage { min-height: clamp(620px, calc(100dvh - var(--header-height) - 48px), 820px); }
  .home-hero__content { padding: var(--space-7); }
  .home-districts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .home-districts__grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* В четырёх колонках карточка уже, и заголовок в h3 не помещается по ширине. */
  .home-districts__grid:has(> :nth-child(4)) .home-district-card__content { inset: auto var(--space-4) var(--space-4); }
  .home-districts__grid:has(> :nth-child(4)) .home-district-card__content strong { font-size: var(--fs-h4); }
  .home-district-card:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
  .home-advantages__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-contact__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-7); }
}

@media (max-width: 799px) {
  .home-booking__widget { grid-template-columns: 1fr; min-height: 330px; }
  .home-booking__widget iframe { min-height: 258px; }
}

@media (max-width: 767px) {
  .home-hero { padding: var(--space-2) 0 var(--space-5); }
  .home-hero__stage { min-height: max(760px, calc(100dvh - var(--header-height) - 16px)); }
  .home-hero__slide img { object-position: var(--hero-mobile-x, 61%) var(--hero-mobile-y, 50%); }
  .home-hero__scrim { width: 100%; height: 72%; background: var(--hero-scrim-mobile); }
  .home-hero__slide--scrim-strong .home-hero__scrim { background: var(--hero-scrim-strong-mobile); }
  .home-hero__content { padding: var(--space-5) var(--space-4) 84px; }
  .home-hero__lead { max-width: 32ch; font-size: 16px; }
  .home-booking { margin-top: var(--space-5); padding: var(--space-2); }
  .home-hero__controls { top: auto; right: var(--space-4); bottom: var(--space-4); }
  .home-section { padding: var(--section-padding-block) 0; }
  .home-section__header--action { align-items: flex-start; }
  .apartment-card__action { width: 44px; height: 44px; }
}

@media (max-width: 1024px) {
  .home-page .b24-widget-button-wrapper,
  .home-page .b24-widget-button-shadow { display: none !important; }
}

@media (min-width: 768px) and (max-width: 899px) {
  .home-hero__copy { max-width: calc(100% - 236px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__slide { transition-duration: 1ms; }
  .home-hero__control { transition: none; }
}

@media (max-width: 639px) {
  body:has(.cookie-notice:not([style*="display: none"])) .home-hero__content {
    padding-bottom: 164px;
  }
}