/* БЛОК ПРЯМОГО ОТВЕТА. Подключают две страницы: «Гарантия и доставка» и калькулятор изгороди.

   Один файл на обе, а не по копии на страницу: блок один и тот же, и две его копии разъехались
   бы на первой правке — у нас это уже случалось с ценами и с лестницей гарантии.

   🔴 ВЫРАВНИВАНИЕ — ТРЕБОВАНИЕ КИРИЛЛА 15.08.2026, дословно: «в гарантии - по центру страницы
   вместе со всем, в калькуляторе - ровно под ui блоками выравненно».

   Обе половины этого требования выполняются ОДНИМ решением, и в этом всё дело: блок не задаёт
   себе ни ширины, ни полей по бокам. Тогда его края совпадают с краями соседей сами —
   на «Гарантии» это разделы `.predlozhenie`, на калькуляторе панель `.hedge`, итог
   `.hedge__result` и справочник `.hedge__reference`. Поставь мы здесь свою `max-width` —
   она совпала бы с соседями сегодня и разошлась бы с ними после любой правки чужого файла.

   ⚠️ Заголовок по центру, а текст по левому краю — так устроены ОБЕ страницы до нас
   (`.predlozhenie__zagolovok`, `.hedge__title`). Блок повторяет их, а не заводит своё. */

.otvet {
  /* Поле между блоками то же, что между разделами страницы-рассказа. */
  margin: var(--o-7) 0;
}

.otvet__vopros {
  margin: 0 0 var(--o-3);
  font-size: calc(var(--t-xl) * 4 / 3);
  letter-spacing: .01em;
  text-align: center;
}

/* Первое предложение — сам ответ. Крупнее оговорки ровно на шаг, тем же приёмом, каким
   на страницах-рассказах выделен первый абзац (`.page__lead`). Второго начертания не берём:
   разнобой внутри страницы читается как переход в другой раздел сайта. */
.otvet__srazu {
  font-size: var(--t-l);
  margin-bottom: var(--o-5);
}

/* Число внутри ответа — тем же весом, что цена в карточке товара. Краски не меняем:
   выделенное цветом число на живом фоне читается как ссылка, и по нему пробуют нажать. */
.otvet__srazu strong,
.otvet__ogovorka strong { font-weight: 700; }

/* 🔴 ПРОКРУТКА ЖИВЁТ ВНУТРИ ЭТОЙ ОБЁРТКИ, А НЕ У СТРАНИЦЫ. Без неё широкая таблица тянет
   за собой всю страницу: замер 15.08.2026 на макете при ширине окна 390 показал обрезанными
   АБЗАЦЫ, а не только таблицу — текст уходил за правый край и обрывался на полуслове.

   `min-width: 0` обязателен: без него обёртка внутри гибкой или сеточной раскладки
   отказывается быть уже своего содержимого, и прокрутка не включается вовсе. */
.otvet__prokrutka {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--kromka-yarkaya) transparent;
}

.otvet__tablitsa {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

/* Подписи столбцов тише текста и мельче его — они опора для глаза, а не содержание.
   Тот же приём и та же краска, что у подписей в таблицах карточки товара. */
.otvet__tablitsa thead th {
  padding: 0 var(--o-4) var(--o-3) 0;
  border-bottom: 1px solid var(--kromka-yarkaya);
  color: var(--polyn);
  font-size: var(--t-s);
  font-weight: 400;
  line-height: 1.3;
  vertical-align: bottom;
}

.otvet__tablitsa tbody th,
.otvet__tablitsa tbody td {
  padding: var(--o-3) var(--o-4) var(--o-3) 0;
  border-bottom: 1px solid var(--kromka);
  vertical-align: top;
}

/* Подпись строки — обычным текстом, а не жирным: жирными в этой таблице идут значения,
   ради которых человек её и открыл. */
.otvet__tablitsa tbody th {
  color: var(--moloko-myagkoe);
  font-weight: 400;
}

.otvet__tablitsa tbody td {
  color: var(--molochnyy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Последняя строка без линии: линия под последней строкой читается как начало следующей. */
.otvet__tablitsa tbody tr:last-child th,
.otvet__tablitsa tbody tr:last-child td { border-bottom: 0; }

.otvet__ogovorka { margin-top: var(--o-5); }

/* На странице гарантии прямые ответы продолжают тот же рассказ и потому не должны
   внезапно менять гарнитуру, цвет и ступень заголовка. Калькулятор этими правилами
   не затрагивается: ему нужен собственный белый вопрос над результатом. */
.page--garantiya .otvet__vopros {
  color: var(--heading-metal);
  font-family: var(--shrift-antikva);
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
}

.page--garantiya .otvet__srazu,
.page--garantiya .otvet__ogovorka {
  color: var(--tekst-myagkiy);
  font-family: var(--shrift-teksta);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
}

/* 🔴 КРАСНАЯ СТРОКА НАСЛЕДУЕТСЯ ОТ СТРАНИЦЫ, А НЕ ЗАДАЁТСЯ БЛОКУ ВСЕГДА. Правка Кирилла
   12.08.2026 по «Сотрудничеству»: «КАЖДЫЙ абзац ОБЯЗАН начинаться с пробела». Правило
   в `pages.css` перечисляет абзацы вводки и разделов поимённо, и наши в тот перечень
   не попадают — на снимке 15.08.2026 блок стоял среди отступленных абзацев без отступа,
   и это читалось как чужая вставка.

   Отступ дан ТОЛЬКО на страницах-рассказах и ТОЛЬКО двум абзацам: на калькуляторе красной
   строки нет ни у одного текста, а дата — не абзац тела, а подпись под ним. Условие взято
   тем же, что в `pages.css` (`:not(.page--center)`), чтобы блок повторял правило страницы,
   а не заводил своё. */
.page--text:not(.page--center) .otvet__srazu,
.page--text:not(.page--center) .otvet__ogovorka { text-indent: 1.5em; }

/* Дата — тише всего на блоке, но видима глазом. Она не украшение: это единственный рычаг
   под ответы нейросетей с доказанной связью, и прятать её значит выключать блок наполовину. */
.otvet__data {
  margin-top: var(--o-4);
  color: var(--polyn);
  font-size: var(--t-s);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   УЗКИЙ ЭКРАН: ТАБЛИЦА РАЗВОРАЧИВАЕТСЯ В ПАРЫ «ПОДПИСЬ · ЗНАЧЕНИЕ»

   🔴 ПРОКРУТКИ ВБОК ЗДЕСЬ НЕ ХВАТАЕТ, И ЭТО ЗАМЕР, А НЕ ВКУС. У таблицы посадки четыре
   смысловые колонки; на 390 точках за краем остаётся последняя — «посадка 50 %, гарантия
   два года», то есть ровно то, ради чего человек сравнивает ступени. Прокрутка вбок внутри
   страницы — жест, о котором никто не догадывается: подсказки о ней нет, а вертикальный
   палец её не находит.

   Поэтому строка становится группой: подпись столбца печатается слева из `data-podpis`,
   значение справа. Рамок и заливок группа не получает — она остаётся строкой таблицы,
   а не превращается в карточку.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 48rem) {
  /* Шапка убирается с глаз, но остаётся озвучивателю экрана и роботу: он читает связь
     ячейки со своим столбцом по разметке, а не по внешнему виду. Полное `display: none`
     эту связь снимает — отсюда старый приём с точечным размером и обрезкой. */
  .otvet__tablitsa thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .otvet__prokrutka { overflow-x: visible; }

  .otvet__tablitsa,
  .otvet__tablitsa tbody,
  .otvet__tablitsa tbody tr,
  .otvet__tablitsa tbody th,
  .otvet__tablitsa tbody td { display: block; width: 100%; }

  .otvet__tablitsa tbody tr {
    padding: var(--o-4) 0;
    border-bottom: 1px solid var(--kromka-yarkaya);
  }

  .otvet__tablitsa tbody tr:last-child { border-bottom: 0; }

  /* Пара: подпись слева узкой колонкой, значение справа. Сетка, а не отступ, — иначе
     значения в соседних строках встают лесенкой по длине подписи. */
  .otvet__tablitsa tbody th,
  .otvet__tablitsa tbody td {
    display: grid;
    grid-template-columns: minmax(7.5rem, .9fr) minmax(0, 1.1fr);
    gap: var(--o-4);
    padding: var(--o-2) 0;
    border-bottom: 0;
    text-align: left;
  }

  .otvet__tablitsa tbody th::before,
  .otvet__tablitsa tbody td::before {
    content: attr(data-podpis);
    color: var(--polyn);
    font-size: var(--t-s);
    font-weight: 400;
    line-height: 1.3;
  }

  /* Первая ячейка группы — её имя: «контейнер 3 л». Она и должна быть заметнее остальных. */
  .otvet__tablitsa tbody th { color: var(--molochnyy); font-weight: 700; }
}