/* ТЕССИНСКИЙ, V — страница «Планировки». Подключается после ../css/style.css.
   Все цвета ниже — либо переменные из style.css, либо явные hex-значения,
   проверенные на контраст (WCAG AA) отдельно перед сдачей. */

/* Мобильная навигация НЕ переопределяется: до 980px .nav-links скрыт по
   дизайну сайта нарочно, попытка показать его лентой ломает логотип (уже
   ловили этот баг на другой странице). Вместо этого страница использует
   штатное оглавление (.toc-panel/.toc-toggle) — тот же механизм, что на
   главной, main.js уже умеет его вести, здесь только своя разметка/пункты. */

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

/* ---------- хлебные крошки над h1 в hero ----------
   Герой — фотография, а не однотонный фон: в зависимости от кадра под текстом
   может оказаться светлое небо, и тогда обычный полупрозрачный градиент шапки
   не гарантирует контраст. Поэтому крошки — на собственной плашке alpha=0.75,
   контраст посчитан от заведомо худшего случая (белый фон под плашкой) —
   даже тогда белый текст даёт ~10: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);}

/* ---------- обзорные карточки четырёх домов (раздел #overview) ---------- */
.plan-overview{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:52px;
}
.plan-card{padding:30px 26px 28px;}
.plan-card .plan-tag{
  font-family:'Fraunces', serif;font-style:italic;font-size:14px;
}
.plan-card h3{font-size:25px;margin-top:10px;line-height:1.15;}
.plan-card ul{list-style:none;margin:20px 0 0;padding:0;}
.plan-card li{
  padding:10px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5;
}
.plan-card .plan-link{
  margin-top:22px;display:inline-block;font-size:11.5px;letter-spacing:0.08em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;
}

.plan-card--aurora{background:#f6ede2;}
.plan-card--media{background:#e9e7e3;}
.plan-card--hespera{background:#f3e3d3;}
.plan-card--aurora .plan-tag,
.plan-card--media .plan-tag,
.plan-card--hespera .plan-tag,
.plan-card--aurora .plan-link,
.plan-card--media .plan-link,
.plan-card--hespera .plan-link{color:var(--terracotta-ink);}
.plan-card--aurora li,
.plan-card--media li,
.plan-card--hespera li{color:var(--stone-dark);}

.plan-card--nox{background:#28272a;color:#fff;}
.plan-card--nox h3{color:#fff;}
.plan-card--nox .plan-tag,
.plan-card--nox .plan-link{color:var(--gold);}
.plan-card--nox li{color:rgba(244,236,225,0.82);border-top-color:rgba(244,236,225,0.16);}

@media (max-width:900px){
  .plan-overview{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .plan-overview{grid-template-columns:1fr;gap:14px;}
  .plan-card{padding:26px 22px;}
}