/*
 * Дизайн v2 «Спокойная клиника» (docs/design/a.css). Propshaft подключает все файлы
 * из app/assets/stylesheets в алфавитном порядке, поэтому порядок каскада задаётся слоями.
 * Этот файл грузится первым и объявляет их.
 *
 *   reset      — сброс браузерных стилей
 *   base       — шрифт, токены, типографика, иконки
 *   lexxy      — стили редактора из гема, только в админке (vendor/stylesheets/lexxy_layered.css)
 *   layout     — контейнер, сетка глубоких страниц, секции, сетки (layout.css)
 *   components — переиспользуемые блоки (components/*.css)
 *   pages      — то, что нужно только одной странице (pages/*.css)
 *   utilities  — одноразовые модификаторы
 *
 * Брейкпоинты: 820px — мобильная вёрстка (как в макетах), 1100px — шапка переключается
 * на кнопки «позвонить / меню». Других медиазапросов по возможности не добавлять.
 */
@layer reset, base, lexxy, layout, components, pages, utilities;

/* Onest (OFL, docs: app/assets/fonts/OFL.txt) — вариативный, веса 400–700. Без CDN: шрифт лежит у нас. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/onest-cyrillic-wght-normal-41534645.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/onest-latin-wght-normal-eb99e634.woff2") format("woff2-variations");
  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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
  img, picture, video, svg { display: block; max-width: 100%; }
  input, select, textarea, button { font: inherit; color: inherit; }
  button { cursor: pointer; }
  summary { cursor: pointer; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    /* Фон и поверхности */
    --bg: #F4F8F9;
    --surface: #FFFFFF;
    --soft: #E4EFF8;          /* светлая подложка: чипы, активный пункт, врезка «Коротко» */
    --soft-2: #EEF4FA;        /* hover в меню, шапка таблицы */

    /* Текст. Контраст на --bg: ink 14.6:1, ink-2 7.3:1, ink-3 4.9:1 (AA) */
    --ink: #0F2830;
    --ink-2: #3E5862;
    --ink-3: #56707A;

    /* Линии и рамки полей (ctl — 3.2:1, как требует WCAG для элементов управления) */
    --line: #D6E3E7;
    --ctl: #7B949C;

    /* Акцент */
    --accent: #1B75BC;        /* кнопки, активный пункт дерева */
    --accent-hover: #16639F;
    --accent-ink: #1565A3;    /* ссылки и акцентный текст */
    --focus: #7FB2E0;         /* кольцо фокуса */
    --focus-soft: #D2E4F4;    /* тень фокуса у полей */

    /* Тёплая врезка «Важно» и метка «Автор сайта» */
    --sand: #FBF1DE;
    --sand-ink: #6B4A12;
    --sand-line: #E9D3A6;     /* админка: рамка «нужно заполнить» на схеме метода */

    /* Тёмный подвал и постер видео */
    --deep: #0F2830;
    --deep-text: #D5E3E7;
    --deep-link: #E9F2F4;
    --deep-muted: #9DB8C0;
    --deep-line: #2A4650;
    --video-bg: #163640;

    /* Заглушки фото */
    --ph-a: #E3EBEE;
    --ph-b: #EBF1F3;
    --ph-ink: #465F69;

    --danger: #B3261E;
    --danger-soft: #FBE4E1;   /* врезка «Внимание»; админка: статус «Без ответа» */
    --danger-ink: #8A1C14;    /* текст врезки «Внимание»; админка: статус, «Скрыть», «Удалить» */

    /* Админка (docs/design/adm.css) */
    --neutral-soft: #ECEFF0;  /* статус «Скрыт» */
    --neutral-ink: #46555B;
    --switch-off: #B7C6CB;    /* выключенный переключатель */
    --serp-title: #1A4FA0;    /* превью в поиске: заголовок */
    --serp-url: #1F6B3A;      /* превью в поиске: адрес */

    --r-card: 24px;
    --r-box: 20px;
    --r-img: 16px;
    --r-ctl: 12px;
    --shadow: 0 1px 2px rgb(15 40 48 / 0.05), 0 10px 30px rgb(15 40 48 / 0.07);
    --shadow-float: 0 2px 8px rgb(15 40 48 / 0.18);   /* кнопка поверх фото (стрелка плитки на главной) */

    --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, Menlo, monospace;

    --container: 1312px;
    --gutter: 32px;
    --header-h: 84px;
  }

  @media (max-width: 820px) {
    :root { --gutter: 16px; --header-h: 64px; }
  }

  /* Фон html и body — один: Safari 26 подбирает по нему цвет панелей */
  html { background: var(--bg); scroll-padding-top: 24px; }
  /* На телефоне шапка прилипает к верху — якоря (#ask, оглавление) не должны уходить под неё */
  @media (max-width: 820px) {
    html { scroll-padding-top: calc(var(--header-h) + 1px + 16px); }
  }

  body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 400 18px/1.65 var(--font);
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--accent-ink); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

  h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
  p { text-wrap: pretty; }

  /* Типографские классы — в base, страницы (@layer pages) могут их уточнять */
  .h1 { font-size: 54px; line-height: 1.08; }
  /* Длинное слово («Микрофлебэктомия») на телефоне не помещается в строку — переносим по слогам */
  .h1, .h2 { hyphens: auto; overflow-wrap: break-word; }
  .h2 { font-size: 40px; line-height: 1.15; }
  .h3 { font-size: 24px; line-height: 1.3; }
  .kicker { font-size: 15px; font-weight: 600; color: var(--accent-ink); letter-spacing: 0.01em; }
  .lead { font-size: 21px; line-height: 1.55; color: var(--ink-2); }
  .muted { color: var(--ink-3); }
  .small { font-size: 15px; line-height: 1.5; }

  /* Ссылка со стрелкой: «Все примеры →» */
  .link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-decoration: none;
  }
  .link:hover { text-decoration: underline; }

  /* Иконки — helper icon(:name), линия currentColor */
  .icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon--lg { width: 24px; height: 24px; }
  .icon--sm { width: 16px; height: 16px; }

  @media (max-width: 820px) {
    .h1 { font-size: 34px; line-height: 1.15; }
    .h2 { font-size: 28px; line-height: 1.2; }
    .h3 { font-size: 21px; }
    .lead { font-size: 19px; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  @media (max-width: 820px) {
    .desktop-only { display: none !important; }
  }
  @media (min-width: 821px) {
    .mobile-only { display: none !important; }
  }
}