/**
 * Elephus — стили для кастомных блоков и стилевых вариаций блоков ядра.
 * Опирается на переменные из css/elephus.css (:root), поэтому подключается
 * после него. Основную адаптивность (стек колонок на мобильных, отступы)
 * даёт сам редактор блоков (Columns/Group) через нативные настройки —
 * здесь только визуальные варианты, которых нет в блоках ядра.
 */

/* ========== СЕКЦИИ-ФОНЫ (Group) ========== */
.wp-block-group.is-style-section-dark    { background: var(--graphite); color: var(--paper); padding-top: 96px; padding-bottom: 96px; }
.wp-block-group.is-style-section-lime    { background: var(--lime); color: var(--graphite); padding-top: 96px; padding-bottom: 96px; }
.wp-block-group.is-style-section-paper   { background: var(--paper); color: var(--ink); padding-top: 96px; padding-bottom: 96px; }
.wp-block-group.is-style-section-paper-2 { background: var(--paper-2); color: var(--ink); padding-top: 96px; padding-bottom: 96px; }
.wp-block-group.is-style-section-white   { background: var(--white); color: var(--ink); padding-top: 96px; padding-bottom: 96px; }
.wp-block-group.is-style-section-foil {
  position: relative;
  isolation: isolate;
  background: #a7aab0 url("../brand/foil-silver.svg?v=5") center / cover no-repeat;
  color: var(--graphite);
  padding-top: 96px;
  padding-bottom: 96px;
}
.wp-block-group.is-style-section-foil::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(102deg, rgba(233,233,236,0.80) 0%, rgba(233,233,236,0.42) 34%, rgba(233,233,236,0.08) 56%, rgba(233,233,236,0) 70%);
}
.wp-block-group.is-style-section-foil > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .wp-block-group.is-style-section-dark,
  .wp-block-group.is-style-section-lime,
  .wp-block-group.is-style-section-paper,
  .wp-block-group.is-style-section-paper-2,
  .wp-block-group.is-style-section-white,
  .wp-block-group.is-style-section-foil { padding-top: 56px; padding-bottom: 56px; }
}

/* Две секции одного фона подряд не должны давать двойной вертикальный отступ
 * (низ первой + верх второй = «пустая полоса»). У второй убираем верхний отступ —
 * остаётся ровный ритм в один отступ секции. */
.wp-block-group.is-style-section-dark + .wp-block-group.is-style-section-dark,
.wp-block-group.is-style-section-lime + .wp-block-group.is-style-section-lime,
.wp-block-group.is-style-section-paper + .wp-block-group.is-style-section-paper,
.wp-block-group.is-style-section-paper-2 + .wp-block-group.is-style-section-paper-2,
.wp-block-group.is-style-section-white + .wp-block-group.is-style-section-white,
.wp-block-group.is-style-section-foil + .wp-block-group.is-style-section-foil { padding-top: 0; }

/* Верхний отступ первой секции (от шапки до «// eyebrow» заголовка) — одинаковый
 * на всех страницах, как на главной (80px). На разных страницах в разметке стоял
 * свой инлайновый отступ (80/72/64px) — из-за этого расстояние «прыгало». Перебиваем
 * его !important, чтобы не зависеть от правки контента на каждой странице. */
.site-header + .wp-block-group.is-style-section-dark,
.news-single-head { padding-top: 80px !important; }

/* Внутри тёмных/лаймовых секций ссылки/подписи по умолчанию наследуют цвет секции */
.is-style-section-dark .wp-block-button:not(.is-style-ghost-dark):not(.is-style-graphite) .wp-block-button__link,
.is-style-section-lime .wp-block-button:not(.is-style-ghost-dark):not(.is-style-graphite) .wp-block-button__link { }

/* WordPress-раскладка flow (класс is-layout-flow, который получают наши Group c
 * layout:default) вешает вертикальный отступ margin-block-start на каждый дочерний
 * блок, кроме первого. Внутри наших CSS-грид-контейнеров (.grid / карточные сетки)
 * это лишнее: расстояние задаёт gap самой сетки, а отступ ломает выравнивание
 * карточек по высоте — первая карточка получается выше остальных. Гасим его. */
.grid > *,
.serv-grid > *,
.step-row > * { margin-block-start: 0; margin-block-end: 0; }

/* Плавная прокрутка к якорям (#apply и т.п.) и отступ под липкую шапку, чтобы
 * секция не пряталась под ней. */
html { scroll-behavior: smooth; }
.wp-block-group[id] { scroll-margin-top: 92px; }
/* Невидимая точка-якорь для карточек сервисов (ссылки из футера /managed/#vm и
   т.п.). Лежит в левом верхнем углу карточки, не влияет на вёрстку и НЕ попадает
   в фокус — поэтому при переходе по якорю рамки фокуса нет. scroll-margin-top —
   отступ под липкую шапку, чтобы карточка не пряталась за ней. */
.serv-card { position: relative; }
.svc-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; scroll-margin-top: 92px; }

/* Пустые абзацы (частый артефакт после правки в редакторе) не должны создавать
 * пустую светлую полосу между тёмной секцией и подвалом — убираем их из потока. */
p.wp-block-paragraph:empty { display: none; }

/* Знак «э.» в подвале — крупный, примерно во всю высоту текстовых колонок,
 * фон прозрачный (= фон подвала). Высота фиксированная, чтобы знак не раздувался
 * по ширине колонки и не растягивал подвал. */
.footer-logo { display: inline-flex; align-items: flex-start; line-height: 0; }
.footer-logo svg { display: block; height: 118px; width: auto; }

/* ========== КАРТОЧКИ (Group) ========== */
.wp-block-group.is-style-card {
  background: var(--white); border: 1px solid var(--paper-3); border-radius: var(--r-md);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.wp-block-group.is-style-card-dark {
  background: var(--graphite-2); border: 1px solid var(--graphite-3); border-radius: var(--r-md);
  padding: 28px; display: flex; flex-direction: column; gap: 16px; color: var(--paper);
}
/* Карточка внутри колонки тянется на всю высоту колонки — колонки в ряду
 * выравниваются по высоте, поэтому карточки-контакты получаются одинаковыми. */
.wp-block-column > .wp-block-group.is-style-card,
.wp-block-column > .wp-block-group.is-style-card-dark { height: 100%; }

/* ========== БАННЕР УСЛУГИ (Columns) ========== */
/* Весь баннер кликабельный (переход вешает site.js только на фронтенде — в
 * редакторе баннер остаётся обычным блоком с видимой кнопкой, чтобы можно было
 * править ссылку и содержимое). Здесь — только визуал: рамка и ховер-эффект. */
.wp-block-columns.is-style-service-banner {
  position: relative;
  background: var(--graphite); border: 1px solid var(--graphite-3); border-radius: var(--r-lg); padding: 36px 40px;
  color: var(--paper); align-items: center;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
/* Класс вешает site.js на фронтенде, где баннер действительно кликабельный. */
.wp-block-columns.is-style-service-banner.is-clickable { cursor: pointer; }
.wp-block-columns.is-style-service-banner.is-clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(14,17,22,0.30);
}
/* Точка-индикатор в углу баннера — то же положение (28/25), что и на карточках. */
.wp-block-columns.is-style-service-banner::after {
  content: ""; position: absolute; top: 28px; right: 25px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); opacity: 0.22; transition: opacity 0.15s; z-index: 2;
}
.wp-block-columns.is-style-service-banner:hover::after { opacity: 1; }
.wp-block-columns.is-style-service-banner h2,
.wp-block-columns.is-style-service-banner h3,
.wp-block-columns.is-style-service-banner h4 { color: var(--paper); margin: 0 0 12px; }
.wp-block-columns.is-style-service-banner p { color: var(--muted-3); font-size: 14.5px; }

/* Медицинская секция на главной (лаймовый фон): показатели читаются как единый
 * блок «число + подпись» (подпись вплотную к числу), а перед кнопкой — заметный
 * отступ, чтобы она не липла к цифрам и весь столбец смотрелся ритмично. */
.is-style-section-lime .has-h-2-font-size + .has-small-font-size { margin-top: 4px; }
.is-style-section-lime .wp-block-buttons { margin-top: 32px !important; }

/* ========== ТИПОГРАФИКА (Paragraph) ========== */
p.is-style-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lime); display: inline-block;
}
p.is-style-eyebrow::before { content: "// "; }
.is-style-section-paper p.is-style-eyebrow,
.is-style-section-paper-2 p.is-style-eyebrow,
.is-style-section-white p.is-style-eyebrow,
.is-style-section-lime p.is-style-eyebrow,
.is-style-section-foil p.is-style-eyebrow { color: var(--muted); }

p.is-style-lead { font-size: 18px; line-height: 1.55; color: var(--muted); }
.is-style-section-dark p.is-style-lead { color: var(--muted-3); }
.is-style-section-lime p.is-style-lead { color: var(--graphite); }

p.is-style-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ========== ЗАГОЛОВКИ ПО РАЗМЕРУ-ТОКЕНУ ==========
 * В прототипе типографика заголовков задавалась классами размера (.h1–.h5),
 * каждый нёс свой вес, трекинг и межстрочный интервал одновременно. Пресеты
 * размера шрифта WordPress переносят только size, поэтому line-height/вес/
 * трекинг доопределяем здесь по классу размера (has-h-*-font-size). Это
 * покрывает и заголовки, у которых тег ≠ выбранному размеру (напр. карточки
 * услуг — тег h3 при размере h4), и абзацы с «заголовочным» размером (числа
 * KPI). Базовые размеры для заголовков без явного класса заданы по тегу в
 * theme.json (styles.elements.h1…h5). */
.has-h-1-lg-font-size,
.has-h-1-font-size    { font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
.has-h-2-lg-font-size,
.has-h-2-font-size    { font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.has-h-3-font-size    { font-weight: 800; letter-spacing: -0.03em;  line-height: 1.1; text-wrap: balance; }
.has-h-4-font-size    { font-weight: 700; letter-spacing: -0.02em;  line-height: 1.2; }
.has-h-5-font-size    { font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }

/* Размеры крупных заголовков теперь плавные (clamp в theme.json/elephus.css) —
 * они сами уменьшаются с шириной экрана, поэтому ступенчатые правила ≤768px больше
 * не нужны (и мешали: фиксировали 44px, из-за чего слова не влезали на 320px). */

p.is-style-badge, p.is-style-badge-dark, p.is-style-badge-lime {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--paper-3); border-radius: 100px; font-size: 12px; font-weight: 500;
  background: var(--white); margin: 0;
}
p.is-style-badge-dark { background: var(--graphite-2); color: var(--paper); border-color: var(--graphite-3); }
p.is-style-badge-lime { background: var(--lime); color: var(--graphite); border-color: var(--lime); }

/* «Мелкий серый текст» (стиль абзаца и списка) — как адрес офиса в контактах:
   приглушённый серый, помельче. Для реквизитов, сносок, подписей. Работает и на
   тёмном, и на светлом фоне (цвет --muted-3 читается на обоих). У списка убираем
   маркеры — чтобы строки шли ровно, как обычный текст (как адрес). */
.is-style-fine,
.is-style-fine li { color: var(--muted-3); font-size: 14px; line-height: 1.6; }
ul.is-style-fine,
ol.is-style-fine { list-style: none; margin: 0; padding: 0; }
ul.is-style-fine li,
ol.is-style-fine li { margin: 0; }

/* «Ряд тегов» (стиль группы Group): раскладывает содержимое в строку чипов и
   превращает КАЖДЫЙ вложенный абзац в тег-чип. Благодаря этому теги добавляются/
   удаляются как обычные абзацы (Enter — добавить, выделить и удалить — убрать), не
   назначая стиль каждому вручную. Селектор специально низкой специфичности
   (.is-style-tag-row > p = 0,1,1) — такой же, как у старых бейджей, — чтобы новый
   тег наследовал размер/цвет из контекста (например, баннера услуги) ровно так же,
   как существующие чипы, и не отличался от них. */
.is-style-tag-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.is-style-tag-row > p {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px; border: 1px solid var(--graphite-3); border-radius: 100px;
  font-size: 12px; font-weight: 500; background: var(--graphite-2); color: var(--paper);
}

/* ========== КНОПКИ (Button) ========== */
.wp-block-button.is-style-ghost-dark .wp-block-button__link {
  background: transparent; color: var(--paper); border: 1px solid var(--graphite-3); border-radius: 0;
}
.wp-block-button.is-style-ghost-dark .wp-block-button__link:hover { background: var(--graphite-2); border-color: var(--paper); }
.wp-block-button.is-style-ghost-light .wp-block-button__link {
  background: transparent; color: var(--graphite); border: 1px solid var(--paper-3); border-radius: 0;
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover { background: var(--white); border-color: var(--graphite); }
.wp-block-button.is-style-graphite .wp-block-button__link {
  background: var(--graphite); color: var(--paper); border-radius: 0;
}
.wp-block-button.is-style-graphite .wp-block-button__link:hover { background: var(--graphite-2); }
/* Единый размер кнопок: блочные кнопки ядра (Услуги, Подробнее и т.п.) совпадают
 * по габаритам с крупными кнопками .btn-lg (лаймовая «Получить консультацию»). */
.wp-block-button .wp-block-button__link { border-radius: 0; font-weight: 700; padding: 18px 28px; font-size: 15px; line-height: normal; border: 1px solid transparent; }
/* На мобильных .btn/.btn-lg темы сжимаются (см. elephus.css @media ≤700) — держим
 * блочные кнопки ядра в тех же габаритах, иначе «Услуги» выше «Получить консультацию». */
@media (max-width: 700px) {
  .wp-block-button .wp-block-button__link { padding: 12px 18px; font-size: 14px; }
}

/* ========== KPI (кастомный блок) ========== */
.kpi-list { display: flex; flex-direction: column; }
.kpi-item { display: flex; align-items: baseline; gap: 14px; }
.kpi-item::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex-shrink: 0; align-self: center;
}
.kpi-item .kpi-v { font-weight: 800; font-size: 44px; letter-spacing: -0.03em; line-height: 1; }
.kpi-item .kpi-l { font-size: 14px; color: var(--muted-2); flex: 1; }
.kpi-list .kpi-item + .kpi-item { border-top: 1px solid var(--graphite-3); padding-top: 14px; margin-top: 14px; }
@media (max-width: 700px) { .kpi-item .kpi-v { font-size: 32px; } }

/* Хиро вторичных страниц (Услуги / Сервисы / Медицина / О компании): текст слева,
 * показатели — горизонтальным рядом справа, выровненные по низу (как в макете:
 * grid 1.5fr/1fr, align-items:end). На главной хиро собран отдельными колонками,
 * а показатели там — вертикальная карточка, и этих правил она не касается: там
 * kpi-list лежит внутри .is-style-card-dark, а не прямо в .container-wide. */
.is-style-section-dark > .container-wide:has(> .wp-block-elephus-kpi-list) {
  position: relative;
}
.is-style-section-dark > .container-wide:has(> .wp-block-elephus-kpi-list) > :not(.wp-block-elephus-kpi-list) {
  max-width: 60%;
}
.is-style-section-dark > .container-wide:has(> .wp-block-elephus-kpi-list) > .is-style-lead {
  padding-right: 0 !important;
}
.is-style-section-dark > .container-wide:has(> .wp-block-elephus-kpi-list) > .wp-block-elephus-kpi-list {
  position: absolute;
  /* right = боковой отступ .container-wide (32px на этой ширине): абсолютное
   * позиционирование отсчитывается от padding-box, поэтому без этого показатели
   * упирались бы в самый край экрана, а не в контентную границу (как кнопка). */
  right: 32px;
  bottom: 0;
  justify-content: flex-end;
}

/* Сами показатели в этом ряду: число над подписью, выровнены по правому краю
 * (как в макете), без разделителей и точек. */
.container-wide > .wp-block-elephus-kpi-list { flex-direction: row; flex-wrap: wrap; gap: 28px 48px; }
.container-wide > .wp-block-elephus-kpi-list .kpi-item { flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.container-wide > .wp-block-elephus-kpi-list .kpi-item::after { display: none; }
.container-wide > .wp-block-elephus-kpi-list .kpi-item + .kpi-item { border-top: 0; padding-top: 0; margin-top: 0; }
.container-wide > .wp-block-elephus-kpi-list .kpi-item .kpi-l { flex: 0 1 auto; }

/* Узкие экраны: хиро в одну колонку, показатели статичным рядом под текстом слева
 * (поэтому и выравнивание чисел/подписей возвращаем к левому краю). */
@media (max-width: 900px) {
  .is-style-section-dark > .container-wide:has(> .wp-block-elephus-kpi-list) > :not(.wp-block-elephus-kpi-list) { max-width: none; }
  .is-style-section-dark > .container-wide:has(> .wp-block-elephus-kpi-list) > .wp-block-elephus-kpi-list {
    position: static; justify-content: flex-start; margin-top: 20px;
  }
  .container-wide > .wp-block-elephus-kpi-list .kpi-item { align-items: flex-start; text-align: left; }
}

/* ========== ФОРМА ЗАЯВКИ / МОДАЛЬНОЕ ОКНО (кастомный блок) ========== */
.consult-overlay {
  position: fixed; inset: 0; background: rgba(14,17,22,0.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.consult-overlay.open { opacity: 1; pointer-events: auto; }
.consult-modal {
  background: var(--graphite-2); border: 1px solid var(--graphite-3); border-radius: var(--r-lg);
  padding: 40px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  position: relative; transform: translateY(12px); transition: transform 0.2s ease; color: var(--paper);
}
.consult-overlay.open .consult-modal { transform: translateY(0); }
.consult-close {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--graphite-3); background: transparent; color: var(--paper); font-size: 20px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.consult-close:hover { background: var(--graphite-3); }
.consult-input { background: var(--graphite); color: var(--paper); border-color: var(--graphite-3); }
.consult-form textarea.consult-input { font-family: var(--font-sans); resize: vertical; }
.btn.is-sent { background: var(--lime); color: var(--graphite); opacity: 1; cursor: default; }
.contact-form-block.is-editing .consult-overlay { position: static; opacity: 1; pointer-events: auto; padding: 0; background: transparent; margin-top: 16px; }
.contact-form-block.is-editing .consult-modal { transform: none; max-width: 100%; }

/* ========== КОМАНДА (elephus/team-grid, динамический) ========== */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.team-card { background: var(--white); border: 1px solid var(--paper-3); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.team-card:hover { border-color: var(--graphite); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14,17,22,0.07); }
.team-photo { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo[data-accent="0"] { background: var(--graphite); }
.team-photo[data-accent="1"] { background: var(--graphite-2); }
.team-photo[data-accent="2"] { background: var(--lime); }
.team-photo[data-accent="3"] { background: var(--paper-2); }
.team-initials { font-family: var(--font-sans); font-weight: 800; font-size: 44px; letter-spacing: -0.03em; color: var(--paper); }
.team-photo[data-accent="2"] .team-initials,
.team-photo[data-accent="3"] .team-initials { color: var(--graphite); }
.team-info { padding: 18px 20px 22px; }
.team-name { font-weight: 700; font-size: 17px; letter-spacing: -0.015em; margin: 0; }
.team-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-dim); margin: 6px 0 10px; }
.team-bio { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

/* ========== КАРТОЧКИ (elephus/card-grid, elephus/card) ========== */
.elephus-card-grid { display: grid; gap: 16px; }
@media (max-width: 700px) { .elephus-card-grid { grid-template-columns: 1fr !important; } }

/* ========== ЛИЦЕНЗИИ (elephus/license-list, elephus/license-item) ========== */
.lic-panel { background: var(--graphite); border-radius: var(--r-lg); padding: 24px 36px; }
.lic-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--graphite-3); border-radius: 8px; text-decoration: none; }
.lic-row:last-child { border-bottom: none; }
.lic-row .lic-title { color: var(--paper); font-weight: 700; font-size: 15px; }
.lic-row .lic-subtitle { color: var(--muted-2); font-size: 13px; margin-top: 2px; }
.lic-row .lic-number { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); white-space: nowrap; text-align: right; }

/* ========== ОТЗЫВЫ (elephus/review-grid, elephus/review-card) ========== */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rev-card { display: flex; flex-direction: column; gap: 18px; background: var(--white); border: 1px solid var(--paper-3); border-radius: var(--r-md); padding: 28px; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.rev-card:hover { border-color: var(--graphite); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14,17,22,0.06); }
.rev-quote { font-size: 15px; line-height: 1.55; color: var(--graphite); margin: 0; }
.rev-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rev-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--graphite); color: var(--lime); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.rev-meta { min-width: 0; }
.rev-name { font-weight: 700; font-size: 14px; }
.rev-role { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-top: 2px; }
@media (max-width: 1000px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rev-grid { grid-template-columns: 1fr; } }

/* ========== ПАРТНЁРЫ (elephus/partner-wall, динамический) ========== */
/* minmax(0, 1fr) вместо 1fr — иначе широкий логотип/длинное название задаёт
 * колонке минимальную ширину по своему содержимому, и сетка вылезает вбок на
 * узких экранах. Нулевой минимум разрешает колонкам сжиматься как нужно. */
.vendor-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vendor-card { position: relative; min-width: 0; background: var(--white); border: 1px solid var(--paper-3); border-radius: var(--r-md); aspect-ratio: 16 / 9; max-height: 220px; display: flex; align-items: center; justify-content: center; padding: 24px 20px 36px; transition: border-color 0.15s, transform 0.15s; }
.vendor-card:hover { border-color: var(--graphite); transform: translateY(-2px); }
/* Логотип внутри плитки: ограничиваем и по ширине, и по высоте в ПИКСЕЛЯХ.
 * Раньше высота задавалась в процентах (40%) — для картинок внутри flex-плитки
 * это работает ненадёжно, и логотипы вылезали за пределы карточки. Фиксированный
 * предел по высоте гарантирует, что логотип впишется при любых пропорциях. */
.vendor-card img { max-width: 80%; max-height: 90px; width: auto; height: auto; object-fit: contain; }
.vendor-fallback { font-family: var(--font-sans); font-weight: 800; font-size: 22px; letter-spacing: -0.025em; color: var(--graphite); text-align: center; line-height: 1.05; }
.vendor-tier { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--paper-3); width: calc(100% - 40px); text-align: center; }
.vendor-card[data-tier="platinum"] .vendor-tier { color: var(--graphite); font-weight: 700; }
.vendor-card[data-tier="gold"] .vendor-tier { color: var(--copper); font-weight: 700; }
@media (max-width: 900px) { .vendor-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vendor-card { aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .vendor-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vendor-fallback { font-size: 18px; } }

/* ========== НОВОСТИ (elephus/post-grid, динамический) ========== */
.post-grid-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--paper-3); background: var(--white); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-chip.active { border-color: var(--graphite); background: var(--graphite); color: var(--paper); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--white); border: 1px solid var(--paper-3); border-radius: var(--r-md); cursor: pointer; transition: all 0.2s; text-decoration: none; color: inherit; }
.post-card:hover { border-color: var(--graphite); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(14,17,22,0.08); }
.post-card.is-hidden { display: none; }
.post-cover { aspect-ratio: 16/9; background: var(--paper-2); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--paper-3); position: relative; overflow: hidden; text-align: center; }
/* Текст-заглушка (когда фото не задано) — с отступом от краёв. */
.post-cover > span { padding: 16px; }
/* Фото в карточке новости заполняет обложку вплотную, без полей, с сохранением
 * пропорций (лишнее аккуратно обрезается по краям). */
.post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-cover.dark { background: var(--graphite); color: var(--lime); border: none; }
.post-cover.lime { background: var(--lime); color: var(--graphite); border: none; }
.post-meta { display: flex; gap: 12px; font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.post-card h4 { margin: 0; font-size: 17px; }
.post-card p { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

/* ========== ОДИНОЧНАЯ НОВОСТЬ (single-elephus_news.php) ========== */
.news-single-head { padding-top: 60px; padding-bottom: 48px; }
.news-single-title { margin: 0; text-align: left; font-family: var(--font-sans); font-weight: 800; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -0.03em; color: var(--paper); max-width: 20ch; }
.news-single-meta { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-3); }

.news-single-body-wrap { padding-top: 56px; padding-bottom: 72px; }
/* Две колонки: слева текст, справа лента фото. Без фото — одна колонка. */
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.news-layout.is-single { grid-template-columns: minmax(0, 760px); }

.news-article-body { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.news-article-body > *:first-child { margin-top: 0; }
.news-article-body p { margin: 0 0 20px; }
.news-article-body h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 40px 0 16px; }
.news-article-body h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; margin: 32px 0 12px; }
.news-article-body ul, .news-article-body ol { margin: 0 0 20px; padding-left: 22px; }
.news-article-body li { margin-bottom: 8px; }
.news-article-body a { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lime-dim); }
.news-article-body a:hover { text-decoration-color: var(--graphite); }
.news-article-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--lime); font-size: 19px; line-height: 1.5; color: var(--graphite); }
.news-article-body strong { font-weight: 700; }

/* Правая колонка — вертикальная лента миниатюр. */
.news-gallery { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 92px; }
.news-thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--paper-3); border-radius: var(--r-md); overflow: hidden; background: var(--white); cursor: zoom-in; transition: border-color 0.15s, transform 0.15s; }
.news-thumb:hover { border-color: var(--graphite); transform: translateY(-2px); }
.news-thumb img { display: block; width: 100%; height: auto; }

.news-single-foot { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--paper-3); }

/* Просмотр фото во весь экран (клик по миниатюре), с приближением по клику. */
.news-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 40px; background: rgba(14, 17, 22, 0.92); cursor: zoom-out; }
.news-lightbox.is-open { display: flex; }
.news-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: var(--r-sm); cursor: zoom-in; }
.news-lightbox.is-zoomed { overflow: auto; align-items: flex-start; justify-content: center; }
.news-lightbox.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.news-lightbox-close { position: fixed; top: 18px; right: 24px; width: 44px; height: 44px; border: none; background: transparent; color: var(--paper); font-size: 34px; line-height: 1; cursor: pointer; }

@media (max-width: 900px) {
  .news-layout, .news-layout.is-single { grid-template-columns: 1fr; }
  .news-gallery { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
  .news-gallery .news-thumb { width: calc(33.333% - 8px); }
}
@media (max-width: 700px) { .news-single-title { font-size: 30px; } .news-article-body { font-size: 16px; } }

/* ========== ПРАВОВЫЕ ДОКУМЕНТЫ (страница /legal/: Политика + Согласие) ========== */
.legal-doc { max-width: 900px; }
.legal-doc > h2.wp-block-heading { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; margin: 8px 0 8px; }
.legal-body { max-width: 760px; margin-top: 20px; font-size: 15px; line-height: 1.7; color: var(--ink); }
.legal-body h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; margin: 32px 0 10px; color: var(--graphite); }
.legal-body p { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lime-dim); }
.legal-body a:hover { text-decoration-color: var(--graphite); }
.legal-body > *:first-child { color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }

/* ========== СЕРВИСЫ ПО ПОДПИСКЕ (elephus/subscription-card) ========== */
.serv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .serv-grid { grid-template-columns: 1fr; } }
.serv-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--graphite); border: 1px solid var(--graphite-3); border-radius: var(--r-md); padding: 34px 34px 30px; color: var(--paper); overflow: hidden; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.serv-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(14,17,22,0.30); }
.serv-top { display: flex; align-items: center; justify-content: space-between; }
.serv-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--lime); background: rgba(198,255,61,0.12); border: 1px solid rgba(198,255,61,0.28); padding: 6px 12px; border-radius: 100px; }
.serv-sub { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.serv-sub .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); opacity: 0.22; transition: opacity 0.15s; }
.serv-title { font-weight: 700; font-size: 25px; letter-spacing: -0.02em; line-height: 1.2; margin: 4px 0 0; color: var(--paper); }
.serv-desc { font-size: 14px; color: var(--muted-3); line-height: 1.55; margin: 0; }
.serv-card .wp-block-list { list-style: none; padding: 14px 0 0; margin: 4px 0 0; border-top: 1px solid var(--graphite-3); display: flex; flex-direction: column; gap: 9px; }
.serv-card .wp-block-list li { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted-3); line-height: 1.45; }
.serv-card .wp-block-list li::before { content: "•"; color: var(--lime-dim); font-family: var(--font-mono); flex-shrink: 0; }

/* ========== КЛИКАБЕЛЬНЫЕ КАРТОЧКИ УСЛУГ (elephus/service-card) ========== */
.svc-card { position: relative; text-align: left; width: 100%; cursor: pointer; background: var(--graphite); border: 1px solid var(--graphite-3); border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 12px; color: var(--paper); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14,17,22,0.28); }
.svc-code { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.svc-code .cat-label { color: var(--muted-2); font-weight: 600; }
/* ЕДИНАЯ точка-индикатор в правом верхнем углу всех карточек — одинаковое
 * положение (28px сверху, 25px справа, как на карточках «Услуги»), приглушена по
 * умолчанию и разгорается при наведении на карточку. Реализована псевдоэлементом,
 * чтобы не зависеть от внутренней вёрстки конкретной карточки. */
.svc-card::after,
.serv-card::after,
.wp-block-elephus-card.card::after {
  content: ""; position: absolute; top: 28px; right: 25px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); opacity: 0.22; transition: opacity 0.15s; z-index: 2;
}
.svc-card:hover::after,
.serv-card:hover::after,
.wp-block-elephus-card.card:hover::after,
/* .is-active навешивается из js/site.js на тач-устройствах при прокрутке —
   точка «загорается», когда карточка проходит через центр экрана. */
.svc-card.is-active::after,
.serv-card.is-active::after,
.wp-block-elephus-card.card.is-active::after,
.wp-block-columns.is-style-service-banner.is-active::after { opacity: 1; }
/* При переходе по якорю (ссылки из футера /managed/#compliance и т.п.) карточка-
   ссылка получает фокус, и браузер рисует системную синюю рамку. Убираем её для
   мыши/касания/якоря; для навигации с клавиатуры оставляем аккуратную обводку в
   фирменном лаймовом цвете (доступность сохранена, но рамка не синяя). */
.svc-card:focus,
.serv-card:focus { outline: none; }
.svc-card:focus-visible,
.serv-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Прежние «внутристрочные» точки убираем — вместо них единая угловая. */
.svc-code .dot,
.serv-sub .dot,
.card .card-num .dot { display: none; }

/* Страница «Сервисы» (managed) — точку возвращаем на прежнее место: в строку рядом
 * с «подписка», а угловую убираем (как было до унификации). */
.elephus-page-managed .serv-card::after { display: none; }
.elephus-page-managed .serv-card .serv-sub .dot { display: inline-block; }
.elephus-page-managed .serv-card:hover .serv-sub .dot,
.elephus-page-managed .serv-card.is-active .serv-sub .dot { opacity: 1; }

/* Мед-пакеты «готовые решения»: тег как на «Услугах» — простая подпись капсом
 * без зелёной плашки (вместо капсулы .serv-badge). */
.elephus-page-medicine .serv-badge {
  background: transparent; border: none; padding: 0; border-radius: 0;
  color: var(--muted-2); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.svc-title { font-weight: 700; font-size: 17px; letter-spacing: -0.015em; line-height: 1.3; margin: 0; color: var(--paper); }
.svc-desc { font-size: 13.5px; color: var(--muted-3); line-height: 1.55; margin: 0; }
.svc-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted-3); text-transform: uppercase; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--graphite-3); }

/* ========== ШАГИ МЕТОДОЛОГИИ (elephus/process-steps, elephus/process-step) ========== */
/* Крупный номер в высоту двух строк текста; отчётные документы (step-tag) убраны. */
.step-row { display: flex; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--graphite-3); align-items: center; }
.step-row:last-child { border-bottom: none; }
.step-num { font-family: var(--font-mono); font-size: 42px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--lime); width: 72px; flex-shrink: 0; }
.step-body { flex: 1; }
.step-title { color: var(--paper); font-weight: 700; font-size: 16px; }
.step-desc { color: var(--muted-2); font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
/* Скрываем и в старом контенте, сохранённом в БД до удаления тега из блока */
.step-tag { display: none; }
/* Панель шагов начинается правее — больше воздуха между текстом слева и блоком */
.wp-block-elephus-process-steps.lic-panel { margin-left: 48px; }
@media (max-width: 900px) {
  .wp-block-elephus-process-steps.lic-panel { margin-left: 0; }
  .step-num { font-size: 30px; width: 52px; }
}

/* ========== ПОКАЗАТЕЛИ (elephus/stat-box) ========== */
.stat-box { background: var(--graphite); border: 1px solid var(--graphite-3); border-radius: var(--r-md); padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.stat-fig { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--lime); }
.stat-lbl { font-size: 13.5px; color: var(--muted-3); line-height: 1.45; }

/* ========== ЛОГОТИПЫ КЛИЕНТОВ (elephus/logo-wall, elephus/logo-tile) ========== */
.logo-wall.vendor-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Высота плитки подстраивается под содержимое: логотип показывается крупно, а
 * карточка растёт под него; текстовые плитки держат минимальную высоту. Раньше
 * высота считалась из ширины (aspect-ratio 16/10) и карточки «вылезали» — теперь
 * этого нет: по горизонтали грид держит колонки, по вертикали высота = контент.
 * Внутри одного ряда грид выравнивает плитки по самой высокой (аккуратно), а
 * верхний предел высоты логотипа не даёт карточкам разрастаться. */
.logo-wall .vendor-card { aspect-ratio: auto; min-height: 96px; height: auto; padding: 18px 16px; }
.logo-wall .vendor-card img { max-width: 84%; max-height: 88px; width: auto; height: auto; object-fit: contain; }
/* Подпись-имя рядом с логотипом-картинкой скрыта (имя хранится в разметке для
 * восстановления, но визуально не показывается, когда загружен логотип). */
.vendor-card img ~ .vendor-fallback { display: none; }
.logo-wall .vendor-fallback { font-size: 14px; }
@media (max-width: 1100px) { .logo-wall.vendor-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 800px) { .logo-wall.vendor-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 500px) { .logo-wall.vendor-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ========== ЛИЧНЫЙ КАБИНЕТ (шаблон page-portal.php) ========== */
body.page-portal { background: var(--graphite); color: var(--paper); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
body.page-portal .entry-content,
body.page-portal > div:first-of-type { width: 100%; display: flex; align-items: center; justify-content: center; }
.login-shell { position: relative; width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; background: var(--graphite-2); border: 1px solid var(--graphite-3); border-radius: 20px; overflow: hidden; min-height: 600px; }
.login-close { position: absolute; top: 24px; right: 24px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--graphite-3); background: rgba(20,24,31,0.6); color: var(--paper); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 20px; line-height: 1; transition: background 0.15s, border-color 0.15s; }
.login-close:hover { background: var(--graphite-3); border-color: var(--lime); }
.login-side { padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-side::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(198,255,61,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(198,255,61,0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.login-side > * { position: relative; z-index: 1; }
.login-form-side { background: var(--paper); padding: 56px 64px; display: flex; flex-direction: column; gap: 24px; color: var(--graphite); justify-content: center; }
.login-form-side h2 { color: var(--graphite); }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.login-field input { padding: 14px 16px; border: 1px solid var(--paper-3); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 15px; background: var(--white); color: var(--graphite); transition: border-color 0.15s; }
.login-field input:focus { outline: none; border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(14,17,22,0.06); }
.login-error { font-size: 13px; color: var(--crimson); background: rgba(255,77,109,0.08); border: 1px solid rgba(255,77,109,0.35); border-radius: var(--r-sm); padding: 11px 14px; }
.login-features { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.login-feat { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--muted-3); }
.login-feat .num { font-family: var(--font-mono); color: var(--lime); font-size: 12px; padding-top: 2px; min-width: 24px; }
@media (max-width: 900px) {
  /* На мобильных показываем ТОЛЬКО блок «Вход в портал» (светлая форма). Тёмную
     панель (логотип, заголовок, описание, контакты) скрываем целиком. Фон и рамку
     самой карточки делаем бежевыми — чтобы светлая форма заполняла весь скруглённый
     прямоугольник без тёмной рамки, даже если высота карточки чуть больше формы. */
  .login-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    background: var(--paper);
    border-color: var(--paper);
    align-items: stretch;
  }
  .login-side { display: none; }
  .login-form-side { padding: 40px 28px; height: 100%; }
}
@media (max-width: 600px) { .login-shell { border-radius: 12px; } }