/* ТЕССИНСКИЙ, V — страница «Пентхаусы и квартиры с террасами».
   Подключается после ../css/style.css?v=17. Все переменные (--terracotta,
   --cream, --paper, --ink, --stone, --charcoal, --gold, --terracotta-ink и
   т.д.) берутся из :root и парных «тёмных» правил там же — здесь только то,
   чего в общем файле нет. */

/* ---------- мобильная навигация: как на /planirovki/ — без гамбургера,
   прячем второстепенные пункты меню, оставляем логотип и кнопку заявки ---------- */
@media (max-width:980px){
  .nav-toggle{display:none !important;}
  .nav-links{display:flex !important; gap:10px;}
  .nav-links a:not(.btn){display:none;}
  .nav-links .btn{margin-left:0;}
}

/* ---------- укороченный герой подстраницы (не на весь экран, как на главной) ---------- */
.hero--sub{height:auto;min-height:64vh;}
@media (max-width:600px){
  .hero--sub{min-height:78vh;}
}

/* ---------- защита от известного бага: шапка .nav фиксированная (~109px на
   мобильном) и наследуемый .hero align-items:flex-end прижимает контент к
   низу блока. На узких экранах с длинным h1 верх текстового блока иногда
   поднимается выше видимой зоны и заходит под логотип шапки. Явный отступ
   сверху гарантирует зазор независимо от длины заголовка. ---------- */
@media (max-width:600px){
  .hero--sub{padding-top:clamp(124px,18vh,190px);}
}

/* ---------- хлебные крошки в hero: плашка достаточной непрозрачности —
   герой фотографический (не однотонный фон), контраст посчитан от заведомо
   светлого случая (яркое небо под плашкой) и даёт запас выше нормы 4.5:1. ---------- */
.breadcrumbs{
  font-family:'Jost', sans-serif;font-size:12px;letter-spacing:0.03em;
  color:rgba(255,255,255,0.92);margin-bottom:16px;display:inline-flex;gap:6px;flex-wrap:wrap;
  background:rgba(15,12,9,0.75);padding:7px 14px;border-radius:var(--radius);
}
.breadcrumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.breadcrumbs a:hover{color:var(--gold);}
.breadcrumbs [aria-current]{color:rgba(255,255,255,0.92);}

/* ---------- сравнение форматов 91 м² / 301 м² ----------
   Та же пара оттенков, что уже используется в .house.theme-hespera и
   .plan-card--hespera на /planirovki/ (#f3e3d3 + var(--stone-dark) +
   var(--terracotta-ink)) — контраст под этот фон уже проверен на сайте. */
.format-compare{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:44px;
  background:rgba(33,29,24,0.08);
}
.format-card{background:var(--paper);padding:32px 28px;}
.format-card .fc-tag{
  font-family:'Jost', sans-serif;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--terracotta-ink);
}
.format-card h3{font-size:clamp(24px,3vw,34px);margin-top:10px;line-height:1.15;}
.format-card p{color:var(--stone-dark);margin-top:14px;font-size:14.5px;line-height:1.7;}
.format-card ul{list-style:none;margin:20px 0 0;padding:0;}
.format-card li{padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--stone-dark);}
.format-card--top{background:#f3e3d3;}
@media (max-width:760px){
  .format-compare{grid-template-columns:1fr;}
}

/* ---------- секции-разъяснения на arch-grid (картинка всегда без принудительной
   обрезки — .arch-media img наследует height:auto из общего style.css) ---------- */
.loc-explain h2{font-size:clamp(26px,3.4vw,40px);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){
  .architecture,.interiors,.house,.loc-explain-section{
    padding-top:clamp(48px,7vh,72px);padding-bottom:clamp(48px,7vh,72px);
  }
  .format-compare{margin-top:28px;}
  .format-card{padding:26px 22px;}
}

/* Кадр интерьера светлый (тюль, закатное окно), и золотой курсив в h1 давал
   на нём контраст 2.25 — заголовок и надстрочная строка тонули в шторе.
   Плёнка снизу вверх сажает текст на тёмное, не убивая сам кадр. */
.hero--sub .hero-media::after,
.hero--sub::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(0deg, rgba(20,17,13,0.82) 0%, rgba(20,17,13,0.55) 42%, rgba(20,17,13,0.18) 72%, rgba(20,17,13,0.06) 100%);
}
.hero--sub .hero-content{position:relative;z-index:2;}

/* Надстрочная строка стоит выше плёнки, на самой светлой части кадра —
   ей и заголовку добавляем собственную тень, чтобы не зависеть от градиента. */
.hero--sub .eyebrow{color:var(--cream);text-shadow:0 1px 10px rgba(20,17,13,0.9),0 0 24px rgba(20,17,13,0.7);}
.hero--sub .hero-title,.hero--sub .hero-title em{text-shadow:0 2px 16px rgba(20,17,13,0.75),0 0 40px rgba(20,17,13,0.5);}
.hero--sub .hero-sub{text-shadow:0 1px 12px rgba(20,17,13,0.8);}