/* ============================================================
   ok-about-teaser.css — SHARED стили блока «О компании» / «Основатели» (.ok-about).
   ОДИН файл на все поверхности блока: Главная/ГЕО (каскад okna_home_is_template) и
   «О компании» (/o-kompanii/, tpl-about). Ранее секция [ABOUT] жила в ok-home-w5.css;
   вынесена сюда как общий слой — главная и /o-kompanii/ читают ОДИН файл, не две копии.

   Разметка: okna_about_teaser_render() (inc/about-teaser-shared.php) — Главная
   (template-parts/home/blocks/about-teaser.php) и «О компании» (blocks/about/founders.php).
   Эталон:   «02 Главная.dc.html» → data-screen-label="17.3 О компании" (десктоп)
             и секция «M19. О компании» мобильного дерева.

   Подключается:
     · Главная/ГЕО — в shell-цепочке оболочки (functions.php, после ok-home-w5);
     · «О компании» — на tpl-about (functions.php), после ok-about.css.
   Попап кнопки «Оставить заявку» (okna-about-teaser-open) — в ok-modal.css (глобально).

   ⚠ Токены --okw5-*, нужные этому блоку (ink-deep / text-soft / navy / red-hover),
   объявлены здесь заново: в ok-home-w5.css они остались для соседних блоков
   [REVIEWS]/[NEWS]/[BLOG]/[SEOTEXT]/[FINAL-FORM], а у .ok-about больше нет палитры
   этого листа (секция вынесена целиком).
   ============================================================ */

/* ═══ [W5.0 → .ok-about] ЛОКАЛЬНАЯ ПАЛИТРА БЛОКА (вынесена из ok-home-w5.css) ═══
   Тона мастера 17.3, которых нет в реестре, — вычислены из утверждённых токенов.
   Объявлено ДВАЖДЫ: простой var()-фолбэк, затем color-mix (браузер без color-mix
   отбрасывает второе объявление и остаётся на первом). ΔE76 ≤ ~2.5. */
.ok-about{
  --okw5-ink-deep:var(--ok-ink);
  --okw5-ink-deep:color-mix(in srgb, color-mix(in srgb, var(--ok-ink) 55%, var(--ok-text)) 75%, var(--ok-dark)); /* ≈#162b51 · ΔE 2.0 */
  --okw5-text-soft:var(--ok-text-2);
  --okw5-text-soft:color-mix(in srgb, var(--ok-text-2) 80%, var(--ok-muted-seed)); /* ≈#5d6b7d · ΔE 0.6 */
  --okw5-navy:var(--ok-hero-dark-b);
  --okw5-red-hover:var(--ok-red);
  --okw5-red-hover:color-mix(in srgb, var(--ok-red) 88%, var(--ok-dark)); /* ≈#c8203a · ΔE 1.0 */
}


/* ██████████████████████████████████████████████████████████████████████████████
   [ABOUT] · HC-13 · 17.3 «О компании» (тизер)
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/about-teaser.php
   Эталон:   «02 Главная.dc.html» → data-screen-label="17.3 О компании" (десктоп)
             и секция «M19. О компании» мобильного дерева.

   ★ ЖИВОЙ ЗАМЕР (headless Chrome, file://)

   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ............. h 1020.88 · bg #eef2f7 · padding 72px 0
     контейнер .......... max-width 1280 · padding 0 32 (контент 1216)
     карточка ........... 1216×876.88 · bg #fff · r22 · padding 48
                          shadow 0 24px 60px rgba(18,61,135,.09)
     грид ............... minmax(0,1.08fr) minmax(0,0.92fr) · gap 48 · stretch
                          фактические колонки 578.88 / 493.13
     H2 ................. 44px/800 · lh 1.05 · ls −.02em · #16294d
                          черта 64×4 (шире канонных 44×3!) · pb 16 · mb 16
     лид абзац .......... 16px/1.6 · #5b6b7d · mb 16 · max-width 520
     лид акцент (посл.) . 16px/700 · lh 1.55 · #16294d · mb 24
     факт-карточка ...... bg #f6f9fc · 1px #e6ecf4 · r12 · padding 18 20
                          заголовок 16/800 #16294d mb 6 · описание 13.5/1.5 #5b6b7d
     сетка фактов ....... 1fr 1fr · gap 14 · mb 28
     кнопка красная ..... h48 · padding 0 28 · bg #e0223a · r8 · 15/700 · #fff
     кнопка контурная ... h48 · padding 0 28 · 2px #1c5bd6 · r6 · 15/700 · прозрачная
     фото ............... 493.13×589.81 · r18 · overflow hidden · min-height 460
                          подложка #0b1f3f · img object-fit cover
     строка преимуществ . grid 1fr 1fr 1fr · mt 36 · bg #f6f9fc · 1px #e6ecf4
                          r14 · padding 28 8 · ячейка padding 0 32
                          разделители border-left 1px #e0e7f0 (кроме первой)
                          заголовок 18/800 #16294d mb 8 · текст 14/1.55 #5b6b7d

   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ............. bg #fff · padding 44px 16px 48px
     H2 ................. 23px/800 · mb 12
     фото ............... СВЕРХУ, во всю ширину · r16 · mb 14
     лид ................ 14px/1.6 · абзацы вплотную (mb 4) · блок mb 14 · ДРУГОЙ
                          ТЕКСТ: 3 коротких строки, не десктопные 2 абзаца
     факты .............. 1fr 1fr · gap 9 · плитка min-height 46 · padding 9 12
                          bg #f5f8fd · 1px #e8ecf2 · r10 · 12.5/700 #1d2433
                          ДРУГОЙ ТЕКСТ: плоские чипы-факты, без описаний
     кнопки ............. full-width · красная h48 r4 mb 9 · контурная h46 r4
     строк преимуществ .. НЕТ

   ★ D1 · ПЕРЕКЛЮЧАТЕЛЬ ВЕТОК. У блока два набора текстов (обоснование и цена
     решения — в шапке template-parts/home/blocks/about-teaser.php). Разметка
     печатает оба, CSS показывает ровно один:
       > 600px  → .ok-about__lead--d / .ok-about__facts--d  (десктопный мастер 17.3)
       ≤ 600px  → .ok-about__lead--m / .ok-about__facts--m  (мобильный мастер M19)
     Рубеж 600 выбран не произвольно: ровно на нём секция уже переодевается в
     мобильный мастер (карточка становится плоской белой, чипы 46px). Ветка
     ТЕКСТА и ветка ОФОРМЛЕНИЯ обязаны переключаться в одной точке — разведи их,
     и между двумя рубежами появится диапазон ширин с «ничьим» видом, которого
     нет ни в одном мастере. Если мобильные поля в редакторе очистить, PHP
     печатает ОДИН узел без модификатора — он виден на любой ширине.
     Строка преимуществ (`adv`) в мобильном мастере отсутствует → скрыта ≤768.

   ⚠ КЕГЛЬ H2 НА МОБИЛКЕ ЗАДАЁТ НЕ ЭТОТ ФАЙЛ: okna-mobile.css объявляет
     `body h2{font-size:23px !important}` (≤768) и `22px !important` (≤480).
     Конфликта нет — на 390 действует ветка ≤480 и даёт 22px против мастерских
     23px (Δ 1px). Перебивать чужой !important ради 1px не станем.
   ████████████████████████████████████████████████████████████████████████████ */

/* `html body` (0,1,2) обязателен: гасит `.glavnaya-v4 > section{padding:32px 0}`
   (0,1,1) из glavnaya.css — иначе к мастерским 72px приклеивается ещё 32px. */
html body .ok-about{
  padding-block:var(--ok-section-space-desktop);
  background:var(--ok-bg);          /* эталон #eef2f7 · токен #eef1f6 · ΔE 0.5 */
  max-width:none;
  margin-inline:0;
}

.ok-about__card{
  background:var(--ok-section-a);
  border-radius:var(--ok-radius-feature);
  box-shadow:var(--ok-shadow-about);
  padding:48px;
}

.ok-about__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:48px;
  align-items:stretch;
}
.ok-about__main{ display:flex; flex-direction:column; min-width:0; }

/* ⚠ Селекторы блока ДВОЙНЫЕ (.ok-about .ok-about__…), а не одиночные: свой же
   фундамент ok-foundation.css задаёт под скоупом `.ok-scope h2{font-size:var(--ok-fs-h2)}`
   и `.ok-scope p{margin:0 0 16px}` — это (0,1,1), то есть СИЛЬНЕЕ одиночного класса
   (0,1,0). Замер поймал: H2 приезжал 34px/--ok-ink вместо мастерских 44px/#16294d.
   Лечится специфичностью (правило §16 «перебивать специфичностью, не порядком»). */
.ok-about .ok-about__h2{
  margin:0 0 16px;
  padding-bottom:16px;
  font-size:44px;
  font-weight:var(--ok-fw-black);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--okw5-ink-deep);
  /* красная черта мастера — фоном, а не ::after: у карточки «О компании» она
     шире канонной (64×4 против 44×3), и фоновый градиент читается однозначно */
  background:linear-gradient(var(--ok-red),var(--ok-red)) left bottom/64px 4px no-repeat;
}

/* ★ ОТСТУП ЛИДА ЖИВЁТ НА БЛОКЕ, А НЕ НА ПОСЛЕДНЕМ АБЗАЦЕ. Замер поймал: мастерские
   24px до карточек фактов не доезжали (факты начинались на y=268.6 вместо 292.6) —
   их гасил СВОЙ ЖЕ фундамент `ok-foundation.css:95 .ok-scope p:last-child{margin-bottom:0}`.
   Он (0,2,1) — сильнее нашего `.ok-about .ok-about__lead-p--accent` (0,2,0), потому что
   :last-child весит как класс. Наращивать специфичность абзаца можно, но неправильно:
   отступ до фактов принадлежит БЛОКУ лида, а не тому, сколько в нём абзацев. На блоке
   он не зависит ни от числа абзацев, ни от того, есть ли у последнего акцент. */
.ok-about__lead{ margin-bottom:24px; }
.ok-about .ok-about__lead-p{
  margin:0 0 16px;
  max-width:520px;
  font-size:var(--ok-fs-body);
  line-height:1.6;
  color:var(--okw5-text-soft);
}
.ok-about .ok-about__lead-p--accent{
  font-weight:var(--ok-fw-bold);
  line-height:1.55;
  color:var(--okw5-ink-deep);
}

.ok-about__facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:28px;
}
.ok-about__fact{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;   /* мастер: заголовок сверху, описание под ним */
  gap:6px;
  padding:18px 20px;
  background:var(--ok-section-b);      /* эталон #f6f9fc · токен #f5f8fd · ΔE 0.4 */
  border:1px solid var(--ok-border);   /* эталон #e6ecf4 · токен #e8ecf2 · ΔE 0.8 */
  border-radius:var(--ok-radius-category);
}
/* ★ D1 · СТРУКТУРА КАРТОЧКИ РОВНО ПОД МАСТЕР. В макете (17.3, факт-карточка) —
   ЗАГОЛОВОК + ОПИСАНИЕ, прижатые к верху; ровно эти пары теперь лежат дефолтом в
   поле `about.facts` (inc/home-content.php). Карточка печатается через
   okna_home_pair(): «Заголовок | Описание» → две строки. Строка БЕЗ разделителя
   (мобильные чипы M19, где описаний в мастере нет) получает модификатор --solo и
   центрируется по вертикали — так один принтер обслуживает обе ветки. */
.ok-about__fact--solo{ justify-content:center; }

/* ★ D1 · ВЕТКИ ТЕКСТА. По умолчанию (шире 600) страница показывает ДЕСКТОПНЫЙ
   набор; мобильный лежит в DOM, но скрыт. Правило одиночное (0,1,0) и стоит ВЫШЕ
   медиа-ветки ≤600, которая его перебивает поздним порядком при равной
   специфичности — чужих !important на display у этих новых классов нет (проверено
   замером computed style). */
.ok-about__lead--m,
.ok-about__facts--m{ display:none; }
.ok-about__fact-t{
  font-size:var(--ok-fs-body);
  font-weight:var(--ok-fw-black);
  line-height:1.3;
  color:var(--okw5-ink-deep);
}
.ok-about__fact-d{
  font-size:var(--ok-fs-label);
  line-height:1.5;
  color:var(--okw5-text-soft);
}

/* ★ D1 · ВОЗВРАТ К МАСТЕРУ. Прежде здесь стоял `margin-top:4px` с оговоркой
   «отклонение обосновано данными»: факт-карточки были ОДНОСТРОЧНЫЕ (описаний в
   полях не было), колонка не дотягивалась до низа фото, и мастерский
   `margin-top:auto` рождал пустую дыру между фактами и кнопками. Причина снята —
   дефолты карточек теперь двухстрочные, как в макете, и колонка набирает высоту
   сама. Возвращаем мастерское прижатие кнопок к низу: свободного места нет →
   правило ничего не двигает; появилось (короткие тексты у редактора) → кнопки
   встают вровень с низом фото, как в 17.3. */
.ok-about__cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:4px;
}
/* `html body` + .ok-about__cta в цепочке — ОБЯЗАТЕЛЬНО: TT1 (грузится ПОСЛЕ) держит
   `button:not(:hover):not(:active):not(.has-background)` = (0,3,1) — каждый :not()
   добавляет специфичность своего аргумента. Замер поймал: красная CTA приезжала
   тёмно-графитовой (--global--color-primary TT1). Наша цепочка = (0,3,2) → перевес
   БЕЗ !important. */
html body .ok-about .ok-about__cta .ok-about__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--ok-control-h);
  padding:0 28px;
  border:0;
  border-radius:var(--ok-radius-cta);
  font-family:var(--ok-font);
  font-size:15px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .1s ease;
}
html body .ok-about .ok-about__cta .ok-about__btn--primary{ background:var(--ok-red); color:var(--ok-on-dark); }
html body .ok-about .ok-about__cta .ok-about__btn--primary:hover{ background:var(--okw5-red-hover); }
html body .ok-about .ok-about__cta .ok-about__btn--ghost{
  background:transparent;
  color:var(--ok-blue);
  border:2px solid var(--ok-blue);
  border-radius:6px;        /* замер мастера: у контурной кнопки блока r6 */
}
html body .ok-about .ok-about__cta .ok-about__btn--ghost:hover{ background:var(--ok-blue); color:var(--ok-on-dark); }
.ok-about__btn:active{ transform:translateY(1px); }
.ok-about__btn:focus-visible{ outline:2px solid var(--ok-blue); outline-offset:2px; }

.ok-about__photo{
  border-radius:18px;
  overflow:hidden;
  min-height:460px;   /* пол мастера; выше — тянется под левую колонку (align-items:stretch) */
  background:var(--okw5-navy);
}
.ok-about__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.ok-about__adv{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:36px;
  padding:28px 8px;
  background:var(--ok-section-b);
  border:1px solid var(--ok-border);
  border-radius:14px;
}
.ok-about__adv-item{ padding:0 32px; min-width:0; }
.ok-about__adv-item + .ok-about__adv-item{ border-left:1px solid var(--ok-border-input); }
.ok-about__adv-t{
  display:block;
  margin-bottom:8px;
  font-size:18px;
  font-weight:var(--ok-fw-black);
  line-height:1.3;
  color:var(--okw5-ink-deep);
}
.ok-about__adv-d{
  display:block;
  font-size:14px;
  line-height:1.55;
  color:var(--okw5-text-soft);
}

/* ── РЕСПОНСИВ «О компании» (канон 1024/768/600/480) ─────────────────────── */
@media (max-width:1024px){
  /* ★ HC-16: ПЛАНШЕТНЫЙ РИТМ СЕКЦИИ. Ветки @1024 у неё не было вовсе, поэтому на
     1024/768 блок оставался на десктопных 72px, тогда как остальные 17 секций
     каскада уходили на 56. Замер зонда ритма до правки: «56/56 ×17 · 72/72 ×1
     (ok-about)» — тот же класс дефекта, что и разнобой на ≤480, только на другом
     рубеже: одна страница не может печатать два вертикальных ритма.
     `html body` (0,2,1) — тем же приёмом, что и десктопное правило выше:
     glavnaya.css:54 `.glavnaya-v4 > section{padding:32px 0}` (0,1,1) иначе
     побеждает по типу-селектору. */
  html body .ok-about{ padding-block:var(--ok-section-space-tablet); }   /* 56 */
  .ok-about__card{ padding:32px; }
  .ok-about__grid{ grid-template-columns:minmax(0,1fr); gap:26px; }
  /* Мастер мобильного дерева: фото НАД текстом.
     ⚠ height, а НЕ max-height: у `img{height:100%}` процент считается от height
     родителя, а не от min/max-height. При auto-высоте картинка схлопывалась в 0
     (замер на 390: height=0px — была видна только подложка). Определённая высота
     возвращает object-fit:cover и центрированный кроп. */
  .ok-about__photo{ order:-1; min-height:0; height:420px; }
  .ok-about .ok-about__h2{ font-size:36px; }
  .ok-about__adv{ padding:22px 8px; }
  .ok-about__adv-item{ padding:0 20px; }
}
@media (max-width:768px){
  .ok-about .ok-about__h2{ font-size:30px; background-size:52px 4px; }
  /* ★ D1: строки преимуществ в мобильном мастере M19 НЕТ. Прежде её складывали в
     столбик «чтобы не потерять данные» — но данные не теряются: поле `adv` живёт в
     редакторе и печатается в DOM, скрыт только показ на узком экране. Мобильный
     экран мастера заканчивается кнопками, и лишняя колонка ломала его ритм. */
  .ok-about__adv{ display:none; }
}
/* MOBM-02: цвет H2 «О компании» переключаем на том же рубеже, что и кегль
   (okna-mobile.css:62 делает body h2 = 23px при ≤768). Иначе в полосе 601–768
   заголовок мобильный по размеру, но мастерского цвета #16294d, а соседние = #123d87.
   Макет #02 M19 = #123d87. Десктоп (>768) сохраняет мастерский --okw5-ink-deep. */
@media (max-width:768px){
  .ok-about .ok-about__h2{ color:var(--ok-ink); }
}
@media (max-width:600px){
  html body .ok-about{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
    background:var(--ok-section-a);   /* мастер M19: мобильная секция белая */
  }
  /* ★ D1 · ПЕРЕКЛЮЧЕНИЕ ТЕКСТОВОЙ ВЕТКИ: десктопный набор уходит, мобильный встаёт.
     display возвращается ЯВНО (block/grid), а не `initial`: у обоих узлов свой
     базовый режим, и `initial` вернул бы гриду фактов inline-поток. */
  .ok-about__lead--d,
  .ok-about__facts--d{ display:none; }
  .ok-about__lead--m{ display:block; }
  .ok-about__facts--m{ display:grid; }
  .ok-about__card{ padding:0; background:none; box-shadow:none; border-radius:0; }
  .ok-about .ok-about__h2{ margin-bottom:12px; padding-bottom:12px; background-size:44px 3px; }
  /* мастер M19: фото показывается ЦЕЛИКОМ, во всю ширину, без кропа */
  .ok-about__photo{ height:auto; border-radius:var(--ok-radius-card); margin-bottom:14px; background:none; }
  .ok-about__photo img{ height:auto; }
  .ok-about__lead{ margin-bottom:14px; }   /* мастер M19: отступ блока лида до чипов */
  .ok-about .ok-about__lead-p{ margin:0 0 4px; font-size:14px; max-width:none; }
  .ok-about__facts{ gap:9px; margin-bottom:16px; }
  .ok-about__fact{
    min-height:46px;
    padding:9px 12px;
    border-radius:var(--ok-radius-dropdown);
  }
  .ok-about__fact-t{ font-size:var(--ok-fs-micro); font-weight:var(--ok-fw-bold); color:var(--ok-text); }
  .ok-about__fact-d{ font-size:12px; }
  .ok-about__cta{ flex-direction:column; gap:9px; }
  html body .ok-about .ok-about__cta .ok-about__btn{ width:100%; border-radius:var(--ok-radius-btn); }
  html body .ok-about .ok-about__cta .ok-about__btn--ghost{ height:46px; font-size:14.5px; border-radius:var(--ok-radius-btn); }
  /* (правило `.ok-about__adv{margin-top:22px}` снято: строка преимуществ скрыта уже с ≤768) */
}