/* ============================================================
   Theme override — ActaMed brand
   Sources of truth:
     - files/color-system-spec.md  (палитра, токены)
     - files/logo-spec.md          (лого, шрифты)
     - files/brand-architecture.md (master + Vector + Auditor)

   Подключение шрифтов: assets/fonts/fonts.css (self-hosted).
   ============================================================ */
@import url('../fonts/fonts.css');

:root {
  /* === Spec tokens === */
  --prussian-deep:         #001E33;   /* футер, hover тёмных */
  --prussian:              #003153;   /* основной бренд */
  --light-prussian:        #004F86;   /* action — CTA, ссылки */
  --light-prussian-hover:  #003F6B;   /* hover на CTA */
  --light-prussian-active: #003153;   /* pressed CTA = уходит в Prussian */

  --bg-page:         #FFFFFF;
  --bg-section:      #F1F4F8;
  --bg-hover:        #E8EDF3;
  --border:          #DDE4ED;
  --border-strong:   #A8B5C5;

  --text-primary:    #0F1C2D;
  --text-secondary:  #5C6B7D;
  --text-on-dark:    #A8B5C5;
  --text-on-cta:     #FFFFFF;

  --success:         #2D7A4F;
  --success-bg:      #E8F3EE;
  --warning:         #C47F1A;
  --warning-bg:      #FCEFD9;
  --danger:          #B8443C;
  --danger-bg:       #F8E5E3;
  --info:            #004F86;   /* = light-prussian */
  --info-bg:         #E5EDF4;

  --focus-ring:      0 0 0 3px rgba(0, 79, 134, 0.3);

  /* === Override Webflow brand tokens === */
  --brand--accent:                       #004F86; /* было #3a8363 — Light Prussian (CTA, accent) */
  --brand--primary-button-hover:         #003F6B; /* было #9cc1b1 — hover */
  --brand--dark-bg:                      #003153; /* было #0f2d29 — Prussian (тёмный баннер) */
  --brand--headings-alternate-dark-bg:   #003153; /* было #25413c — заголовки + alt dark */
  --brand--paragraph-text:               #5C6B7D; /* было #5c716d — Slate */
  --brand--off-white-background:         #F1F4F8; /* было #f3f7f5 — Mist */
  --brand--foreground-lighter-stroke:    #F1F4F8; /* было #e6efeb */
  --brand--darker-border:                #DDE4ED; /* было #cee0d8 */
  --brand--footer-column-heading:        #FFFFFF; /* было #d9c8bb */

  /* === Шрифты (logo-spec.md §6, color-system-spec.md §3) === */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Override Webflow font tokens (заменяем PPFragment Glare → Source Serif 4,
     Satoshi → Inter). Webflow читает их в правилах через var(); каскад
     обновит все заголовки/body/buttons. */
  --_typography---font-family--global:   var(--font-sans);
  --_typography---font-family--body:     var(--font-sans);
  --_typography---font-family--buttons:  var(--font-sans);
  --_typography---font-family--headings: var(--font-serif);
}

/* Webflow page-CSS объявляет те же токены прямо на body — поэтому каскад
   переопределяет :root. Перекрываем на уровне body, чтобы наши значения
   победили. */
body {
  --_typography---font-family--global:   var(--font-sans) !important;
  --_typography---font-family--body:     var(--font-sans) !important;
  --_typography---font-family--buttons:  var(--font-sans) !important;
  --_typography---font-family--headings: var(--font-serif) !important;
  font-family: var(--font-sans) !important;
  /* Body color = Ink (text-primary). Webflow по умолчанию ставил body color
     равным heading-color (Prussian) — это правильно для заголовков, но
     неправильно для основного текста (по color-system-spec §3 Body = Ink). */
  color: var(--text-primary) !important;
}
/* Заголовки: Prussian на светлом фоне, автоматически White на тёмных
   секциях (Webflow переопределяет --_color-schemes---background--heading-color
   per color scheme). Без !important — чтобы тёмные scheme variants могли
   менять цвет. */
h1, h2, h3,
.heading-style-h1, .heading-style-h2, .heading-style-h3 {
  color: var(--_color-schemes---background--heading-color);
}
h1, h2, h3, h4, h5, h6,
[class*="heading-style-"] {
  font-family: var(--font-serif) !important;
}

/* === Timeline circles (секция «How Charta works»): Webflow IX2 ставит
       inline style с зашитым старым off-white #F3F7F5 (зеленоватый), нужно
       перебить через !important. Активный circle и progress-line — accent
       (Light Prussian). === */
.timeline_circle,
.timeline_progress-line {
  background-color: var(--_color-schemes---styles--accent) !important;
}

/* === Размер лого ActaMed: исходный Charta-дизайн брал лого высотой ~36-40px,
       новый ActaMed lockup (mark + wordmark) лучше читается крупнее.
       SVG имеет aspect 240:56 ≈ 4.28:1 — задаём width в proportions. === */
.navbar_logo  { height: 48px !important; width: 206px !important; max-height: none !important; max-width: none !important; }
.footer_logo  { height: 56px !important; width: 240px !important; max-height: none !important; max-width: none !important; }

/* === Кнопки: hover/active меняет ТОЛЬКО фон, текст не трогаем
       (color-system-spec §2 + правило явно зафиксировано). Webflow по
       умолчанию: на hover ставит color: var(--neutral--black) И filter:
       brightness(90%). Перекрываем по атрибуту варианта (живёт на самой
       .button), потому что переменная text-hover декларирована Webflow на
       десятках scope-селекторов и каскадом её не поймать. === */
.button:hover { filter: none !important; }

/* Используем ^= чтобы поймать варианты "primary", "primary-small",
   "secondary", "secondary-small", "tertiary", "tertiary-small" и т.д. */

.button[data-wf--button-global--style^="primary"],
.button[data-wf--button-global--style^="primary"] *,
.button[data-wf--button-global--style^="primary"]:hover,
.button[data-wf--button-global--style^="primary"]:hover * {
  color: var(--text-on-cta) !important;     /* всегда white */
}

/* Secondary / Tertiary в DEFAULT — Prussian текст */
.button[data-wf--button-global--style^="secondary"],
.button[data-wf--button-global--style^="secondary"] *,
.button[data-wf--button-global--style^="tertiary"],
.button[data-wf--button-global--style^="tertiary"] * {
  color: var(--prussian) !important;
}
/* Secondary / Tertiary на HOVER: у части вариантов Webflow ставил СВЕТЛЫЙ
   hover-фон, и белый текст на нём становился тусклым/нечитаемым (+ общий
   filter:brightness(90%) ещё притемнял). Принудительно даём тёмный Prussian
   фон и белый текст — явный контраст на ховере у всех secondary/tertiary. */
.button[data-wf--button-global--style^="secondary"]:hover,
.button[data-wf--button-global--style^="tertiary"]:hover {
  background-color: var(--prussian) !important;
  border-color: var(--prussian) !important;
  filter: none !important;
}
.button[data-wf--button-global--style^="secondary"]:hover,
.button[data-wf--button-global--style^="secondary"]:hover *,
.button[data-wf--button-global--style^="tertiary"]:hover,
.button[data-wf--button-global--style^="tertiary"]:hover * {
  color: var(--text-on-cta) !important;     /* white на Prussian hover-bg */
}

/* Если что-то в HTML прибито font-family: Fragment / Satoshi напрямую —
   принудительно перенаправляем на наши гарнитуры через высокоприоритетное
   правило по атрибуту style/class. На уровне токенов выше уже всё перекрыто. */
[style*="Fragment"], [style*="font-family:Fragment"] { font-family: var(--font-serif) !important; }
[style*="Satoshi"],  [style*="font-family:Satoshi"]  { font-family: var(--font-sans)  !important; }

/* === Фото-карточки команд: убрать зелёный baked-in оттенок,
       перевести в чистый prussian-tone duotone.
       1) grayscale на самом фото убирает старый зелёный.
       2) ::after с background prussian + mix-blend-mode: color
          накладывает чистый цвет на яркость изображения. === */
.personas_background-image-wrapper img {
  filter: grayscale(1) brightness(0.95);
}
.personas_background-image-wrapper { position: absolute; }
.personas_background-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--prussian);
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 1;
}

/* Hero: лотти заменена статичным мокапом (actamed-hero-dashboard.svg).
   Снимаем max-height:58rem из Webflow-CSS — секция теперь вмещает контент
   целиком, картинка не свисает на .section_logo-component ни на какой
   ширине экрана, компенсирующие отступы больше не нужны. */
.section_home-hero { max-height: none; }
/* Скрытая лотти не должна занимать место, даже если ix2 вернёт ей display */
.home-hero_lottie { display: none !important; }

/* === Отдельные продуктовые скриншоты вне таб-блока показываем целиком.
       Вкладки на главной сохраняют оригинальную квадратную композицию Charta. === */
.solutions-index_image[src*="actamed-ui-"] {
  aspect-ratio: 500 / 351;   /* натуральные 1000×702 — скриншот целиком, без обрезки */
  object-fit: cover;
  object-position: 50% 50%;
}

/* === Главная, вкладки возможностей: композиция как у Charta.
       На desktop карточка и media-column держат единый квадратный ритм;
       длинный русский текст остаётся тизером, полная версия доступна по CTA. === */
.section_solutions-tabs .solutions-tabs_tab-content-top > .text-size-medium {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

@media screen and (min-width: 992px) {
  .section_solutions-tabs .solutions-tabs_tabs-content,
  .section_solutions-tabs .solutions-tabs_tab-pane,
  .section_solutions-tabs .solutions-tabs_tab-content,
  .section_solutions-tabs .solutions-tabs_tab-text-wrapper {
    height: var(--_spacing-sizing---max-width--small);
  }
}

/* Русские подписи длиннее английских у Charta, поэтому планшетную раскладку
   включаем немного раньше: вкладки не сжимаются в узкую боковую колонку. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .section_solutions-tabs .solutions-tabs_tabs {
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    align-self: stretch;
  }

  .section_solutions-tabs .solutions-tabs_tabs-menu {
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    border-right-style: none;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: auto;
    display: flex;
  }

  .section_solutions-tabs .solutions-tabs_tab-link {
    width: auto;
    padding: var(--_spacing-sizing---gap-size--xsmall);
    text-align: center;
    flex: 40%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .section_solutions-tabs .solutions-tabs_tabs-content,
  .section_solutions-tabs .solutions-tabs_tab-pane,
  .section_solutions-tabs .solutions-tabs_tab-content,
  .section_solutions-tabs .solutions-tabs_tab-text-wrapper {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .section_solutions-tabs .solutions-tabs_tab-content {
    flex-flow: column;
    padding: 2rem;
  }

  .section_solutions-tabs .solutions-tabs_tab-text-wrapper {
    padding: 2rem;
  }
}

@media screen and (max-width: 1199px) {
  .section_solutions-tabs .solutions-tabs_tab-image[src*="actamed-ui-"] {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 500 / 351;
    object-fit: contain;
    object-position: 50% 50%;
    align-self: center;
    margin: 0 auto;
  }
}

/* === Лента МИС (How-it-works, шаг 01): чистый CSS вместо Marquee-лотти.
       Одинаковый размер всех названий, ровный шаг, бесшовный цикл
       (в треке 2 копии списка, translateY(-50%)). === */
.am-marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7%;
  padding: 8% 9%;
  box-sizing: border-box;
}
.am-marquee_col {
  flex: 0 0 48%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.am-marquee_track {
  display: flex;
  flex-direction: column;
  animation: am-scroll 45s linear infinite; /* 14 названий — держим прежний темп */
}
.am-marquee_item {
  flex: 0 0 auto;
  padding: clamp(12px, 1.8vw, 24px) 0;
  text-align: center;
  font-weight: 600;
  font-size: clamp(11px, 1.15vw, 15px);
  line-height: 1.2;
  color: var(--prussian, #003153);
  white-space: nowrap;
}
@keyframes am-scroll { to { transform: translateY(-50%); } }
.am-marquee_mark { flex: 0 0 38%; }
.am-marquee_mark svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .am-marquee_track { animation: none; } }

/* Ватермарк на стат-карточках («≈118 млн ₽» и т.п.): Webflow ставил его
   с top:-4.5rem — знак обрезался краем карточки и выглядел сломанным.
   Теперь знак целиком в правом верхнем углу, без обрезки. */
.testimonial-slider_client-stat-watermark {
  inset: 1.25rem 1.25rem auto auto;
  width: 30%;
  max-width: 6.5rem;
  opacity: .09;
}

/* Homepage pilot sites: an actual responsive grid instead of an inline flex
   row. This keeps all three cards level on desktop and gives deliberate,
   balanced 2 -> 1 column wrapping on smaller screens. */
.section_logo-component .logo_logo-list[style*="justify-content:flex-end"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 16px !important;
  width: 100%;
  justify-content: stretch !important;
  align-items: stretch !important;
}

.section_logo-component .logo_logo-list[style*="justify-content:flex-end"] > div {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none !important;
}

@media screen and (max-width: 991px) {
  .section_logo-component .logo_content {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch;
  }

  .section_logo-component .logo_logo-list[style*="justify-content:flex-end"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .section_logo-component .logo_logo-list[style*="justify-content:flex-end"] > div:last-child {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 767px) {
  .section_logo-component .logo_logo-list[style*="justify-content:flex-end"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section_logo-component .logo_logo-list[style*="justify-content:flex-end"] > div:last-child {
    grid-column: auto;
  }
}