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

/* ---------- мобильная навигация: без гамбургера, прячем второстепенные пункты
   меню, оставляем логотип и кнопку заявки (как на /penthouses/, /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 ---------- */
.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);}

/* ---------- герой: кадр городской панорамы светлый у верхнего края (закатное
   небо) — там же висит фиксированная шапка. По умолчанию .hero-media::after
   даёт вверху всего rgba(...,0.42), этого достаточно не для любого неба;
   подстраховываемся собственной плёнкой и постоянной подложкой у .nav, как уже
   сделано на /lokatsiya/ для того же самого кадра (hero-address-day.webp). */
.nav{background:rgba(23,20,16,0.86);}
.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.86) 0%, rgba(20,17,13,0.5) 46%, rgba(20,17,13,0.16) 76%, rgba(20,17,13,0.08) 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);}

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