/* ============================================================================
   RELAID · СЛОЙ РЕДИЗАЙНА  (ТЗ 41, решение владельца 04.09.2026)
   ============================================================================
   Требование дословно: «полностью переделай, чтобы было красиво; однотипные
   страницы под одну разметку; не куча одинаковых карточек».

   ЧТО БЫЛО НЕ ТАК. Каждая сноска, подводка и пояснение получили подложку
   с рамкой — страница превратилась в набор серых коробок, вложенных друг
   в друга. Оформление подменило вёрстку: разницы между «это ссылка»,
   «это сноска» и «это абзац» на глаз не осталось.

   ЧТО ДЕЛАЕМ. Ведёт типографика и воздух, а не рамки. Опора — референс
   владельца (design/референс-владельца-acropolis.jpg):
     · заголовок секции крупный, с кикером, по центру, вокруг воздух;
     · объяснения стоят колонками БЕЗ подложки, разделённые тонкой линией;
     · коробка остаётся только у того, что нажимается, и у акцента;
     · сноска — тихая строка под блоком, а не плашка;
     · таблица без внешней рамки, только линии строк;
     · между блоками секции — крупный шаг.

   Палитра, шрифты, радиусы и СВГ не трогаются: только облик раскладки.
   Слой идёт последним и переопределяет накопившиеся правила. Откат —
   удаление этого файла из <head>.
   ========================================================================= */

/* ---------- 1. ВОЗДУХ ---------------------------------------------------- */
:root{
  --sec-gap: var(--s-7);          /* шаг между блоками секции: 32 -> 48 */
}
@media (min-width:1024px){
  :root{ --sec-py: var(--s-8); }  /* поля полосы остаются 64: воздух даёт шаг блоков */
}
.sec__head{ margin-bottom:var(--s-7) }
@media (min-width:1024px){ .sec__head{ margin-bottom:var(--s-8) } }

/* ---------- 2. ШАПКА СЕКЦИИ --------------------------------------------- */
.sec__head{
  display:block;
  text-align:center;
  max-width:min(100%, 64ch);
  margin-inline:auto;
}
.sec__head > *{ margin-inline:auto }
.sec__head .kicker{
  display:block; margin-bottom:var(--s-4);
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--acc);
}
.blk--dark .sec__head .kicker{ color:var(--acc-hi) }
.sec__head h2,
.sec__head h3{
  max-width:min(100%, 24ch);   /* заголовок в две-три строки, не в столбик */
  margin-inline:auto;
  font-size:var(--t-h2); line-height:1.18; letter-spacing:-.01em;
  text-wrap:balance;
}
.sec__head .lead{
  margin-top:var(--s-4);
  max-width:min(100%, 58ch);
  font-size:var(--t-lead); line-height:1.55; color:var(--soft);
  /* подводка — текст, а не плашка */
  background:none; border:0; padding:0;
}
.blk--dark .sec__head .lead{ color:var(--soft-i) }
/* Шапка ВСЕГДА столбиком. Двухколоночную раскладку ей задавали правила
   с :has() из прежних ТЗ — заголовок слева, подводка справа. Два
   центрированных столбца рядом читаются как две разные шапки, поэтому
   раскладка снята. Специфичность поднята повтором класса: перебиваем
   :has()-правила без !important. */
.blk .sec .sec__head.sec__head.sec__head{
  display:block; grid-template-columns:none; align-items:initial;
}
.blk .sec .sec__head.sec__head.sec__head > .lead.lead.lead{
  margin:var(--s-5) auto 0; max-width:min(100%, 58ch); padding:0;
  background:none; border:0; box-shadow:none;
}

/* Подзаголовок внутри секции (h2/h3 вне шапки) — по центру, как и шапка,
   иначе на одной полосе два разных выравнивания. */
[data-sec] > h2,
[data-sec] > h3{
  text-align:center; max-width:min(100%, 24ch); margin-inline:auto;
  margin-bottom:var(--s-6);
}

/* ---------- 3. КОЛОНКИ ОБЪЯСНЕНИЙ: БЕЗ КОРОБОК -------------------------- */
/* Карточка без ссылки — это не карточка, а колонка текста. Подложка, рамка
   и скругление снимаются; ряд держит тонкая вертикальная линия, как
   в референсе. Нажимаемое (.card--link) и постер (.card--cover) коробку
   сохраняют — по ним и видно, что там есть переход. */
.card:not(.card--link):not(.card--cover){
  background:none; background-image:none; box-shadow:none;
  border:0; border-radius:0;
  padding:0 0 0 var(--s-5);
  border-left:1px solid var(--line);
}
.blk--dark .card:not(.card--link):not(.card--cover){ border-left-color:var(--line-i) }
@media (max-width:767px){
  .card:not(.card--link):not(.card--cover){
    padding:var(--s-4) 0 0; border-left:0; border-top:1px solid var(--line);
  }
  .blk--dark .card:not(.card--link):not(.card--cover){ border-top-color:var(--line-i) }
}
.card:not(.card--link):not(.card--cover) .card__title{
  font-size:var(--t-h4); font-weight:600; line-height:1.3; margin:0 0 var(--s-3);
}
.card:not(.card--link):not(.card--cover) .card__text{
  font-size:var(--t-small); line-height:1.7; color:var(--soft); max-width:44ch;
}
.blk--dark .card:not(.card--link):not(.card--cover) .card__text{ color:var(--soft-i) }
.card__meta{
  display:block; margin-bottom:var(--s-3);
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; color:var(--acc);
}
.blk--dark .card__meta{ color:var(--acc-hi) }

/* ---------- 4. КАРТОЧКА-ССЫЛКА: ОДНА, УЗНАВАЕМАЯ ------------------------ */
.card--link{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s-6);
}
.blk--dark .card--link{ background:var(--bg-2); border-color:var(--line-i) }

/* ---------- 5. СНОСКА — ТИХАЯ СТРОКА, НЕ ПЛАШКА ------------------------- */
.sec__foot,
.sec__note{
  background:none; border:0; border-radius:0; box-shadow:none;
  margin-top:var(--s-7); padding:var(--s-5) 0 0;
  border-top:1px solid var(--line);
  font-size:var(--t-small); line-height:1.7; color:var(--soft);
}
.blk--dark .sec__foot,
.blk--dark .sec__note{ border-top-color:var(--line-i); color:var(--soft-i) }
.sec__foot > p{ max-width:min(100%, 82ch) }
.sec__foot > p + p{ margin-top:var(--s-3) }
.sec__foot .btn-row{ margin-top:var(--s-5) }

/* ---------- 6. ТАБЛИЦА: ТОЛЬКО ЛИНИИ СТРОК ------------------------------ */
.price-wrap, .verdict, .spec, .price-table, .dtable{
  background:none; border:0; border-radius:0; box-shadow:none;
}
.price-table th, .verdict th, .spec th{
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--soft);
  padding-bottom:var(--s-4);
}
.price-table td, .verdict td, .spec td{ padding-block:var(--s-4) }

/* ---------- 7. ПЛАШКА-АКЦЕНТ: ОДНА НА ЭКРАН ----------------------------- */
.plate{
  background:var(--surf-2); border:0; border-radius:var(--r-card);
  padding:var(--s-7);
}
.blk--dark .plate{ background:var(--bg-2) }

/* ---------- 8. НУМЕРОВАННЫЙ СПИСОК -------------------------------------- */
.numlist{ gap:var(--s-6) }
.numlist > li{ padding-top:var(--s-6); border-top:1px solid var(--line) }
.blk--dark .numlist > li{ border-top-color:var(--line-i) }
.numlist__t{ font-size:var(--t-h4); font-weight:600 }
.numlist__x, div.numlist__x > p{ color:var(--soft); max-width:min(100%, 68ch) }

/* ---------- 9. РЯД ЦИФР -------------------------------------------------- */
.facts, .stats{ gap:var(--s-8) }

/* ---------- 10. ДОБОРКА -------------------------------------------------- */
/* Сноска сразу под шапкой не нуждается ни в линии, ни в двойном отступе. */
.sec__head + .sec__foot,
.sec__head + .sec__note{ margin-top:0; padding-top:0; border-top:0 }

/* Подзаголовок внутри секции — по центру, как и шапка. */
.sec > h2, .sec > h3,
[data-sec] > h2, [data-sec] > h3{
  text-align:center; max-width:min(100%, 24ch);
  margin-inline:auto; margin-bottom:var(--s-6);
}

/* Пустой блок не оставляет после себя воздух. */
[data-sec] > :empty{ display:none }

/* Ряд колонок: шаг между колонками крупнее, чем у карточек, — линия
   разделителя должна дышать. */
.grid{ column-gap:var(--s-7) }
@media (max-width:767px){ .grid{ column-gap:0 } }