/* ============================================================
   ГБУЗ «Областной перинатальный центр» — главная страница
   Стили: чистый CSS3, mobile-first, @layer, light-dark()
   ============================================================ */

@layer reset, base, components, utils;

/* ============================================================
   FONTS (локальные Geologica)
   ============================================================ */
@layer base {
  @font-face {
    font-family: "Geologica";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../themes/hosp/assets/fonts/geologica-latin-full-normal.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: "Geologica";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../themes/hosp/assets/fonts/geologica-latin-ext-full-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Geologica";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../themes/hosp/assets/fonts/geologica-cyrillic-full-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: "Geologica";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../themes/hosp/assets/fonts/geologica-cyrillic-ext-full-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
}

/* ============================================================
   RESET
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100vh; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  ul, ol { list-style: none; }
  a { text-decoration: none; color: inherit; }
  h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; text-wrap: balance; }
  p { text-wrap: pretty; }
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  :root {
    color-scheme: light;

    /* Цвета (light-dark) */
    --bg: light-dark(#FFFFFF, #0A0E12);
    --surface: light-dark(#FAFCFF, #1F437C);
    --fg: light-dark(#28394F, #E4E8ED);
    --muted: light-dark(#656E7A, #828A94);
    --border: light-dark(#D9DFE6, #21272E);
    --accent: light-dark(#1F437C, #9DBBF0);
    --on-accent: light-dark(#FFFFFF, #0A0E12);

    /* Производные тона */
    --accent-hover: color-mix(in oklch, var(--accent) 82%, black);
    --secondary: light-dark(color-mix(in oklch, #1F437C 6%, white), color-mix(in oklch, #9DBBF0 8%, #0A0E12));
    --accent-soft: light-dark(color-mix(in oklch, #1F437C 11%, white), color-mix(in oklch, #9DBBF0 16%, #0A0E12));

    /* Семантические */
    --success: light-dark(#22864A, #63d98b);
    --warning: light-dark(#D39900, #e9b31f);
    --danger: light-dark(#C9302D, #f0716e);

    /* Отступы (сетка 0.5rem) */
    --sp-1: 0.5rem;
    --sp-2: 0.75rem;
    --sp-3: 1.25rem;
    --sp-4: 2rem;
    --sp-5: 3.5rem;
    --sp-6: 6rem;

    /* Радиусы */
    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --radius-3: 0.625rem;
    --radius-4: 1rem;
    --radius-5: 1.6rem;
    --radius-6: 2rem;
    --radius-full: 20rem;
    
    /* Тени */
    --shadow-sm: 0 1px 2px rgba(16, 40, 80, 0.08);
    --shadow-md: 0 8px 24px rgba(16, 40, 80, 0.10);
    --shadow-lg: 0 16px 44px rgba(16, 40, 80, 0.16);

    /* Типографика */
    --font-display: "Geologica", system-ui, sans-serif;
    --font-body: "Geologica", system-ui, sans-serif;
    --font-mono: "Geologica", ui-monospace, monospace;

    --fs-display: clamp(2.75rem, 6vw, 4.75rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h2-alt: clamp(1.6rem, 4vw, 2.4rem);
    --fs-h3: 1.375rem;
    --fs-lead: 1.1875rem;
    --fs-body: 1rem;
    --fs-meta: 0.8125rem;

    --container: 1500px;
  }

  .block-dark { color-scheme: dark; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  body.nav-open { overflow: hidden; }

  ::selection { background: var(--accent); color: var(--on-accent); }

  a { transition: color 0.18s ease; }
  a:hover { color: var(--accent); }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-1);
  }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1rem;
  }

  .section { padding-block: var(--sp-5); }
  .section--soft { background: var(--secondary); }
  .section--softless { background: var(--surface); }
  .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
  }
  .section-head--stack {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }

  .section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .section-eyebrow {
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-2);
  }

  /* Скролл-отступ для якорных ссылок */
  section[id] { scroll-margin-top: 1rem; }

  /* Reveal-анимация (включается только при наличии JS) */
  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 1; transform: none; }
  }
}

/* ============================================================
   UTILS
   ============================================================ */
@layer utils {
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--accent);
    color: var(--on-accent);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--radius-2) 0;
    font-weight: 600;
  }
  .skip-link:focus {
    left: 0;
  }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {

  /* ---- Иконки ---- */
  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .social .icon {
    fill: currentColor;
    stroke: none;
    stroke-width: 0;
    width: 1.15em;
    height: 1.15em;
  }

  /* ---- Кнопки ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 200;
    font-size: 1rem;
    line-height: 1;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn:disabled,
  .btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }
  .btn .icon { width: 1.1em; height: 1.1em; }

  .btn--primary {
    background: var(--accent);
    color: var(--on-accent);
  }
  .btn--primary:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
  }

  .btn--ghost {
    background: transparent;
    color: var(--accent);
    border-color: var(--border);
  }
  .btn--ghost:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* ============================================================
     HEADER
     ============================================================ */
  .header {
    position: relative;
    background: var(--bg);
  }

  .header__top-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
  }
  .brand__logo { width: 48px; height: 48px; flex: none; }
  .brand__text { display: flex; flex-direction: column; line-height: 1.2; }
  .brand__name {
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--fg);
    letter-spacing: -0.01em;
  }
  .brand__sub {
    font-size: var(--fs-meta);
    color: var(--muted);
  }
  .brand:hover .brand__name { color: var(--accent); }

  /* Мобильная шапка: логотип сжимается, подзаголовок скрыт */
  .header .brand { flex: 1 1 auto; min-width: 0; gap: 0.6rem; }
  .header .brand__text { min-width: 0; }
  .header .brand__logo { width: 44px; height: 44px; }
  .header .brand__name { font-size: clamp(.8rem, 3vw + 0.03rem, 1rem); }
  .header .brand__sub { display: none; }

  .header__contacts {
    display: none;
    align-items: center;
    gap: var(--sp-3);
    margin-inline-start: auto;
  }
  .header__contact {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--fg);
  }
  .header__contact .icon { color: var(--accent); width: 1.3em; height: 1.3em; }
  .header__contact-text { display: flex; flex-direction: column; line-height: 1.3; }
  .header__contact-label { font-size: var(--fs-meta); color: var(--muted); }
  .header__contact-value { font-weight: 600; font-size: 0.95rem; }
  .header__contact:hover .header__contact-value { color: var(--accent); }

  .social { display: flex; align-items: center; gap: 0.5rem; }
  .social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--accent);
    background: var(--accent-soft);
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  .social__link:hover {
    background: var(--accent);
    color: var(--on-accent);
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
  }

  .vision-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    transition: background-color 0.18s ease, border-color 0.18s ease;
  }
  .vision-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
  .vision-btn .icon { width: 1.2em; height: 1.2em; }
  .vision-btn__label { display: none; }

  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
    color: var(--fg);
  }
  .burger .icon { width: 1.5em; height: 1.5em; }
  .burger:hover { background: var(--accent-soft); }

  /* ---- Главное меню ---- */
  .header__nav {
    background: var(--secondary);
    color: var(--fg);
  }
  .header__nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  .header__nav-title { font-weight: 700; }
  .header__nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-2);
    color: var(--fg);
  }
  .header__nav-close:hover { background: var(--accent-soft); }
  .header__nav-close .icon { width: 1.4em; height: 1.4em; }

  .menu { display: flex; flex-direction: column; }
  .menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    text-align: start;
    padding: 0.9rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--fg);
    border-bottom: 1px solid var(--border);
  }
  a.menu__link:hover { color: var(--accent); }
  .menu__link:hover { background: var(--accent-soft); }
  .menu__caret { width: 1.1em; height: 1.1em; transition: transform 0.2s ease; }
  .menu__item--has-sub.is-open .menu__caret { transform: rotate(180deg); }

  .submenu { display: none; background: var(--bg); }
  .submenu__link {
    display: block;
    padding: 0.8rem 1.75rem;
    font-size: 0.95rem;
    color: var(--fg);
    border-bottom: 1px solid var(--border);
  }
  .submenu__link:hover {
    color: var(--accent);
    background: var(--accent-soft);
    padding-inline-start: 2rem;
  }
  .submenu__link { transition: color 0.18s ease, background-color 0.18s ease, padding-inline-start 0.18s ease; }

  .menu__item--has-sub.is-open .submenu { display: block; }

  /* Мобильная панель меню */
  @media (max-width: 1199px) {
    .header__nav {
      position: fixed;
      inset: 0 auto 0 0;
      width: min(86vw, 380px);
      z-index: 200;
      overflow-y: auto;
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform 0.3s ease, visibility 0.3s ease;
    }
    .header__nav.is-open {
      transform: translateX(0);
      visibility: visible;
    }
  }

  @media (min-width: 1200px) {
    .header__nav-head { display: none; }
    .burger { display: none; }
    .vision-btn__label { display: inline; }

    .header__nav {
      background: none;
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
    }
    .header__nav-inner {
      background: var(--secondary);
      border-radius: var(--radius-4);
    }

    .header__contacts { display: flex; }

    .header .brand { flex: none; }
    .header .brand__logo { width: 56px; height: 56px; }
    .header .brand__name { font-size: 1.05rem; }
    .header .brand__sub { display: block; }

    .menu { flex-direction: row; align-items: stretch; }
    .menu__item { position: relative; }
    .menu__link {
      width: auto;
      border-bottom: none;
      padding: 0.95rem 1.25rem;
      position: relative;
    }
    .menu__link::after {
      content: "";
      position: absolute;
      inset-inline: 1rem;
      bottom: 0.5rem;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.2s ease;
    }
    .menu__item:hover .menu__link::after,
    .menu__item.is-open .menu__link::after,
    a.menu__link:hover::after { transform: scaleX(1); }

    .submenu {
      position: absolute;
      top: 100%;
      inset-inline-start: 0;
      min-width: 280px;
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent);
      border-radius: 0 0 var(--radius-2) var(--radius-2);
      box-shadow: var(--shadow-md);
      padding: 0.4rem;
      z-index: 60;
    }
    .submenu__link { border-bottom: none; border-radius: var(--radius-1); }
    .submenu__link:hover { padding-inline-start: 0.9rem; }

    .menu__item--has-sub:hover .submenu,
    .menu__item--has-sub:focus-within .submenu,
    .menu__item--has-sub.is-open .submenu { display: block; }
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  .footer {
    background: var(--surface);
    color: var(--fg);
    margin-top: var(--sp-5);
  }
  .footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-block: var(--sp-5) var(--sp-4);
  }
  .footer .brand__name { color: var(--fg); }
  .footer .brand__sub { color: var(--fg); }
  .footer__note { color: var(--fg); font-size: 0.9rem; margin-top: var(--sp-2); max-width: 34ch; }

  .footer__title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-3);
    color: var(--fg);
  }
  .footer__menu { display: flex; flex-direction: column; gap: 0.6rem; }
  .footer__menu a { color: var(--fg); font-size: 0.95rem; font-weight: 300; opacity: .8;}
  .footer__menu a:hover { color: var(--accent); }

  .footer__contacts { display: flex; flex-direction: column; gap: 0.5rem; font-style: normal; }
  .footer__contacts a { color: var(--fg); font-weight: 600; opacity: .8;}
  .footer__contacts a:hover { color: var(--accent); }
  .footer__contacts span { color: var(--fg); font-size: 0.9rem; opacity: .8;}

  .social--footer { margin-top: var(--sp-3); }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: var(--sp-3);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--fs-meta);
  }

  @media (min-width: 640px) {
    .footer__inner { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1024px) {
    .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
    .footer__bottom { flex-direction: row; justify-content: space-between; }
  }
}

/* ============================================================
   ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ
   ============================================================ */
@layer components {
  html.vision-mode {
    font-size: 112.5%;
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --fg: #000000;
    --muted: #000000;
    --border: #000000;
    --accent: #003399;
    --on-accent: #FFFFFF;
    --secondary: #FFFFFF;
    --accent-soft: #E8F0FE;
  }
  html.vision-mode body { letter-spacing: 0.03em; }
  html.vision-mode a,
  html.vision-mode .menu__link,
  html.vision-mode .doctor__more,
  html.vision-mode .news__more { text-decoration: underline; }
  html.vision-mode img { filter: contrast(1.05); }
}

/* ============================================================
   ОБЩИЕ КОМПОНЕНТЫ СТРАНИЦ
   Вынесено из страничных CSS, чтобы не дублировать правила.
   ============================================================ */
@layer components {

  /* ---- Кнопка на всю ширину ---- */
  .btn--block {
    width: 100%;
    justify-content: center;
  }

  /* ---- Пагинация ---- */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-5);
  }
  .pagination__list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
  }
  .pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
    color: var(--fg);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  .pagination__page:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
  .pagination__page.is-current,
  .pagination__page.is-current:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    color: var(--muted);
  }
  .pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-2);
    border: 1px solid var(--border);
    color: var(--fg);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  .pagination__arrow .icon { width: 1.3em; height: 1.3em; }
  .pagination__arrow:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
  .pagination__arrow--prev { margin-inline-end: 0.25rem; }
  .pagination__arrow--next { margin-inline-start: 0.25rem; }
  /* Модификатор: уменьшенный отступ сверху */
  .pagination--tight { margin-top: var(--sp-4); }

  /* ---- Ссылка «Назад» ---- */
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--sp-5);
    padding-block: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .back-link .icon { width: 1.2em; height: 1.2em; }
  .back-link:hover { color: var(--accent-hover); transform: translateX(-3px); }

  /* ---- Модальное окно (native <dialog>) ---- */
  .dialog {
    width: min(92vw, 560px);
    border: none;
    border-radius: var(--radius-4);
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    translate: 0 50px;
    margin: auto;
    transition: opacity 0.4s ease, translate 0.4s ease, display 0.4s allow-discrete, overlay 0.4s allow-discrete;
  }
  .dialog[open] {
    opacity: 1;
    translate: 0 0;
  }
  @starting-style {
    .dialog[open] {
      opacity: 0;
      translate: 0 -50px;
    }
  }
  .dialog::backdrop {
    background: rgba(8, 20, 40, 0.55);
    opacity: 0;
    backdrop-filter: blur(8px);
    transition: opacity 0.4s ease, display 0.4s allow-discrete, overlay 0.4s allow-discrete;
  }
  .dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    .dialog[open]::backdrop { opacity: 0; }
  }
  .dialog__inner { padding: var(--sp-4); }
  .dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
  }
  .dialog__title { font-size: 1.35rem; }
  .dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-2);
    color: var(--fg);
  }
  .dialog__close:hover { background: var(--accent-soft); }
  .dialog__close .icon { width: 1.3em; height: 1.3em; }

  /* ---- Форма в модальном окне ---- */
  .dialog-form { display: flex; flex-direction: column; gap: var(--sp-3); }
  .dialog-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
  .dialog-form__label {
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--fg);
  }
  .dialog-form__input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .dialog-form__input::placeholder { color: var(--muted); }
  .dialog-form__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .dialog-form__textarea { resize: vertical; min-height: 110px; }

  .dialog-form__rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
  }
  .dialog-form__rate {
    cursor: pointer;
    color: var(--border);
  }
  .dialog-form__rate input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .dialog-form__rate .icon {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
    stroke: none;
    transition: color 0.15s ease;
  }
  .dialog-form__rate:hover .icon,
  .dialog-form__rate:hover ~ .dialog-form__rate .icon,
  .dialog-form__rate:has(input:checked) .icon,
  .dialog-form__rate:has(input:checked) ~ .dialog-form__rate .icon {
    color: var(--warning);
  }

  .file-field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.85rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-2);
    color: var(--muted);
    font-weight: 300;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
  }
  .file-field:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .file-field.has-files {
    border-color: var(--accent);
    color: var(--fg);
  }
  .file-field .icon {
    width: 1.3em;
    height: 1.3em;
    flex: none;
  }
  .file-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .file-field__text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .dialog-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--muted);
    cursor: pointer;
  }
  .dialog-form__consent input {
    flex: none;
    margin-top: 0.25rem;
    accent-color: var(--accent);
  }
  .dialog-form__submit { align-self: flex-start; }

  .dialog-form__error {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--danger);
  }

  .dialog-form__status:empty { display: none; }
  .dialog-form__status { margin-bottom: var(--sp-3); }
  .dialog-form__status .alert {
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-2);
    font-size: 0.9rem;
    font-weight: 300;
  }
  .dialog-form__status .alert-success {
    background: var(--accent-soft);
    color: var(--fg);
  }
  .dialog-form__status .alert-danger {
    background: color-mix(in oklch, var(--danger) 12%, transparent);
    color: var(--danger);
  }

  /* ---- Боковой CTA-блок ---- */
  .cta-card {
    border: 2px solid var(--accent);
    background: var(--surface);
    border-radius: var(--radius-4);
    padding: var(--sp-4);
  }
  .cta-card__title {
    font-size: 1.25rem;
    margin-bottom: var(--sp-2);
  }
  .cta-card__text {
    font-weight: 300;
    color: var(--muted);
    margin-bottom: var(--sp-3);
  }
  .cta-card__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    list-style: none;
    margin-bottom: var(--sp-3);
  }
  .cta-card__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    color: var(--fg);
    font-weight: 300;
  }
  .cta-card__row .icon {
    color: var(--accent);
    width: 1.3em;
    height: 1.3em;
    margin-top: 0.2em;
    flex: none;
  }
  .cta-card__row a {
    color: var(--fg);
    font-weight: 500;
  }
  .cta-card__row a:hover { color: var(--accent); }

  /* ---- Поле поиска ---- */
  .search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .search__icon {
    position: absolute;
    inset-inline-start: 0.9rem;
    width: 1.2em;
    height: 1.2em;
    color: var(--muted);
    pointer-events: none;
  }
  .search__input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .search__input::placeholder { color: var(--muted); }
  .search__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
  /* Модификаторы поиска */
  .search--pill .search__input { border-radius: var(--radius-full); }
  .search--offset { margin-bottom: var(--sp-3); }
  @media (min-width: 900px) {
    .search--fixed { width: 320px; }
  }
}

/* body:not(.main-page) {
  position: relative;
}
body:not(.main-page)::before {
  content: "";
  position: absolute;
  width: min(1200px, 80%);
  height: min(1200px, 80%);
  top: 0;
  right: 0;
  background: url('../img/logo1.svg') no-repeat;
  background-size: contain;
  opacity: 0.01;
  z-index: -1;
} */
/* ============================================================
   ОПЦ — однорядная шапка (референс: Mama Plus), вариант index_2
   Загружается ПОСЛЕ style.css; переопределяет только шапку.
   ============================================================ */

@layer components {

  /* ---- Контейнер шапки: одна строка ---- */
  .header--slim { 
    /* background: var(--bg);  */
    background: none;
  }
  .header--slim .header__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
  }

  /* ---- Бренд слева (фикс., не растягивается) ---- */
  .header--slim .brand { flex: none; }
  .header--slim .brand__logo { width: 44px; height: 44px; }

  /* ---- Главное меню: инлайн по центру ---- */
  .header--slim .header__nav { flex: 1 1 auto; min-width: 0; }

  /* Убрать подчёркивание пунктов меню при наведении */
  .header--slim .menu__link::after { display: none; }

  @media (min-width: 1200px) {
    .header--slim .header__nav {
      position: static;
      width: auto;
      max-width: none;
      margin: 0;
      transform: none;
      visibility: visible;
      overflow: visible;
      display: flex;
      justify-content: center;
    }
    .header--slim .menu { 
      justify-content: center; 
      background: var(--secondary);
      border-radius: var(--radius-full);
      padding-left: 1.6rem;
      padding-right: 1.6rem;
    }
    .header--slim .brand__logo { width: 48px; height: 48px; }
    .header--slim .brand__name { font-size: 1rem; }
    .header--slim .header__nav-head { display: none; }
    .header--slim .burger { display: none; }
  }

  /* ---- Действия справа ---- */
  .header--slim .header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-inline-start: auto;
    flex: none;
  }

  /* ---- Контакт (телефон) ---- */
  .header--slim .header__contact {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg);
  }
  .header--slim .header__contact .icon { color: var(--accent); width: 1.3em; height: 1.3em; }
  .header--slim .header__contact-text { display: flex; flex-direction: column; line-height: 1.25; }
  .header--slim .header__contact-label { font-size: 0.7rem; color: var(--muted); }
  .header--slim .header__contact-value { font-weight: 700; font-size: 1rem; }
  .header--slim .header__contact:hover .header__contact-value { color: var(--accent); }

  @media (min-width: 900px) {
    .header--slim .header__contact { display: flex; }
  }

  /* ---- Кнопка версии для слабовидящих (вместо «Записаться») ---- */
  .header--slim .vision-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-accent);
    background: var(--accent);
    padding: 0.65rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .header--slim .vision-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--on-accent);
  }
  .header--slim .vision-btn:active { transform: translateY(1px); }
  .header--slim .vision-btn .icon { width: 1.2em; height: 1.2em; }
  .header--slim .vision-btn__label {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- Мобильная панель меню (drawer, поведение из style.css) ---- */
  @media (max-width: 1199px) {
    .header--slim .header__bar { padding-block: var(--sp-2); }
  }
}