/* sections.css — раскладки тринадцати блоков.
   Здесь только каркас: где доминанта, где точка входа взгляда, где смена
   регистра. Внутреннее устройство компонентов — в components.css,
   тексты — в разметке. */

/* Общий каркас блока: микро-метка, заголовок, тело.
   Метка стоит над заголовком и тянет линию до края колонки. */
.section {
  position: relative;
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
  margin-bottom: var(--as-block-gap);
}

/* Заголовок занимает максимум две трети колонки — остальное держит воздух,
   которого на странице ровно столько, сколько нужно, чтобы читать. */
.section__title {
  max-width: var(--as-title-measure);
}

.section__body {
  display: grid;
  grid-template-columns: repeat(var(--as-cols), minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-block-gap);
}

/* Якорь под фиксированной шапкой: заголовок не уезжает под неё */
.section[id] {
  scroll-margin-top: var(--as-header-h);
}

/* ---------- 01 Hero ----------
   Приём ESTADEL: слово стоит слоем ниже медиа и уходит за него по оси Z,
   не обрезаясь. Второй «фишки» в hero нет. */
/* Высота первого экрана не фиксируется: его собственное содержимое —
   метка, слово, полотно 16:9 и текст с действием — и так занимает экран.
   Жёсткие 90vh на высоком мониторе оборачиваются пустотой, которой
   на этой странице быть не должно. */
#s01 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(var(--as-header-h) + var(--as-s8));
  padding-bottom: var(--as-rhythm-tight);
  overflow: hidden;
}

/* Медиа стояло под словом во всю ширину, и полотно 16:9 на 1280 — это 720px:
   заголовок с действием уезжали на второй экран (замер: h1 на y=1049 при
   высоте окна 900). Слот 16:9 даёт ту же высоту и с настоящим кадром, поэтому
   дело не в заглушке, а в композиции: медиа уходит в половину сетки, текст
   встаёт рядом, а не под ним. Перекрытие остаётся — слот надвинут на нижний
   край слова, и хвост «ОР» выходит из-под него по оси Z, как и было.
   Медиа занимает левую половину, текст правую — ровно в том порядке, в каком
   они стоят в разметке: колонками переставлять узлы нельзя, это тот же приём,
   что и снятый в таске 06 `order`, и он так же разводит обход с картинкой. */
#s01 .shell {
  display: grid;
  grid-template-columns: repeat(var(--as-cols), minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  align-items: start;
}

#s01 .marker {
  grid-column: 1 / -1;
  grid-row: 1;
}

#s01 .hero__word {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: var(--as-z-word);
  pointer-events: none;
}

/* Единственный владелец сдвига перекрытия — верхний отступ слота. Величина
   меняется по регистрам, место — нет: слово о перекрытии не знает вовсе. */
#s01 .hero__media {
  grid-column: 1 / 7;
  grid-row: 3;
  margin-top: calc(var(--as-s6) * -1);
  position: relative;
  z-index: var(--as-z-media);
}

#s01 .hero__text {
  grid-column: 7 / -1;
  grid-row: 3;
  position: relative;
  z-index: var(--as-z-media);
  display: flex;
  flex-direction: column;
  gap: var(--as-s5);
  max-width: var(--as-measure);
  margin-top: var(--as-s5);
}

#s01 .hero__legal {
  margin-top: var(--as-s5);
}

/* ---------- 02 Тезис ----------
   Экран-тишина. Одна мысль узкой колонкой, ничего больше. */
#s02 .thesis {
  max-width: var(--as-shell-narrow);
}

/* ---------- 03 Рынок ----------
   Доминанта — текст слева, числа справа. */
/* Ширину обеих колонок держат .col-7 и .col-4 в разметке. Секция добавляет
   единственное, чего в сетке нет: числа прижаты к правому краю, между
   колонками остаётся пустая двенадцатая доля. */
#s03 .market__figures { grid-column-end: -1; }

/* ---------- 04 Сектор F ----------
   Схема — доминанта, переключатели слоёв над ней в одну строку. */
#s04 .sector__layers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s3);
  margin-bottom: var(--as-s5);
}

/* Легенда — не подпись к схеме, а четыре разных утверждения с разным статусом.
   Виден один слой, остальные ждут переключателя; ритм внутри неё держит .stack.
   Ширина — .col-4, прижата к правому краю. */
#s04 .sector__legend { grid-column-end: -1; }

/* Кадр схемы отвечает на переключатель наравне с легендой: список слоёв стоит
   внутри слота и собирается вместе с выбором — иначе переключается текст рядом
   со схемой, а не схема. Заглушка остаётся заглушкой: штриховка, пунктир и
   статус «Схемы пока нет» никуда не делись, кадром это не притворяется.
   Типографику держат .micro и .t-mute из разметки, секция задаёт только место. */
#s04 .sector__drawn {
  position: relative;
  z-index: var(--as-z-media);
  display: flex;
  flex-direction: column;
  gap: var(--as-s2);
}

/* Верхний слой — тот, что выбран кнопкой; лёгшие под него остаются приглушёнными.
   Состояние приходит из js/filters.js атрибутом, а не классом. */
#s04 .sector__drawn [data-layer-state="current"] {
  color: var(--as-accent-400);
}

/* Полотно во всю ширину: схема выше чертит место, полотно показывает, что оно
   существует. Стоит вне .shell, поэтому выходит за поля страницы само. */
#s04 .sector__canvas {
  margin-top: var(--as-rhythm-tight);
}

/* ---------- 05 Проект ----------
   Фильтр по статусу данных, под ним список позиций в три колонки. */
#s05 .project__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-s3);
  margin-bottom: var(--as-block-gap);
}

#s05 .project__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s5);
  grid-column: span 12;
}

/* Позиция и её статус стоят одна под другой: статус читается как часть строки,
   а не как значок на полях. Линия над позицией — компонент .rule, собственной
   линии у блока нет; шаг внутри позиции даёт .stack. */
#s05 .project__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Скрытие позиции фильтром — общее правило [hidden] в base.css. */

/* Пустая выдача фильтра — не ошибка, а ответ: на этом этапе фактов нет. */
#s05 .project__empty {
  grid-column: span 12;
  margin-top: var(--as-s6);
}

/* ---------- 06 Полотно ----------
   Единственная задача блока — сменить регистр плотности. */
#s06 {
  padding-block: 0;
}

#s06 .shell {
  padding-block: var(--as-rhythm-tight);
}

#s06 .canvas__caption {
  margin-bottom: var(--as-s5);
}

/* ---------- 07 Форматы ----------
   Крупное слева, два мелких справа (приём Примаверы).
   Два мелких стояли друг под другом и вытягивали правую колонку вдвое:
   левая тянулась на 1801px при содержимом в 681px — экран, наполовину
   пустой (замер приёмки). Мелкие встают рядом, а не стопкой, и высоты
   колонок сходятся. Крупный остаётся крупным не позицией, а размером кадра:
   пропорция у всех трёх одна, поэтому кадр слева больше каждого соседнего
   и по ширине, и по высоте — сравнивать есть что. */
#s07 .formats__rest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-col-gap);
  align-items: start;
}

/* Два мелких формата — те же части в том же порядке, что и крупный:
   кадр, имя, площадь, следствие, статус. Сравнение делается глазом. */
#s07 .formats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- 08 Экономика ----------
   Три слоя логики один под другим. Разделяет их компонент .rule —
   единственный тип линии на странице (DESIGN_SYSTEM §6), поэтому
   собственного border у слоя нет. Слои стоят раскрытыми: сворачивает их
   скрипт, а не разметка. */
#s08 .economy__layers {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
}

#s08 .economy__layer {
  padding-block: var(--as-s6);
}

#s08 .economy__head {
  margin: 0;
}

/* Вся строка заголовка — одна кнопка: и мышью, и пальцем попадают в неё,
   а не в мелкий значок справа. */
#s08 .economy__trigger {
  display: flex;
  align-items: baseline;
  gap: var(--as-s5);
  width: 100%;
  text-align: left;
  color: var(--as-text-on-dark);
}

#s08 .economy__num {
  flex: 0 0 auto;
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-medium);
  letter-spacing: var(--as-tr-micro);
  color: var(--as-accent-400);
}

#s08 .economy__name {
  flex: 1 1 auto;
}

/* Панель отходит от своего заголовка сама: слой — не карточка, и шаг между
   строкой-кнопкой и первым абзацем принадлежит панели, а не контейнеру. */
#s08 .economy__panel {
  margin-top: var(--as-s5);
}


/* ---------- 09 Хронология ----------
   Три даты в строку. Линия над датой — тот же .rule, что и везде. */
#s09 .timeline {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s7);
}

#s09 .timeline__date {
  margin-top: var(--as-s3);
}

/* Полотно во всю ширину: рабочая дата становится проверенной только съёмкой
   с датой в кадре. Съёмки нет — и полотно говорит именно это. */
#s09 .timeline__canvas {
  margin-top: var(--as-rhythm-tight);
}

#s09 .timeline__note {
  margin-top: var(--as-s6);
  max-width: var(--as-measure);
}

/* ---------- 10 Кто отвечает ----------
   Четыре колонки. Две первые позиции — сторона договора и правовая рамка —
   идут вдвое шире: это доминанта блока, остальное к ней приложение. */
#s10 .parties {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s7);
}

#s10 .parties__item--wide {
  grid-column: span 2;
}

/* Ниже --as-bp-md широкая позиция сжимается до одной колонки —
   это переопределение мобильной версии, и живёт оно в responsive.css. */

/* ---------- 11 Проверка ----------
   Две колонки разного веса. Список «чего у нас нет» шире и крупнее: он и есть
   аргумент блока, а не оговорка при нём (История 39 — равных половин нет). */
#s11 .audit__have { grid-column: span 4; }
#s11 .audit__missing { grid-column: 6 / span 7; }

#s11 .audit__title {
  margin-bottom: var(--as-s5);
}

#s11 .audit__list {
  display: flex;
  flex-direction: column;
  gap: var(--as-s6);
}

#s11 .audit__item {
  max-width: var(--as-measure);
}

#s11 .audit__gap {
  margin-top: var(--as-s6);
}

/* ---------- 12 Заявка ----------
   Слева фраза, справа форма. Одно действие на блок. */
#s12 .lead__say { grid-column: span 5; }

#s12 .lead__form {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--as-s6);
}

/* Согласие — не поле ввода, а флажок со строкой. Секции принадлежит только
   раскладка строки; сам флажок и его ошибка живут в .field. */
#s12 .lead__consent-row {
  display: flex;
  align-items: flex-start;
  gap: var(--as-s3);
}

#s12 .lead__actions {
  margin-top: var(--as-s3);
}

/* Ответ формы стоит под кнопкой и не двигает её: состояние меняется текстом,
   а не прыжком раскладки. Узел живого региона стоит в разметке всегда —
   пустой и раскрытый, иначе экранный диктор не объявит появившийся текст.
   Четыре тона — четыре разных вида, иначе тон объявлять незачем. */
#s12 .lead__status {
  max-width: var(--as-measure);
}

#s12 .lead__status[data-tone="wait"] {
  color: var(--as-text-on-light-mute);
}

#s12 .lead__status[data-tone="stub"] {
  padding: var(--as-s4);
  background: var(--as-accent-soft);
  color: var(--as-text-on-light);
}

#s12 .lead__status[data-tone="ok"] {
  color: var(--as-text-on-light);
  font-weight: var(--as-w-medium);
}

#s12 .lead__status[data-tone="error"] {
  color: var(--as-accent-500);
  font-weight: var(--as-w-medium);
}

/* ---------- 13 Футер ---------- */
#s13 .footer__cols {
  margin-top: var(--as-s7);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--as-col-gap);
  row-gap: var(--as-s6);
}

/* Микро-метка колонки берётся из типографической шкалы классом .micro;
   секции остаётся только цвет — на тёмном фоне она не должна тонуть. */
#s13 .footer__title {
  color: var(--as-text-on-dark);
}

#s13 .footer__value {
  color: var(--as-text-on-dark);
}

/* Разделитель футера — тот же .rule, а не собственная линия блока. */
#s13 .footer__rule {
  margin-top: var(--as-s7);
}

#s13 .footer__legal {
  margin-top: var(--as-s5);
  max-width: var(--as-measure);
}