/* СЕГМЕНТНЫЕ СТРАНИЦЫ — вид. Заведён 25.08.2026 вместе с segmenty.js.
 *
 * Отдельный файл, а не дописка в components.css: над каталогом одновременно
 * работает соседняя сессия, и общий файл — место, где две правки встречаются
 * молча. Всё, что здесь есть, относится только к страницам с data-segment.
 *
 * Ни одного цвета, отступа и радиуса числом: значения берутся из
 * styles/tokens.css. Раскладка — на auto-fit, а не на repeat(N): число
 * карточек задаётся содержанием, и сетка не должна ломаться от пятой боли
 * или шестнадцатой коллекции.
 */

/* Собственные токены страницы. Тёмная плашка предупреждения обязана
   оставаться тёмной в ОБЕИХ темах: это не «цвет заголовка», а поверхность.
   Первая редакция красила её токеном --color-espresso, и в тёмной теме
   плашка стала светлой, а текст на ней остался светлым — контраст 1.27,
   читать нечем. Найдено замером 25.08.2026. Тот же приём, что у сайта для
   остальных намеренно тёмных поверхностей (tokens.css, блок
   «декоративные тёмные поверхности»). */
:root {
  --seg-warn-bg:   #4a3628;   /* espresso, зафиксирован в обеих темах.
     02.09.2026: поднят вместе с --color-espresso — «убери черноту». */
  --seg-warn-ink:  #faf7f2;   /* текст на нём */
  --seg-warn-line: #9c7f4f;   /* рамка пунктов */
}

/* Красная строка — RULES.md: «text-indent: 1.5em на каждом <p>. Без
   исключений». Один общий селектор на каждый абзац сегментной страницы,
   а не по классам — иначе новый <p> в новом сегменте (кофейни, кейтеринг)
   снова родится без отступа, и правило опять придётся напоминать криком. */
#segment p { text-indent: 1.5em; }

/* ── первый экран ──────────────────────────────────────────────────────── */
.seg-hero {
  padding: var(--space-section) 0 var(--space-6);
  background: var(--color-cream-2);
  border-bottom: 1px solid var(--color-line);
}
.seg-hero h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--color-espresso);
  margin: var(--space-3) 0 0;
  max-width: 20ch;
  /* Длинное неразрывное слово не должно выталкивать колонку за край экрана —
     `overflow-wrap` ловит именно этот случай (найдено 26.08.2026: заголовок
     санаториев со словом «продезинфицировать» уводил первый экран за правый
     край телефона 390 px). Перенос по слогам (`hyphens: auto`) для этого не
     нужен и вреден: на крупной антикве середина слова, разорванная дефисом,
     читается как брак вёрстки (Оркестратор 13, 27.08.2026, по живому
     примеру «санато-рия» / «ли-ния» на утверждённом заголовке). Перенос —
     только по целым словам, `text-wrap: balance` держит строки ровными по
     длине, а не рвёт последнее слово в одиночку. */
  hyphens: none;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.seg-lead {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}
.seg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Первый экран со снимком: текст слева, кадр справа. Сетка на minmax, а не на
   фиксированных долях — на узком экране колонки складываются в одну сами. */
.seg-hero__inner { display: grid; gap: var(--space-4); align-items: center; }
/* min-width: 0 — иначе колонка растягивается по самому длинному неразрывному
   слову: у грид-дорожки 1fr минимум равен min-content, и на телефоне первый
   экран уезжал вправо вместе с подзаголовком и кнопками. */
.seg-hero__text { min-width: 0; }
.seg-hero--foto .seg-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.seg-hero__foto { margin: 0; }
.seg-hero__foto img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;      /* снимок 644 px шириной: крупнее показа нет смысла */
  margin-left: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
}

/* ── четыре боли ───────────────────────────────────────────────────────── */
.seg-pains { padding: var(--space-section) 0; }
.seg-pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.seg-pain {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.seg-pain h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--color-espresso);
  margin: 0;
}
.seg-pain__was {
  margin: 0;
  color: var(--color-muted);
  line-height: var(--leading-normal);
}
.seg-pain__now {
  margin: 0;
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-gold);
  color: var(--color-ink);
  font-weight: 500;
  line-height: var(--leading-normal);
}
.seg-pain__src {
  margin: 0;
  font-size: var(--fs-cap);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}

/* ── честное предупреждение ───────────────────────────────────────────────
   Не мелкий шрифт и не сноска: тёмная плашка в полную ширину. Ресторан,
   который сдаёт текстиль в прачечную, обязан прочитать это до заказа. */
/* Тёмная плоскость больше не заливка в один тон. 02.09.2026, слово Айгуль:
   «плоские тёмные тона сделай богаче». Приём тот же, что на HOME: тёплое
   свечение сверху и уплотнение книзу. Новых цветов не заводится — глубина
   берётся из того же токена, поэтому тёмная тема поедет вместе с ним. */
.seg-warn {
  padding: var(--space-section) 0;
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(201, 172, 112, .16), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--seg-warn-bg) 88%, #7a5836) 0%,
      var(--seg-warn-bg) 58%,
      color-mix(in srgb, var(--seg-warn-bg) 92%, #1b120b) 100%);
  color: var(--seg-warn-ink);
}
.seg-warn .eyebrow { color: var(--color-gold); }
.seg-warn h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--seg-warn-ink);
  margin: var(--space-2) 0 var(--space-3);
  max-width: 24ch;
}
.seg-warn__text,
.seg-warn__final {
  max-width: var(--measure);
  line-height: var(--leading-normal);
  color: var(--seg-warn-ink);
}
.seg-warn__list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}
.seg-warn__list li {
  border: 1px solid var(--seg-warn-line);
  border-radius: var(--radius-btn);
  padding: var(--space-2);
  font-size: var(--fs-cap);
  font-weight: 500;
  line-height: var(--leading-snug);
}
.seg-warn__final { font-weight: 500; }

/* ── экономика (калькулятор экономии на стирке) ──────────────────────── */
.seg-econ { padding: var(--space-section-tight) 0; background: var(--color-cream-2); }
.seg-econ-box {
  max-width: 480px;
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.seg-econ-result {
  min-height: 1.4em;
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-espresso);
  line-height: var(--leading-snug);
  margin: 0;
}
.seg-econ-result b { color: var(--color-gold-text); }

/* ── устройство (механизм, доказательство после денег) ───────────────── */

/* ── оборот стола (летнее кафе) ───────────────────────────────────────── */
.seg-turn {
  padding: var(--space-4) 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
}
.seg-turn .eyebrow { display: block; margin-bottom: var(--space-1); }
.seg-turn__text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-espresso);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── расчёт метража ────────────────────────────────────────────────────── */
/* Селектор сценария выглядит как соседние поля .calc-field input — своё
   правило, а не правка components.css: там же калькулятор номерного фонда
   на главной, и общий файл — место, где две сессии сталкиваются молча. */
.seg-calc .calc-field select {
  font-family: var(--font-sans);
  font-size: var(--text-h5);
  font-weight: 600;
  color: var(--color-espresso);
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  padding: 12px 16px;
  width: 100%;
}
.seg-calc .calc-field select:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; }
/* Подтверждение размера до нарезки — не мелкая сноска: это условие, при
   котором вообще можно резать ткань. Айгуль 26.08.2026. */
.calc-confirm {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-gold);
  font-weight: 500;
  line-height: var(--leading-normal);
  color: var(--color-ink);
}
.seg-calc .seg-tables td { vertical-align: middle; }
.seg-calc .seg-tables small {
  display: block;
  font-size: var(--fs-label);
  color: var(--color-muted);
  font-weight: 400;
}
.seg-dim { white-space: nowrap; }
.seg-dim input {
  width: 5.5rem;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  background: var(--color-white);
  color: var(--color-ink);
  font: inherit;
}
.seg-dim span { padding: 0 var(--space-1); color: var(--color-muted); }
.seg-tables select {
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  background: var(--color-white);
  color: var(--color-ink);
  font: inherit;
}
.seg-del button {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  line-height: 1;
}
.seg-del button:hover { color: var(--color-error); border-color: var(--color-error); }
.seg-calc-add { margin-top: var(--space-2); }
.seg-total {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}
.seg-total__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
/* Вес 400, а не 300 из --fw-num: начертания 300 нет в подключённом наборе
   Manrope, браузер нарисовал бы его синтетически — грязно и незаметно. */
.seg-total__row b {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-espresso);
}
.seg-total__note {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-cap);
  color: var(--color-warning);
  line-height: var(--leading-normal);
}

/* ── коллекции ─────────────────────────────────────────────────────────── */
.seg-goods { padding: var(--space-section-tight) 0; background: var(--color-cream-2); }
.seg-card__size,
.seg-card__colors,
.seg-card__art {
  margin: 0;
  font-size: var(--fs-cap);
  color: var(--color-muted);
  line-height: var(--leading-snug);
}

/* ── ширина и длина ────────────────────────────────────────────────────── */
.seg-sizes { padding: var(--space-section-tight) 0; }
.seg-prose {
  max-width: var(--measure);
  line-height: var(--leading-normal);
  text-indent: 1.5em;
}
.seg-sizes__label { margin: var(--space-3) 0 var(--space-2); font-weight: 500; }
.seg-size-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.seg-size-list li {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn);
  padding: var(--space-1) var(--space-2);
  background: var(--color-white);
  color: var(--color-ink);
}

/* ── форма запроса ─────────────────────────────────────────────────────── */
.seg-form h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--leading-tight);
}
/* Селектор с двумя классами намеренно: у секции .cta есть своё правило для
   абзацев с крупным кеглем, и одиночный класс оно перебивало — подпись под
   кнопкой выходила размером с лид. */
.seg-form p.seg-form__note {
  margin-top: var(--space-2);
  font-size: var(--fs-cap);
  line-height: var(--leading-normal);
  color: var(--color-on-dark);
  opacity: .8;
}

/* Ссылки шапки ведут на якоря внутри страницы, а шапка липкая: без запаса
   заголовок секции уезжает под неё, и человек попадает на середину блока. */
.seg-pains,
.seg-warn,
.seg-calc,
.seg-goods,
.seg-sizes,
.seg-spec,
.seg-form { scroll-margin-top: 88px; }

/* ── комплектность на койко-место ──────────────────────────────────────────
   Заведено 26.08.2026 вместе с разделом санаториев. Коэффициенты стоят
   отдельной группой под таблицей коек, а не колонкой в ней: они относятся ко
   всему расчёту сразу, а не к строке. Сетка на auto-fit — позиций
   комплектности у следующего раздела может быть не три. */
.seg-komplekt { margin-top: var(--space-3); }
.seg-komplekt__title {
  font-size: var(--fs-cap);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.seg-komplekt__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
}
.seg-komplekt .calc-field small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-label);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}

/* ── спецификация для тендера ──────────────────────────────────────────────
   Второй вход раздела: человеку из закупочной комиссии нужен не красивый
   блок, а текст, который он перенесёт в лот. Поэтому здесь таблица, а не
   карточки, и поэтому она прокручивается внутри своей рамки, а не растягивает
   страницу вбок: колонок много и они длинные.

   Печать учтена отдельно: в бумагу таблица должна уйти целиком, без полосы
   прокрутки и без обрезанного правого края — этот раздел печатают и подшивают
   к конкурсной документации. */
.seg-spec { padding: var(--space-section-tight) 0; }
.seg-spec__actions { margin-bottom: var(--space-3); }
.seg-spec__wrap { max-height: 32rem; overflow: auto; }
.seg-spec__table { font-size: var(--fs-cap); }
.seg-spec__table th {
  position: sticky;
  top: 0;
  background: var(--color-cream);
  z-index: 1;
}
.seg-spec__table td {
  vertical-align: top;
  line-height: var(--leading-normal);
}
.seg-spec__table td:first-child { font-weight: 500; }

@media print {
  .seg-spec__wrap { max-height: none; overflow: visible; }
  .seg-spec__actions { display: none; }
}

/* ── телефон ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Таблица расчёта на телефоне разворачивается в карточки. Шестью колонками
     она уезжала за край: в окне 375 px таблица занимала 674, и колонки
     «Скатерть» и «Метраж» — то есть ответ, ради которого расчёт и сделан, —
     оказывались за правым краем, где их надо было искать боковой прокруткой.
     Найдено на живом замере 25.08.2026. */
  .seg-tables,
  .seg-tables tbody,
  .seg-tables tr,
  .seg-tables td { display: block; width: 100%; }
  .seg-tables thead { display: none; }
  .seg-tables tr {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: var(--space-2);
    margin-bottom: var(--space-1);
    position: relative;
  }
  .seg-tables td {
    border: none;
    padding: var(--space-1) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    text-align: right;
  }
  .seg-tables td[data-label]::before {
    content: attr(data-label);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted);
    text-align: left;
    flex: none;
  }
  .seg-tables td small { text-align: right; }
  .seg-tables .calc-per input { width: 5rem; }
  .seg-tables .seg-del { position: absolute; top: var(--space-1); right: var(--space-1); width: auto; padding: 0; }

  /* 19.09.2026: было 96/64 — на телефоне первый экран имел отступы БОЛЬШЕ
     десктопных (там 80/96 при ширине в четыре раза большей). Приведено к
     телефонной ступени ритма. Повод — рост страниц после смены гарнитуры. */
  .seg-hero { padding: var(--space-4) 0 var(--space-4); }
  .seg-hero--foto .seg-hero__inner { grid-template-columns: 1fr; }
  .seg-hero__foto img { max-width: none; margin-left: 0; }
  .seg-pains,
  .seg-warn,
  .seg-goods,
  .seg-sizes { padding: var(--space-section-sm) 0; }
  .seg-hero h1 { max-width: none; }
  .seg-dim input { width: 4.25rem; }
  .seg-actions .btn { width: 100%; justify-content: center; }

  /* Спецификация на телефоне разворачивается в карточки тем же приёмом, что
     таблица расчёта: шесть колонок с длинным составом в окно 375 px не
     помещаются никак, а именно состав и режим стирки — то, ради чего человек
     сюда пришёл. */
  .seg-spec__wrap { max-height: none; }
  .seg-spec__table,
  .seg-spec__table tbody,
  .seg-spec__table tr,
  .seg-spec__table td { display: block; width: 100%; }
  .seg-spec__table thead { display: none; }
  .seg-spec__table tr {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: var(--space-2);
    margin-bottom: var(--space-1);
  }
  .seg-spec__table td {
    border: none;
    padding: var(--space-1) 0;
  }
  .seg-spec__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted);
  }
}

/* Итог вместо калькулятора. 02.09.2026, слово Айгуль «без ввода — убери поле».
   Блок просил вписать свою цену за стирку и возвращал её обратно; осталось
   утверждение и ноль. Ноль набран крупно и акцентным цветом — он и есть довод,
   а строка над ним его называет. */
.seg-econ-box--itog {
  align-items: flex-start;
  gap: var(--space-1, 8px);
}
.seg-econ-stanet {
  margin: 0;
  font-size: var(--fs-h3, 1.375rem);
  line-height: 1.25;
  color: var(--ink, currentColor);
}
.seg-econ-nol {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  line-height: 1;
  font-weight: 600;
  color: var(--gold, #a07d4f);
}