/* Страница оферты (templates/legal/oferta.html): поля по бокам, длинный заголовок документа, таблица цен, реквизиты.
   Общий вид юридических страниц — в site.css (.legal, .prose, .table). Подключается только на /oferta. */

/* Поля по бокам. В site.css у .legal боковые отступы обнулены, и на экранах уже 1120 px
   (телефон, планшет) текст прилипал бы к самому краю. */
.legal-offer { padding-left: var(--gutter); padding-right: var(--gutter); }

.legal-offer__title { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem); max-width: var(--measure); margin-bottom: .45em; }
.legal-offer .table-wrap { margin: 1.3em 0 1.5em; }
.legal-offer li { margin-bottom: .35em; }

/* Цена не переносится на вторую строку */
.legal-offer__prices td:last-child { white-space: nowrap; }

/* Реквизиты: узкая колонка названий, широкая — значений. Длинный номер или адрес почты на самом узком
   телефоне переносится, а не раздвигает таблицу. */
.legal-offer__requisites th { width: 1%; padding-right: 22px; }
.legal-offer__requisites td { overflow-wrap: anywhere; }
.legal-offer__requisites tr:last-child th { border-bottom: 0; }

/* На телефоне три колонки не помещаются: каждая услуга идёт блоком — название, что входит, цена.
   Шапка таблицы скрыта с экрана, но остаётся для программ, читающих экран вслух. */
@media (max-width: 600px) {
  .legal-offer__prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-offer__prices table, .legal-offer__prices tbody { display: block; }
  .legal-offer__prices tr { display: block; padding: 13px 14px; border-bottom: 1px solid var(--sand-soft); }
  .legal-offer__prices tr:last-child { border-bottom: 0; }
  .legal-offer__prices td { display: block; padding: 0; border: 0; }
  .legal-offer__prices td:first-child { font-weight: 600; }
  .legal-offer__prices td:nth-child(2) { margin: 3px 0 5px; color: var(--ink-2); }
  .legal-offer__prices td:last-child { white-space: normal; }
}

/* Самые узкие телефоны: реквизиты набраны чуть мельче, чтобы ОГРНИП и адрес почты помещались в строку */
@media (max-width: 360px) {
  .legal-offer__requisites .table { font-size: .875rem; }
  .legal-offer__requisites th, .legal-offer__requisites td { padding: 10px; }
}

@media print {
  .legal-offer .table-wrap { overflow: visible; }
  .legal-offer__prices tr, .legal-offer li { break-inside: avoid; }
}