/* blocks.css - блоки содержимого. Базовый слой это 360px: каждая сетка здесь в одну
   колонку, многоколоночные раскладки появляются только внутри min-width.
   Ни одного литерального цвета: всё через роли из tokens.css. */

.section { padding: var(--sp-7) 0; }
.section--tight { padding: var(--sp-5) 0; }

.section__title { margin-bottom: var(--sp-4); }

/* Проза идёт по ширине контейнера. max-width на абзацах и заголовках не ставится:
   прямое требование владельца, тексты по ширине сайта с небольшими паддингами. */
.prose { font-size: var(--fs-md); line-height: 1.65; }
.prose + .prose { margin-top: 0; }

/* ПЕРВЫЙ ЭКРАН */
.hero {
  padding: var(--sp-5) 0 var(--sp-6);
  background: var(--role-bg-alt);
  border-bottom: var(--border-w) solid var(--role-border);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}
.hero__kicker {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: var(--role-mark);
  color: var(--role-mark-text);
  border: var(--border-w) solid var(--role-border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero__title { margin-bottom: var(--sp-4); }
.hero__lead { font-size: var(--fs-lg); line-height: 1.5; }
.hero__actions { margin-bottom: 0; }

.hero__art { margin: 0; min-width: 0; }
.hero__art .art {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}
.hero__art figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--role-text-muted);
}

/* ЧИСЛОВАЯ ПОЛКА */
.statbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.statbar__item {
  margin: 0;
  padding: var(--sp-3);
  min-width: 0;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard-sm);
}
.statbar__value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.statbar__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--role-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* КАРТОЧКИ */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.card {
  margin: 0;
  min-width: 0;
  padding: var(--sp-4);
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-sm);
}
.card__title { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.card__text { margin-bottom: 0; }

/* ШАГИ */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 60px;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
}
.step__num {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--role-accent);
  color: var(--role-accent-text);
  border: var(--border-w) solid var(--role-border);
  border-radius: 50%;
  font-weight: 900;
  font-size: var(--fs-sm);
}
.step__title { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.step__text { margin-bottom: 0; }

/* ТАБЛИЦЫ. Обёртка доступна с клавиатуры: без tabindex и role скролл-рельса
   существует только для мыши. */
.table-scroll {
  overflow-x: auto;
  margin: var(--sp-4) 0 var(--sp-3);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  background: var(--role-surface);
}
.table-scroll:focus-visible { outline-offset: 0; }

.data-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table__caption {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 800;
  border-bottom: 2px solid var(--role-border);
}
.data-table th,
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--role-surface-2);
}
.data-table thead th {
  background: var(--role-surface-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.data-table tbody th { font-weight: 800; }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

.table-note { font-size: var(--fs-sm); color: var(--role-text-muted); }

/* ВРЕЗКА */
.callout {
  padding: var(--sp-4);
  background: var(--role-mark);
  color: var(--role-mark-text);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}
.callout__title { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.callout__text { margin-bottom: 0; }
.callout a { color: var(--role-mark-text); }

/* РИСУНОК */
.figure { margin: 0; }
.figure .art {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  background: var(--role-surface);
}
.figure__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--role-text-muted);
}

/* ВОПРОСЫ */
.faq {
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--role-surface);
}
.faq__item + .faq__item { border-top: 2px solid var(--role-surface-2); }
.faq__q {
  display: block;
  padding: var(--sp-4);
  padding-right: 52px;
  position: relative;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  min-height: 48px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-3);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--role-accent);
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 var(--sp-4) var(--sp-4); }
.faq__a p { margin-bottom: 0; }

/* ПЕРЕХОДЫ ДАЛЬШЕ ПО САЙТУ */
.next-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.next-item {
  margin: 0;
  min-width: 0;
  padding: var(--sp-4);
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
}
.next-item__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: var(--fs-md);
}
.next-item__text { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--role-text-muted); }

/* ПОЛОСА ПЕРЕХОДА */
.ctabar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  background: var(--role-accent);
  color: var(--role-accent-text);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}
.ctabar__title { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.ctabar__sub { margin-bottom: 0; }
.ctabar .btn {
  background: var(--role-surface);
  color: var(--role-text);
}
.ctabar .btn:hover { background: var(--role-mark); color: var(--role-mark-text); }

/* СТРАНИЦА ОШИБКИ.
   Отступ задаётся только по вертикали. Сокращённая запись padding здесь обнуляла
   боковые поля .container, потому что элемент несёт оба класса сразу, и текст 404
   упирался в край экрана. В стилях это выглядело правильно. */
.notfound { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.notfound__code {
  margin: 0 0 var(--sp-2);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--role-accent);
}
.notfound__title { margin-bottom: var(--sp-4); }

@media (min-width: 480px) {
  .statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .section { padding: var(--sp-8) 0; }
  .hero { padding: var(--sp-7) 0 var(--sp-8); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ctabar { grid-template-columns: minmax(0, 1fr) auto; }
  .figure .art { max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .hero__grid { gap: var(--sp-7); }
}

/* ВИДЕО. До нажатия на странице лежит только наш постер: ни одного запроса к чужому
   домену, пока читатель сам не решит смотреть. Кадр YouTube создаёт скрипт. */
.video { margin: var(--sp-4) 0 0; }
.video__frame {
  position: relative;
  display: block;
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--role-surface-2);
  box-shadow: var(--shadow-hard);
  line-height: 0;
}
.video__poster { display: block; width: 100%; height: auto; }
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--role-accent);
  border: var(--border-w) solid var(--role-border);
}
/* Треугольник рисуется рамкой: лишней картинки ради кнопки не заводим. */
.video__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent var(--role-accent-text);
}
.video__frame:hover .video__play { background: var(--role-accent-hover); }
.video__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--role-text-muted);
}
.video__embed {
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--p-night);
  aspect-ratio: 16 / 9;
}
.video__embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* СКРИНШОТЫ. Базовый слой это одна колонка: раскладка в две появляется с 768. */
.shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-3);
  padding: 0;
  list-style: none;
}
.shot { margin: 0; min-width: 0; }
.shot__figure {
  margin: 0;
  height: 100%;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hard-sm);
}
.shot__img { display: block; width: 100%; height: auto; }
.shot__caption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  border-top: 2px solid var(--role-surface-2);
}

@media (min-width: 768px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video__frame, .video__embed { max-width: 960px; margin-left: auto; margin-right: auto; }
  .video__caption { max-width: 960px; margin-left: auto; margin-right: auto; }
}