/* ТЕССИНСКИЙ, V — страница «Четыре дома». Подключается после ../css/style.css.
   Использует токены и классы общего стиля (:root, .house, .arch-grid, .lead и т.д.),
   здесь — только то, чего в общем файле нет: хлебные крошки, таблица сравнения
   домов и превью-карточки в разделе #houses. */

/* ---------- защита от наезда fixed-шапки на контент hero ----------
   .nav фиксирован (~109px на мобильном), .hero-content выровнен по низу
   (align-items:flex-end) — если стек контента (eyebrow+h1+sub+house-names+cta)
   выше доступной высоты, он раздвигается вверх и уходит под шапку. Резервируем
   верхний отступ; подтверждено координатором на 390px. */
.hero{padding-top:clamp(124px,18vh,190px);}

/* ---------- хлебные крошки ---------- */
.crumbs{
  font-size:12px;letter-spacing:0.03em;color:var(--stone);
  margin-bottom:26px;display:flex;gap:8px;align-items:center;
}
.crumbs a{color:var(--terracotta-ink);}
.crumbs a:hover{color:var(--terracotta-deep);}
.crumbs span{color:var(--stone);}

/* ---------- обзор «четыре дома»: заголовок раздела ---------- */
.houses-overview{padding:clamp(90px,12vh,140px) 0 0;background:var(--cream);}
.houses-overview .head{max-width:680px;margin-bottom:48px;}
.houses-overview .head h2{font-size:clamp(30px,4vw,50px);margin-top:18px;line-height:1.16;}
.houses-overview .head p{color:var(--stone-dark);margin-top:16px;font-size:15.5px;line-height:1.75;max-width:620px;}

/* ---------- таблица сравнения ---------- */
.compare-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;}
.compare-table th,.compare-table td{
  padding:16px 18px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line);
}
.compare-table th{
  font-family:'Jost',sans-serif;font-weight:500;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--stone-dark);border-bottom:2px solid var(--terracotta);
}
.compare-table td{color:var(--stone-dark);}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table td:first-child a{
  font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--terracotta-deep);
}
.compare-table td:first-child a:hover{color:var(--ink);}

/* ---------- превью-карточки домов ---------- */
.house-cards{
  display:flex;flex-direction:column;gap:2px;
  margin-top:56px;background:var(--line);
}
.house-card{
  display:flex;align-items:stretch;gap:24px;background:var(--paper);padding:20px;
  transition:background .25s;
}
.house-card:hover{background:var(--cream-2);}
.house-card-media{
  flex:0 0 clamp(96px,26vw,220px);overflow:hidden;border-radius:var(--radius);
  align-self:center;
}
.house-card-media img{width:100%;height:auto;display:block;transition:transform 1s var(--ease);}
.house-card:hover .house-card-media img{transform:scale(1.05);}
.house-card-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.house-card-body .house-tag{font-size:13px;}
.house-card-body h3{
  font-size:clamp(19px,2.4vw,24px);margin-top:8px;line-height:1.2;color:var(--ink);
}
.house-card-body p{
  margin-top:10px;font-size:13.5px;color:var(--stone-dark);line-height:1.6;max-width:460px;
}

/* ---------- «ресторан с летней террасой» — акцент внутри Media ---------- */
.feature-note{
  max-width:300px;margin-top:32px;
}
.feature-note img{width:100%;height:auto;border-radius:var(--radius);display:block;}
/* --stone falls below 4.5:1 on theme-media/theme-hespera pale backgrounds (~4.3-4.4:1) —
   use --stone-dark instead, same trap flagged for the rest of the site on 03.08 */
.feature-note figcaption{margin-top:10px;font-size:12px;letter-spacing:0.04em;color:var(--stone-dark);}

@media (max-width:600px){
  .house-card{gap:16px;padding:16px;}
  .house-card-body p{max-width:none;}
}

@media (max-width:820px){
  .houses-overview{padding-top:clamp(48px,7vh,72px);}
  .houses-overview .head{margin-bottom:26px;}
  .house-cards{margin-top:28px;}
}