/*
Theme Name: Bezviz
Theme URI: https://bezviz.biz.ua/
Author: UPMOTION
Author URI: https://bezviz.biz.ua/
Description: Тема для bezviz.biz.ua — довідника режимів в'їзду для громадян України. Інтерактивна карта світу на головній, тип даних «Країна» з таксономіями «Режим в'їзду» та «Регіон», картки фактів, таблиці, FAQ-розмітка, SEO-фолбеки та llms.txt. Пласка редакційна система «папір · чорнило · синій», шрифти e-Ukraine.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bezviz
Domain Path: /languages
Tags: blog, travel, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, full-width-template
*/

/* ============================================================================
   Bezviz — главный стиль темы

   Структура файла:
     1. Дизайн-токены (:root)         — единый источник всех цветов/типа/отступов
     2. Сброс и база
     3. Глобальная типографика и утилиты
     4. Типографика контента (.entry-content / вывод Gutenberg)

   Стили компонентов (шапка, карточки, подвал, статья, обложки) лежат
   отдельно в assets/css/components.css и подключаются после этого файла.

   Цвета извлечены 1:1 из утверждённого макета. Не правьте hex'ы по месту —
   меняйте токен в :root, это единственная точка истины.
   ========================================================================= */


/* ============================================================================
   1. ДИЗАЙН-ТОКЕНЫ
   ========================================================================= */

:root {

  /* --- Поверхности и фоны --- */
  --sm-bg:            #FFFFFF;  /* основной фон страницы (тёплый off-white) */
  --sm-bg-footer:     #0A0A0A;  /* фон подвала */
  --sm-surface:       #FFFFFF;  /* карточки, фигуры */
  --sm-surface-soft:  #F3F3F3;  /* плейсхолдеры обложек */
  --sm-surface-tint:  #F3F3F3;  /* «мягкие» кнопки, тонированные блоки */
  --sm-surface-tint2: #FAFAFA;  /* блок комментариев, вторичные плашки */
  --sm-bg-blur:       rgba(255, 255, 255, .88); /* фон sticky-шапки (blur) */
  --sm-panel-blur:    rgba(255, 255, 255, .96); /* фон выезжающих панелей */
  --sm-chip:          rgba(255, 255, 255, .9); /* плашки-метки на обложках */

  /* --- Текст (от тёмного к светлому) --- */
  --sm-ink:        #0A0A0A;  /* заголовки, основной тёмный */
  --sm-ink-lead:   #0A0A0A;  /* лид-абзац */
  --sm-ink-body:   #3A3A3A;  /* тело статьи */
  --sm-ink-soft:   #3A3A3A;  /* ссылки в подвале */
  --sm-muted:      #767676;  /* вторичный текст, подписи */
  --sm-muted-2:    #5A5A5A;  /* иконочные кнопки */
  --sm-meta:       #767676;  /* мета: даты, счётчики */
  --sm-meta-2:     #8A8A8A;  /* метки на плейсхолдерах */
  --sm-faint:      #9A9A9A;  /* самый светлый служебный текст */

  /* --- Линии и границы --- */
  --sm-line:    #E8E8E8;  /* основные разделители/рамки */
  --sm-line-2:  #D9D9D9;  /* контрастнее (низ подвала, рамки кнопок) */
  --sm-line-3:  #F0F0F0;  /* рамки плейсхолдеров */
  --sm-line-4:  #C9C9C9;  /* hover-рамка карточки */
  --sm-hatch:   #F3F3F3;  /* штриховка (в ките v0.14 не используется) */
  /* Фирменные градиенты Дії (обложки, плитки категорий) */
  --sm-gr-1: linear-gradient(120deg, #B7E5F2, #CBBCF2);
  --sm-gr-2: linear-gradient(120deg, #FFE2C5, #FFC4D6);
  --sm-gr-3: linear-gradient(120deg, #C6EFD7, #B0DDF4);
  --sm-gr-4: linear-gradient(120deg, #E0D4FF, #FFD3E6);
  /* Функциональные цвета кита (приглушённые, строго по назначению) */
  --sm-up:     #5B8FD6;  /* информация */
  --sm-up-bg:  #E3ECF8;
  --sm-in:     #3BA36A;  /* успех/совет */
  --sm-in-bg:  #DCEFE1;
  --sm-org:    #9B6CC2;  /* заметка */
  --sm-org-bg: #EEE3F6;
  --sm-neg:    #C9502F;  /* предупреждение */
  --sm-neg-bg: #F7DED4;
  --sm-hl:     #CBBCF2;  /* лавандовый маркер выделения (кит .hl) */

  /* --- Акцент: Electric Blue #1A40FF ---
     Единый акцент для графики и текста. Контраст на белом — 6.5:1,
     на голубых блоках #F0F5FF — 6.0:1: WCAG AA проходит без компромиссов. */
  --sm-accent:       #0057B8;  /* графика: маркеры, прогресс, заливки (синій прапора) */
  --sm-accent-text:  #0057B8;  /* текст: ссылки, метки, надзаголовки (7.1:1 на белом) */
  --sm-accent-ink:   #00408A;  /* hover */
  --sm-accent-deep:  #002F66;  /* тёмная подложка */
  --sm-accent-tint:  #E8F0FA;  /* светлая подложка */
  --sm-on-accent:    #FFFFFF;  /* текст на акценте */
  --sm-sun:          #FFD500;  /* жёлтый прапора: точка бренда, подсветки на тёмном */

  /* --- Режимы в'їзду (карта, бейджи, легенда) — единый источник цветов --- */
  --bz-free:    #1E9E5A;  /* без візи */
  --bz-eta:     #86C66B;  /* електронний дозвіл (ETA) */
  --bz-voa:     #F2C230;  /* віза по прибуттю */
  --bz-evisa:   #EE8A2D;  /* електронна віза */
  --bz-visa:    #D8483B;  /* потрібна віза */
  --bz-closed:  #2E2E2E;  /* в'їзд обмежено / небезпечно */
  --bz-home:    #0057B8;  /* Україна */
  --bz-none:    #E6E6E6;  /* немає даних */
  --bz-sea:     #F4F7FB;  /* подложка карты */
  --sm-selection:    rgba(255, 213, 0, .45); /* подсветка выделения текста — жёлтый */
  --sm-focus:        #0057B8;  /* фокус (клавиатура, поля форм) */

  /* --- Кнопки (тёмная основная) --- */
  --sm-btn:        #0057B8;
  --sm-btn-ink:    #FFFFFF;
  --sm-cover-dark: #0A0A0A;  /* фон тёмной обложки (вариант B) */

  /* --- Типографика --- */
  --sm-font:      'e-Ukraine', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Заголовки — e-Ukraine Head (акцидентная гарнитура Дії). */
  --sm-font-head: 'e-Ukraine Head', 'e-Ukraine', system-ui, sans-serif;
  --sm-font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;

  /* Веса. e-Ukraine 300/400/500/700, e-Ukraine Head 400/700:
     300 текст · 400 лид и кнопки · 500 метки и карточки · 700 заголовки. */
  --sm-w-light:    200;  /* UltraLight — про запас */
  --sm-w-book:     300;  /* Light: основной текст, описания, мета */
  --sm-w-normal:   400;  /* Regular: лид-абзац, кнопки, поля */
  --sm-w-medium:   500;  /* Medium: пункты меню, названия категорий */
  --sm-w-semi:     500;  /* Medium: надзаголовки, метки, заголовки карточек */
  --sm-w-semi2:    500;  /* Medium: заголовки секций */
  --sm-w-bold:     700;  /* Bold: H1, заголовки статей, strong */
  --sm-w-bolder:   700;  /* Bold: логотип */

  /* Шкала размеров (clamp — как в макете) */
  --sm-fs-display: clamp(34px, 6.4vw, 52px);   /* H1 на главной и в категории */
  --sm-fs-h1:      clamp(2rem, 4vw, 3rem); /* H1 статьи */
  --sm-fs-h2:      clamp(1.5rem, 2.6vw, 2rem);   /* заголовок секции */
  --sm-fs-h2-in:   clamp(21px, 2.8vw, 25px); /* H2 внутри статьи */
  --sm-fs-h3:      clamp(19px, 2.3vw, 22px); /* H3 / заголовок карточки */
  --sm-fs-lead:    clamp(19px, 2.7vw, 23px); /* лид-абзац статьи */
  --sm-fs-quote:   clamp(23px, 3.6vw, 29px); /* выносная цитата */
  --sm-fs-body:    18px;                      /* тело статьи */
  --sm-fs-base:    17px;                      /* базовый размер */
  --sm-fs-card:    15px;                      /* текст карточек */
  --sm-fs-meta:    14px;                      /* мета */
  --sm-fs-meta-sm: 13px;                      /* мелкая мета */
  --sm-fs-eyebrow: 12px;                      /* надзаголовки/метки */

  /* Высота строки */
  --sm-lh-tight:   1.08;
  --sm-lh-head:    1.12;
  --sm-lh-snug:    1.25;
  --sm-lh-body:    1.7;
  --sm-lh-relaxed: 1.6;

  /* Межбуквенный интервал */
  --sm-ls-tight:   -0.02em;
  --sm-ls-head:    -0.01em;
  --sm-ls-snug:    -.01em;
  --sm-ls-eyebrow: .14em;
  --sm-ls-wide:    .16em;

  /* --- Геометрия --- */
  --sm-container:        1240px;  /* единый контейнер: шапка, шелл, футер (кит) */
  --sm-container-narrow: 720px;   /* колонка статьи */
  --sm-gutter:           clamp(20px, 4.5vw, 56px);    /* боковые поля (кит) */

  --sm-radius-xs: 0px;
  --sm-radius-sm: 8px;
  --sm-radius:    11px;  /* базовый радиус (логотип, иконо-кнопки) */
  --sm-radius-md: 0px;  /* кнопки */
  --sm-radius-lg: 0px;
  --sm-radius-xl: 0px;  /* карточки */
  --sm-radius-2xl: 20px; /* крупные блоки/фото героя */
  --sm-radius-pill: 0px;

  /* --- Тени --- */
  --sm-shadow-1:        0 1px 2px rgba(0, 0, 0, .03);  /* покой карточки */
  --sm-shadow-btn:      0 1px 2px rgba(0, 0, 0, .2);      /* тёмная кнопка */
  --sm-shadow-btn-h:    0 10px 22px rgba(0, 0, 0, .18);/* кнопка hover */
  --sm-shadow-card-h:   0 16px 34px rgba(0, 0, 0, .1); /* карточка hover */
  --sm-shadow-soft-h:   0 14px 30px rgba(0, 0, 0, .1); /* мягкий hover */
  --sm-logo-shadow:     0 1px 2px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);

  /* --- Движение --- */
  --sm-ease:  cubic-bezier(.2, .7, .2, 1);
  --sm-dur:   .38s;
  --sm-dur-2: .25s;

  /* --- Слои (z-index) --- */
  --sm-z-progress: 60;
  --sm-z-header:   50;
}


/* ============================================================================
   2. СБРОС И БАЗА
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html,
body { margin: 0; padding: 0; }

body {
  background: var(--sm-bg);
  color: var(--sm-ink);
  font-family: var(--sm-font);
  font-size: var(--sm-fs-base);
  font-weight: var(--sm-w-book);
  line-height: var(--sm-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--sm-selection); }

a { color: inherit; }

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

img { display: block; }
[hidden] { display: none !important; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--sm-font-head);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  color: inherit; /* тёмные секции (letter, футер, warning) красят родителя */
  letter-spacing: var(--sm-ls-head);
}

p { margin: 0; }

ul, ol { margin: 0; }

/* Доступный фокус с клавиатуры (мышь не «зажигает» обводку) */
:focus-visible {
  outline: 2px solid var(--sm-focus);
  outline-offset: 2px;
  border-radius: var(--sm-radius-xs);
}

/* Ссылка «к содержимому» для скринридеров */
.sm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--sm-ink);
  color: var(--sm-btn-ink);
  padding: 12px 18px;
  border-radius: var(--sm-radius-md);
  font-size: var(--sm-fs-meta);
  text-decoration: none;
}
.sm-skip-link:focus {
  left: 16px;
  top: 16px;
}

/* Утилита: спрятать визуально, оставить для скринридеров */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}


/* ============================================================================
   3. ГЛОБАЛЬНАЯ ТИПОГРАФИКА И УТИЛИТЫ КОМПОНОВКИ
   ========================================================================= */

/* Контейнеры ширины */
.sm-container {
  max-width: var(--sm-container);
  margin-inline: auto;
  padding-inline: var(--sm-gutter);
}

/* Надзаголовок (eyebrow) — метка над H1/секцией */
.sm-eyebrow {
  display: inline-block;
  font-weight: var(--sm-w-semi);
  font-size: var(--sm-fs-eyebrow);
  letter-spacing: var(--sm-ls-wide);
  text-transform: uppercase;
  color: var(--sm-accent-text);
}

/* Заголовок секции (H2 на главной/в категории) */
.sm-section-title {
  font-weight: var(--sm-w-semi2);
  font-size: var(--sm-fs-h2);
  letter-spacing: var(--sm-ls-head);
  color: var(--sm-ink);
  text-wrap: balance;
}

/* Мета-текст (даты, счётчики) */
.sm-meta {
  font-weight: var(--sm-w-book);
  font-size: var(--sm-fs-meta);
  color: var(--sm-meta);
}

/* Тонкая штриховка для плейсхолдеров (обложки без фото) */
.sm-hatch {
  background-color: var(--sm-surface-soft);
  background-image: repeating-linear-gradient(135deg, var(--sm-hatch) 0 1px, transparent 1px 13px);
}

/* Уважение к prefers-reduced-motion: гасим переходы и анимации */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   4. ТИПОГРАФИКА КОНТЕНТА (.entry-content)
   Стилизует вывод редактора Gutenberg/the_content() под макет статьи:
   лид-абзац крупнее, аккуратные списки с квадратным акцентным маркером,
   выносные цитаты, фигуры с подписями, ссылки, код, таблицы.
   ========================================================================= */

.entry-content {
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-body);
  color: var(--sm-ink-body);
}

/* Вертикальный ритм по умолчанию */
.entry-content > * { margin-block: 0; }
.entry-content > * + * { margin-block-start: 20px; }

/* Абзацы */
.entry-content p {
  font-weight: var(--sm-w-book);
  line-height: var(--sm-lh-body);
  color: var(--sm-ink-body);
  text-wrap: pretty;
}

/* Первый абзац = лид (крупнее, темнее) */
.entry-content > p:first-of-type {
  font-weight: var(--sm-w-normal);
  font-size: var(--sm-fs-lead);
  line-height: var(--sm-lh-relaxed);
  letter-spacing: var(--sm-ls-snug);
  color: var(--sm-ink-lead);
}

/* Заголовки внутри статьи */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--sm-ink);
  text-wrap: balance;
}
.entry-content h2 {
  margin-block-start: 40px;
  font-weight: var(--sm-w-semi2);
  font-size: var(--sm-fs-h2-in);
  line-height: var(--sm-lh-snug);
}
.entry-content h3 {
  margin-block-start: 32px;
  font-weight: var(--sm-w-semi);
  font-size: var(--sm-fs-h3);
  line-height: var(--sm-lh-snug);
}
.entry-content h4 {
  margin-block-start: 26px;
  font-weight: var(--sm-w-semi);
  font-size: 17px;
}

/* Списки — собственный квадратный маркер в акцентном цвете */
.entry-content ul,
.entry-content ol {
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.entry-content li {
  position: relative;
  padding-inline-start: 22px;
  line-height: var(--sm-lh-relaxed);
  color: var(--sm-ink-body);
}
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--sm-accent);
}
.entry-content ol {
  counter-reset: sm-ol;
}
.entry-content ol > li {
  counter-increment: sm-ol;
}
.entry-content ol > li::before {
  content: counter(sm-ol);
  position: absolute;
  left: 0;
  top: 0;
  min-width: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--sm-w-semi);
  font-size: 14px;
  color: var(--sm-accent-text);
}
/* Вложенные списки */
.entry-content li > ul,
.entry-content li > ol { margin-block-start: 13px; }

/* Выносная цитата */
.entry-content blockquote {
  margin-block: 38px;
  padding: 4px 0 4px 26px;
  border-inline-start: 3px solid var(--sm-accent);
}
.entry-content blockquote p {
  font-weight: var(--sm-w-book);
  font-size: var(--sm-fs-quote);
  line-height: 1.45;
  letter-spacing: var(--sm-ls-head);
  color: var(--sm-ink);
  text-wrap: balance;
}
.entry-content blockquote cite,
.entry-content blockquote footer {
  display: block;
  margin-block-start: 16px;
  font-style: normal;
  font-weight: var(--sm-w-normal);
  font-size: var(--sm-fs-meta);
  color: var(--sm-meta);
}

/* Изображения и фигуры */
.entry-content img {
  border-radius: var(--sm-radius-xl);
  border: 1px solid var(--sm-line-3);
}
.entry-content figure {
  margin-block: 30px;
}
.entry-content figcaption {
  margin-block-start: 10px;
  font-weight: var(--sm-w-book);
  font-size: var(--sm-fs-meta);
  color: var(--sm-meta);
  text-align: center;
}

/* Ссылки в тексте */
.entry-content a {
  color: var(--sm-accent-text);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--sm-accent-text) 40%, transparent);
  transition: color var(--sm-dur-2), text-decoration-color var(--sm-dur-2);
}
.entry-content a:hover {
  color: var(--sm-accent-ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Выделение и акценты */
.entry-content strong { font-weight: var(--sm-w-bold); color: var(--sm-ink); }
.entry-content em { font-style: italic; }
.entry-content mark {
  background: var(--sm-accent-tint);
  color: var(--sm-ink);
  padding: 0 .2em;
  border-radius: var(--sm-radius-xs);
}

/* Код */
.entry-content code,
.entry-content kbd {
  font-family: var(--sm-font-mono);
  font-size: .9em;
  background: var(--sm-surface-tint);
  padding: .15em .4em;
  border-radius: var(--sm-radius-xs);
}
.entry-content pre {
  margin-block: 26px;
  padding: 18px 20px;
  background: var(--sm-ink);
  color: #EDEDEA;
  border-radius: var(--sm-radius-lg);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.entry-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Разделитель */
.entry-content hr {
  margin-block: 40px;
  border: 0;
  height: 1px;
  background: var(--sm-line);
}

/* Таблицы */
.entry-content table {
  width: 100%;
  margin-block: 28px;
  border-collapse: collapse;
  font-size: 15px;
}
.entry-content th,
.entry-content td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid var(--sm-line);
}
.entry-content th {
  font-weight: var(--sm-w-semi);
  color: var(--sm-ink);
}
.entry-content tbody tr:hover { background: var(--sm-surface-tint2); }

/* Поддержка выравнивания блоков Gutenberg внутри узкой колонки */
.entry-content .alignwide {
  margin-inline: calc(-1 * clamp(0px, 4vw, 80px));
  max-width: calc(100% + clamp(0px, 8vw, 160px));
}
.entry-content .alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}
.entry-content .aligncenter { margin-inline: auto; }
.entry-content figure.alignleft,
.entry-content .alignleft {
  float: left;
  margin-inline: 0 26px;
  margin-block: 8px 12px;
  max-width: 50%;
}
.entry-content figure.alignright,
.entry-content .alignright {
  float: right;
  margin-inline: 26px 0;
  margin-block: 8px 12px;
  max-width: 50%;
}


/* ============================================================================
   5. РЕДАКЦИОННЫЕ БЛОКИ СТАТЬИ
   Расширенный набор для контента: выносная цитата, цитата с фото, сноски,
   галерея, видео, врезка «Читайте также», блок «Коротко».
   Каждому блоку соответствует пример в статье-стайлгайде.
   ========================================================================= */

/* --- Выносная цитата (акцентная, по центру) ---
   Разметка: <blockquote class="sm-pullquote"><p>…</p><cite>…</cite></blockquote>
   Также применяется к core-блоку «Выделенная цитата». */
.entry-content .sm-pullquote,
.entry-content .wp-block-pullquote {
  margin-block: 46px;
  padding: 30px 12px;
  border-inline-start: 0;
  border-top: 3px solid var(--sm-accent);
  border-bottom: 1px solid var(--sm-line);
  text-align: center;
}
.entry-content .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.entry-content .sm-pullquote p,
.entry-content .wp-block-pullquote p {
  font-weight: var(--sm-w-book);
  font-size: clamp(22px, 3.6vw, 28px);
  line-height: 1.4;
  letter-spacing: var(--sm-ls-head);
  color: var(--sm-ink);
  text-wrap: balance;
}
.entry-content .sm-pullquote cite,
.entry-content .wp-block-pullquote cite {
  display: block;
  margin-block-start: 14px;
  font-style: normal;
  font-weight: var(--sm-w-normal);
  font-size: var(--sm-fs-meta);
  color: var(--sm-meta);
}

/* --- Цитата с фото (из исходного макета) ---
   Разметка:
   <figure class="sm-quote-photo">
     <img src="…" alt="Имя">
     <blockquote><p>…</p><cite>Имя, кто это</cite></blockquote>
   </figure> */
.entry-content .sm-quote-photo {
  margin-block: 42px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px;
  background: var(--sm-surface);
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius-xl);
  box-shadow: var(--sm-shadow-1);
}
.entry-content .sm-quote-photo img {
  width: 104px;
  height: 104px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--sm-line-2);
  margin: 0;
}
.entry-content .sm-quote-photo blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.entry-content .sm-quote-photo blockquote p {
  font-weight: var(--sm-w-book);
  font-size: clamp(17px, 2.6vw, 20px);
  line-height: 1.5;
  color: var(--sm-ink);
}
.entry-content .sm-quote-photo cite {
  display: block;
  margin-block-start: 10px;
  font-style: normal;
  font-size: var(--sm-fs-meta);
  color: var(--sm-meta);
}
@media (max-width: 560px) {
  .entry-content .sm-quote-photo {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Сноски ---
   В тексте: <sup class="sm-fn-ref" id="fnref-1"><a href="#fn-1">1</a></sup>
   В конце:  <ol class="sm-footnotes"><li id="fn-1">Текст…
             <a class="sm-fn-back" href="#fnref-1" aria-label="К тексту">↩</a></li></ol>
   Те же стили применяются к core-блоку «Сноски» (WP 6.3+). */
.entry-content sup.sm-fn-ref {
  font-size: .72em;
  line-height: 0;
  vertical-align: super;
}
.entry-content sup.sm-fn-ref a,
.entry-content sup a[href^="#fn"] {
  padding: 0 .15em;
  color: var(--sm-accent-text);
  text-decoration: none;
  font-weight: var(--sm-w-semi);
}
.entry-content .sm-footnotes,
.entry-content .wp-block-footnotes {
  margin-block-start: 52px;
  padding: 20px 0 0 0;
  border-top: 1px solid var(--sm-line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--sm-muted);
  gap: 9px;
}
.entry-content .sm-footnotes li,
.entry-content .wp-block-footnotes li {
  padding-inline-start: 24px;
  scroll-margin-top: 90px;
  transition: background var(--sm-dur-2);
}
.entry-content .sm-footnotes li::before,
.entry-content .wp-block-footnotes li::before {
  font-size: 12px;
}
/* Подсветка сноски при переходе по ссылке */
.entry-content .sm-footnotes li:target,
.entry-content .wp-block-footnotes li:target {
  background: var(--sm-accent-tint);
  border-radius: var(--sm-radius-xs);
}
.entry-content .sm-fn-back {
  margin-inline-start: 6px;
  color: var(--sm-accent-text);
  text-decoration: none;
}
/* Обратные якоря в тексте не прячутся под шапку */
.entry-content sup.sm-fn-ref { scroll-margin-top: 90px; }

/* --- Фотогалерея ---
   Своя сетка: <figure class="sm-gallery sm-gallery--3"> <img…>×N
               <figcaption>…</figcaption></figure>
   (--2 две колонки по умолчанию, --3 три). Core-блок «Галерея» тоже поддержан. */
.entry-content .sm-gallery {
  margin-block: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.entry-content .sm-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.entry-content .sm-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--sm-radius-lg);
  margin: 0;
}
.entry-content .sm-gallery figcaption { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .entry-content .sm-gallery--3 { grid-template-columns: repeat(2, 1fr); }
}
/* Полировка core-галереи */
.entry-content .wp-block-gallery { margin-block: 32px; }
.entry-content .wp-block-gallery img { border-radius: var(--sm-radius-lg); }

/* --- Видео ---
   Проще всего: URL YouTube отдельной строкой — WordPress сам превратит его
   во встраивание (autoembed). Стили ниже делают любой вариант адаптивным. */
.entry-content .wp-block-video video {
  width: 100%;
  border-radius: var(--sm-radius-xl);
  border: 1px solid var(--sm-line-3);
}
.entry-content .wp-block-embed { margin-block: 32px; }
.entry-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%;
}
.entry-content .wp-block-embed.wp-has-aspect-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.entry-content iframe {
  max-width: 100%;
  border: 0;
  border-radius: var(--sm-radius-xl);
}
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"],
.entry-content iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* --- Врезка «Читайте также» (внутрь текста) ---
   Разметка:
   <div class="sm-inline-related"><a href="URL">
     <span class="sm-inline-related__label">Читайте также</span>
     <span class="sm-inline-related__title">Заголовок статьи</span>
   </a></div> */
.entry-content .sm-inline-related { margin-block: 36px; }
.entry-content .sm-inline-related a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 54px 20px 24px;
  position: relative;
  background: var(--sm-accent-tint);
  border: 1px solid color-mix(in srgb, var(--sm-accent) 22%, transparent);
  border-radius: var(--sm-radius-lg);
  text-decoration: none;
  transition: transform var(--sm-dur-2) var(--sm-ease), box-shadow var(--sm-dur-2), border-color var(--sm-dur-2);
}
.entry-content .sm-inline-related a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sm-shadow-soft-h);
  border-color: color-mix(in srgb, var(--sm-accent) 45%, transparent);
  text-decoration: none;
}
.entry-content .sm-inline-related a::after {
  content: "→";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--sm-accent-text);
  transition: right var(--sm-dur-2);
}
.entry-content .sm-inline-related a:hover::after { right: 17px; }
.entry-content .sm-inline-related__label {
  font-weight: var(--sm-w-semi);
  font-size: var(--sm-fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sm-accent-text);
}
.entry-content .sm-inline-related__title {
  font-weight: var(--sm-w-medium);
  font-size: 17px;
  line-height: 1.35;
  color: var(--sm-ink);
  text-wrap: balance;
}

/* --- Блок «Коротко» (ключевые тезисы после лида) ---
   Разметка: <div class="sm-keypoints">
     <span class="sm-keypoints__title">Коротко</span>
     <ul><li>…</li></ul></div>
   Любят и читатели, и featured snippets, и LLM-выдача. */
.entry-content .sm-keypoints {
  margin-block: 34px;
  padding: 24px 26px;
  background: var(--sm-surface-tint2);
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius-lg);
}
.entry-content .sm-keypoints__title {
  display: block;
  margin-bottom: 14px;
  font-weight: var(--sm-w-semi);
  font-size: var(--sm-fs-eyebrow);
  letter-spacing: var(--sm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sm-accent-text);
}
.entry-content .sm-keypoints ul { gap: 10px; }
.entry-content .sm-keypoints li { font-size: 16px; }