/* =====================================================================
   PROFOTBOR HOME v1 — компоненты публичной главной страницы «/»
   Правила — docs/DESIGN.md; эталон — 08-home.html; решение — D-040.

   Файл экрана, а не системы: здесь живёт то, что есть только на главной.
   Прецедент — screen-height.css и matrix-item.css в продукте: отдельный
   файл рядом с ui-kit.css, а не правка кита.

   Цвета берутся только токенами (значения даёт house.css). Единственное,
   что этот файл задаёт своими значениями, — гарнитуры: веб-шрифты
   работают на главной и больше нигде (решение владельца, D-040), поэтому
   токен --font не переопределяется, а шрифт назначается тем правилам,
   которым он нужен. Fallback обязателен у каждой гарнитуры: страница
   обязана читаться, если шрифт не пришёл.
   ===================================================================== */

.home {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
.home *, .home *::before, .home *::after { box-sizing: border-box; }

/* Общая колонка — та же мера, что у market: 1280px и поля 24px */
.home__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- шапка ----------------------------------------------------- */

.home__bar {
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.home__bar .home__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.home__brand {
  font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- первый и единственный экран -------------------------------- */

.home__main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 40px 0 48px;
}

.home__title {
  font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
  max-width: 18ch;
}
.home__lead {
  margin: 18px 0 0;
  max-width: 56ch;
  color: var(--ink-2);
}
.home__actions { margin: 28px 0 0; }

/* Модификатор существующего компонента .btn: на телефоне кнопка во всю
   ширину — как везде в продукте; от 560px она перестаёт растягиваться,
   потому что на широком экране кнопка во всю строку читается как полоса,
   а не как действие. Живёт здесь, пока такая кнопка одна на весь продукт;
   повторится второй раз — переедет в ui-kit.css. */
/* inline-flex, а не flex: у .btn из ui-kit кнопка блочная и при width:auto
   всё равно растянулась бы во всю строку. Подчёркивание снимается здесь же
   — компонент рассчитан на <button>, а на главной он живёт ссылкой. */
.btn--inline { display: inline-flex; width: 100%; text-decoration: none; }
@media (min-width: 560px) {
  .btn--inline { width: auto; min-width: 260px; padding: 0 32px; }
}
/* Обводка фокуса на самой кнопке действия делается чернилами, а не
   акцентом: акцентная обводка поверх акцентной заливки почти не видна. */
.home .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- строка кандидату ------------------------------------------- */

/* Не «плашка внимания»: кандидат ничего не нарушил, он просто пришёл не
   туда. Поэтому спокойная панель, а не --warn-*. */
.home__note {
  margin: 36px 0 0;
  max-width: 60ch;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
}
.home__label {
  display: block;
  margin: 0 0 6px;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* --ink-2, не --accent-ink: у market подзаголовок первого экрана окрашен
     акцентом, у нас акцент — только действие (docs/DESIGN.md). Осознанное
     расхождение с образцом, а не недосмотр. */
  color: var(--ink-2);
}
.home__note p { margin: 0; font-size: 15px; }

/* ---------- подвал ----------------------------------------------------- */

/* Тёмной плашки подвала market здесь нет намеренно (D-040): на странице
   в четыре строки она заняла бы пол-экрана служебным цветом. */
.home__foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.home__foot .home__inner {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
}

/* ---------- шире 700px -------------------------------------------------- */

/* Перелом один и выбран по поведению: до 700px заголовок в 40px начинает
   рвать слова «психодиагностика» и «персонала» на узкой колонке. */
@media (min-width: 700px) {
  .home__title { font-size: 44px; }
  .home__lead { font-size: 17px; }
  .home__main { padding: 64px 0 72px; }
}