/* ============================================================
   style.css — Публичный сайт ENNIK Недвижимость
   Тёмная тема, акцентный цвет #e8450a (оранжево-красный)
   ============================================================ */

/* Подключаем шрифты Google:
   - Montserrat: основной шрифт всего сайта (заголовки, текст, кнопки)
   - Bebas Neue: декоративный ALL-CAPS шрифт (крупные заголовки, цены) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Bebas+Neue&display=swap');

/* CSS-переменные (кастомные свойства) — изменяя здесь, меняешь цвета по всему сайту */
:root {
  --bg:       #0d0d0d; /* основной фон сайта — почти чёрный */
  --bg2:      #111111; /* чуть светлее: фон секций "Обо мне", "Видео" */
  --bg3:      #181818; /* ещё светлее: фон карточек объектов */
  --accent:   #e8450a; /* акцентный цвет: кнопки, цена, иконки, ссылки */
  --accent2:  #c93a08; /* тёмный акцент: hover-состояние кнопок */
  --text:     #ffffff; /* основной цвет текста */
  --muted:    #888888; /* приглушённый текст: подписи, метки */
  --border:   #222222; /* цвет разделительных линий и рамок */
}

/* Сброс браузерных стилей: box-sizing border-box — размеры элементов
   включают padding и border (не увеличивают блок) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Плавная прокрутка при переходе по якорным ссылкам (#about, #contact и т.д.) */
html { scroll-behavior: smooth; }

/* Базовые стили тела документа */
body {
  font-family: 'Montserrat', sans-serif; /* основной шрифт */
  background: var(--bg);                 /* тёмный фон */
  color: var(--text);                    /* белый текст */
  overflow-x: hidden;                   /* скрываем горизонтальный скролл (карусели могут выходить за край) */
}

/* Убираем подчёркивание у всех ссылок; цвет наследуется от родителя */
a { text-decoration: none; color: inherit; }

/* Изображения не выходят за пределы контейнера; block устраняет пустое пространство снизу */
img { display: block; max-width: 100%; }

/* ── Утилитарные классы ──────────────────────────────────────────────────── */

/* Маленький акцентный лейбл над заголовками ("ОБЪЕКТЫ", "ОБО МНЕ" и т.д.) */
.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;       /* разрядка букв для эффекта КАПС */
  text-transform: uppercase;
  color: var(--accent);      /* оранжево-красный */
  margin-bottom: 12px;
}

/* Большой декоративный заголовок секций: использует Bebas Neue, адаптивный размер */
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 4vw, 42px); /* clamp(мин, предпочт, макс) — адаптивный размер без медиазапросов */
  font-weight: 400;                  /* Bebas Neue не имеет жирных начертаний */
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 1px;
}

/* Подзаголовок под section-title: серый и маленький */
.section-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

/* Базовый стиль кнопки — используется с модификаторами .btn-primary / .btn-outline */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .25s ease;
}

/* Главная CTA-кнопка: оранжевый фон */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Hover-состояние: чуть темнее оранжевый */
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }

/* Контурная кнопка: прозрачный фон с белой рамкой */
.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5); /* полупрозрачная рамка */
}
/* Hover: рамка становится ярче, слабый белый фон */
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.07); }

/* ── Анимация появления при прокрутке ────────────────────────────────────── */
/* Начальное состояние: невидимый и смещён вниз */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
/* Конечное состояние (добавляет JS через IntersectionObserver в main.js) */
.fade-in.visible { opacity: 1; transform: none; }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
/* Шапка зафиксирована вверху экрана и не прокручивается */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;                         /* выше любого другого контента */
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background .3s, box-shadow .3s;
}
/* При прокрутке страницы — JS добавляет .scrolled: шапка становится тёмной с размытием */
.header.scrolled {
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(12px);           /* размытие фона под шапкой (glassmorphism) */
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* Логотип: горизонтальный flex с именем и подписью */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Имя "Никита Енник" в крупном акцентном КАПСЕ */
.logo-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}
/* Подпись "Загородная недвижимость" — маленькая, серая, с левой границей */
.logo-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  border-left: 1px solid var(--border); /* вертикальная разделительная линия */
  padding-left: 12px;
  display: inline-block;
  max-width: 90px;
}
/* Невидимый элемент-перенос строки внутри .logo-sub (только для переноса "Загородная / недвижимость") */
.logo-sub-br { display: block; height: 0; }

/* Мобильный логотип (аббревиатура "НЕ") — скрыт на десктопе */
.logo-mobile {
  display: none;                         /* показывается только на мобильных через медиазапрос */
  align-items: center;
  gap: 10px;
}
/* Буквы "НЕ" (Никита Енник) — жирные, акцентный цвет */
.logo-mobile b {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
/* Маленькая подпись рядом с аббревиатурой */
.logo-mobile-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  border-left: 1px solid var(--border);
  padding-left: 10px;
}

/* Горизонтальное меню навигации в шапке */
.nav { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.nav a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75); /* слегка прозрачный белый */
  transition: color .2s;
}
.nav a:hover { color: var(--accent); } /* hover: акцентный оранжевый */

/* Правая часть шапки: телефон + кнопка "Связаться" */
.header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
/* Телефон в шапке — акцентный цвет */
.header-phone {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.header-phone:hover { color: var(--accent2); }

/* Кнопка-бургер (☰) — три горизонтальные полоски */
.burger {
  display: none;             /* скрыта на десктопе */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: all .3s;       /* для анимации превращения в "×" (если добавить JS) */
}

/* Мобильное меню — выпадает под шапкой при клике на бургер */
.mobile-nav {
  display: none;             /* скрыто по умолчанию */
  position: fixed;
  top: 72px; left: 0; right: 0; /* ровно под шапкой (72px — высота .header) */
  background: rgba(10,10,10,.97);
  backdrop-filter: blur(12px);
  padding: 30px 24px;
  z-index: 999;              /* под шапкой (1000), но выше контента */
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--border);
}
/* JS добавляет .open — меню появляется */
.mobile-nav.open { display: flex; }
/* Ссылки в мобильном меню: крупнее, с разделительными линиями */
.mobile-nav a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
/* Секция-герой: на всю высоту экрана, фоновое изображение */
.hero {
  position: relative;
  min-height: 100vh;         /* не менее высоты экрана */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Фон героя: градиент-затемнение слева + фото */
.hero-bg {
  position: absolute;
  inset: 0;                  /* растягиваем на весь блок (top/right/bottom/left: 0) */
  background:
    linear-gradient(to right, rgba(0,0,0,.6) 45%, rgba(0,0,0,.1) 100%),
    /* тёмный слой слева (для читаемости текста), прозрачный справа */
    url('/static/uploads/hero-bg.jpg') center/cover no-repeat;
    /* фоновое фото: покрывает всю площадь, по центру */
}

/* Контент героя: текст поверх фона */
.hero-content {
  position: relative;
  z-index: 2;                /* выше фона */
  padding: 160px 60px 80px; /* 160px сверху — компенсация высоты шапки (72px) + отступ */
  max-width: 780px;
  overflow: hidden;
}

.hero-content .label { margin-bottom: 20px; } /* маленький лейбл сверху */

/* Главный заголовок героя: Bebas Neue, очень крупный */
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 2px;
  margin-bottom: 24px;
}

/* Подзаголовок героя: курсив, приглушённый */
.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  margin-bottom: 44px;
  font-style: italic;
}

/* Контейнер кнопок героя */
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }

/* Вертикальная колонка кнопок (кнопка + ссылка-подпись) */
.hero-btn-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Блок с телефоном в герое */
.hero-phone {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Маленькая подпись "ТЕЛЕФОН" над номером */
.hero-phone-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4); /* очень тусклый белый */
}

/* Номер телефона в героях: Bebas Neue, полупрозрачный */
.hero-phone-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
  color: rgba(255,255,255,.75);
  transition: color .2s;
}
.hero-phone-num:hover { color: #fff; }

/* Маленькая текстовая ссылка в герое (например "Смотреть все объекты →") */
.hero-sublink {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
  padding: 4px 0;
}
.hero-sublink:hover { color: rgba(255,255,255,.75); }


/* ── ABOUT ────────────────────────────────────────────────────────────────── */
/* Секция "Обо мне": двухколоночная сетка (фото слева, текст справа) */
.about {
  padding: 100px 60px;
  display: grid;
  grid-template-columns: 400px 1fr; /* фиксированная ширина фото 400px, текст — остаток */
  gap: 60px;
  align-items: center;
  background: var(--bg2);           /* чуть светлее основного фона */
}

/* Контейнер фото: скрывает выступающие части */
.about-photos {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;              /* пропорция портретного фото */
  margin: 0;
  overflow: hidden;
}
/* Само фото: заполняет контейнер, выравнивается по верхнему центру */
.about-photo-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;      /* кадрирование сверху — голова не обрезается */
  display: block;
}
/* Псевдоэлемент: тёмный оверлей с виньеткой по краям фото */
.about-photos::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.95) 110%),
    /* радиальная виньетка: прозрачный центр, тёмные края */
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 25%, transparent 70%, rgba(0,0,0,.6) 100%);
    /* горизонтальный градиент: тёмный верх и низ для плавного слияния с фоном */
  pointer-events: none;             /* не перехватывает клики */
}

.about-content .section-title { margin-bottom: 20px; }

/* Основной текст раздела "Обо мне" */
.about-text {
  font-size: 14px;
  line-height: 1.8;                 /* увеличенный межстрочный интервал для читаемости */
  color: rgba(255,255,255,.65);
  margin-bottom: 44px;
}

/* Сетка статистических показателей (4 блока: "15 лет", "200 объектов" и т.д.) */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat { display: flex; flex-direction: column; }
/* Иконка-SVG перед каждым показателем */
.stat-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: 14px;
}
/* Числовое значение показателя (большой жирный текст) */
.stat-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}
/* Подпись под показателем (маленький серый) */
.stat-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* Блок соцсетей в разделе "Обо мне" */
.about-socials {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 36px;
}
.about-socials-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-socials-title,
.about-socials-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.about-socials-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Ссылки соцсетей в "Обо мне": иконка + текст */
.about-social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color .2s;
}
.about-social-link:hover { color: #fff; }
.about-social-link svg { flex-shrink: 0; } /* SVG-иконка не сжимается при переполнении */

/* ── PROPERTIES ───────────────────────────────────────────────────────────── */
/* Секция "Объекты" на главной: горизонтальная карусель карточек */
.properties { padding: 100px 60px; }

/* Шапка секции: заголовок + телефон справа */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

/* Контактный блок справа от заголовка (телефон) */
.section-header-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Маленькая подпись "Позвонить" над телефоном */
.section-header-contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Номер телефона в шапке секции: крупный, Bebas Neue, акцент */
.section-header-phone {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 2px;
  transition: color .2s;
}
.section-header-phone:hover { color: var(--accent2); }

/* Ссылка "Смотреть все →" */
.see-all {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
}
.see-all:hover { color: var(--accent); }
.see-all::after { content: '→'; font-size: 14px; } /* стрелка после текста через псевдоэлемент */

/* Обёртка карусели: стрелка + сетка + стрелка */
.carousel-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Сетка карточек карусели: 4 в ряд на десктопе */
.carousel {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  overflow: hidden;
}

/* Карточка объекта недвижимости */
.prop-card {
  background: var(--bg3);
  overflow: hidden;
  transition: transform .3s;
  cursor: pointer;           /* весь блок кликабелен (main.js перехватывает клик) */
}
/* Hover: карточка слегка поднимается вверх */
.prop-card:hover { transform: translateY(-6px); }

/* Блок фото в карточке: фиксированная высота, скрывает выступающее фото */
.prop-card-img {
  position: relative;       /* для абсолютного позиционирования стрелок и точек */
  height: 200px;
  overflow: hidden;
}
.prop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
/* Hover: фото чуть увеличивается (zoom-эффект) */
.prop-card:hover .prop-card-img img { transform: scale(1.06); }

/* Текстовая часть карточки */
.prop-card-body { padding: 16px; }

/* Локация: маленький акцентный текст ("Сочи, Адлер") */
.prop-location { font-size: 11px; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
/* Название объекта */
.prop-title { font-size: 16px; font-weight: 800; margin-bottom: 8px; line-height: 1.2; }
/* Характеристики: площадь, разделённые "·" */
.prop-specs { font-size: 11px; color: var(--muted); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.prop-specs span::after { content: ' ·'; }        /* разделитель между характеристиками */
.prop-specs span:last-child::after { content: ''; } /* у последнего разделителя нет */

/* Нижняя часть карточки: цена + кнопка */
.prop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Цена объекта: крупная и жирная */
.prop-price { font-size: 18px; font-weight: 900; color: #fff; }
.prop-price span { font-size: 12px; color: var(--muted); font-weight: 500; } /* символ "₽" */

/* Кнопка "Смотреть" в карточке */
.prop-btn {
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.prop-btn:hover { background: var(--accent2); }

/* Кнопки-стрелки карусели (◄ / ►) */
.carousel-arrow {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--accent);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.carousel-arrow:hover { background: var(--accent2); }

/* Заглушка когда объектов нет */
.no-props {
  grid-column: 1/-1;         /* растянуть на все колонки сетки */
  text-align: center;
  padding: 60px;
  color: var(--muted);
  font-size: 14px;
}

/* ── VIDEO ────────────────────────────────────────────────────────────────── */
/* Секция видео: двухколоночная сетка (текст слева, видео справа) */
.video-section {
  padding: 100px 60px;
  background: var(--bg2);
  display: grid;
  grid-template-columns: 440px 1fr; /* фиксированная ширина текстовой части */
  column-gap: 80px;
  row-gap: 0;
  align-items: start;
}

.video-left .section-title { margin-bottom: 20px; }
.video-left .btn { margin-top: 32px; }

/* CTA-блок под секцией видео (на всю ширину) */
.video-cta {
  grid-column: 1 / -1;       /* spanning all columns */
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
/* CTA-блок под секцией объектов */
.properties-cta {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Сетка видео-карточек: 3 в ряд */
.video-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Видео-карточка */
.video-card { cursor: pointer; }

/* Блок превью видео */
.video-thumb {
  position: relative;         /* для абсолютного позиционирования кнопки Play */
  height: 180px;
  overflow: hidden;
  background: #1a1a1a;        /* заглушка пока грузится превью */
  margin-bottom: 12px;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;                /* немного затемняем, чтобы кнопка Play была видна */
  transition: opacity .3s, transform .3s;
}
/* Hover: темнее + лёгкий zoom */
.video-card:hover .video-thumb img { opacity: .5; transform: scale(1.05); }

/* Кнопка Play по центру превью */
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);  /* точно по центру */
  width: 52px; height: 52px;
  background: rgba(232,69,10,.85);   /* полупрозрачный акцент */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform .2s, background .2s;
}
/* Hover: кнопка немного увеличивается */
.video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); }

/* Длительность видео: маленький бейдж в правом нижнем углу превью */
.video-duration {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(0,0,0,.7);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
}

/* Название видео под превью */
.video-title { font-size: 13px; font-weight: 600; line-height: 1.4; }

/* ── WHY ME ───────────────────────────────────────────────────────────────── */
/* Секция "Почему я": двухколоночная (текст слева, список преимуществ справа) */
.why-section {
  padding: 100px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.why-left .section-title { margin-bottom: 40px; }

/* Список преимуществ */
.why-list { display: flex; flex-direction: column; gap: 20px; }

/* Один пункт преимущества: иконка + текст, снизу разделительная линия */
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.why-item:last-child { border-bottom: none; } /* у последнего пункта нет линии */

/* Иконка-квадрат с акцентной рамкой */
.why-icon {
  width: 36px; height: 36px;
  background: rgba(232,69,10,.15);   /* светло-акцентный фон */
  border: 1px solid rgba(232,69,10,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;                    /* не сжимается */
  color: var(--accent);
}

/* Текст пункта преимущества */
.why-text strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.why-text p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── FORM ─────────────────────────────────────────────────────────────────── */
/* Карточка формы заявки (секция "Контакты") */
.form-card {
  background: var(--bg3);
  padding: 40px;
  position: relative;
  overflow: hidden;
}
/* Акцентная полоса сверху формы */
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}

/* Маленький лейбл над заголовком формы */
.form-label-small { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
/* Заголовок формы */
.form-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 3vw, 32px); font-weight: 400; text-transform: uppercase; margin-bottom: 32px; line-height: 1.15; letter-spacing: 1px; }

/* Группа поля формы (обёртка input/select) */
.form-group { margin-bottom: 16px; }

/* Стили всех полей ввода и выпадающих списков в форме */
.form-group input,
.form-group select {
  width: 100%;
  background: rgba(255,255,255,.06);   /* очень тёмный прозрачный фон */
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 14px 18px;
  outline: none;
  transition: border-color .2s;
  appearance: none;                    /* убираем стандартный вид браузера */
}
.form-group input::placeholder { color: var(--muted); }
/* При фокусе — акцентная рамка */
.form-group input:focus,
.form-group select:focus { border-color: var(--accent); }

/* Выпадающий список: кастомная стрелка через data URI */
.form-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.form-group select option { background: #222; color: #fff; } /* стиль опций в выпадающем */

/* Кнопка отправки формы: на всю ширину */
.form-submit { width: 100%; padding: 16px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: background .2s; font-family: inherit; }
.form-submit:hover { background: var(--accent2); }

/* Сообщение об успехе после отправки формы (показывается через JS) */
.form-success { display: none; text-align: center; padding: 20px; color: #4caf50; font-weight: 700; }

/* Блок телефона под формой */
.form-phone-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.form-phone-cta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.form-phone-cta-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: #fff;
  transition: color .2s;
}
.form-phone-cta-num:hover { color: var(--accent); }

/* Сообщение об ошибке валидации формы (показывается через JS при пустых полях) */
.form-error-msg { display: none; color: #f44336; font-size: 13px; margin-top: 8px; }

/* Кнопка "Позвонить" над формой */
.form-call-btn {
  display: block;
  text-align: center;
  padding: 16px 36px;
  font-size: 13px;
  margin-bottom: 28px;
}

/* Контактная информация рядом с формой (телефон + соцсети) */
.form-contacts {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  margin-bottom: 4px;
}
.form-contacts-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-contacts-socials {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

/* Строка контакта: "ТЕЛЕФОН: +7..." */
.form-contact-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.form-contact-row span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.form-contact-row a {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--accent);
  transition: color .2s;
}
.form-contact-row a:hover { color: var(--accent2); }

/* Горизонтальный разделитель внутри блока контактов */
.form-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 28px 0 24px;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
/* Подвал: тёмный фон, горизонтальный flex: логотип | навигация | соцсети */
.footer {
  background: #080808;
  padding: 28px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
}

/* Навигация в подвале */
.footer-nav { display: flex; gap: 28px; }
.footer-nav a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}
.footer-nav a:hover { color: var(--accent); }

/* Иконки соцсетей в подвале: квадратные кнопки с рамкой */
.socials { display: flex; gap: 16px; }
.social-link {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 16px;
  transition: all .2s;
}
.social-link:hover { border-color: var(--accent); color: var(--accent); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
/* Планшетный и мобильный breakpoint: скрываем десктопную навигацию, показываем бургер */
@media (max-width: 1100px) {
  .carousel { grid-template-columns: repeat(2, 1fr); } /* 4 карточки → 2 */
  .video-grid { grid-template-columns: repeat(2, 1fr); } /* 3 видео → 2 */
  .stats { grid-template-columns: repeat(2, 1fr); } /* 4 статы → 2×2 */
  .about { gap: 48px; }
  .header { padding: 0 24px; }
  .nav, .header-phone, .header .btn { display: none; } /* скрываем nav и телефон */
  .burger { display: flex; } /* показываем бургер */
}

/* Планшет узкий: перекомпоновка секции "Обо мне" */
@media (max-width: 900px) {
  .hero-content { padding: 100px 24px 60px; }
  .hero-title { font-size: clamp(28px, 8vw, 48px); }

  /* "Обо мне": маленькое фото слева, текст сверху справа, характеристики снизу */
  .about {
    grid-template-columns: 150px 1fr;
    grid-template-areas:
      "photo head"
      "body  body"
      "stats stats";
    gap: 18px 18px;
    padding: 60px 20px;
    align-items: start;
  }
  .about-photos {
    grid-area: photo;
    aspect-ratio: 4 / 5;
    max-width: none;
    width: 150px;
    border-radius: 4px;
  }
  .about-photo-main {
    transform: scale(1.12);         /* лёгкое увеличение чтобы не было пустого места */
    transform-origin: center 32%;  /* точка трансформации сдвинута вверх */
  }
  .about-content { display: contents; } /* разворачиваем содержимое в родительский грид */
  .about-head    { grid-area: head; align-self: center; }
  .about-text    { grid-area: body; margin-top: 8px; }
  .stats         { grid-area: stats; margin-top: 8px; }

  .about-head .section-title { font-size: clamp(20px, 5.5vw, 28px); }
  .about-head .label         { margin-bottom: 8px; }

  /* Упрощаем виньетку на мобильном */
  .about-photos::after {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%);
  }

  .properties { padding: 60px 24px; }
  .carousel { grid-template-columns: repeat(2, 1fr); }
  .carousel-arrow { width: 40px; height: 40px; font-size: 18px; }

  /* Секция видео: одна колонка на планшете */
  .video-section { grid-template-columns: 1fr; padding: 60px 24px; column-gap: 40px; row-gap: 32px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .video-left .section-title { margin-bottom: 8px; }


  .why-section { grid-template-columns: 1fr; padding: 60px 24px; gap: 40px; }

  /* Подвал на мобильном: вертикальный */
  .footer { flex-direction: column; gap: 20px; padding: 28px 24px; text-align: center; }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }

}

/* Мобильные телефоны */
@media (max-width: 600px) {
  /* Скрываем полный логотип, показываем аббревиатуру "НЕ" */
  .header .logo-name,
  .header .logo-sub { display: none; }
  .header .logo-mobile { display: inline-flex; }

  /* На мобильном фото героя смещаем чуть правее */
  .hero-bg {
    background:
      linear-gradient(to right, rgba(0,0,0,.6) 45%, rgba(0,0,0,.1) 100%),
      url('/static/uploads/hero-bg.jpg') 15% center / cover no-repeat;
  }
  .carousel { grid-template-columns: 1fr; }  /* одна карточка в ряд */
  .video-grid { grid-template-columns: 1fr; } /* одно видео в ряд */
  .prop-price { font-size: 14px; white-space: nowrap; }
  /* Кнопки героя: вертикально, на всю ширину */
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-btn-col { width: 100%; }
  .hero-phone-num { font-size: 15px; letter-spacing: 1px; }
  .section-header-phone { font-size: 18px; letter-spacing: 1px; }
  .stats { grid-template-columns: repeat(2, 1fr); } /* 4 → 2×2 */
  /* Шапка секции: вертикально */
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-header-contact { align-items: flex-start; }
  .form-card { padding: 28px 20px; }
}

@media (max-width: 480px) {
  .about { grid-template-columns: 120px 1fr; gap: 14px; padding: 50px 16px; }
  .about-photos { width: 120px; }
}

/* ── Стрелки листания фото внутри карточки ───────────────────────────────── */
/* Круглые кнопки ‹ / › накладываются на фото-блок карточки */
.card-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.55); color: #fff; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; line-height: 1; cursor: pointer;
  opacity: 1;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;                /* выше фото */
}
.card-prev { left: 8px; }   /* левая стрелка */
.card-next { right: 8px; }  /* правая стрелка */

/* Точки-индикаторы под фото карточки */
.card-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%); /* центрируем горизонтально */
  display: flex;
  gap: 5px;
  z-index: 3;
}
.card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.4); /* неактивная точка — полупрозрачная */
  transition: background .2s, transform .2s;
}
/* Активная точка: белая и чуть крупнее */
.card-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* ── Страница детали объекта (/property/<id>) ────────────────────────────── */
/* Основная секция: отступ сверху (компенсация фиксированной шапки) */
.property-detail {
  padding-top: 100px;
  background: var(--bg);
  min-height: 100vh;
}
/* Внутренний контейнер: ограниченная ширина, центрирован */
.property-detail-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 36px 80px;
}

/* Хлебные крошки: маленький серый путь вверху страницы */
.property-breadcrumb {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 28px;
}
.property-breadcrumb a { color: var(--muted); transition: color .2s; }
.property-breadcrumb a:hover { color: var(--accent); }
.property-breadcrumb span { margin: 0 8px; } /* разделитель "/" между элементами */

/* Большая галерея фото: стрелки по бокам, фото по центру */
.property-gallery {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #111;
  height: 560px;
  margin-bottom: 0;
}

/* Точки-индикаторы под галереей */
.pg-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}
.pg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.pg-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* Главное большое изображение галереи */
.property-gallery-main {
  flex: 1;
  min-width: 0;
  height: 560px;
  object-fit: contain;       /* contain — показывает фото целиком без обрезки */
  display: block;
  background: #111;
}

/* Кнопки навигации галереи (широкие, по бокам) */
.pg-nav {
  width: 100px;
  flex-shrink: 0;
  background: rgba(100,100,100,.25);
  color: #fff;
  border: none;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  user-select: none;         /* нельзя выделить символ кнопки двойным кликом */
}
.pg-nav:hover { background: rgba(100,100,100,.45); }

/* Горизонтальный ряд миниатюр под галереей */
.property-gallery-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  overflow-x: auto;          /* горизонтальная прокрутка если миниатюр много */
  background: #0d0d0d;
  margin-bottom: 40px;
}
.property-gallery-thumbs img {
  height: 72px;
  width: auto;
  object-fit: cover;
  cursor: pointer;
  opacity: .5;               /* неактивные миниатюры полупрозрачны */
  transition: opacity .2s;
  flex-shrink: 0;
}
/* Hover и активная миниатюра: непрозрачная */
.property-gallery-thumbs img:hover,
.property-gallery-thumbs img.active { opacity: 1; }

/* Заголовок объекта: Bebas Neue, очень крупный */
.property-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* Локация под заголовком */
.property-location {
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0 16px;
}
/* Цена объекта */
.property-price {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  margin-bottom: 32px;
  line-height: 1;
}
.property-price span { font-size: .55em; color: var(--muted); font-weight: 500; margin-left: 6px; } /* символ ₽ */

/* Блок характеристик: flex с "кирпичами" */
.property-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
/* Один "кирпич" характеристики: значение + подпись */
.property-spec-item {
  border: 1px solid var(--border);
  padding: 16px 24px;
  min-width: 120px;
}
.property-spec-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}
.property-spec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Блок описания объекта */
.property-description { margin-top: 40px; }
.property-description h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.property-description p {
  line-height: 1.8;
  color: #ccc;
  font-size: 14px;
}

/* CTA-блок на странице объекта: кнопки "Позвонить" и "Оставить заявку" */
.property-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* Адаптив страницы объекта */
@media (max-width: 600px) {
  .property-detail-inner { padding: 24px 20px 60px; }
  .property-gallery { height: 280px; }       /* меньше высота галереи */
  .property-gallery-main { height: 280px; }
  .pg-nav { width: 52px; font-size: 32px; } /* уже кнопки галереи */
  .property-specs { gap: 8px; }
  .property-spec-item { padding: 12px 16px; min-width: 100px; }
}

/* ── Страница каталога (/properties) ────────────────────────────────────── */

/* Основная секция каталога: минимальная высота для пустых результатов */
.properties-list-section {
  min-height: 100vh;
  padding-bottom: 80px;
}

/* Шапка страницы каталога: отступ сверху для компенсации фиксированной шапки */
.properties-list-header {
  padding: 108px 60px 28px;
}

/* Полоса фильтров */
.properties-filters {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 60px;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;          /* переносит фильтры на следующую строку на узких экранах */
  gap: 8px 20px;
  margin-bottom: 0;
}

/* Одна группа фильтра: label + input/select */
.filter-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

/* Маленькая подпись над полем фильтра */
.filter-group label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Поле ввода числового фильтра (цена, площадь) */
.filter-group input[type="number"] {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 0 10px;
  outline: none;
  transition: border-color .2s;
  width: 110px;
  height: 38px;
  box-sizing: border-box;
}
.filter-group input:focus { border-color: var(--accent); } /* фокус: акцентная рамка */
.filter-group input::placeholder { color: var(--muted); }

/* Кнопки "Применить" и "Сбросить" */
.filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-basis: 100%;         /* кнопки всегда на отдельной строке */
  margin-top: 4px;
}

/* Счётчик результатов под фильтрами */
.properties-count {
  padding: 20px 60px 16px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.properties-count strong { color: var(--text); font-weight: 700; } /* цифра выделена белым */

/* Список карточек: вертикально (как на Циан) */
.properties-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;                 /* минимальный зазор между горизонтальными карточками */
  padding: 2px 60px 80px;
}

/* Горизонтальная карточка в каталоге (отличается от вертикальной на главной) */
.properties-grid .prop-card {
  display: flex;
  flex-direction: row;       /* фото слева, текст справа */
  height: 260px;
  overflow: hidden;
}
/* Горизонтальная карточка не поднимается при hover (в отличие от вертикальной) */
.properties-grid .prop-card:hover { transform: none; }
.properties-grid .prop-card:hover .prop-card-img img { transform: scale(1.04); }

/* Блок фото: фиксированная ширина */
.properties-grid .prop-card-img {
  width: 360px;
  min-width: 360px;
  height: 100%;
  flex-shrink: 0;
}

/* Текстовая часть карточки: занимает остаток ширины */
.properties-grid .prop-card-body {
  flex: 1;
  min-width: 0;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* текст вверху, цена+кнопка внизу */
}

/* Крупный заголовок в горизонтальной карточке */
.properties-grid .prop-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 8px;
}

/* Крупная цена в горизонтальной карточке */
.properties-grid .prop-price {
  font-size: 26px;
  font-weight: 900;
}

/* Краткое описание: обрезается через -webkit-line-clamp (3 строки) */
.prop-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;         /* максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Адаптив каталога */
@media (max-width: 900px) {
  .properties-list-header { padding: 90px 24px 20px; }
  .properties-filters { padding: 20px 24px; gap: 12px; }
  .filter-group input { width: 150px; }
  .properties-count { padding: 16px 24px 12px; }
  .properties-grid { padding: 2px 24px 60px; }
}

@media (max-width: 640px) {
  .filter-group input { width: 100%; }
  .filter-group { width: calc(50% - 8px); } /* два фильтра в ряд на мобильных */
  .filter-actions { width: 100%; }
  /* Горизонтальная карточка → вертикальная на мобильном */
  .properties-grid .prop-card { flex-direction: column; height: auto; }
  .properties-grid .prop-card-img { width: 100%; min-width: 0; height: 200px; }
  .properties-grid .prop-card-body { padding: 16px; }
  .properties-grid .prop-title { font-size: 16px; }
  .properties-grid .prop-price { font-size: 20px; }
}

/* ── Коммуникации в карточках (тег-бейджи) ───────────────────────────────── */
/* Горизонтальный flex с переносом для тегов коммуникаций */
.prop-comms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 14px;
}
/* Один тег коммуникации (например "Газификация: Газифицирован") */
.comm-tag {
  font-size: 11px;
  padding: 3px 9px;
  background: rgba(232, 69, 10, 0.08); /* очень лёгкий акцентный фон */
  border: 1px solid rgba(232, 69, 10, 0.2);
  border-radius: 20px;                 /* скруглённые "таблетки" */
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Коммуникации на странице детали объекта ─────────────────────────────── */
/* Секция "Коммуникации" под характеристиками */
.property-section {
  margin-top: 36px;
}
/* Маленький заголовок секции (КОММУНИКАЦИИ) */
.property-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 700;
}
/* Вертикальный список строк коммуникаций */
.property-comms {
  display: flex;
  flex-direction: column;
}
/* Одна строка: "Газификация .......... Газифицирован" */
.comm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--border); /* разделительная линия между строками */
  font-size: 14px;
}
.comm-row span { color: var(--muted); }  /* левая часть: название (серая) */
.comm-row b { font-weight: 600; }         /* правая часть: значение (жирное) */

/* ── Выпадающие списки в полосе фильтров ────────────────────────────────── */
.filter-group select {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 0 10px;
  outline: none;
  transition: border-color .2s;
  width: 125px;
  height: 38px;
  box-sizing: border-box;
  cursor: pointer;
}
.filter-group select:focus { border-color: var(--accent); }

/* Группа фильтра с чекбоксом (Газификация) */
.filter-group-check {
  justify-content: space-between;
}
.filter-group-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent); /* цвет галочки и фона чекбокса в акцент */
  cursor: pointer;
}

@media (max-width: 640px) {
  .filter-group select { width: 100%; } /* на мобильном select на всю ширину группы */
}