/* ============================================================
   СИСТЕМЫ ДЛЯ КОТТЕДЖЕЙ — приёмы только этой страницы.

   Отдельный файл, как и industrial.css: page.css делят шесть
   страниц (§4.5 контекста, история с классом `.brand`).

   Логика страницы. Частный заказчик приходит не с расходом
   в м³/ч, а с рыжими подтёками на ванне. Поэтому вход в тему —
   через признаки, а не через оборудование, и дальше по цепочке:
   признак → что в воде → что ставим → сколько это занимает
   по времени. Это единственная страница с ценой (§4.1),
   поэтому в карточках комплектов заложено место под неё.

   Чтобы страница не выглядела близнецом «Промышленных систем»,
   приёмы там и тут разные: там светлые пластины с вырезками
   товаров и шкала производительности, здесь — плитки признаков,
   путь воды по дому на иконках и лента сроков.
   ============================================================ */

/* ------------------------------------------------------------
   ШАПКА СТРАНИЦЫ
   ------------------------------------------------------------ */

.pagehero--ct::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(to right, rgba(155, 165, 176, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155, 165, 176, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(72% 100% at 88% 0%, #000, transparent 70%);
}

/* Кадр котельной внахлёст справа: страница про дом, и дом видно сразу */
.cthero { display: grid; gap: var(--sp-7); align-items: end; }
@media (min-width: 1000px) {
  .cthero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-9); }
}
.cthero__shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-line);
}
.cthero__shot img { width: 100%; height: 100%; object-fit: cover; }
.cthero__tag {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: rgba(15, 17, 20, 0.78);
  border: 1px solid var(--c-line-strong);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* Полоса из двух цифр под шапкой */
.ctcount {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 620px) { .ctcount { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ctcount div { min-width: 0; }
.ctcount b {
  display: block;
  font-family: var(--f-head);
  font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.375rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ctcount b em { font-style: normal; font-size: 0.5em; color: var(--c-accent); }
.ctcount span { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-dim); }

/* ------------------------------------------------------------
   01. ПРИЗНАКИ: что видно и что за этим стоит
   Плитка ведёт от симптома к решению — три ступени внутри одной
   ячейки, поэтому карточки не выглядят набором близнецов.
   ------------------------------------------------------------ */

.symps { display: grid; gap: var(--sp-5); }
@media (min-width: 740px) { .symps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.symp {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.symp:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }

/* Цифра-призрак в углу: даёт плитке глубину без теней */
.symp::after {
  content: attr(data-n);
  position: absolute;
  right: -0.06em;
  bottom: -0.34em;
  font-family: var(--f-head);
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(155, 165, 176, 0.05);
  pointer-events: none;
}
.symp__see {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}
.symp__see svg { width: 26px; height: 26px; color: var(--c-accent); flex-shrink: 0; }
.symp__why { font-size: var(--fs-sm); color: var(--c-text-dim); }
.symp__fix {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.symp__fix b {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ------------------------------------------------------------
   02. ЧТО МЕНЯЕТСЯ В ДОМЕ — сетка без карточек
   Ячейки разделены линиями, а не поверхностями: после блока
   плиток выше это меняет ритм и не утяжеляет страницу.
   ------------------------------------------------------------ */

.gains { display: grid; border-top: 1px solid var(--c-line); }
@media (min-width: 680px)  { .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .gains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-bottom: 1px solid var(--c-line);
  min-width: 0;
}
@media (min-width: 680px) {
  .gain { padding-inline: var(--sp-5); border-right: 1px solid var(--c-line); }
  .gain:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1080px) {
  .gain:nth-child(2n) { border-right: 1px solid var(--c-line); }
  .gain:nth-child(3n) { border-right: 0; }
}
.gain__ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  flex-shrink: 0;
  transition: background-color var(--d-base) var(--e-out);
}
.gain__ic svg { width: 20px; height: 20px; color: var(--c-accent-hi); }
.gain:hover .gain__ic { background: rgba(216, 35, 42, 0.2); }
.gain h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.gain p  { font-size: var(--fs-sm); color: var(--c-text-dim); }

/* ------------------------------------------------------------
   03. ПУТЬ ВОДЫ ПО ДОМУ
   Иконки, а не снимки товаров: на «Промышленных системах» ступени
   показаны вырезками на светлых пластинах, и повторять тот же
   приём здесь незачем.
   ------------------------------------------------------------ */

.flow {
  position: relative;
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); }
  /* Линия, вдоль которой идёт вода */
  .flow::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 27px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-line-strong) 8%, var(--c-line-strong) 92%, transparent);
  }
}

.flownode { position: relative; min-width: 0; }
.flownode__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-bg);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.flownode__dot svg { width: 22px; height: 22px; color: var(--c-text-dim); transition: color var(--d-base) var(--e-out); }
.flownode:hover .flownode__dot { border-color: var(--c-accent); transform: translateY(-3px); }
.flownode:hover .flownode__dot svg { color: var(--c-accent-hi); }

.flownode__n {
  position: absolute;
  left: 40px;
  top: -6px;
  z-index: 2;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-brand);
  color: #fff;
  font-family: var(--f-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.flownode h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.flownode p  { font-size: var(--fs-sm); color: var(--c-text-dim); }
.flownode__opt {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* ------------------------------------------------------------
   04. КОМПЛЕКТЫ. Единственное место на сайте, где заложена цена
   ------------------------------------------------------------ */

.kits { display: grid; gap: var(--sp-5); }
@media (min-width: 780px)  { .kits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .kits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kit {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: border-color var(--d-base) var(--e-out);
}
.kit:hover { border-color: var(--c-line-strong); }
.kit--lead { border-color: var(--c-accent-line); }

.kit__shot {
  position: relative;
  /* 25.08.2026: было 16/10, потом 4/3 — но сами кадры сняты портретом
     1920×2560. Пересобраны в полную рамку, бокс равен их пропорции. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
}
.kit__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.kit:hover .kit__shot img { transform: scale(1.04); }
.kit__mark {
  position: absolute;
  left: 0;
  top: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom-right-radius: var(--r-md);
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kit__body { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-6); flex: 1; }
.kit h3 { font-size: var(--fs-h3); }
.kit__for { font-size: var(--fs-sm); color: var(--c-text-dim); }
.kit__list { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.kit__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.kit__list svg { width: 16px; height: 16px; margin-top: 4px; color: var(--c-accent); flex-shrink: 0; }

/* Место под цену. Прайс заказчик ещё не прислал (§11 п.2) — слот
   размечен и подписан, чтобы его нельзя было не заметить и чтобы
   вставка цены не потребовала переверстки карточки. */
.kit__price {
  display: grid;
  gap: var(--sp-1);
  margin-top: auto;
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px dashed var(--c-line-strong);
  background: var(--c-bg-alt);
}
.kit__price b {
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.kit__price small {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
.kit__price .btn { margin-top: var(--sp-3); }

/* ------------------------------------------------------------
   05. ЛЕНТА СРОКОВ
   У частного заказчика главный вопрос — «сколько ждать».
   Поэтому у каждого шага стоит срок, а не только название.
   ------------------------------------------------------------ */

.tl { display: grid; border-top: 1px solid var(--c-line); }
.tlstep {
  position: relative;
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 820px) {
  .tlstep {
    grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.4fr) 150px;
    align-items: baseline;
    padding-left: var(--sp-7);
  }
}
/* Точка на вертикальной оси */
.tlstep::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-line);
}
.tlstep::after {
  content: '';
  position: absolute;
  left: -4px;
  top: var(--sp-6);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-line-strong);
  transition: border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.tlstep:hover::after { border-color: var(--c-accent); background: var(--c-accent); }
.tlstep__n {
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-text-mute);
}
.tlstep h3 { font-size: var(--fs-h4); }
.tlstep p  { font-size: var(--fs-sm); color: var(--c-text-dim); }
.tlstep__when {
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent-hi);
  white-space: nowrap;
}
@media (min-width: 820px) { .tlstep__when { text-align: right; } }

/* ------------------------------------------------------------
   06. ГАЛЕРЕЯ ОБЪЕКТОВ — бенто, а не ровная сетка
   ------------------------------------------------------------ */

.gal { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.galshot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  /* Пропорция съёмки объектов — 3:4, см. prep_full_frame.py (25.08.2026) */
  aspect-ratio: 3 / 4;
}
.galshot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.galshot:hover img { transform: scale(1.05); }
@media (min-width: 900px) {
  
}
/* На две колонки девять кадров ложатся как 4 ряда + одиночка.
   Растягиваем ведущий кадр на всю ширину — ряды становятся полными. */
@media (max-width: 899px) {
  
}

/* ------------------------------------------------------------
   07. ОТЗЫВЫ ВЛАДЕЛЬЦЕВ
   Отличаются от отзывов на главной тем, что в них названо
   конкретное оборудование — выносим его отдельной строкой.
   ------------------------------------------------------------ */

.voices { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .voices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.voice {
  position: relative;
  display: grid;
  align-content: start;
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.voice__mark {
  font-family: var(--f-head);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 0.7;
  color: var(--c-accent-line);
  margin-bottom: var(--sp-3);
}
.voice__title { font-family: var(--f-head); font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-3); }
.voice p { font-size: var(--fs-sm); color: var(--c-text-dim); }
.voice__kit {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.voice__kit b { color: var(--c-text-dim); font-weight: 600; }
.voice__who {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

/* ------------------------------------------------------------
   ИЛЛЮСТРАТИВНЫЕ КАДРЫ

   До правки 10.08.2026 четыре раздела подряд шли вообще без
   фотографий: признаки, результат, путь воды и сроки. Читается
   как стена текста, и страница «про дом» выглядела холоднее,
   чем должна.

   Два приёма. `.ctfig` — широкая полоса с подписью поверх
   нижнего края: ставится в конец раздела и закрывает переход
   к следующему. `.ctstrip` — ряд из трёх небольших кадров
   с подписями: даёт другой ритм, чтобы полосы не шли подряд.

   ⚠️ Кадры домов и санузлов здесь — СТОК (Pexels), а не объекты
   заказчика. Подписи выбраны так, чтобы ничего не заявлять своим:
   галерея настоящих объектов отдельная, с бейджем «настоящие
   объекты» (см. §06). Не подписывайте эти кадры «наш объект».
   ------------------------------------------------------------ */

.ctfig {
  position: relative;
  margin-top: var(--sp-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ctfig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ctfig--band   { height: clamp(200px, 25vw, 340px); }

/* Полоса под шапкой страницы: сверху отступ уже дала сама секция */
.ctfig--lead   { margin-top: 0; margin-bottom: var(--sp-8); }

.ctfig__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6);
  background: linear-gradient(180deg, transparent, rgba(15, 17, 20, 0.6) 32%, rgba(15, 17, 20, 0.88) 56%, rgba(15, 17, 20, 0.96));
}
.ctfig__cap b {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.ctfig__cap span {
  display: block;
  max-width: 58ch;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

/* На 390px две колонки давали подпись в 12 знаков — рвано и нечитаемо,
   поэтому до 560px ряд разворачивается в столбец. */
.ctstrip {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
@media (min-width: 560px) { .ctstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .ctstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ctstrip figure {
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
}
.ctstrip img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.ctstrip figure:hover img { transform: scale(1.04); }
.ctstrip figcaption {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
/* На третьей плитке ряд из трёх на двухколоночной сетке остаётся
   один — растягиваем, чтобы не висел половинкой. */
@media (min-width: 560px) and (max-width: 859px) {
  .ctstrip figure:last-child:nth-child(odd) { grid-column: span 2; }
  .ctstrip figure:last-child:nth-child(odd) img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .kit__shot img,
  .galshot img,
  .ctstrip img,
  .flownode__dot { transition: none; }
}