/*
 * Раскладка сайта поверх компонентов дизайн-системы (components.css):
 * шапка, подвал, ритм секций, страницы текста, вопросы, шаги установки.
 * Только токены — ни одного значения в обход них (раздел «Сетка и ритм»).
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
a { color: var(--coin-ink); text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
code { overflow-wrap: anywhere; }

.site-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--space-4); }

/* Шапка: имя продукта, ссылки, язык, загрузка */
.site-header { background: var(--page); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-3); }
.site-name { margin-right: auto; font: var(--t-display-s); letter-spacing: var(--t-display-s-ls); text-transform: uppercase; color: var(--ink); text-decoration: none; }
.site-name:focus-visible { box-shadow: var(--focus-ring); }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-nav a { font: var(--t-label); letter-spacing: var(--t-label-ls); text-transform: uppercase; color: var(--ink-muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

/*
 * Панель: колонка меток — по самой длинной метке языка (компонент Panel),
 * как в панели приложения (src/product/panel/panel.html): одна сетка
 * на все строки. Русская «Проигрыш» в 52px не помещается.
 */
.ds-panel { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-3); }
.ds-panel__row { display: contents; }

/* Ритм секций */
.site-section { padding-top: var(--space-9); }
.site-features { display: grid; gap: var(--space-9); }
.site-media { width: 100%; display: grid; gap: var(--space-5); }
.site-media__panel { display: grid; justify-items: start; }
.site-place-head { display: flex; align-items: baseline; gap: var(--space-3); }

/* Вопросы на главной — блок текста на surface */
.site-faq { display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.site-faq__title { margin: 0; font: var(--t-display-l); letter-spacing: var(--t-display-l-ls); text-transform: uppercase; }
.site-faq p { margin: 0; }
.site-qa { display: grid; gap: var(--space-2); max-width: 68ch; }
.site-qa h3 { margin: 0; font: var(--t-display-s); letter-spacing: var(--t-display-s-ls); text-transform: uppercase; color: var(--ink); }
.site-qa p { margin: 0; color: var(--ink-muted); }

/* Страницы текста: колонка до 68 знаков, по левому краю */
.site-text { display: grid; gap: var(--space-4); justify-items: start; max-width: 68ch; padding-block: var(--space-8) var(--space-9); }
.site-text h1 { margin: 0 0 var(--space-3); font: var(--t-display-l); letter-spacing: var(--t-display-l-ls); text-transform: uppercase; text-wrap: balance; }
.site-text h2 { margin: var(--space-4) 0 0; font: var(--t-display-s); letter-spacing: var(--t-display-s-ls); text-transform: uppercase; text-wrap: balance; }
.site-text p { margin: 0; }
.site-text .site-qa { margin-top: var(--space-4); }
.site-release-facts { font: var(--t-body-s); color: var(--ink-muted); }
.site-release-facts code, .site-text code { font: var(--t-mono); padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); }

/* Шаги установки — единственная нумерация на сайте */
.site-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: step; }
.site-steps li { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); column-gap: var(--space-3); counter-increment: step; }
.site-steps li::before { content: counter(step); grid-row: span 2; font: var(--t-display-s); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.site-steps li h2 { margin: 0; }

/* Подвал */
.site-footer { margin-top: var(--space-9); border-top: 1px solid var(--line); }
.site-footer__inner { display: grid; gap: var(--space-3); padding-block: var(--space-7); font: var(--t-body-s); color: var(--ink-muted); }
.site-footer__inner p { margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

@media (max-width: 760px) {
  /* На узком экране основная кнопка Hero видна сразу — контурная в шапке лишняя. */
  .site-header .ds-btn--ghost { display: none; }
  /* Пометка места кадра — только у макета без своего кадра; на узком она наезжает на панель. */
  .ds-slot-note { display: none; }
  .site-section { padding-top: var(--space-8); }
  .site-features { gap: var(--space-8); }
  .site-faq__title, .site-text h1 { font-size: 32px; line-height: 34px; }
  .site-footer { margin-top: var(--space-8); }
}