/* ======================================================================
   SEO-страницы «Пьер Фошар»: врачи (/vrachi/<slug>/), листинг /vrachi/,
   гео-страницы, блог /blog/ и статьи.

   Подключается только на этих страницах — seo-pages.php печатает <link>
   из header.php после style.css (pf_asset(), ?ver=). В style.css ничего
   не дописывается (ТЗ дизайнера §01). Классы — BEM с префиксом .pf-.

   Токены темы (--pf-accent, --pf-ink, --pf-ink-soft, --pf-line,
   --pf-line-soft, --pf-surface #f6f4f1, --pf-r*, --pf-ease, --pf-nav-h)
   объявлены в style.css и здесь НЕ переопределяются: --pf-surface читает
   прилипшая шапка, и белое значение из ТЗ сломало бы ей наведение. Белый
   фон карточек — --pf-card. Остальные новые имена — ниже.

   Размеры — с макетов Figma 84uPoS338sujQMNSq2fT71 (ui-kit.md,
   vrachi-listing.md, tokens.md). Одна граница: > 900px десктоп, ≤ 900px
   мобильный (ТЗ §02). Кегли — rem от 16px (ТЗ §03).
   ====================================================================== */

:root {
    /* Цвета, которых нет в style.css (Figma: color/bg/page, color/bg/card,
       color/ink-muted, color/on-accent) и три значения без переменной
       в Figma (tokens.md §4 п. 5–6). */
    --pf-bg:         #e6e6e6;
    --pf-card:       #ffffff;
    /* Обычному тексту не годится нигде: 3,10:1 на #e6e6e6, 3,53:1 на #f6f4f1
       и 3,87:1 на белом — все три ниже 4,5:1. Годится только крупному тексту
       (от 24px, или от 18,66px полужирным — WCAG 1.4.3, порог 3:1) и графике.
       Для обычного текста на любом из трёх фонов — --pf-ink-muted-strong.
       Единственное оставшееся применение — плейсхолдер поля формы (3,87:1,
       записан в «Открытое» T-0038, замечание 1 стража от 21.09). */
    --pf-ink-muted:  #868178;
    --pf-on-accent:  #ffffff;
    --pf-row-hover:  #faf9f7;   /* наведение на строку таблицы цен, ТЗ §05 */
    --pf-photo-bg:   #f5f4f2;   /* подложка скана в медиа-карточке */

    /* Замечание стража (T-0004): #868178 не проходит 4,5:1 на #e6e6e6 (3,10:1)
       и на #f6f4f1 (3,53:1). Для обычного текста — то есть любого кегля ниже
       24px (ниже 18,66px полужирным), а не только «мелкого» ≤ 17px — берём
       затемнённый вариант (MASTER §7 п. 1): L = 0,106 → 5,41:1 на #e6e6e6,
       6,15:1 на #f6f4f1, 6,75:1 на белом. */
    --pf-ink-muted-strong: #5f5b54;

    /* Ошибка формы: #dc3232 из ТЗ §08 на подложке формы #f6f4f1 даёт 4,21:1;
       #b83232 (L = 0,127) — 5,40:1 там и 5,93:1 на белом. */
    --pf-error:      #b83232;

    /* Надзаголовок: 20px Light на десктопе и 15px на телефоне — по WCAG 1.4.3
       это обычный текст (крупным считается от 24px, или от 18,66px полужирным),
       значит нужны 4,5:1. #868178 давал на #e6e6e6 только 3,10:1, поэтому обе
       ширины берут затемнённый токен: 5,41:1 (T-0038, 20.09). */
    --pf-suptitle-color: var(--pf-ink-muted-strong);

    /* Ссылки текстом на фоне страницы (проза статьи, крошки и сноски при
       наведении): --pf-accent #3d7d12 на #e6e6e6 даёт 4,06:1, поэтому берётся
       --pf-accent-dark #34690f из tokens.md: L = 0,109 → 5,30:1 на #e6e6e6,
       6,62:1 на белом. На белых карточках акцент остаётся обычным. */
    --pf-link-on-bg: var(--pf-accent-dark);

    --pf-r-md-lg:    20px;      /* второй кадр коллажа, лента фотографий */
    --pf-r-pill:     50px;      /* кнопки, пилюли, поля ввода */

    /* Шаг отступов (Figma space/4 … space/96 плюс 28, 36, 56 и 60, которые
       есть в макетах, но не заведены переменными — tokens.md §4 п. 4). */
    --pf-space-4:  4px;
    --pf-space-8:  8px;
    --pf-space-12: 12px;
    --pf-space-16: 16px;
    --pf-space-20: 20px;
    --pf-space-24: 24px;
    --pf-space-28: 28px;
    --pf-space-32: 32px;
    --pf-space-36: 36px;
    --pf-space-40: 40px;
    --pf-space-48: 48px;
    --pf-space-56: 56px;
    --pf-space-60: 60px;
    --pf-space-64: 64px;
    --pf-space-96: 96px;

    /* Ритм страницы: между блоками, от шапки секции до содержимого, между
       карточками; внутренние зазоры компонентов. */
    --pf-section-gap:   var(--pf-space-96);
    --pf-section-inner: var(--pf-space-36);
    --pf-grid-gap:      var(--pf-space-20);
    --pf-card-pad:      var(--pf-space-28);
    --pf-card-gap:      10px;
    --pf-facts-gap:     6px;
    --pf-inline-gap:    10px;

    /* Шкала шрифтов, десктоп (ТЗ §03). */
    --pf-fs-h1:         3.375rem;  /* 54 */
    --pf-lh-h1:         1.08;
    --pf-fs-h2:         2.75rem;   /* 44 */
    --pf-lh-h2:         1.12;
    --pf-fs-h2-article: 2rem;      /* 32 */
    --pf-fs-h-cta:      2.25rem;   /* 36 */
    --pf-fs-suptitle:   1.25rem;   /* 20 */
    --pf-fs-lead:       1.0625rem; /* 17 */
    --pf-fs-card-title: 1.25rem;   /* 20 */
    --pf-fs-body:       0.9375rem; /* 15 */
    --pf-fs-small:      0.875rem;  /* 14 */
    --pf-fs-caption:    0.8125rem; /* 13 */
    --pf-fs-fine:       0.75rem;   /* 12 */
    --pf-fs-fact:       2rem;      /* 32 */
    --pf-fs-price:      1.0625rem; /* 17 */
    --pf-fs-btn:        0.9375rem; /* 15 */

    /* Компонентные токены блока «Прямая речь» (страницы врачей, #pf-about).
       Псевдонимы уже существующих значений, новых чисел цвета и кегля нет:
       трёхслойная схема primitive → semantic → component. Числа замерены
       20.09 на DEV по строчным боксам — pages/blok-svoimi-slovami.md §1, §3. */
    --pf-speech-measure: 676px;   /* колонка речи: 68 знаков медиана, 73 максимум */
    --pf-speech-rail:    220px;   /* колонка подписи: портрет 140 + запас под ФИО в две строки */
    --pf-speech-gap:     var(--pf-space-64);
    --pf-speech-card:    1040px;  /* 40 + 220 + 64 + 676 + 40 */
    --pf-speech-photo-w: 140px;
    --pf-speech-photo-h: 180px;
    --pf-speech-mark:    44px;

    --pf-duration: 160ms;         /* переходы, ТЗ §05 */
    --pf-nav-offset: calc(var(--pf-nav-h) + var(--pf-space-24));
}

/* Мобильные значения шкалы и ритма — одним местом, чтобы компоненты ниже
   не повторяли кегли; раскладка каждого компонента переключается рядом
   с ним. */
@media (max-width: 900px) {
    :root {
        --pf-section-gap:   var(--pf-space-56);
        --pf-section-inner: 18px;
        --pf-grid-gap:      var(--pf-space-12);
        --pf-card-pad:      var(--pf-space-20);

        --pf-fs-h1:         1.875rem;  /* 30 */
        --pf-fs-h2:         1.625rem;  /* 26 */
        --pf-fs-h2-article: 1.375rem;  /* 22 */
        --pf-fs-h-cta:      1.5rem;    /* 24 */
        --pf-fs-suptitle:   0.9375rem; /* 15 */
        --pf-fs-lead:       0.9375rem; /* 15 */
        --pf-fs-card-title: 1.0625rem; /* 17 */
        --pf-fs-body:       0.875rem;  /* 14 */
        --pf-fs-small:      0.875rem;  /* 14 */
        --pf-fs-caption:    0.75rem;   /* 12 */
        --pf-fs-fine:       0.75rem;   /* 12 */
        --pf-fs-fact:       1.5rem;    /* 24 */
        --pf-fs-price:      0.9375rem; /* 15 */

        --pf-nav-offset: calc(var(--pf-nav-h) + var(--pf-space-16));
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --pf-duration: 0ms; }
}

/* ----------------------------------------------------------------------
   Страница
   ---------------------------------------------------------------------- */

body.pf-seo-page {
    background: var(--pf-bg);
}

.pf-seo {
    display: block;
    padding: var(--pf-nav-offset) 0 var(--pf-section-gap);
    color: var(--pf-ink);
    font-family: var(--font-body), 'Geometria', sans-serif;
    font-size: var(--pf-fs-body);
    line-height: 1.52;
}

.pf-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1360px;            /* 1280 содержимого + поля 2 × 40 */
    margin: 0 auto;
    padding: 0 var(--pf-space-40);
}

.pf-seo .pf-container > * + * {
    margin-top: var(--pf-section-gap);
}

.pf-seo img {
    max-width: 100%;
    height: auto;
}

/* Тема снимает обводку глобально (* { outline: medium none }) — на новых
   страницах фокус возвращён, ТЗ §05.

   Дефект T-0031 (найден uxui 20.09, исправлен здесь же): эти два селектора
   стояли в одном блоке, поэтому любой элемент 13 новых страниц, получивший
   фокус с клавиатуры, забирал себе свойства визуально скрытого текста и
   схлопывался в 1×1 (замер uxui: карточка-ссылка 630×94 → 1×1). Селекторы
   разделены: фокус только рисует обводку, ничего не двигая.

   Радиус обводке не задаём: браузер обводит элемент по его собственному
   border-radius, а общий `border-radius: var(--pf-r)` менял бы форму полей
   и кнопок в момент фокуса (пилюля 50px → 16px). */
.pf-seo :focus-visible {
    outline: 2px solid var(--pf-accent);
    outline-offset: 3px;
}

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

@media (max-width: 900px) {
    .pf-container { padding: 0 var(--pf-space-20); }
}

/* ----------------------------------------------------------------------
   Кнопки
   ---------------------------------------------------------------------- */

.pf-btn,
.pf-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 49px;
    margin: 0;
    padding: var(--pf-space-16) var(--pf-space-32);
    border: 1px solid transparent;
    border-radius: var(--pf-r-pill);
    font-family: var(--font-body), 'Geometria', sans-serif;
    font-size: var(--pf-fs-btn);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--pf-duration) ease-out,
                color var(--pf-duration) ease-out,
                border-color var(--pf-duration) ease-out;
}

.pf-btn--primary,
.pf-btn--primary:visited {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    color: var(--pf-on-accent);
}

.pf-btn--outline,
.pf-btn--outline:visited {
    background: var(--pf-card);
    border-color: var(--pf-accent);
    color: var(--pf-ink);
}

/* Кнопки формы: в макете 43 (pad 14/26), здесь 44 — тач-цель по замечанию стража. */
.pf-btn--block {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 13px var(--pf-space-24);
}

@media (hover: hover) and (pointer: fine) {
    .pf-btn--primary:hover {
        background: var(--pf-accent-dark);
        border-color: var(--pf-accent-dark);
        color: var(--pf-on-accent);
        text-decoration: none;
    }

    .pf-btn--outline:hover {
        background: var(--pf-accent);
        border-color: var(--pf-accent);
        color: var(--pf-on-accent);
        text-decoration: none;
    }
}

/* ----------------------------------------------------------------------
   Хлебные крошки
   ---------------------------------------------------------------------- */

.pf-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    /* Ссылкам добавлен вертикальный padding (тач-цель), текущему пункту — нет:
       по базовой линии он вставал на 14 px выше остальных (сверка uxui, §2.1). */
    align-items: center;
    gap: var(--pf-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--pf-fs-caption);
    line-height: 1.2;
    color: var(--pf-ink-muted-strong);
}

.pf-crumbs__item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--pf-space-8);
}

.pf-crumbs__item + .pf-crumbs__item::before {
    content: '·';
}

/* Вертикальный padding у строчной ссылки не меняет раскладку (у строчного
   элемента он не входит в высоту строки), но даёт тач-цель по высоте.
   Высота бокса = кегль ≈ 15–16 + 2 × padding: при 12 px и padding 14 выходило
   43 — на два пикселя меньше нормы (сверка uxui 20.09, §11), с 15 — 45. */
.pf-crumbs__link,
.pf-crumbs__link:visited {
    padding: 15px 0;
    color: inherit;
    text-decoration: none;
    transition: color var(--pf-duration) ease-out;
}

.pf-crumbs__current {
    color: var(--pf-ink-soft);
}

@media (hover: hover) and (pointer: fine) {
    .pf-crumbs__link:hover { color: var(--pf-link-on-bg); text-decoration: none; }
}

/* ----------------------------------------------------------------------
   Первый экран: коллаж (врач, гео), во всю ширину (статья), текст (листинги)
   ---------------------------------------------------------------------- */

.pf-hero {
    display: grid;
    gap: var(--pf-space-24);
}

.pf-hero--collage {
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: var(--pf-space-60);
    align-items: center;
}

.pf-hero--wide {
    gap: var(--pf-space-36);
}

/* Первый экран без фото (листинги; гео — пока клиника не прислала снимки):
   лид ограничен своим max-width 900, а заголовок растягивался на все 1280
   (сверка uxui 20.09, §4, уточнение 20.09). Класс pf-hero--text ставит
   шаблон, когда картинки нет, — :has() не нужен. */
.pf-hero--text .pf-hero__title {
    max-width: 900px;
}

.pf-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-24);
    min-width: 0;
}

.pf-suptitle {
    margin: 0;
    font-size: var(--pf-fs-suptitle);
    font-weight: 300;
    line-height: 1.4;
    color: var(--pf-suptitle-color);
}

.pf-hero__title {
    margin: 0;
    font-size: var(--pf-fs-h1);
    font-weight: 700;
    line-height: var(--pf-lh-h1);
    color: var(--pf-ink);
    overflow-wrap: break-word;
}

.pf-hero__lead {
    max-width: 900px;
    margin: 0;
    font-size: var(--pf-fs-lead);
    line-height: 1.52;
    color: var(--pf-ink-soft);
}

.pf-hero__meta {
    margin: 0;
    font-size: var(--pf-fs-caption);
    line-height: 1.5;
    color: var(--pf-ink-muted-strong);
}

.pf-hero__meta a,
.pf-hero__meta a:visited {
    padding: 15px 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-12);
}

.pf-hero__note {
    margin: 0;
    font-size: var(--pf-fs-caption);
    line-height: 1.5;
    color: var(--pf-ink-muted-strong);
}

.pf-hero__media {
    position: relative;
    min-width: 0;
}

.pf-hero__photo img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: var(--pf-r-lg);
    background: var(--pf-photo-bg);
}

.pf-hero--wide .pf-hero__photo img {
    height: 360px;
}

/* Страховка для портрета врача: вертикальный оригинал 308×448 в рамке 520×440
   режется по центру и срезает макушку (сверка uxui 20.09, §1). Готовые кадры
   из макета (поля pf_doctor_hero / pf_doctor_hero_mobile) держат пропорции
   рамки, и правило им ничего не меняет. */
.pf-doctor .pf-hero__photo img {
    object-position: 50% 0;
}

/* Второй кадр коллажа: 220×168 с рамкой 10 цвета фона страницы. */
.pf-hero__photo-2 {
    position: absolute;
    left: -56px;
    bottom: var(--pf-space-40);
    box-sizing: content-box;
    width: 220px;
    height: 168px;
    border: 10px solid var(--pf-bg);
    border-radius: calc(var(--pf-r-md-lg) + 10px);
}

.pf-hero__photo-2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--pf-r-md-lg);
}

.pf-badge {
    position: absolute;
    top: var(--pf-space-20);
    right: var(--pf-space-20);
    display: inline-flex;
    align-items: center;
    gap: var(--pf-space-8);
    padding: 11px var(--pf-space-20) 11px 18px;
    background: var(--pf-card);
    border-radius: var(--pf-r-pill);
    font-size: var(--pf-fs-caption);
    font-weight: 500;
    line-height: 1.2;
    color: var(--pf-ink);
    white-space: nowrap;
}

.pf-badge .pf-icon {
    width: 18px;
    height: 18px;
    color: var(--pf-accent);
}

/* Вынос −56 рассчитан на колонку текста 700 px (окно 1440): кадр с рамкой
   всегда заходит на 6 px в колонку, и на 1440 это пустое место — так и в
   макете. Ниже 1181 px колонка сжимается, строки заголовка доходят до
   правого края, и кадр ложится на буквы: в этой полосе коллаж не
   собирается, остаётся один кадр (T-0028, §1.1). */
@media (max-width: 1180px) {
    .pf-hero__photo-2 { display: none; }
}

@media (max-width: 900px) {
    .pf-hero--collage {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--pf-space-24);
    }

    .pf-hero__text { gap: var(--pf-space-16); }

    .pf-hero__actions { flex-direction: column; }
    .pf-hero__actions .pf-btn { width: 100%; }

    .pf-hero__photo img,
    .pf-hero--wide .pf-hero__photo img {
        height: 220px;
        border-radius: var(--pf-r);
    }

    /* На телефоне коллаж не собирается: один кадр во всю ширину (ТЗ §06). */
    .pf-hero__photo-2,
    .pf-badge { display: none; }
}

/* ----------------------------------------------------------------------
   Полоса показателей
   ---------------------------------------------------------------------- */

.pf-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pf-space-24);
    margin: 0;
    padding: var(--pf-space-36) var(--pf-space-40);
    list-style: none;
    background: var(--pf-card);
    border-radius: var(--pf-r-lg);
}

.pf-facts__item {
    display: flex;
    flex-direction: column;
    gap: var(--pf-facts-gap);
    min-width: 0;
}

.pf-facts__value {
    font-size: var(--pf-fs-fact);
    font-weight: 700;
    line-height: 1.15;
    color: var(--pf-ink);
}

/* Ячейка по макету — 147 px на 390 и 112 px на 320 при кегле 24 Bold,
   и слово длиннее ~9 букв в неё не влезает: «Серпуховская,» — 183 px,
   «направлений» — 165, «обновления» — 149 (T-0030). Раньше такое слово
   выходило за свою колонку и налезало на соседнюю, а на 320 давало
   горизонтальную прокрутку страницы (333 > 320 на гео-странице).
   `min-width: 0` у ячейки и `minmax(0, 1fr)` у колонок уже стоят — они
   держат ширину, но не режут слово; перенос внутри слова включает только
   `overflow-wrap`. Он срабатывает лишь тогда, когда слово иначе не влезает,
   поэтому на строки, которые помещались, не влияет. `hyphens: auto` был
   проверен отдельно: в Chrome прогона словарь переносов для русского
   недоступен, все 13 адресов на 390 и 320 дали те же строки и высоты
   до десятой пикселя, поэтому правило не добавлено. */
.pf-facts__value,
.pf-facts__label {
    overflow-wrap: break-word;
}

.pf-facts__label {
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    /* Мелкий серый на белой карточке: #868178 даёт 3,87:1 — ниже 4,5:1
       (сверка uxui 20.09, §10). Затемнённый токен — 6,75:1. */
    color: var(--pf-ink-muted-strong);
}

@media (max-width: 900px) {
    .pf-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--pf-space-16);
        padding: var(--pf-space-20);
        border-radius: var(--pf-r);
    }

    /* Запас на промах в 1–2 px. Без него `overflow-wrap` рвёт слово,
       которое не влезло на волосок, и на строке остаётся одна буква:
       «Коффердам» — 148 px в ячейке 147, «обновления» — 149 в 147,
       «ПСПбГМУ» — 118 в 112 на 320. Значение может зайти в зазор между
       колонками на 8 px — это половина зазора мобильной сетки (16),
       поэтому соседняя колонка не задевается: замер правых краёв текста
       против левой границы соседней ячейки на 13 адресах × 390/320 —
       пересечений 0. Правило только здесь: на четырёхколоночной сетке
       тот же запас собрал бы «Серпуховскую» и «Дату обновления» в одну
       строку, а их две строки на 1440 сверены с макетом. */
    .pf-facts__value {
        margin-right: -8px;
    }
}

/* ----------------------------------------------------------------------
   Плашка «подтверждено клиникой · страница обновлена»
   ---------------------------------------------------------------------- */

.pf-verified {
    display: inline-flex;
    align-items: center;
    gap: var(--pf-inline-gap);
    box-sizing: border-box;
    margin: 0;
    padding: var(--pf-space-12) 22px var(--pf-space-12) var(--pf-space-16);
    background: var(--pf-card);
    border-radius: var(--pf-r-pill);
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    color: var(--pf-ink-soft);
}

.pf-verified__icon {
    width: 20px;
    height: 20px;
    color: var(--pf-accent);
}

@media (max-width: 900px) {
    .pf-verified { display: flex; width: 100%; }
}

/* ----------------------------------------------------------------------
   Секция: шапка и текстовая врезка
   ---------------------------------------------------------------------- */

.pf-section {
    scroll-margin-top: calc(var(--pf-nav-h) + var(--pf-space-16));
}

.pf-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-12);
    margin: 0 0 var(--pf-section-inner);
}

.pf-section__title {
    margin: 0;
    font-size: var(--pf-fs-h2);
    font-weight: 700;
    line-height: var(--pf-lh-h2);
    color: var(--pf-ink);
    overflow-wrap: break-word;
}

.pf-section__lead {
    max-width: 880px;
    margin: 0;
    font-size: var(--pf-fs-lead);
    line-height: 1.52;
    color: var(--pf-ink-soft);
}

/* Ссылка в лиде секции (единственная — на прайс в «Услугах врача», T-0028):
   оформляем как в примечании под таблицей цен, чтобы пути к ценам выглядели
   одинаково. Цвет наследуется: акцентный на этом кегле рябит в строке. */
.pf-section__lead a,
.pf-section__lead a:visited {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--pf-duration) ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .pf-section__lead a:hover { color: var(--pf-link-on-bg); }
}

.pf-text-box {
    box-sizing: border-box;
    padding: var(--pf-space-36) var(--pf-space-40);
    background: var(--pf-card);
    border-radius: var(--pf-r-lg);
    font-size: var(--pf-fs-lead);
    line-height: 1.52;
    color: var(--pf-ink-soft);
}

.pf-text-box p,
.pf-text-box ul,
.pf-text-box ol {
    margin: 0 0 var(--pf-space-16);
}

.pf-text-box ul,
.pf-text-box ol {
    padding-left: 1.4em;
}

.pf-text-box > :last-child {
    margin-bottom: 0;
}

.pf-text-box a,
.pf-text-box a:visited {
    color: var(--pf-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 900px) {
    .pf-section__head { gap: var(--pf-space-8); }

    .pf-text-box {
        padding: var(--pf-space-20);
        border-radius: var(--pf-r);
    }
}

/* ----------------------------------------------------------------------
   Карточки-ссылки (перелинковка, услуги врача, содержание, памятка)
   ---------------------------------------------------------------------- */

.pf-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pf-grid-gap);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Одна колонка во всю ширину блока: строка-переход в разделе «Результаты
   работ» (T-0031, спецификация uxui §2). Плитку в сетке снимков там
   не ставим — у шестерых врачей своих фотографий нет, и плитка без кадра
   читается как несработавшая картинка. */
.pf-links--1 {
    grid-template-columns: minmax(0, 1fr);
}

/* Строка-переход стоит сразу за сеткой снимков в «Результатах работ».
   Собственных вертикальных полей у обоих списков нет (`margin: 0`), и у
   двух врачей со своими фотографиями белая плита строки упиралась в белые
   карточки без просвета: закруглённые углы стыковались, и блок читался как
   наложение (Владимир, 20.09). Просвет равен зазору сетки — строка выглядит
   её последним рядом, а не приклеенным элементом. */
.pf-media + .pf-links {
    margin-top: var(--pf-grid-gap);
}

.pf-links__item {
    min-width: 0;
}

.pf-link-card,
.pf-link-card:visited {
    display: flex;
    align-items: center;
    gap: var(--pf-space-16);
    box-sizing: border-box;
    height: 100%;
    padding: 22px var(--pf-space-28);
    background: var(--pf-card);
    border-radius: var(--pf-r);
    color: var(--pf-ink);
    text-decoration: none;
}

/* Карточка услуги без адреса — кнопка попапа (T-0028, §5): снимаем
   собственные значения кнопки, на вид она не отличается от ссылки. */
button.pf-link-card {
    width: 100%;
    margin: 0;
    font: inherit;
    text-align: left;
    border: 0;
    appearance: none;
    cursor: pointer;
}

.pf-link-card__icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pf-accent-soft);
    color: var(--pf-accent);
}

.pf-link-card__icon .pf-icon {
    width: 20px;
    height: 20px;
}

.pf-link-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-4);
    min-width: 0;
}

.pf-link-card__title {
    margin: 0;
    font-size: var(--pf-fs-card-title);
    font-weight: 700;
    line-height: 1.25;
    color: var(--pf-ink);
    transition: color var(--pf-duration) ease-out;
}

.pf-link-card__text {
    margin: 0;
    font-size: var(--pf-fs-body);
    line-height: 1.4;
    /* Мелкий серый на белой карточке: #868178 даёт 3,87:1 — ниже 4,5:1
       (сверка uxui 20.09, §10). Затемнённый токен — 6,75:1. */
    color: var(--pf-ink-muted-strong);
}

/* Содержание статьи: только заголовок, компактнее. */
.pf-link-card--compact .pf-link-card__title {
    font-size: var(--pf-fs-lead);
}

@media (hover: hover) and (pointer: fine) {
    .pf-link-card:is(a, button):hover { text-decoration: none; }
    .pf-link-card:is(a, button):hover .pf-link-card__title { color: var(--pf-accent); }
}

@media (max-width: 900px) {
    .pf-links { grid-template-columns: minmax(0, 1fr); }

    .pf-link-card,
    .pf-link-card:visited {
        padding: var(--pf-space-16) var(--pf-space-20);
    }
}

/* ----------------------------------------------------------------------
   Карточки сетки (путь, этапы, FAQ, правила, статьи)
   ---------------------------------------------------------------------- */

.pf-cards {
    display: grid;
    gap: var(--pf-grid-gap);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pf-card {
    display: flex;
    flex-direction: column;
    gap: var(--pf-card-gap);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--pf-card-pad);
    background: var(--pf-card);
    border-radius: var(--pf-r);
}

.pf-card__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: var(--pf-space-4);
    border-radius: 50%;
    background: var(--pf-accent-soft);
    font-size: var(--pf-fs-body);
    font-weight: 700;
    line-height: 1;
    color: var(--pf-accent);
}

.pf-card__title {
    margin: 0;
    font-size: var(--pf-fs-card-title);
    font-weight: 700;
    line-height: 1.28;
    color: var(--pf-ink);
}

.pf-card__text {
    margin: 0;
    font-size: var(--pf-fs-body);
    line-height: 1.52;
    color: var(--pf-ink-soft);
}

@media (max-width: 900px) {
    .pf-cards--2,
    .pf-cards--3,
    .pf-cards--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----------------------------------------------------------------------
   Карточки с фото: сертификаты (вписаны), случаи (обрезаны), отзывы
   ---------------------------------------------------------------------- */

.pf-media {
    display: grid;
    gap: var(--pf-grid-gap);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-media--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-media--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pf-media-card {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-12);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--pf-space-16);
    background: var(--pf-card);
    border-radius: var(--pf-r);
}

.pf-media-card__pic,
.pf-media-card__pic:visited {
    display: block;
    overflow: hidden;
    border-radius: var(--pf-r-sm);
    background: var(--pf-photo-bg);
}

.pf-media-card__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Рамка-заглушка (нет скана сертификата или снимка случая). Одной подложки
   мало: #f5f4f2 на белой карточке — 1,10:1, на бликующем экране читается
   как пустое место, а не как рамка (замечание 6 стража к T-0028). Линия
   `--pf-line` поднимает границу до 1,25:1 к карточке и 1,14:1 к подложке —
   контур виден, при этом остаётся служебным: элемент декоративный,
   `aria-hidden`, порог 3:1 к нему не применяется. `box-sizing` обязателен:
   у рамки задано `aspect-ratio`, и без него граница добавила бы 2 px
   к внешнему размеру и сдвинула бы ряд карточек. */
.pf-media-card__pic--empty {
    box-sizing: border-box;
    border: 1px solid var(--pf-line);
}

/* Карточка-переход («Смотреть все 16 работ →»): ссылкой становится весь
   блок, внутри повторяется раскладка карточки (T-0028, §1.6). */
.pf-media-card__all,
.pf-media-card__all:visited {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-12);
    height: 100%;
    color: var(--pf-ink);
    text-decoration: none;
}

/* Скан документа должен читаться: вписан на подложку, не обрезан. */
.pf-media--contain .pf-media-card__pic img {
    object-fit: contain;
}

.pf-media--contain.pf-media--4 .pf-media-card__pic {
    box-sizing: border-box;
    aspect-ratio: 273 / 349;
    padding: 0 var(--pf-space-20);
}

/* Отзывы: скриншоты со старого слайдера — полоски 380×133, и в рамке
   381×351 сверху и снизу оставались пустые серые поля по ~110 px
   (сверка uxui, §2.6). До новых скриншотов от клиники рамка подстраивается
   под картинку, ряд выравнивается по самой высокой карточке. */
.pf-media--contain.pf-media--3 .pf-media-card__pic {
    aspect-ratio: auto;
}

.pf-media--contain.pf-media--3 .pf-media-card__pic img {
    height: auto;
}

.pf-media--cover .pf-media-card__pic {
    aspect-ratio: 273 / 251;
}

.pf-media-card__title {
    margin: 0;
    font-size: var(--pf-fs-card-title);
    font-weight: 700;
    line-height: 1.28;
    color: var(--pf-ink);
    transition: color var(--pf-duration) ease-out;
}

.pf-section--reviews .pf-media-card__title {
    font-size: var(--pf-fs-body);
}

.pf-media-card__note {
    margin: 0;
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    /* Мелкий серый на белой карточке: #868178 даёт 3,87:1 — ниже 4,5:1
       (сверка uxui 20.09, §10). Затемнённый токен — 6,75:1. */
    color: var(--pf-ink-muted-strong);
}

@media (hover: hover) and (pointer: fine) {
    .pf-media-card__all:hover .pf-media-card__title { color: var(--pf-accent); }
}

@media (max-width: 900px) {
    .pf-media--3,
    .pf-media--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-media-card { padding: var(--pf-space-12); }

    .pf-media--cover .pf-media-card__pic {
        aspect-ratio: 326 / 300;
    }

    .pf-media--contain.pf-media--4 .pf-media-card__pic {
        aspect-ratio: 326 / 417;
        padding: 0 var(--pf-space-16);
    }
}

/* ----------------------------------------------------------------------
   Таблица цен и сноски
   ---------------------------------------------------------------------- */

.pf-prices {
    overflow: hidden;
    background: var(--pf-card);
    border-radius: var(--pf-r-lg);
}

.pf-prices__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

.pf-prices__row + .pf-prices__row {
    border-top: 1px solid var(--pf-line);
}

.pf-prices__row {
    transition: background-color var(--pf-duration) ease-out;
}

.pf-prices__name {
    padding: var(--pf-space-20) var(--pf-space-16) var(--pf-space-20) var(--pf-space-28);
    font-size: var(--pf-fs-body);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: var(--pf-ink-soft);
}

.pf-prices__price {
    padding: var(--pf-space-20) var(--pf-space-28) var(--pf-space-20) 0;
    font-size: var(--pf-fs-price);
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    color: var(--pf-ink);
}

.pf-note {
    margin: var(--pf-space-20) 0 0;
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    color: var(--pf-ink-muted-strong);
}

.pf-note a,
.pf-note a:visited {
    padding: 15px 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--pf-duration) ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .pf-prices__row:hover { background: var(--pf-row-hover); }
    .pf-note a:hover { color: var(--pf-link-on-bg); }
}

@media (max-width: 900px) {
    .pf-prices { border-radius: var(--pf-r); }

    .pf-prices__name {
        padding: 14px var(--pf-space-12) 14px var(--pf-space-16);
        font-size: var(--pf-fs-small);
    }

    .pf-prices__price {
        padding: 14px var(--pf-space-16) 14px 0;
    }
}

/* ----------------------------------------------------------------------
   Лента фотографий
   ---------------------------------------------------------------------- */

.pf-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pf-space-16);
}

.pf-band__item img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: var(--pf-r-md-lg);
    background: var(--pf-photo-bg);
}

@media (max-width: 900px) {
    .pf-band { gap: var(--pf-inline-gap); }

    .pf-band__item img {
        height: 150px;
        border-radius: var(--pf-r-sm);
    }
}

/* ----------------------------------------------------------------------
   Блок записи и форма
   ---------------------------------------------------------------------- */

.pf-cta__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--pf-space-56);
    align-items: start;
    box-sizing: border-box;
    padding: var(--pf-space-48);
    background: var(--pf-card);
    border-radius: var(--pf-r-lg);
}

.pf-cta__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.pf-cta__title {
    margin: 0;
    font-size: var(--pf-fs-h-cta);
    font-weight: 700;
    line-height: 1.18;
    color: var(--pf-ink);
}

.pf-cta__text {
    margin: 0;
    font-size: var(--pf-fs-lead);
    line-height: 1.52;
    color: var(--pf-ink-soft);
}

.pf-cta__hours {
    display: flex;
    align-items: center;
    gap: var(--pf-inline-gap);
    margin: 0;
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    /* Мелкий серый на белой карточке: #868178 даёт 3,87:1 — ниже 4,5:1
       (сверка uxui 20.09, §10). Затемнённый токен — 6,75:1. */
    color: var(--pf-ink-muted-strong);
}

.pf-cta__hours .pf-icon {
    width: 18px;
    height: 18px;
    color: var(--pf-accent);
}

.pf-cta__photo img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: var(--pf-r);
}

/* На страницах врачей фото тянется до низа формы. Фиксированные 340 px
   оставляли под фото 197 px пустого белого: форма с подписями над полями
   (решение по доступности, T-0026) выше макетной — 703 против 510
   (сверка uxui 20.09, §1.7 и §3.1). Колонку растягивает грид, остаток
   высоты добирает фото. Цена — кадр 524×366 в рамке 708×537, увеличение
   1,47× вместо 1,35× (решение оркестратора 20.09). Ниже 901 px фото
   не выводится (см. медиазапрос 900), поэтому правило только для десктопа. */
@media (min-width: 901px) {
    .pf-doctor .pf-cta__box { align-items: stretch; }

    .pf-doctor .pf-cta__content { height: 100%; }

    .pf-doctor .pf-cta__photo {
        flex: 1 1 340px;
        min-height: 340px;
    }

    .pf-doctor .pf-cta__photo img { height: 100%; }
}

.pf-cta__form {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-12);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--pf-space-28);
    background: var(--pf-surface);
    border-radius: var(--pf-r);
}

.pf-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-12);
}

.pf-cta__divider {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--pf-line);
}

.pf-cta__alt-title {
    margin: 0;
    font-size: var(--pf-fs-body);
    font-weight: 700;
    line-height: 1.3;
    color: var(--pf-ink);
}

.pf-cta__im {
    margin: 0;
    font-size: var(--pf-fs-fine);
    line-height: 1.45;
    color: var(--pf-ink-muted-strong);
}

.pf-cta__im a,
.pf-cta__im a:visited {
    padding: 15px 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Форма Contact Form 7 (разметка — seo-pages.php): видимые label,
   поля-пилюли, чекбокс согласия с тач-целью 44. */
.pf-form .wpcf7-form,
.pf-form form {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-12);
}

.pf-form p {
    margin: 0;
}

.pf-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-8);
}

.pf-form label {
    font-size: var(--pf-fs-caption);
    font-weight: 500;
    line-height: 1.3;
    color: var(--pf-ink-soft);
}

.pf-form__req {
    color: var(--pf-accent);
}

.pf-form__opt {
    font-weight: 400;
    color: var(--pf-ink-muted-strong);
}

.pf-form .wpcf7-form-control-wrap {
    display: block;
    position: relative;
}

.pf-form input[type="text"],
.pf-form input[type="tel"],
.pf-form input[type="email"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 47px;
    margin: 0;
    padding: 14px var(--pf-space-20);
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-r-pill);
    font-family: var(--font-body), 'Geometria', sans-serif;
    font-size: var(--pf-fs-small);
    line-height: 1.2;
    color: var(--pf-ink);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--pf-duration) ease-out;
}

.pf-form input::placeholder {
    color: var(--pf-ink-muted);
    opacity: 1;
}

.pf-form input[type="text"]:focus,
.pf-form input[type="tel"]:focus,
.pf-form input[type="email"]:focus {
    border-color: var(--pf-accent);
    outline: 1px solid var(--pf-accent);
    outline-offset: -2px;
}

.pf-form input.wpcf7-not-valid {
    border-color: var(--pf-error);
}

.pf-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: var(--pf-space-4);
    font-size: var(--pf-fs-fine);
    line-height: 1.4;
    color: var(--pf-error);
}

/* Чекбокс согласия: тема снимает нативный вид (* { -webkit-appearance: none }),
   поэтому квадрат и галочка нарисованы рамками. */
.pf-form__row--accept .wpcf7-list-item {
    display: block;
    margin: 0;
}

.pf-form__row--accept label {
    display: flex;
    align-items: center;
    gap: var(--pf-inline-gap);
    min-height: 44px;
    font-size: var(--pf-fs-fine);
    font-weight: 400;
    line-height: 1.4;
    color: var(--pf-ink-muted-strong);
    cursor: pointer;
}

.pf-form__row--accept label a,
.pf-form__row--accept label a:visited {
    padding: 15px 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-form input[type="checkbox"] {
    position: relative;
    flex: 0 0 18px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--pf-card);
    border: 1px solid var(--pf-line);
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--pf-duration) ease-out,
                border-color var(--pf-duration) ease-out;
}

.pf-form input[type="checkbox"]:checked {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
}

.pf-form input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--pf-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pf-form .wpcf7-spinner {
    margin: 0 auto;
}

.pf-form .wpcf7-response-output {
    box-sizing: border-box;
    margin: 0;
    padding: var(--pf-space-12) var(--pf-space-16);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-r);
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    color: var(--pf-ink-soft);
}

.pf-form .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

.pf-form .wpcf7-form.invalid .wpcf7-response-output,
.pf-form .wpcf7-form.failed .wpcf7-response-output {
    border-color: var(--pf-error);
    color: var(--pf-error);
}

/* ----------------------------------------------------------------------
   Форма: перебиваем правила темы (сверка uxui 20.09, §2.9)

   style.css задаёт стили по тегу: input[type=text|tel|email] (:1767) —
   высота 60 и иконка слева фоном с !important; input[type=submit] (:1686) —
   58 px, серый #868178, 17 px, letter-spacing 1.12 и padding 18/45 (на 390
   текст «Прислать план и цены на почту» в такой кнопке обрезается);
   .wpcf7-list-item-label (:1750) — 14 px Light #5A5A5A с отступом 38.
   Селекторы ниже сильнее по специфичности; !important стоит один раз —
   против !important темы, иначе иконку из фона не убрать.
   ---------------------------------------------------------------------- */

.pf-form input[type="text"],
.pf-form input[type="tel"],
.pf-form input[type="email"] {
    height: 47px;
    letter-spacing: 0;
    background-image: none !important;
}

.pf-form .pf-btn {
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 13px var(--pf-space-24);
    font-size: var(--pf-fs-btn);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.pf-form .pf-btn--primary {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    color: var(--pf-on-accent);
}

.pf-form .pf-btn--outline {
    background: var(--pf-card);
    border-color: var(--pf-accent);
    color: var(--pf-ink);
}

/* Наведение и фокус темы красят кнопку в серый #C7C7C7 с чёрным текстом —
   возвращаем цвета UI-кита; настоящее наведение — ниже, только для мыши.
   Видимый фокус остаётся на :focus-visible (правило темы для .pf-btn). */
.pf-form .pf-btn--primary:hover,
.pf-form .pf-btn--primary:focus {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    color: var(--pf-on-accent);
}

.pf-form .pf-btn--outline:hover,
.pf-form .pf-btn--outline:focus {
    background: var(--pf-card);
    border-color: var(--pf-accent);
    color: var(--pf-ink);
}

@media (hover: hover) and (pointer: fine) {
    .pf-form .pf-btn--primary:hover {
        background: var(--pf-accent-dark);
        border-color: var(--pf-accent-dark);
        color: var(--pf-on-accent);
    }

    .pf-form .pf-btn--outline:hover {
        background: var(--pf-accent);
        border-color: var(--pf-accent);
        color: var(--pf-on-accent);
    }
}

/* Фокус кнопки отправки (замечание Б сверки T-0027, замер 20.09).

   Причина белой обводки: тема задаёт `input[type=submit] { transition:
   all .2s }` (style.css:1786) — селектор специфичнее `.pf-btn`, поэтому
   переход распространяется и на обводку фокуса. Кольцо не появляется
   сразу, а «въезжает» из значения правила `*` темы (`outline: none medium`
   → белые 3 px без смещения, 1,10:1 к подложке формы #f6f4f1): замер
   0 мс — «rgb(255,255,255) solid 3px», 210 мс — «rgb(61,125,18) solid 2px».
   Первые ~150 мс видимого кольца фактически нет.

   Кольцо рисуем тенью: `box-shadow` объявлен здесь и из перехода исключён,
   поэтому появляется мгновенно и не зависит от цвета подложки под кнопкой.
   Два тона: белый отделяет кольцо от зелёной кнопки (5,07:1), акцент —
   от подложки (4,62:1 на #f6f4f1 в блоке записи, 5,07:1 на белой карточке),
   оба выше 3:1 по WCAG 2.2 §2.4.11. Тень вне потока —
   раскладку не двигает. Прозрачная обводка нужна для режима
   принудительных цветов: там тени не рисуются, а цвет обводки система
   подставляет свой. */
.pf-form input[type="submit"] {
    transition-property: background-color, border-color, color;
}

.pf-form input[type="submit"]:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--pf-card), 0 0 0 4px var(--pf-accent);
}

.pf-form .wpcf7-list-item-label {
    max-width: none;
    margin-left: 0;
    font-size: var(--pf-fs-fine);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--pf-ink-muted-strong);
}

@media (max-width: 900px) {
    .pf-cta__box {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--pf-space-28);
        padding: var(--pf-space-28) var(--pf-space-20);
        border-radius: var(--pf-r);
    }

    /* Фото под текстом на телефоне не выводится (ТЗ §06). */
    .pf-cta__photo { display: none; }

    .pf-cta__form {
        padding: var(--pf-space-20) var(--pf-space-16);
    }

    /* «Прислать план и цены на почту» при 15 px Medium — 237 px; в кнопке 278
       с боковыми полями по 24 остаётся 230, с 16 — 246 (замер uxui, §2.9). */
    .pf-form .pf-btn--block {
        padding-left: var(--pf-space-16);
        padding-right: var(--pf-space-16);
    }
}

/* ----------------------------------------------------------------------
   Листинг врачей: горизонтальная карточка, вся карточка — ссылка
   ---------------------------------------------------------------------- */

.pf-doctors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pf-grid-gap);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-doctors__item {
    min-width: 0;
}

.pf-doctor-card,
.pf-doctor-card:visited {
    display: flex;
    align-items: flex-start;
    gap: var(--pf-space-24);
    box-sizing: border-box;
    height: 100%;
    padding: var(--pf-card-pad);
    background: var(--pf-card);
    border-radius: var(--pf-r);
    color: var(--pf-ink);
    text-decoration: none;
}

.pf-doctor-card__pic {
    flex: 0 0 140px;
    width: 140px;
}

.pf-doctor-card__pic img {
    display: block;
    width: 140px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--pf-r-sm);
    background: var(--pf-photo-bg);
}

.pf-doctor-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--pf-card-gap);
    min-width: 0;
}

.pf-doctor-card__name {
    margin: 0;
    font-size: var(--pf-fs-card-title);
    font-weight: 700;
    line-height: 1.28;
    color: var(--pf-ink);
    transition: color var(--pf-duration) ease-out;
}

.pf-doctor-card__position,
.pf-doctor-card__text,
.pf-doctor-card__more {
    font-size: var(--pf-fs-body);
    line-height: 1.52;
    color: var(--pf-ink-soft);
}

@media (hover: hover) and (pointer: fine) {
    a.pf-doctor-card:hover { text-decoration: none; }
    a.pf-doctor-card:hover .pf-doctor-card__name { color: var(--pf-accent); }
}

@media (max-width: 900px) {
    .pf-doctors { grid-template-columns: minmax(0, 1fr); }

    .pf-doctor-card,
    .pf-doctor-card:visited {
        gap: var(--pf-space-16);
    }

    .pf-doctor-card__pic { flex-basis: 116px; width: 116px; }
    .pf-doctor-card__pic img { width: 116px; height: 150px; }
}

/* ----------------------------------------------------------------------
   Блог: карточка статьи, пагинация
   ---------------------------------------------------------------------- */

.pf-post-card__label {
    margin: 0;
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    /* Мелкий серый на белой карточке: #868178 даёт 3,87:1 — ниже 4,5:1
       (сверка uxui 20.09, §10). Затемнённый токен — 6,75:1. */
    color: var(--pf-ink-muted-strong);
}

.pf-post-card__title a,
.pf-post-card__title a:visited {
    color: inherit;
    text-decoration: none;
    transition: color var(--pf-duration) ease-out;
}

.pf-post-card__meta {
    margin: auto 0 0;
    padding-top: var(--pf-space-4);
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    /* Мелкий серый на белой карточке: #868178 даёт 3,87:1 — ниже 4,5:1
       (сверка uxui 20.09, §10). Затемнённый токен — 6,75:1. */
    color: var(--pf-ink-muted-strong);
}

.pf-post-card__meta a,
.pf-post-card__meta a:visited {
    padding: 15px 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-pagination {
    margin-top: var(--pf-section-inner);
}

.pf-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-pagination li {
    margin: 0;
}

.pf-pagination a.page-numbers,
.pf-pagination a.page-numbers:visited,
.pf-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--pf-space-16);
    background: var(--pf-card);
    border-radius: var(--pf-r-pill);
    font-size: var(--pf-fs-body);
    font-weight: 500;
    color: var(--pf-ink);
    text-decoration: none;
    transition: background-color var(--pf-duration) ease-out,
                color var(--pf-duration) ease-out;
}

.pf-pagination span.page-numbers.current {
    background: var(--pf-accent);
    color: var(--pf-on-accent);
}

@media (hover: hover) and (pointer: fine) {
    .pf-post-card__title a:hover { color: var(--pf-accent); text-decoration: none; }
    .pf-pagination a.page-numbers:hover { background: var(--pf-accent-soft); color: var(--pf-accent); text-decoration: none; }
}

@media (max-width: 900px) {
    /* Заголовок карточки статьи — ссылка 21 px по высоте (повторная сверка
       uxui 20.09). Блок во всю ширину карточки с полем 12 и отрицательным
       margin: цель 45,8, высота карточки прежняя. На всю карточку ссылку
       не растянуть — в ней их две (заголовок и автор). */
    .pf-post-card__title a,
    .pf-post-card__title a:visited {
        display: block;
        padding: var(--pf-space-12) 0;
        margin: calc(-1 * var(--pf-space-12)) 0;
    }
}

/* ----------------------------------------------------------------------
   Статья: содержание, проза, памятка, автор
   ---------------------------------------------------------------------- */

.pf-article {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-56);
}

.pf-toc .pf-suptitle {
    margin-bottom: var(--pf-space-20);
}

.pf-prose {
    max-width: 880px;
    font-size: var(--pf-fs-lead);
    line-height: 1.58;
    color: var(--pf-ink-soft);
}

.pf-prose h2 {
    margin: 0 0 var(--pf-space-20);
    font-size: var(--pf-fs-h2-article);
    font-weight: 700;
    line-height: 1.22;
    color: var(--pf-ink);
    scroll-margin-top: calc(var(--pf-nav-h) + var(--pf-space-16));
}

.pf-prose h2:not(:first-child) {
    margin-top: var(--pf-space-56);
}

.pf-prose h3 {
    margin: var(--pf-space-32) 0 var(--pf-space-12);
    font-size: var(--pf-fs-card-title);
    font-weight: 700;
    line-height: 1.28;
    color: var(--pf-ink);
}

.pf-prose p,
.pf-prose ul,
.pf-prose ol,
.pf-prose blockquote,
.pf-prose figure {
    margin: 0 0 var(--pf-space-16);
}

/* Кегль, интерлиньяж и цвет прозы и врезки заданы на контейнере, а тема
   задаёт их по тегу (`p` в style.css:121 — 15/125 % #868178, в мобильном
   блоке :2737 — 16). Селектор по тегу выигрывал у контейнера, и абзацы шли
   мельче и светлее заголовков соседних блоков: на фоне страницы 3,10:1
   (сверка uxui 20.09, §2.7). Возвращаем наследование. */
.pf-prose p,
.pf-text-box p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.pf-prose ul,
.pf-prose ol {
    padding-left: 1.4em;
}

.pf-prose li + li {
    margin-top: var(--pf-space-8);
}

.pf-prose a,
.pf-prose a:visited {
    color: var(--pf-link-on-bg);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-prose strong {
    font-weight: 700;
    color: var(--pf-ink);
}

.pf-prose img {
    display: block;
    height: auto;
    border-radius: var(--pf-r);
}

.pf-prose blockquote {
    padding: var(--pf-space-20) var(--pf-space-28);
    background: var(--pf-card);
    border-radius: var(--pf-r);
}

/* Памятка, вставленная шорткодом внутрь текста: на всю ширину контейнера. */
.pf-prose .pf-section {
    max-width: none;
    margin: var(--pf-space-56) 0;
}

.pf-author {
    display: flex;
    align-items: center;
    gap: var(--pf-space-24);
    box-sizing: border-box;
    padding: var(--pf-card-pad);
    background: var(--pf-card);
    border-radius: var(--pf-r);
}

.pf-author__pic {
    flex: 0 0 96px;
    width: 96px;
}

.pf-author__pic img {
    display: block;
    width: 96px;
    height: 124px;
    object-fit: cover;
    border-radius: var(--pf-r-sm);
    background: var(--pf-photo-bg);
}

.pf-author__body {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-4);
    min-width: 0;
}

.pf-author__label,
.pf-author__reviewed {
    margin: 0;
    font-size: var(--pf-fs-caption);
    line-height: 1.4;
    /* Мелкий серый на белой карточке: #868178 даёт 3,87:1 — ниже 4,5:1
       (сверка uxui 20.09, §10). Затемнённый токен — 6,75:1. */
    color: var(--pf-ink-muted-strong);
}

.pf-author__name {
    margin: 0;
    font-size: var(--pf-fs-card-title);
    font-weight: 700;
    line-height: 1.28;
    color: var(--pf-ink);
}

.pf-author__name a,
.pf-author__name a:visited,
.pf-author__reviewed a,
.pf-author__reviewed a:visited {
    color: inherit;
    text-decoration: none;
    transition: color var(--pf-duration) ease-out;
}

.pf-author__position {
    margin: 0;
    font-size: var(--pf-fs-body);
    line-height: 1.52;
    color: var(--pf-ink-soft);
}

@media (hover: hover) and (pointer: fine) {
    .pf-author__name a:hover,
    .pf-author__reviewed a:hover { color: var(--pf-accent); text-decoration: none; }
}

@media (max-width: 900px) {
    .pf-article { gap: var(--pf-space-40); }
    .pf-prose h2:not(:first-child) { margin-top: var(--pf-space-40); }
    .pf-prose .pf-section { margin: var(--pf-space-40) 0; }
    .pf-author { align-items: flex-start; gap: var(--pf-space-16); }

    /* Тач-цели, которых не было в списке §11: ссылка в прозе (телефон)
       19 px, имя врача в блоке автора 42,8 (повторная сверка uxui 20.09).
       У строчной ссылки вертикальный padding не входит в высоту строки —
       высота абзаца и страницы не меняются. */
    .pf-prose a { padding: 13px 0; }
    .pf-author__name a { padding: 2px 0; }
    /* Ссылка на прайс в лиде «Услуг врача» — 19 px строкой (T-0028). */
    .pf-section__lead a { padding: 13px 0; }
}

/* ----------------------------------------------------------------------
   Подвал переехал: с T-0032 колонки печатаются на всех страницах сайта,
   поэтому их стили (.pf-footer*) живут в style.css — seo-pages.css на
   шести старых страницах не подключается.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   «Прямая речь»: рассказ врача о себе (страницы врачей, секция #pf-about).

   Зачем переделан: на 1440 строка рассказа была 1200 px — 118 знаков при норме
   сплошного чтения 65–75 (замер 20.09 по строчным боксам). Первое средство
   против «простыни» — ширина колонки, графика вторым слоем.
   Спецификация — _dev/design-system/pier-foshar/pages/blok-svoimi-slovami.md
   ---------------------------------------------------------------------- */

.pf-speech {
    box-sizing: border-box;          /* глобального box-sizing в теме нет */
    display: grid;
    grid-template-columns: var(--pf-speech-rail) minmax(0, var(--pf-speech-measure));
    gap: var(--pf-speech-gap);
    align-items: start;
    max-width: var(--pf-speech-card);
    margin: 0;                        /* figure приходит с полями браузера */
    padding: var(--pf-space-40);
    background: var(--pf-card);
    border-radius: var(--pf-r-lg);
}

.pf-speech__by {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pf-space-12);
    min-width: 0;
}

/* Селектор с .pf-seo обязателен: .pf-seo img { height: auto } (0,1,1) иначе
   перебивает высоту портрета и рамка схлопывается по пропорции оригинала.

   flex: 0 0 auto — портрет стоит в flex-колонке подписи, а на ≤ 1119 подпись
   становится строкой. Без запрета на сжатие рамка на 390 съезжала с 96 до
   63–86 px и у каждого врача по-своему: ширина зависела от длины должности
   рядом (замер 20.09). */
.pf-seo .pf-speech__photo {
    display: block;
    flex: 0 0 auto;
    width: var(--pf-speech-photo-w);
    height: var(--pf-speech-photo-h);
    object-fit: cover;
    object-position: 50% 12%;
    border-radius: var(--pf-r-sm);
    background: var(--pf-photo-bg);
}

.pf-speech__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pf-space-8);
    min-width: 0;
}

/* Росчерк рамкой, а не фоном: в режиме высокой контрастности Windows фон
   вырезается, рамка остаётся. */
.pf-speech__rule {
    display: block;
    width: 40px;
    height: 0;
    border-top: 2px solid var(--pf-accent);
}

.pf-speech__name {
    display: block;
    font-size: var(--pf-fs-card-title);
    font-weight: 700;
    line-height: 1.25;
    color: var(--pf-ink);
}

.pf-speech__role {
    display: block;
    font-size: var(--pf-fs-small);
    line-height: 1.4;
    color: var(--pf-ink-muted-strong);   /* 6,75:1; --pf-ink-muted дал бы 3,87:1 */
}

/* Короткий рассказ центрируется по высоте подписи, длинный сам задаёт высоту
   ряда — один селектор на оба крайних случая. */
.pf-speech__quote {
    position: relative;
    min-width: 0;
    max-width: var(--pf-speech-measure);
    align-self: center;
}

/* Знак речи висит в поле слева и не сдвигает первую строку. */
.pf-seo .pf-speech__mark {
    position: absolute;
    top: 4px;
    left: calc(-1 * (var(--pf-speech-mark) + var(--pf-space-16)));
    width: var(--pf-speech-mark);
    height: var(--pf-speech-mark);
    color: var(--pf-accent);
}

.pf-speech__quote p,
.pf-speech__quote ul,
.pf-speech__quote ol {
    margin: 0 0 var(--pf-space-20);
    font-size: var(--pf-fs-lead);
    line-height: 1.62;
    color: var(--pf-ink-soft);
    text-wrap: pretty;
}

.pf-speech__quote ul,
.pf-speech__quote ol { padding-left: 1.4em; }

.pf-speech__quote > :last-child { margin-bottom: 0; }

/* Точка входа в чтение. Когда абзац один (Мусаева, Мытарева), он же и первый —
   короткий рассказ целиком набирается крупным, а не выглядит обрубком. */
.pf-speech__quote p:first-of-type {
    font-size: var(--pf-fs-card-title);
    line-height: 1.5;
    color: var(--pf-ink);
}

.pf-speech__quote a,
.pf-speech__quote a:visited {
    color: var(--pf-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Движение: карточка всплывает, следом рисуется знак речи ---- */
/* Базовое состояние — «видно». Начальное состояние ставит только живой JS
   (класс is-armed), иначе рассказ врача исчез бы при любой ошибке скрипта. */

.pf-speech.is-armed {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 420ms var(--pf-ease), transform 420ms var(--pf-ease);
}

.pf-speech.is-armed.is-in {
    opacity: 1;
    transform: none;
}

.pf-speech.is-armed .pf-speech__mark path {
    stroke-dasharray: 1;              /* работает благодаря pathLength="1" */
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 380ms var(--pf-ease) 140ms;
}

.pf-speech.is-armed .pf-speech__mark path + path {
    transition-delay: 210ms;
}

.pf-speech.is-armed.is-in .pf-speech__mark path {
    stroke-dashoffset: 0;
}

@media (hover: hover) and (pointer: fine) {
    .pf-speech__quote a:hover { color: var(--pf-accent-dark); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-speech.is-armed,
    .pf-speech.is-armed.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pf-speech.is-armed .pf-speech__mark path,
    .pf-speech.is-armed.is-in .pf-speech__mark path {
        stroke-dashoffset: 0;
        transition: none;
    }
}

/* ---- 901–1119: карточка не помещается целиком, подпись уходит в строку ---- */
/* Двухколонник здесь съел бы меру: при окне 901 колонка речи была бы 457 px —
   48 знаков. Мера 676 остаётся, карточка сжимается до 676 + 2 × 40. */
@media (max-width: 1119px) {
    .pf-speech {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--pf-space-32);
        max-width: calc(var(--pf-speech-measure) + 2 * var(--pf-space-40));
    }

    /* Рамка портрета меняется переопределением компонентного токена, а не
       второй парой правил width/height: размер портрета остаётся в одном
       месте (трёхслойная схема токенов). */
    .pf-speech {
        --pf-speech-photo-w: 96px;
        --pf-speech-photo-h: 124px;
    }

    .pf-speech__by {
        flex-direction: row;
        align-items: center;
        gap: var(--pf-space-20);
    }

    /* display: block — иначе .pf-icon { display: inline-block } оставляет под
       знаком пустой хвост строки (базовая линия) в потоковой раскладке. */
    .pf-seo .pf-speech__mark {
        position: static;
        display: block;
        margin-bottom: var(--pf-space-12);
    }
}

@media (max-width: 900px) {
    .pf-speech {
        --pf-speech-mark: 32px;
        padding: var(--pf-space-20);
        border-radius: var(--pf-r);
        gap: var(--pf-space-20);
    }

    .pf-speech__by { gap: var(--pf-space-16); }

    .pf-seo .pf-speech__mark { margin-bottom: var(--pf-space-8); }

    .pf-speech__quote p {
        margin-bottom: var(--pf-space-16);
        line-height: 1.66;
    }

    /* Тач-цель для возможной ссылки внутри рассказа — как у .pf-prose a.
       Вертикальный padding у строчной ссылки не входит в высоту строки. */
    .pf-speech__quote a { padding: 13px 0; }
}