/* stil.css — единый набор стиля лендинга НДВ Елены Шмидт (этап 4 навыка lending-retrit).
   Подключается первым. Вёрстка берёт отсюда только переменные и классы .btn / .btn-vtor.
   Цвета сняты с образца, который выбрала Елена: сайт семинара Баскакова
   https://vladimir-baskakov.de/scylla-holod/ (переменные его страницы --paper, --ink, --muted,
   --accent, --dark, --line), 06.11.2026. Шрифты — Lora + Inter (проверенная пара навыка),
   файлы лежат в fonts/, с Google не грузятся (для Германии так требует защита данных). */

@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Цвета: роль у каждого */
  --c-fon: #f4f3ef;          /* фон страницы (paper образца) */
  --c-fon-2: #ffffff;        /* карточки (card образца) */
  --c-tekst: #1d2026;        /* основной текст и заголовки (ink) */
  --c-tekst-2: #646a72;      /* подписи, второстепенный текст (muted) */
  --c-akcent: #315a61;       /* кнопки, метки, выделения (accent) */
  --c-akcent-2: #162d32;     /* тёмные блоки и кнопка при наведении (dark) */
  --c-liniya: #d8dedc;       /* рамки и разделители (line) */
  --c-na-akcente: #ffffff;   /* текст на кнопке и на тёмном фоне */
  --c-oshibka: #b3261e;      /* текст ошибки в заявке (тот же, что в validate.js) */
  --ten: 0 10px 28px rgba(49, 90, 97, .18); /* единственная тень (тень кнопки образца) */

  --f-zag: "Lora", Georgia, serif;
  --f-tekst: "Inter", Arial, sans-serif;

  /* Размеры шрифта, телефон → компьютер. H1 образца: 36 px на 390, 62 px на 1440 */
  --fs-h1: clamp(34px, 2.5vw + 24px, 58px);
  --fs-h2: clamp(28px, 1.8vw + 20px, 44px);
  --fs-h3: clamp(20px, .5vw + 17px, 24px);
  --fs-tekst: clamp(17px, .15vw + 16.4px, 18px);
  --fs-melkiy: clamp(14px, .1vw + 13.6px, 15px);
  --fs-nadzag: 14px;

  --lh-zag: 1.15;
  --lh-tekst: 1.6;

  --shirina-teksta: 700px;
  --shirina-stranicy: 1160px;   /* --max образца */
  --otstup-bloka: clamp(64px, 8vw, 120px);
  --radius: 22px;
  --radius-knopki: 999px;
}

/* Кнопки: два вида */
.btn,
.btn-vtor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: var(--radius-knopki);
  font-family: var(--f-tekst);
  font-size: var(--fs-tekst);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn { background: var(--c-akcent); color: var(--c-na-akcente); border: 2px solid var(--c-akcent); box-shadow: var(--ten); }
.btn:hover, .btn:active { background: var(--c-akcent-2); border-color: var(--c-akcent-2); transform: translateY(-2px); }
.btn-vtor { background: transparent; color: var(--c-akcent); border: 2px solid var(--c-akcent); }
.btn-vtor:hover, .btn-vtor:active { background: var(--c-akcent); color: var(--c-na-akcente); }
.btn:focus-visible, .btn-vtor:focus-visible { outline: 3px solid var(--c-akcent); outline-offset: 3px; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* На тёмном блоке кнопка белая с бирюзовым текстом — как на образце (.dark .btn) */
.temnyy .btn { background: var(--c-na-akcente); color: var(--c-akcent); border-color: var(--c-na-akcente); }
.temnyy .btn:hover, .temnyy .btn:active { background: var(--c-fon); border-color: var(--c-fon); color: var(--c-akcent-2); }
.temnyy .btn:focus-visible { outline-color: var(--c-na-akcente); }

/* Кнопка на телефоне: одна строка и по центру.
   11.4 — ширина «Записаться в группу» шрифтом Inter 700 при 1 px */
@media (max-width: 600px) {
  .btn, .btn-vtor {
    padding: 0 14px;
    font-size: min(15.5px, calc((100vw - 70px) / 11.4));
  }
}