/**
 * Точка входа стилей проекта.
 * Порядок импорта важен: base -> layout -> components -> utilities/animations.
 */

@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/typography.css');

@import url('layout/header.css');
@import url('layout/footer.css');

@import url('components/buttons.css');
@import url('components/navigation.css');
@import url('components/language-switcher.css');
@import url('components/hero.css');

@import url('animations.css');
@import url('utilities.css');

/**
 * ============================================================
 * Стили секций лендинга (catalog, services, about,
 * regions, reviews, faq, contacts).
 *
 * Эти секции пока не выделены в отдельные файлы css/components/*,
 * чтобы не увеличивать число файлов проекта — см. ограничение
 * "не создавай новые файлы" в задаче на этом этапе. При следующем
 * крупном рефакторе имеет смысл вынести каждый блок в свой файл
 * по аналогии с components/hero.css.
 * ============================================================
 */

/* ---------- Общий ритм секций и заголовок секции ---------- */

.section {
  padding-block: var(--space-2xl);
}

/* ---------- Первая секция отдельных страниц (catalog/services/reviews/faq) ----------
   На этих страницах нет hero — header зафиксирован (position: fixed) и перекрывал бы
   контент без верхнего отступа, равного его высоте. Селектор из двух классов
   (.section.section--page-intro) специфичнее одноклассового ".section" из
   мобильного правила ниже — переопределяет верхний паддинг независимо от
   порядка объявления в файле. */
.section.section--page-intro {
  padding-block-start: calc(var(--header-height) + var(--space-2xl));
}

@media (max-width: 640px) {
  .section.section--page-intro {
    padding-block-start: calc(var(--header-height) + var(--space-lg));
  }
}

.section-header {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  text-align: center;
}

/* ---------- Компактный мобильный ритм ----------
   На телефоне лендинг иначе получается слишком длинным (много секций
   в одну колонку): уменьшаем отступы секций, зазоры сеток и паддинги
   карточек, не убирая ни одного блока контента. */
@media (max-width: 640px) {
  .section {
    padding-block: var(--space-xl);
  }

  .section-header {
    margin-bottom: var(--space-lg);
  }

  .catalog-grid,
  .services-grid,
  .regions-grid,
  .reviews-grid {
    gap: var(--space-md);
  }

  .service-card,
  .review-card,
  .contacts__info-card {
    padding: var(--space-md);
  }

  .card__media,
  .region-card__media {
    aspect-ratio: 16 / 10;
  }

  .about__grid {
    gap: var(--space-lg);
  }

  .contacts__grid {
    gap: var(--space-lg);
  }

  .reviews-actions {
    margin-top: var(--space-lg);
  }
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-strong);
  color: var(--color-lime-300);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Дышащее неоновое свечение рамки — как у .hero__eyebrow, но здесь
     повторяется на бейджах всех секций/страниц (Каталог, Услуги, Отзывы,
     FAQ, О компании, Регионы, Контакты). Не мигает рывками — яркость
     плавно нарастает и спадает (neonBadgePulse, см. animations.css). */
  animation: neonBadgePulse 3s ease-in-out infinite;
}

.section-header__eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-lime-400);
  box-shadow: var(--glow-lime);
  flex-shrink: 0;
  animation: pulseGlow 2.4s ease-in-out infinite;
}

.section-header h2 {
  color: var(--color-text-primary);
}

.section-header p {
  margin-top: var(--space-sm);
}

/* ---------- Универсальная карточка (каталог) ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
  transition: transform var(--duration-base) var(--ease-premium), border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

.card:hover,
.card:focus-within {
  transform: translateY(-8px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-elevated);
}

/* Placeholder-плашка вместо реального фото: градиент + мягкий узор +
   иконка-заглушка. Заменяется на <img loading="lazy"> по мере готовности
   фотоматериалов (см. комментарии "ЗАМЕНИТЬ" рядом с каждым блоком). */
.card__media,
.about__media,
.region-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-green-900), var(--color-graphite-800) 60%, var(--color-emerald-700));
  color: rgba(255, 255, 255, 0.28);
}

.card__media::before,
.about__media::before,
.region-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
}

.card__media svg,
.about__media svg,
.region-card__media svg {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  transition: transform var(--duration-slow) var(--ease-premium);
}

.card:hover .card__media svg,
.region-card:hover .region-card__media svg {
  transform: scale(1.08);
}

.card__media {
  aspect-ratio: 4 / 3;
}

.card__media:has(img) {
  background: var(--color-graphite-900);
  color: transparent;
}

.card__media:has(img)::before {
  content: none;
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-premium);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__badge {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: 2;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  background: rgba(10, 15, 13, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-strong);
  color: var(--color-lime-300);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ID объекта — на карточке (каталог вилл + аренда) и внутри папки объекта
   (rental-lightbox), переливается неоном от белого к синему. Только
   визуальное дополнение, верстка карточек/лайтбокса не меняется. */
.card__id-badge {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  z-index: 2;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(10, 15, 13, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  animation: idBadgeNeon 2.4s ease-in-out infinite;
}

.rental-lightbox__id-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  background: rgba(10, 15, 13, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: idBadgeNeon 2.4s ease-in-out infinite;
}

@keyframes idBadgeNeon {
  0%, 100% {
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.55), 0 0 10px rgba(120, 170, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.55);
  }
  50% {
    color: #6fb1ff;
    text-shadow: 0 0 8px rgba(111, 177, 255, 0.9), 0 0 20px rgba(64, 132, 255, 0.7);
    border-color: rgba(111, 177, 255, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__id-badge,
  .rental-lightbox__id-badge {
    animation: none;
    color: #ffffff;
  }
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.card__body h3 {
  font-size: 1.3rem;
}

.card__location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
}

.card__location svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-emerald-500);
}

.card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block: 1px solid var(--color-border-subtle);
}

.card__features li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.card__features svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-tertiary);
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
}

.card__price {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.3;
  color: var(--color-lime-300);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.card__link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--duration-base) var(--ease-premium);
}

.card__link:hover svg,
.card__link:focus-visible svg {
  transform: translateX(4px);
}

html[dir='rtl'] .card__link:hover svg,
html[dir='rtl'] .card__link:focus-visible svg {
  transform: translateX(-4px) scaleX(-1);
}

html[dir='rtl'] .card__link svg {
  transform: scaleX(-1);
}

/* Группа из 2 CTA в футере карточки (каталог вилл: "Узнать больше" +
   "Забронировать") — сама .card__footer остаётся flex с 2 детьми
   (цена + эта группа), верстка/адаптивность карточек не меняются. */
.card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Кнопка "Забронировать" (любая карточка с [data-book-open] — аренда и
   каталог вилл) мягко мигает неоновым красным 2 раза в секунду, чтобы
   привлекать внимание без изменения формы/расположения самой кнопки. */
[data-book-open] {
  animation: bookButtonNeon 0.5s ease-in-out infinite;
}

[data-book-open] svg {
  animation: bookButtonNeonIcon 0.5s ease-in-out infinite;
}

@keyframes bookButtonNeon {
  0%, 100% {
    color: var(--color-text-primary);
    text-shadow: 0 0 3px rgba(255, 107, 129, 0.25);
  }
  50% {
    color: var(--color-error);
    text-shadow: 0 0 8px rgba(255, 107, 129, 0.85), 0 0 16px rgba(255, 107, 129, 0.55);
  }
}

@keyframes bookButtonNeonIcon {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 107, 129, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(255, 107, 129, 0.85));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-book-open],
  [data-book-open] svg {
    animation: none;
  }
}

/* ---------- Аренда на длительный срок (#long-term-rental, catalog.html) ----------
   30 карточек (js/components/rentals.js): сетка 3×10, клик открывает
   папку со всеми фото сразу (адаптивная сетка) + просмотр одной фото. */

.rental-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .rental-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .rental-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.rental-card {
  cursor: pointer;
  animation: rentalCardIn 0.5s var(--ease-premium) both;
}

.rental-card .card__media {
  position: relative;
}

.rental-card__count {
  position: absolute;
  inset-block-end: var(--space-sm);
  inset-inline-end: var(--space-sm);
  z-index: 1;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(8, 12, 10, 0.72);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rental-card__btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.rental-card__campus {
  margin: -0.15rem 0 0.15rem;
  color: var(--color-text-tertiary);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* ---------- Папка объекта (#rental-lightbox) ---------- */

.rental-lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-premium), visibility 0s linear var(--duration-base);
}

.rental-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease-premium), visibility 0s linear 0s;
}

body.rental-lightbox-open {
  overflow: hidden;
}

.rental-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 8, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rental-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  max-height: min(92vh, 920px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(165deg, rgba(28, 48, 38, 0.55) 0%, transparent 42%),
    var(--color-graphite-900);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-premium), opacity var(--duration-base) var(--ease-premium);
}

.rental-lightbox.is-open .rental-lightbox__dialog {
  transform: none;
  opacity: 1;
}

.rental-lightbox__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  padding-inline-end: calc(var(--space-lg) + 48px);
  border-block-end: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.rental-lightbox__header-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.rental-lightbox__header h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.25;
}

.rental-lightbox__close {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 15, 13, 0.75);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  transition: background var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}

.rental-lightbox__close:hover,
.rental-lightbox__close:focus-visible {
  background: var(--color-emerald-700);
  transform: scale(1.06);
}

.rental-lightbox__close svg {
  width: 18px;
  height: 18px;
}

.rental-lightbox__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 0;
}

.rental-lightbox__location {
  color: var(--color-text-tertiary);
  font-size: var(--fs-small);
}

.rental-lightbox__price {
  font-family: var(--font-heading);
  color: var(--color-lime-300);
  font-size: 1.15rem;
}

/* Две колонки: описание + условия | оборудование столбиком */
.rental-lightbox__details {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-lg);
  align-items: start;
}

.rental-lightbox__copy,
.rental-lightbox__equip {
  min-width: 0;
}

.rental-lightbox__block-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.rental-lightbox__copy .rental-lightbox__block-title + .rental-lightbox__block-title,
.rental-lightbox__copy .rental-lightbox__description + .rental-lightbox__block-title {
  margin-top: var(--space-md);
}

.rental-lightbox__description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  line-height: 1.55;
  max-width: 42ch;
}

.rental-lightbox__terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.rental-lightbox__terms li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.rental-lightbox__terms svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-lime-300);
}

.rental-lightbox__amenities {
  list-style: none;
  margin: 0;
  padding: 0.65rem 0.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: rgba(8, 14, 11, 0.45);
}

.rental-lightbox__amenities li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--color-text-secondary);
}

.rental-lightbox__amenities svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.rental-lightbox__gallery-heading {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-text-primary);
}

.rental-lightbox__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.rental-lightbox__thumb {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-graphite-950);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: border-color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium), box-shadow var(--duration-fast) var(--ease-premium);
}

.rental-lightbox__thumb:hover,
.rental-lightbox__thumb:focus-visible {
  border-color: var(--color-lime-300);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  outline: none;
}

.rental-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease-premium);
}

.rental-lightbox__thumb:hover img {
  transform: scale(1.04);
}

.rental-lightbox__thumb-label {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 0.45rem 0.65rem;
  background: linear-gradient(transparent, rgba(6, 10, 8, 0.85));
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  text-align: start;
}

.rental-lightbox__thumb--video {
  border-style: dashed;
}

.rental-lightbox__video-tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-secondary);
  background: linear-gradient(145deg, var(--color-green-900), var(--color-graphite-900) 55%, rgba(52, 120, 80, 0.55));
}

.rental-lightbox__video-tile svg {
  width: 36px;
  height: 36px;
  color: var(--color-lime-300);
}

.rental-lightbox__video-tile strong {
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}

.rental-lightbox__video-tile span {
  font-size: 0.68rem;
  line-height: 1.4;
  max-width: 18ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Просмотр одной фотографии поверх папки ---------- */

.rental-photo-viewer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-premium), visibility 0s linear var(--duration-base);
}

.rental-photo-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease-premium), visibility 0s linear 0s;
}

.rental-photo-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 6, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rental-photo-viewer__close {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 15, 13, 0.8);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  transition: background var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}

.rental-photo-viewer__close:hover,
.rental-photo-viewer__close:focus-visible {
  background: var(--color-emerald-700);
  transform: scale(1.06);
}

.rental-photo-viewer__close svg {
  width: 20px;
  height: 20px;
}

.rental-photo-viewer__media {
  position: relative;
  z-index: 1;
  width: min(100%, 900px);
  max-height: min(72vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rental-photo-viewer__media img {
  max-width: 100%;
  max-height: min(72vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.rental-photo-viewer__video-el {
  width: min(100%, 900px);
  max-height: min(72vh, 640px);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.rental-photo-viewer__video {
  width: min(100%, 520px);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(145deg, var(--color-green-900), var(--color-graphite-900) 60%, var(--color-emerald-700));
}

.rental-photo-viewer__video svg {
  width: 52px;
  height: 52px;
  color: var(--color-lime-300);
}

.rental-photo-viewer__video strong {
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

.rental-photo-viewer__video p {
  max-width: 36ch;
  font-size: var(--fs-small);
}

.rental-photo-viewer__caption {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
}

@media (max-width: 900px) {
  .rental-lightbox__photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-lightbox__details {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .rental-lightbox__description {
    max-width: none;
  }

  .rental-lightbox__amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .rental-lightbox {
    padding: var(--space-sm);
    align-items: stretch;
  }

  .rental-lightbox__dialog {
    max-height: none;
    height: 100%;
    border-radius: var(--radius-md);
  }

  .rental-lightbox__header,
  .rental-lightbox__body {
    padding: var(--space-md);
  }

  .rental-lightbox__header {
    padding-inline-end: calc(var(--space-md) + 44px);
  }

  .rental-lightbox__photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .rental-photo-viewer {
    padding: var(--space-md);
  }

  .rental-photo-viewer__media img {
    max-height: min(62vh, 480px);
  }
}

@media (max-width: 380px) {
  .rental-lightbox__photos {
    grid-template-columns: 1fr;
  }
}

/* ---------- Каталог (#catalog) ---------- */

.catalog-grid {
  display: grid;
  /* min(280px, 100%) — на узких экранах карточка не шире вьюпорта;
     auto-fill держит ровные колонки при 36 объектах. */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-lg);
}

/* ---------- Наши услуги (#services) ---------- */

.service-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  gap: var(--space-xl);
  align-items: stretch;
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.12), transparent 55%),
    var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
  border-inline-start: 3px solid var(--color-lime-400);
}

.service-featured__main .service-card__index {
  margin-bottom: var(--space-xs);
}

.service-featured__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lime-300);
}

.service-featured__main h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  margin-bottom: var(--space-md);
  max-width: 22ch;
}

.service-featured__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}

.service-featured__points li {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.service-featured__points li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--gradient-emerald);
  flex-shrink: 0;
}

.service-featured__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3xs);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--color-border-subtle);
}

.service-featured__price-label,
.service-featured__price-note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.service-featured__price {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  background: var(--gradient-emerald);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.service-featured__cta {
  margin-top: var(--space-md);
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-wrap: balance;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.service-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  height: auto;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent 55%),
    var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
  border-inline-start: 3px solid var(--color-lime-400);
  transition: transform var(--duration-base) var(--ease-premium), border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

.service-card:hover {
  transform: translateY(-4px);
  border-top-color: transparent;
  box-shadow: var(--shadow-elevated);
}

.service-card__index {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  line-height: 1;
  background: var(--gradient-emerald);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.service-card__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.service-card h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  margin-bottom: var(--space-sm);
}

.service-card p {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 42ch;
}

.service-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: 220px;
  height: 100%;
  background: var(--color-graphite-900);
  border: 1px solid var(--color-border-subtle);
}

.service-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-premium);
}

.service-card:hover .service-card__media img {
  transform: scale(1.04);
}

.service-card--lead {
  margin-bottom: var(--space-lg);
  padding: var(--space-xl);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  gap: var(--space-xl);
}

.service-card--lead .service-featured__eyebrow {
  margin-bottom: var(--space-xs);
}

.service-card--lead h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  max-width: 24ch;
}

.service-card--lead p {
  max-width: 48ch;
  margin-bottom: var(--space-md);
}

.service-card__cta {
  align-self: flex-start;
  margin-top: auto;
  white-space: normal;
  text-wrap: balance;
}

.service-card--lead .service-card__media {
  min-height: 280px;
}

@media (max-width: 1024px) {
  .service-featured {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .service-featured__main h3 {
    max-width: none;
  }

  .service-card,
  .service-card--lead {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .service-card--lead {
    padding: var(--space-lg);
  }

  .service-card--lead h3 {
    max-width: none;
  }

  .service-card--lead p {
    max-width: none;
  }

  .service-card__media,
  .service-card--lead .service-card__media {
    min-height: 200px;
    aspect-ratio: 16 / 10;
  }

  .service-card p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .service-featured {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border-inline-start-width: 2px;
  }

  .service-featured__aside {
    padding: var(--space-md);
  }

  .service-featured__points {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--space-sm);
  }

  .service-card,
  .service-card--lead {
    padding: var(--space-md);
    border-inline-start-width: 2px;
  }

  .service-card--lead {
    margin-bottom: var(--space-md);
  }

  .service-card__media,
  .service-card--lead .service-card__media {
    min-height: 180px;
  }
}

/* ---------- О компании (#about) ---------- */

.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about__content p {
  margin-top: var(--space-sm);
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
}

.about__stat dt {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-lime-300);
}

.about__stat dd {
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
}

.about__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}

.about__media:has(img) {
  background: var(--color-graphite-900);
  color: transparent;
}

.about__media:has(img)::before {
  content: none;
}

.about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.about__media svg {
  width: 72px;
  height: 72px;
}

.about__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  list-style: none;
}

.about__points li {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.about__points li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--color-lime-400);
  box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.18);
}

.about__points-title {
  display: block;
  margin-bottom: 0.15em;
  font-weight: 700;
  color: var(--color-text-primary);
}

@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__media {
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

@media (max-width: 560px) {
  .about__points {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ---------- Лучшие регионы Франции (#regions) ---------- */

.regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-lg);
}

.region-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
  transition: transform var(--duration-base) var(--ease-premium), border-color var(--duration-base) var(--ease-premium),
    box-shadow var(--duration-base) var(--ease-premium);
}

.region-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-elevated);
}

.region-card__media {
  aspect-ratio: 3 / 2;
}

.region-card__media:has(img) {
  background: var(--color-graphite-900);
  color: transparent;
}

.region-card__media:has(img)::before {
  content: none;
}

.region-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-premium);
}

.region-card:hover .region-card__media img {
  transform: scale(1.04);
}

.region-card__media svg {
  width: 44px;
  height: 44px;
}

.region-card h3 {
  font-size: 1.15rem;
  margin: var(--space-md) var(--space-md) var(--space-3xs);
}

.region-card p {
  margin: 0 var(--space-md) var(--space-md);
  font-size: var(--fs-body);
}

/* ---------- Бегущая строка отзывов (.reviews-marquee, главная страница) ---------- */

.reviews-marquee {
  position: relative;
  padding-block: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border-block: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

/* На reviews.html лента отзывов — первый блок под фиксированной шапкой
   (нет hero). Селектор из двух классов специфичнее одноклассового
   правила .reviews-marquee выше — переопределяет верхний паддинг
   независимо от порядка объявления. */
.reviews-marquee.section--page-intro {
  padding-block-start: calc(var(--header-height) + var(--space-lg));
}

@media (max-width: 640px) {
  .reviews-marquee.section--page-intro {
    padding-block-start: calc(var(--header-height) + var(--space-sm));
  }
}

.reviews-marquee__viewport {
  overflow: hidden;
  /* Затухание по краям — трек выглядит бесконечным, без резкого обрыва */
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.reviews-marquee__track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  animation: reviews-marquee-scroll 70s linear infinite;
}

.reviews-marquee:hover .reviews-marquee__track,
.reviews-marquee:focus-within .reviews-marquee__track {
  animation-play-state: paused;
}

.reviews-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: min(360px, 80vw);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
}

.reviews-marquee__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-emerald);
  color: var(--color-text-on-accent);
  font-size: var(--fs-small);
  font-weight: 700;
}

.reviews-marquee__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.reviews-marquee__rating {
  display: flex;
  gap: 0.15rem;
  color: var(--color-lime-400);
}

.reviews-marquee__rating svg {
  width: 12px;
  height: 12px;
}

.reviews-marquee__rating svg.is-empty {
  opacity: 0.25;
}

.reviews-marquee__text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviews-marquee__author {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Отзывы клиентов (#reviews) ---------- */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-lg);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
  animation: reviewCardIn 0.5s var(--ease-premium) both;
}

.review-card__quote {
  width: 28px;
  height: 28px;
  color: var(--color-emerald-500);
  opacity: 0.7;
}

.review-card__rating {
  display: flex;
  gap: 0.2rem;
  color: var(--color-lime-400);
}

.review-card__rating svg {
  width: 15px;
  height: 15px;
}

.review-card__rating svg.is-empty {
  opacity: 0.25;
}

.review-card p {
  font-size: var(--fs-body);
  flex-grow: 1;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.review-card__author div {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
}

.review-card__author strong {
  color: var(--color-text-primary);
}

.review-card__author span {
  color: var(--color-text-tertiary);
}

.review-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-emerald);
  color: var(--color-text-on-accent);
  font-size: var(--fs-small);
  font-weight: 700;
}

.reviews-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  text-align: center;
}

.reviews-actions__count {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
}

.reviews-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* ---------- Тост "не клиент" (кнопка "Оставить отзыв") ---------- */

.reviews-toast {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: var(--space-lg);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: min(420px, calc(100vw - var(--space-lg) * 2));
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(10, 15, 13, 0.95);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-premium), transform var(--duration-base) var(--ease-premium),
    visibility 0s linear var(--duration-base);
}

.reviews-toast.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  /* Без задержки для visibility — иначе, как и в базовом правиле выше,
     переход "скрыт -> виден" тоже откладывался бы на --duration-base */
  transition: opacity var(--duration-base) var(--ease-premium), transform var(--duration-base) var(--ease-premium);
  animation: toastSlideIn 0.35s var(--ease-premium);
}

.reviews-toast__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--color-lime-400);
}

.reviews-toast__body {
  flex-grow: 1;
  min-width: 0;
}

.reviews-toast__message {
  margin: 0;
  font-weight: 700;
  color: var(--color-text-primary);
}

.reviews-toast__hint {
  margin: 0.25rem 0 0;
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
}

.reviews-toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--color-text-tertiary);
  transition: color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium);
}

.reviews-toast__close:hover,
.reviews-toast__close:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-surface-glass);
}

.reviews-toast__close svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 640px) {
  .reviews-marquee__item {
    width: min(300px, 82vw);
  }

  /* Поднимаем тост выше .mobile-quickbar (см. css/layout/header.css),
     иначе плавающая панель быстрых действий перекрывает его снизу. */
  .reviews-toast {
    inset-block-end: calc(76px + env(safe-area-inset-bottom));
  }
}

/* ---------- FAQ (#faq) ---------- */

.faq-list {
  max-width: 800px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding-block: var(--space-md);
  text-align: start;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.faq-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-emerald-500);
  transition: transform var(--duration-base) var(--ease-premium);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
  color: var(--color-lime-400);
}

/* Плавная высота без вычисления px в JS: анимируем grid-template-rows
   0fr -> 1fr, содержимое обёрнуто во внутренний div с overflow:hidden */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-slow) var(--ease-premium);
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__answer-inner {
  overflow: hidden;
}

.faq-item__answer p {
  padding-bottom: var(--space-md);
}

/* ---------- Контакты, форма, карта (contacts.html #contacts) ---------- */

.contacts__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: start;
}

.contacts__form-col > p {
  margin-bottom: var(--space-lg);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form__field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  transition: border-color var(--duration-base) var(--ease-premium), box-shadow var(--duration-base) var(--ease-premium);
}

/* Телефон: select (+код страны) + маска номера с X (контакт + модалка). */
.contact-form__phone {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.contact-form__phone select {
  flex: 0 0 auto;
  width: 7.25rem;
  max-width: 42%;
  padding-inline: 0.5rem;
  cursor: pointer;
}

.contact-form__phone input {
  flex: 1 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Телефон с маской на всю ширину ряда — иначе select+input «уезжают». */
.contact-form__row > .contact-form__field:has(.contact-form__phone) {
  grid-column: 1 / -1;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--color-text-tertiary);
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible,
.contact-form__field select:focus-visible {
  border-color: var(--color-emerald-500);
  box-shadow: var(--glow-emerald);
  outline: none;
}

.contact-form__field input.is-invalid,
.contact-form__field textarea.is-invalid,
.contact-form__field select.is-invalid {
  border-color: var(--color-error);
}

.contact-form__error {
  display: none;
  font-size: var(--fs-small);
  color: var(--color-error);
}

.contact-form__error.is-visible {
  display: block;
}

.contact-form__consent {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.contact-form__consent input {
  margin-block-start: 0.2rem;
  accent-color: var(--color-emerald-500);
}

.contact-form__consent .contact-form__error {
  grid-column: 2;
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.contact-form__submit-error {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-error);
}

.contact-form__success {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-lime-300);
}

/* ---------- Модалка "Забронировать" (кнопка на карточках аренды и
   каталога, js/components/booking-form.js) — переиспользует классы
   .contact-form* выше для полей, здесь только каркас окна поверх страницы,
   по образцу .rental-lightbox. ---------- */

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(0.75rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(0.75rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-premium), visibility 0s linear var(--duration-base);
}

.booking-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-base) var(--ease-premium), visibility 0s linear 0s;
}

body.booking-modal-open {
  overflow: hidden;
}

.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 8, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.booking-modal__dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(480px, 100%);
  max-width: 100%;
  max-height: min(92dvh, 92vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background:
    linear-gradient(165deg, rgba(28, 48, 38, 0.55) 0%, transparent 42%),
    var(--color-graphite-900);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-premium), opacity var(--duration-base) var(--ease-premium);
}

.booking-modal.is-open .booking-modal__dialog {
  transform: none;
  opacity: 1;
}

.booking-modal__close {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 15, 13, 0.75);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  transition: background var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium);
}

.booking-modal__close:hover,
.booking-modal__close:focus-visible {
  background: var(--color-emerald-700);
  transform: scale(1.06);
}

.booking-modal__close svg {
  width: 16px;
  height: 16px;
}

.booking-modal__title {
  padding-inline-end: var(--space-xl);
  font-size: 1.35rem;
}

.booking-modal__subtitle {
  margin: -0.35rem 0 var(--space-xs);
  color: var(--color-text-tertiary);
  font-size: var(--fs-small);
}

.booking-modal__success {
  margin-top: var(--space-sm);
}

.contacts__info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contacts__info-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
}

.contacts__info-card h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-md);
}

.contacts__info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contacts__info-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
}

.contacts__info-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.contacts__info-emoji {
  width: 20px;
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

.contacts__info-list a {
  color: var(--color-text-primary);
  transition: color var(--duration-base) var(--ease-premium);
}

.contacts__info-list a:hover,
.contacts__info-list a:focus-visible {
  color: var(--color-lime-300);
}

/* Подпись над значением (Phone/WhatsApp/E-mail/Adresse) в блоке контактов. */
.contacts__info-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.contacts__info-label {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* WhatsApp в блоке контактов мягко мигает зелёным 2 раза в секунду —
   привлекает внимание к каналу связи без изменения расположения/размера
   иконки (тот же приём, что и bookButtonNeon для кнопки "Забронировать"). */
.contacts__info-item--whatsapp svg {
  color: var(--color-emerald-500);
  animation: contactsWhatsappBlink 0.5s ease-in-out infinite;
}

@keyframes contactsWhatsappBlink {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(37, 211, 102, 0.35));
  }
  50% {
    opacity: 0.6;
    filter: drop-shadow(0 0 7px rgba(37, 211, 102, 0.85));
  }
}

@media (prefers-reduced-motion: reduce) {
  .contacts__info-item--whatsapp svg {
    animation: none;
  }
}

.contacts__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  aspect-ratio: 16 / 10;
  filter: grayscale(0.35) contrast(1.05) brightness(0.92);
}

.contacts__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 900px) {
  .contacts__grid {
    grid-template-columns: 1fr;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .booking-modal__dialog {
    padding: var(--space-lg) var(--space-md);
  }

  .booking-modal .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-form__phone {
    display: grid;
    grid-template-columns: minmax(6.5rem, 7.5rem) minmax(0, 1fr);
    gap: 0.45rem;
  }

  .contact-form__phone select {
    width: 100%;
    max-width: none;
  }

  .contact-form__phone input {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .contact-form__phone {
    grid-template-columns: 1fr;
  }
}