/* ЛОКАЦИЯ — локальные стили страницы /lokatsiya/. Подключается ПОСЛЕ css/style.css?v=17,
   переопределяет только то, чего нет в общей палитре. Общие переменные (--terracotta,
   --cream, --paper, --ink, --stone, --charcoal, --gold и т.д.) берутся из :root там же. */

/* ---------- хлебные крошки + герой страницы ----------
   Картинка и текст — раздельные блоки в обычном потоке (не абсолютный оверлей друг
   на друге): на узких экранах текст даже в 4 строки не может «наехать» на кадр или
   обрезаться контейнером, а высота картинки всегда считается от её реальных
   пропорций (aspect-ratio: 4476×2263 = 1.978), поэтому object-fit:cover почти не
   обрезает кадр ни на одной ширине экрана. */
.loc-hero-media{
  position:relative;width:100%;overflow:hidden;
  aspect-ratio:4476/2263;max-height:72vh;
}
/* Кадр панорамный (2000x1012), и на узком экране родная пропорция даёт полоску
   в 197px — читается как случайная врезка, а не как хиро. Задаём минимальную
   высоту: кроп по центру умеренный, река и набережная в кадре остаются. */
@media (max-width:720px){
  .loc-hero-media{aspect-ratio:auto;height:clamp(260px,36vh,380px);}
}
.loc-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;}
/* лёгкая эстетическая растяжка сверху — не отвечает за контраст (см. .nav ниже),
   просто мягче сажает кадр под плавающую шапку */
.loc-hero-media::before{
  content:"";position:absolute;top:0;left:0;right:0;height:140px;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,17,13,0.35) 0%, rgba(20,17,13,0) 100%);
}

/* ---------- контраст плавающей шапки над светлым фото ----------
   На всех остальных страницах сайта .nav висит поверх видео-героя с тёмной
   плёнкой (см. .hero-media::after в css/style.css) — здесь герой светлый (закатное
   небо), поэтому даём шапке собственную непрозрачную подложку с самого начала,
   а не только после скролла (.nav.scrolled и так остаётся сильнее по специфичности
   и по-прежнему отрабатывает при скролле). Проверено по самому яркому пикселю неба
   в кадре (~214,203,210): контраст логотипа 13.5:1, пунктов меню 10.4:1 — с большим
   запасом выше нормы 4.5:1 для мелкого текста. */
.nav{background:rgba(23,20,16,0.86);}

/* ---------- мобильный CTA в шапке ----------
   На этой странице нет TOC-переключателя (.nav-toggle) из корневого index.html —
   он открывает панель с главами домашней страницы, здесь неприменим. Но
   .nav-links (а вместе с ней и кнопка «Оставить заявку») на ≤980px скрывается
   через display:none в css/style.css — без замены нав на мобиле остался бы без
   единой видимой ссылки. Добавляем отдельную персистентную кнопку-заявку рядом
   с логотипом, которая показывается только когда .nav-links спрятана. */
.nav-cta-mobile{display:none;}
@media (max-width:980px){
  .nav-cta-mobile{display:inline-flex;}
}
.loc-hero-copy{background:var(--charcoal);padding:clamp(28px,5vh,52px) 0 clamp(32px,5.5vh,56px);}
.loc-breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(244,236,225,0.62);margin-bottom:18px;
}
.loc-breadcrumb a{color:rgba(244,236,225,0.85);}
.loc-breadcrumb a:hover{color:var(--gold);}
.loc-breadcrumb span[aria-current]{color:var(--gold);}
.loc-hero-copy h1{color:#fff;font-size:clamp(26px,4.4vw,50px);line-height:1.16;max-width:820px;}
.loc-hero-lead{
  margin-top:18px;max-width:620px;color:rgba(244,236,225,0.78);
  font-size:clamp(14.5px,1.3vw,17px);line-height:1.65;
}
.loc-hero-cta{margin-top:26px;}

/* ---------- дистанции без сопровождающего медиа (безопасно от обрезки — картинок нет) ---------- */
.loc-facts .head{max-width:680px;margin-bottom:44px;}
.loc-facts .head h2{font-size:clamp(28px,3.8vw,48px);margin-top:16px;line-height:1.16;}
.loc-facts .head p{color:var(--stone-dark);margin-top:16px;font-size:15px;line-height:1.75;max-width:600px;}
.dist-list-full{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;}
@media (max-width:760px){.dist-list-full{grid-template-columns:1fr;}}

/* ---------- секции-разъяснения на arch-grid (картинка всегда без принудительной обрезки —
   .arch-media img наследует height:auto из общего style.css на всех брейкпоинтах) ---------- */
.loc-explain h2{font-size:clamp(24px,3.2vw,36px);margin-top:16px;line-height:1.2;}
.loc-explain p{color:var(--stone-dark);margin-top:16px;font-size:15px;line-height:1.75;}

@media (max-width:820px){
  .loc-facts,.loc-explain-section{padding-top:clamp(48px,7vh,72px);padding-bottom:clamp(48px,7vh,72px);}
}