/**
 * Сторінки поза лендінгом: інформаційні (Каталог → Сторінки) і 404.
 *
 * Живе тут, а не в catalog/view/miltech/ — ту теку scripts/sync-design.php
 * стирає й перезаписує з макета дизайнера при кожній синхронізації.
 *
 * Підключається лише де треба: контролер розширення додає цей файл у
 * document->addStyle тільки поза головною (див. miltech/content.php).
 *
 * Усе на токенах дизайну, жодного власного кольору чи розміру — сторінки
 * мають міняти вигляд разом з палітрою, як і решта сайту.
 */

/* ── Каркас сторінки ──────────────────────────────────────────
   Хедер у макеті position: fixed, а компенсує його hero своїм
   padding-top. На сторінках без hero цієї компенсації немає — саме
   тому вміст заїжджав під хедер, а футер підтягувався вгору. */
.page {
  padding-block: calc(var(--header-h, 68px) + var(--s-8)) var(--s-16);
  /* тримає футер унизу, коли тексту мало */
  min-height: 72svh;
  background: var(--c-bg);
}

.page__title {
  margin-bottom: var(--s-6);
}

/* ── Текст із адмінки ─────────────────────────────────────────
   Сюди приходить довільний HTML з редактора OpenCart. У макета
   агресивний ресет (`* { margin: 0 }`, списки без маркерів,
   заголовки лише класами) — тож для цього блоку типографіку
   відновлюємо вручну. */
.page__body {
  color: var(--c-text-mid);
  max-width: var(--measure);
}

.page__body > * + * {
  margin-top: var(--s-4);
}

.page__body h1,
.page__body h2,
.page__body h3,
.page__body h4 {
  color: var(--c-text-hi);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.page__body h1 { font-size: var(--fs-h2); }
.page__body h2 { font-size: var(--fs-h3); }
.page__body h3 { font-size: var(--fs-h4); }
.page__body h4 { font-size: var(--fs-body); }

/* Заголовок після тексту потребує більшого повітря, ніж абзац */
.page__body * + h1,
.page__body * + h2,
.page__body * + h3,
.page__body * + h4 {
  margin-top: var(--s-8);
}

.page__body ul,
.page__body ol {
  padding-left: var(--s-6);
}

.page__body ul { list-style: disc; }
.page__body ol { list-style: decimal; }

.page__body li + li {
  margin-top: var(--s-2);
}

.page__body li::marker {
  color: var(--c-accent);
}

.page__body a {
  color: var(--c-text-hi);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-accent);
}

.page__body a:hover {
  color: var(--c-accent);
}

.page__body strong,
.page__body b {
  color: var(--c-text-hi);
  font-weight: var(--fw-semi);
}

.page__body blockquote {
  padding-left: var(--s-5);
  border-left: var(--rule-w, 2px) solid var(--c-accent);
  color: var(--c-text);
}

.page__body img {
  max-width: 100%;
  height: auto;
}

/* Широка таблиця не має розпирати сторінку — хай гортається сама */
.page__body table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.page__body th,
.page__body td {
  padding: var(--s-2) var(--s-3);
  border: var(--line-w) solid var(--c-line-soft);
  text-align: left;
}

.page__body th {
  color: var(--c-text-hi);
  font-weight: var(--fw-semi);
}

/* ── Сторінка 404 ─────────────────────────────────────────── */

.e404 {
  display: grid;
  place-items: center;
  text-align: center;
}

.e404__in {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
}

.e404__code {
  font-family: var(--f-main);
  font-weight: var(--fw-black);
  font-size: var(--fs-num-lg);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}

.e404__title,
.e404__lead {
  max-width: var(--measure-sm);
}

.e404__cta {
  margin-top: var(--s-3);
}

/* Технічний рядок — та сама подача, що й телеметрія у футері */
.e404__readout {
  margin-top: var(--s-6);
  padding: var(--s-2) var(--s-4);
  color: var(--c-text-dim);
}

@media (max-width: 640px) {
  .e404__readout {
    /* на вузькому екрані рядок ламається й перестає читатись як шильдик */
    display: none;
  }
}