/* ==========================================================================
   iResonance – блог: лента (/blog/), архивы рубрик, страница статьи.
   Подключается только в блоговых контекстах (CWV). Токены – из style.css :root.
   Канон: теплый академический минимализм. Заголовки Playfair, акценты – бронза/золото.
   ========================================================================== */

/* ---------- Общий контейнер ленты ---------- */
/* верхний отступ умеренный – Astra уже дает #primary ~68px сверху, не дублируем */
.ires-blog{ max-width:1100px; margin:0 auto; padding:clamp(16px,2.5vw,36px) 20px clamp(48px,7vw,96px); }
.ires-blog__intro{ max-width:760px; margin:0 0 clamp(28px,4vw,44px); }
.ires-blog__eyebrow{
  font-family:var(--ff-body); font-weight:600; font-size:12px; letter-spacing:.16em;
  color:var(--bronze); margin:0 0 12px;
}
/* H1 ленты/рубрики – меньше hero лендинга (clamp до 4.25rem), своя иерархия */
.ires-blog__h1{ margin:0 0 .35em; font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.2; }
.ires-blog__lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--graphite); line-height:1.75; max-width:64ch; margin:0; }

/* ---------- Рубрики-чипы ---------- */
.ires-blog__cats{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(28px,4vw,40px); }
.ires-chip{
  display:inline-block; font-family:var(--ff-body); font-weight:500; font-size:14px;
  padding:8px 16px; border-radius:999px; text-decoration:none;
  color:var(--bronze); border:1px solid rgba(139,105,20,.28); background:transparent;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.ires-chip:hover{ border-color:var(--gold); color:var(--gold); }
.ires-chip.is-active{ background:var(--navy); color:var(--ivory); border-color:var(--navy); }

/* ---------- Сетка карточек ---------- */
.ires-blog__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,30px);
}

/* ---------- Карточка статьи ---------- */
/* width:100% !important – перебиваем инлайн-правило Astra .ast-blog-layout-4-grid
   .ast-article-post{width:33.33%} (его специфичность 0,2,0 > нашей 0,1,0), иначе
   карточка ужимается до 33% грид-ячейки. Floated-сетку Astra тоже гасим. */
.ires-card{
  display:flex; flex-direction:column; width:100%!important; min-width:0; max-width:100%; float:none;
  background:#F2ECDE; /* крем под цвет картинок – обложки-карточки тоже без светлых уголков */
  border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,30px); margin:0;
  box-shadow:0 18px 42px -28px rgba(22,33,51,.5); border:1px solid rgba(139,105,20,.08);
  transition:transform .22s ease, box-shadow .22s ease;
}
.ires-card:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -28px rgba(22,33,51,.6); }
/* Обложка карточки (featured image): картинка сверху, текст под ней (паттерн A – без текста на фото).
   Вписана по ширине текста (НЕ full-bleed) – ровняется со столбцами текста, скругление+рамка кодом. */
.ires-card__cover{
  display:block; aspect-ratio:16/9; overflow:hidden; background:#F2ECDE; min-width:0;
  margin:0 0 clamp(16px,2vw,20px);
  border-radius:var(--radius-md); border:1px solid rgba(139,105,20,.12);
  /* GPU-слой на скруглении – убирает светлую кайму сглаживания, которая на маленьких
     превью заметнее (та же ширина каймы – большая доля картинки). Тот же прием ниже
     для картинок в теле статьи. */
  transform:translateZ(0);
}
.ires-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.ires-card:hover .ires-card__cover img{ transform:scale(1.045); }
@media (prefers-reduced-motion: reduce){
  .ires-card__cover img{ transition:none; }
  .ires-card:hover .ires-card__cover img{ transform:none; }
}
.ires-card__cat{
  align-self:flex-start; font-family:var(--ff-body); font-weight:600; font-size:11.5px;
  letter-spacing:.12em; color:var(--bronze); text-decoration:none; margin:0 0 14px;
}
.ires-card__cat:hover{ color:var(--gold); }
/* цветная точка перед ярлыком – наследует цвет рубрики (различимость) */
.ires-card__cat::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:8px; vertical-align:middle; }
/* акцент по рубрикам: navy / бронза-золото / терракота – различимо, но в теплой академичной гамме */
.ires-card.category-osnovy .ires-card__cat{ color:#1D3354; }
.ires-card.category-professiya .ires-card__cat{ color:#8B6914; }
.ires-card.category-metody .ires-card__cat{ color:#8F4A2E; }
.ires-card__title{ font-size:clamp(1.3rem,1.7vw,1.55rem); line-height:1.3; margin:0 0 12px; font-weight:500; }
.ires-card__title a{ color:var(--navy); text-decoration:none; }
.ires-card__title a:hover{ color:var(--gold); }
.ires-card__excerpt{ color:var(--graphite); line-height:1.65; font-size:.97rem; margin:0 0 18px; }
.ires-card__meta{
  display:flex; align-items:center; gap:8px; margin:auto 0 0;
  font-family:var(--ff-body); font-size:13px; color:var(--bronze);
}
.ires-card__dot{ color:var(--platinum); }
.ires-card__more{
  margin:16px 0 0; align-self:flex-start; font-family:var(--ff-body); font-weight:600;
  font-size:14px; color:var(--bronze); text-decoration:none; /* bronze: ~5:1 на белом (gold не проходит WCAG AA) */
}
.ires-card__more:hover{ color:var(--navy); }

/* ---------- Пагинация (блог не грузит pages.css) ---------- */
.ires-blog .pagination, .ires-pagination{ margin:clamp(36px,5vw,56px) 0 0; font-family:var(--ff-body); }
.ires-blog .nav-links{ display:flex; flex-wrap:wrap; gap:8px; }
.ires-blog .page-numbers{
  display:inline-block; padding:9px 15px; border-radius:var(--radius-sm);
  color:var(--bronze); text-decoration:none; border:1px solid rgba(139,105,20,.22);
}
.ires-blog .page-numbers.current{ background:var(--gold); color:var(--night); border-color:var(--gold); }
.ires-blog a.page-numbers:hover{ border-color:var(--gold); color:var(--gold); }

/* ==========================================================================
   СТРАНИЦА СТАТЬИ
   ========================================================================== */
/* верхний отступ срезан (Astra уже дает #primary ~68px); ширина чуть больше для воздуха */
.ires-article{ max-width:880px; margin:0 auto; padding:clamp(16px,2.5vw,36px) 20px clamp(48px,7vw,88px); }

/* Фон вокруг = бренд-ivory вместо серого Astra (color-5). Скоупится на блог – blog.css грузится только тут */
/* Двухтоновая теплая гамма блога: фон страницы чуть темнее карточки, чтобы карточка читалась. */
body.ast-separate-container{ background-color:#EBE3D2; }
/* Бокс статьи: фон = крем картинок (#F2ECDE), чтобы скругленные углы картинок НЕ давали светлых
   уголков (фон бокса = цвет картинки = просвет в углу невидим). Скругление + мягкая тень.
   Селектор ЦЕЛИКОМ с body.ast-separate-container – БАГ, найден 2026-07-25: без body-префикса
   специфичность (0,2,0,0) проигрывает родному правилу Astra .ast-separate-container
   .ast-article-single:not(.ast-related-post){background:#fff} со специфичностью (0,3,0,0) –
   в итоге на живой странице рендерился белый картон, а не задуманный крем. */
body.ast-separate-container .ires-article__post.ast-article-single{
  background:#F2ECDE;
  border-radius:var(--radius-lg);
  box-shadow:0 28px 64px -42px rgba(22,33,51,.42);
}

/* ==========================================================================
   ВАРИАНТЫ ФОНА (сравнение для Ивана, 2026-07-25 – удалить после решения).
   Переключаются через ?variant=b / ?variant=c на странице статьи (functions.php,
   body_class whitelist). Оба варианта также используют расширенную карточку
   (см. .ires-variant-b/.ires-variant-c .ires-article ниже) – грубая прикидка
   золотого сечения "видимое:невидимое" ~1.618:1 для типичного десктоп-окна:
   880px -> ~1000px. Точный vw-расчет усложнил бы сравнение, взят фикс-шаг.
   ========================================================================== */
.ires-variant-b .ires-article,
.ires-variant-c .ires-article{ max-width:1000px; }

/* B: страница и карточка становятся одним тоном (тот самый "поменять цвета местами" –
   фон страницы = светлый ivory шапки, карточка чуть темнее фона вместо чуть светлее). */
body.ires-variant-b.ast-separate-container{ background-color:#F7F3EC; }
body.ires-variant-b .ires-article__post.ast-article-single{ background:#EFE7D6; }

/* C: тот же исправленный крем-на-креме (variant A), но вместо плоской заливки –
   очень тонкая текстура (диагональная штриховка, поверхностный SVG-паттерн,
   без картинки-файла – не нужно генерировать/скачивать ассет). Низкая непрозрачность,
   чтобы не спорить с премиум-минимализмом бренда. */
body.ires-variant-c.ast-separate-container{
  background-color:#EBE3D2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 64 64 0' stroke='%23CBA135' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* крошки (blog.css самодостаточен) */
.ires-crumbs{ font-family:var(--ff-body); font-size:13.5px; color:var(--bronze); margin:0 0 26px; }
.ires-crumbs a{ color:var(--bronze); text-decoration:none; }
/* Текущая страница в крошках: приглушена (не ссылка) и обрезается многоточием,
   чтобы длинный заголовок статьи не расползался на три строки на мобильном. */
.ires-crumbs__current{
  color:var(--platinum);
  display:inline-block; vertical-align:bottom;
  max-width:min(38ch, 100%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:600px){
  .ires-crumbs__current{ max-width:22ch; }
}
.ires-crumbs a:hover{ color:var(--gold); }
.ires-crumbs span{ color:var(--platinum); margin:0 8px; }
/* текущая страница в крошках – читаемый цвет (был светлый platinum), без лишнего отступа */
.ires-crumbs [aria-current="page"]{ color:var(--graphite); font-weight:500; margin:0; }

.ires-article__head{ margin:0 0 clamp(28px,4vw,42px); }
.ires-article__cat{
  display:inline-block; font-family:var(--ff-body); font-weight:600; font-size:12px;
  letter-spacing:.14em; color:var(--bronze); text-decoration:none; margin:0 0 16px;
}
.ires-article__cat:hover{ color:var(--gold); }
.ires-article__title{ margin:0 0 .5em; font-size:clamp(1.95rem,3.4vw,2.95rem); line-height:1.18; }
.ires-article__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--ff-body); font-size:14px; color:var(--bronze);
}
.ires-article__author{ font-weight:600; color:var(--graphite); }
.ires-article__updated{ color:var(--bronze); font-weight:600; }
.ires-article__dot{ color:var(--platinum); }

/* тело статьи – премиум-читаемость */
.ires-article__body{ font-size:1.08rem; }

/* ==========================================================================
   МОБИЛЬНАЯ ТИПОГРАФИКА (UX-RULES: body 16-18px, строка 40-60 символов).
   БАГ, найден 2026-07-25: Astra на мобильном ужимает корневой font-size до
   ~14.6px, а наш 1.08rem считается ОТ НЕГО -> текст падал до 15.76px (ниже нормы).
   Поэтому здесь фиксируем px, а не rem – rem тут ненадежен.

   Про длину строки – измеренный факт, а не теория: у Montserrat кириллица шире
   латиницы (~0.561em на символ против ~0.5). На экране 375px норма «40 символов»
   требует ~370px чистого текста, то есть поля в ноль – недостижимо.
   Решение: приоритет отдан РАЗМЕРУ ШРИФТА (16px, в норме), длина строки
   получается ~37 символов – физический предел узкого экрана. На экранах от
   ~414px норма 40+ выполняется сама. Ужимать шрифт ради длины строки НЕ надо:
   мелкий шрифт бьет по читаемости сильнее, чем короткая строка.
   ========================================================================== */
@media (max-width:600px){
  .ires-article__body{ font-size:16px; }
  .ires-article__body p, .ires-article__body li{ line-height:1.75; }
  /* поля ужимаем до разумного минимума, чтобы вернуть строке ширину */
  .ires-article{ padding-left:6px; padding-right:6px; }
  body.ast-separate-container .ires-article__post.ast-article-single{ padding-left:14px; padding-right:14px; }
}
/* текст держим на оптимуме чтения ~74ch; картинки/медиа пускаем на всю ширину статьи */
.ires-article__body > *{ max-width:74ch; }
.ires-article__body > figure,
.ires-article__body > img,
.ires-article__body > .wp-block-image,
.ires-article__body > .wp-block-embed{ max-width:100%; margin-left:0; margin-right:0; }
.ires-article__body h2{ margin:1.7em 0 .55em; }
.ires-article__body h3{ margin:1.4em 0 .4em; }
.ires-article__body p, .ires-article__body li{ line-height:1.85; color:var(--graphite); }
.ires-article__body ul, .ires-article__body ol{ padding-left:1.3em; margin:1em 0; }
.ires-article__body li{ margin:.4em 0; }
/* пул-цитата – чистая типографика (Cormorant italic), БЕЗ боковой полосы (Impeccable ban) */
.ires-article__body blockquote{
  margin:2em 0; padding:0 0 0 1.1em; border:0;
  font-family:var(--ff-accent); font-style:italic; color:var(--bronze);
  font-size:clamp(1.35rem,2.1vw,1.7rem); line-height:1.5; max-width:66ch;
}
.ires-article__body blockquote p{ margin:0; }
/* ==========================================================================
   ОГЛАВЛЕНИЕ (UX-RULES, приоритет 1)
   Мобильный: развернутый список, НЕ аккордеон – аккордеон требует лишнего клика,
   на мобильном это теряет читателя. Список короткий (только H2), поэтому помещается.
   ========================================================================== */
.ires-toc{
  margin:0 0 2.4em; padding:22px 26px;
  background:rgba(203,161,53,.055);
  border-radius:var(--radius-md);
  max-width:74ch;
}
.ires-toc__title{
  font-family:var(--ff-body); font-weight:600; font-size:12px; letter-spacing:.16em;
  color:var(--bronze); margin:0 0 12px;
}
.ires-toc__list{ margin:0; padding:0 0 0 1.25em; display:grid; gap:7px; }
.ires-toc__list li{ margin:0; line-height:1.5; }
.ires-toc__list a{
  color:var(--graphite); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.ires-toc__list a:hover{ color:var(--navy); border-bottom-color:var(--gold); }
/* плавный переход к якорю + отступ, чтобы заголовок не прилипал к верху окна */
html{ scroll-behavior:smooth; }
.ires-article__body h2, .ires-article__body h3{ scroll-margin-top:24px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ==========================================================================
   МЕЖТЕКСТОВАЯ CTA-ВРЕЗКА (UX-RULES: 2-3 на лонгрид, формулировки мягкие).
   Намеренно НЕ кричащая: в YMYL агрессивный призыв внутри статьи бьет по доверию.
   ========================================================================== */
.ires-inline-cta{
  margin:2.6em 0; padding:24px 28px; max-width:74ch;
  background:#F7F3EC; border-radius:var(--radius-md);
}
.ires-inline-cta p{ margin:0 0 14px; font-size:1rem; line-height:1.7; color:var(--graphite); }
.ires-inline-cta__link{
  display:inline-block; font-family:var(--ff-body); font-weight:600; font-size:.95rem;
  color:var(--navy); text-decoration:none;
  border-bottom:1.5px solid var(--gold); padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.ires-inline-cta__link:hover{ color:var(--bronze); border-bottom-color:var(--bronze); }

/* ==========================================================================
   FAQ В СТАТЬЕ (краткий вверху / полный внизу).
   Контент делаем для людей и для извлечения нейросетями (AEO). На rich-сниппет
   Google не рассчитываем – FAQ rich results сворачиваются (см. UX-RULES, оговорка).
   ========================================================================== */
.ires-faq-inline{ margin:2.6em 0; max-width:74ch; }
.ires-faq-inline__title{
  font-family:var(--ff-body); font-weight:600; font-size:12px; letter-spacing:.16em;
  color:var(--bronze); margin:0 0 14px;
}
.ires-faq-inline details{
  border-top:1px solid rgba(139,105,20,.16); padding:16px 0;
}
.ires-faq-inline details:last-of-type{ border-bottom:1px solid rgba(139,105,20,.16); }
.ires-faq-inline summary{
  cursor:pointer; list-style:none; font-family:var(--ff-head); font-weight:500;
  font-size:1.1rem; color:var(--navy); line-height:1.45;
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
.ires-faq-inline summary::-webkit-details-marker{ display:none; }
.ires-faq-inline summary::after{ content:"+"; color:var(--bronze); font-size:1.4rem; line-height:1; flex:0 0 auto; }
.ires-faq-inline details[open] summary::after{ content:"–"; }
.ires-faq-inline details p{ margin:12px 0 0; font-size:1rem; line-height:1.8; color:var(--graphite); }

/* Липкая мобильная CTA живет в style.css (.ires-mcta) – она общая для всего сайта.
   Здесь ее НЕ дублируем: 2026-07-25 дубль был создан по невнимательности и дал две
   кнопки одновременно на мобильном. Логика показа/скрытия – assets/lightbox.js. */

/* Ссылки в тексте: bronze + подчеркивание (gold ~2.2:1 на белом не проходит WCAG AA; bronze ~5:1). */
.ires-article__body a{ color:var(--bronze); text-decoration:underline; text-underline-offset:.15em; }
.ires-article__body a:hover{ color:var(--navy); }
/* ссылки оглавления/врезок не подчеркиваем базовым правилом – у них свой стиль */
.ires-toc a, .ires-inline-cta__link{ text-decoration:none; }
/* подсказка, что картинку можно открыть */
.ires-article__body img{ cursor:zoom-in; }
.ires-article__body img:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Lightbox (полноразмерный просмотр картинки) ---------- */
.ires-lightbox{
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(13,11,9,.88); cursor:zoom-out;
  opacity:0; transition:opacity .25s ease;
}
.ires-lightbox.is-open{ opacity:1; }
.ires-lightbox img{
  max-width:min(1200px,95vw); max-height:92vh; width:auto; height:auto;
  border-radius:var(--radius-md); box-shadow:0 30px 90px rgba(0,0,0,.55); cursor:default;
}
.ires-lightbox__close{
  position:absolute; top:16px; right:20px; width:44px; height:44px; line-height:1;
  font-size:30px; color:var(--ivory); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25); border-radius:50%; cursor:pointer;
  transition:background .2s ease;
}
.ires-lightbox__close:hover{ background:rgba(255,255,255,.18); }
.ires-lightbox__close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .ires-lightbox{ transition:none; } }
/* Картинки в статье: скругленные, БЕЗ парящей тени. Скругление светлой картинки на белом боксе
   оставляет в углах просвет фона; чтобы он читался как намеренная рамка, а не «пятно» – даем
   ОПРЕДЕЛЕННУЮ теплую рамку (не еле заметную). На картинках, заполняющих кадр до краев,
   скругление вообще идеально (см. brand/image-style-prompt.md – правило «fills the frame»). */
/* Fallback для картинки БЕЗ обертки .ires-figure (например, вставлена напрямую блоком Gutenberg
   .wp-block-image) – border-radius сюда сознательно НЕ ставим (см. правило выше), только рамка.
   Если такая картинка понадобится скруглить – сначала обернуть в .ires-figure, не патчить это правило. */
.ires-article__body img{ border:1px solid rgba(139,105,20,.24); }
.ires-article__body .wp-block-image{
  overflow:hidden; border-radius:var(--radius-md); transform:translateZ(0); margin:2.2em 0;
}
.ires-article__body .wp-block-image img{ border-radius:inherit; }

/* картинки-фигуры в статье */
/* ⚠️ ПРАВИЛО ПРОЕКТА (закреплено Иваном, действует везде, где есть картинки в этой теме, пока
   не будет отменено явно): скругление КАРТИНОК всегда через overflow:hidden + border-radius на
   ОБЕРТКЕ (контейнер вокруг img), border-radius на самом img – ТОЛЬКО inherit. НИКОГДА не ставить
   border-radius прямо на голый <img> без такой обертки – именно так рендерится некорректно
   (светлая кайма сглаживания на скругленном углу, воспроизведено и починено 2026-07-21). Обертка
   дополнительно получает transform:translateZ(0) (принудительный GPU-слой – убирает эту кайму).
   Актуальный рабочий пример – .ires-card__cover (карточка ленты) и .ires-figure (картинка в статье)
   ниже; оба используют этот паттерн. Любая НОВАЯ картинка в теме (будущие блоки, лендинги, другие
   типы карточек) обязана следовать тому же паттерну. */
.ires-article__body .ires-figure{
  margin:2.2em 0; overflow:hidden; border-radius:var(--radius-md); transform:translateZ(0);
}
.ires-article__body .ires-figure--hero{ margin:0 0 2.2em; }
.ires-article__body .ires-figure img{ width:100%; height:auto; display:block; border-radius:inherit; }

/* таблицы – премиум, со скроллом по горизонтали на мобильном */
/* ⚠️ ПРАВИЛО ПРОЕКТА: все таблицы в статьях – со скругленными углами, тот же радиус и паттерн,
   что у картинок (обертка .ires-tablewrap: overflow+border-radius+translateZ(0); сама table –
   border:0, скругление только на обертке). Astra дает дефолтную полную сетку-рамку у таблиц в
   контенте – явно сбрасываем ее (`.ires-table,.ires-table th,.ires-table td{border:0}`), иначе
   она накладывается поверх наших border-bottom и на скругленных углах видна прямоугольная рамка. */
.ires-article__body .ires-tablewrap{
  max-width:100%; overflow:auto; margin:2em 0; -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-md); border:1px solid rgba(139,105,20,.24); transform:translateZ(0);
}
/* Таблица шире текстовой колонки (правка Ивана 2026-07-26).
   Текст держим на 74ch – это оптимум чтения, но таблице такая ширина тесна:
   она упиралась в колонку и получала горизонтальный скролл на ровном месте.
   Выпускаем таблицу за внутренний отступ карточки (Astra ставит padding 2.5em),
   оставляя у края 12px: +60px ширины на десктопе, скролл уходит.
   ⚠️ Правило обязано стоять ПОСЛЕ `.ires-article__body .ires-tablewrap` выше –
   у них одинаковая специфичность (0,2,0), и решает порядок в файле. Первая
   попытка была вставлена выше и молча не работала (найдено 2026-07-26).
   Мобильный не трогаем: там padding карточки и так 14px, выпускать некуда. */
@media (min-width:601px){
  .ires-article__body .ires-tablewrap{
    max-width:none;
    margin-left:calc(-2.5em + 12px);
    margin-right:calc(-2.5em + 12px);
  }
}
.ires-table, .ires-table th, .ires-table td{ border:0; }
.ires-table{ width:100%; border-collapse:collapse; font-family:var(--ff-body); font-size:.97rem; }
.ires-table th, .ires-table td{ text-align:left; padding:13px 18px; border-bottom:1px solid rgba(139,105,20,.16); vertical-align:top; line-height:1.5; }
.ires-table thead th{ font-family:var(--ff-head); color:var(--navy); font-weight:600; border-bottom:2px solid rgba(139,105,20,.32); }
.ires-table td:first-child{ font-weight:500; color:var(--graphite); }
.ires-table tbody tr:last-child td{ border-bottom:0; }
.ires-table tbody tr:hover{ background:rgba(203,161,53,.05); }

/* FAQ – вопросы H3 */
.ires-article__body h3{ color:var(--navy); }

/* ---------- Byline / автор (E-E-A-T) ---------- */
.ires-author{
  display:flex; gap:22px; align-items:center; margin:clamp(40px,5vw,60px) 0 0;
  padding:clamp(22px,3vw,30px); background:#F8F3E8; border-radius:var(--radius-lg);
  border:1px solid rgba(139,105,20,.16);
}
/* фото автора – та же обертка-паттерн: overflow:hidden+radius на обертке, img только inherit */
.ires-author__photo{
  display:block; flex:0 0 auto; width:96px; height:96px; overflow:hidden;
  border-radius:var(--radius-lg); transform:translateZ(0);
}
.ires-author__photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.ires-author__name{ font-family:var(--ff-head); color:var(--navy); font-size:1.25rem; font-weight:600; margin:0 0 6px; }
.ires-author__role{ color:var(--graphite); font-size:.95rem; line-height:1.6; margin:0; max-width:62ch; }

/* ---------- CTA-панель (темная, момент после дочитывания) ---------- */
.ires-cta-panel{
  position:relative; overflow:hidden; margin:clamp(36px,5vw,52px) 0 0;
  border-radius:var(--radius-lg);
  background:radial-gradient(120% 130% at 50% 0%, #20304e 0%, var(--navy) 46%, #101826 100%);
  color:var(--ivory); padding:clamp(34px,5vw,60px) clamp(24px,4vw,52px); text-align:center;
}
.ires-cta-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 70% at 50% 0%, rgba(203,161,53,.16), transparent 64%);
}
.ires-cta-panel__in{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.ires-cta-panel__eyebrow{ font-family:var(--ff-body); font-weight:600; font-size:12px; letter-spacing:.16em; color:var(--gold); margin:0 0 12px; }
.ires-cta-panel__title{ color:var(--ivory); margin:0 0 .5em; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.ires-cta-panel__text{ color:#E7DECB; line-height:1.7; margin:0 0 26px; }
.ires-cta-panel__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* кнопки (blog.css самодостаточен) */
.ires-btn{
  display:inline-block; border-radius:var(--radius-md); padding:14px 28px;
  font-family:var(--ff-body); font-weight:600; letter-spacing:.01em; text-align:center;
  text-decoration:none; cursor:pointer; transition:transform .18s ease, background .2s ease, color .2s ease;
}
.entry-content a.ires-btn, a.ires-btn{ text-decoration:none; }
.ires-btn--primary{ background:var(--gold); color:var(--night); box-shadow:0 6px 22px rgba(203,161,53,.3); }
.ires-btn--primary:hover{ background:#dbb24a; color:var(--night); transform:translateY(-2px); }

/* ---------- «Читайте далее» ---------- */
.ires-readnext{ max-width:1100px; margin:clamp(48px,6vw,72px) auto 0; padding:0 20px; }
.ires-readnext__h{ font-size:clamp(1.5rem,2.4vw,2rem); margin:0 0 clamp(20px,3vw,30px); text-align:center; }
.ires-readnext__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,2.2vw,26px);
}

/* ---------- a11y: видимый фокус ---------- */
.ires-blog a:focus-visible,
.ires-article a:focus-visible,
.ires-readnext a:focus-visible,
.ires-btn:focus-visible,
.ires-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- Адаптив ---------- */
@media (max-width:600px){
  .ires-author{ flex-direction:column; text-align:center; gap:16px; }
  .ires-author__role{ max-width:none; }
  .ires-blog__grid{ grid-template-columns:1fr; }

  /* Сравнительные таблицы на мобильном: ужимаем шрифт/паддинги, чтобы все колонки
     влезли в экран без горизонтального скролла – сравнение остается side-by-side. */
  .ires-article__body .ires-tablewrap{ margin:1.6em 0; }
  .ires-table{ font-size:.82rem; }
  .ires-table th, .ires-table td{ padding:9px 10px; line-height:1.4; overflow-wrap:break-word; hyphens:auto; }
}

/* ==========================================================================
   Схема сравнения «Психолог / Коуч» (.ires-compare)
   --------------------------------------------------------------------------
   Почему HTML+CSS, а не SVG: SVG – фиксированный холст, на 375px четыре
   двухколоночных ряда с длинными подписями станут нечитаемо мелкими.
   Здесь на мобильном колонки складываются, текст остается живым –
   индексируется, копируется, читается скринридером, нулевой вес.
   Порядок сторон: психолог слева, коуч справа – как на обложке статьи.
   ========================================================================== */
.ires-article__body .ires-compare{
  margin:2.2em 0; padding:clamp(20px,3vw,32px) clamp(16px,3vw,34px) 0;
  background:var(--ivory); border:1px solid rgba(139,105,20,.18);
  border-radius:var(--radius-lg); overflow:hidden;
}
.ires-compare__title{
  font-family:var(--ff-head); color:var(--navy); text-align:center;
  font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.35; margin:0 0 clamp(18px,2.4vw,26px);
}
.ires-compare__heads,
.ires-compare__row{ display:grid; grid-template-columns:1fr minmax(78px,112px) 1fr; align-items:stretch; }
.ires-compare__head{
  font-family:var(--ff-head); font-size:clamp(1.05rem,1.8vw,1.3rem); text-align:center;
  padding-bottom:12px; color:var(--bronze);
  background:linear-gradient(180deg,#E0C070 0%,var(--gold) 55%,var(--bronze) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ires-compare__heads > span:nth-child(2){ border-bottom:0; }
.ires-compare__row{ border-top:1px solid rgba(139,105,20,.16); }
.ires-compare__axis{
  font-family:var(--ff-body); font-size:.78rem; line-height:1.35; text-transform:uppercase;
  letter-spacing:.06em; color:var(--graphite); opacity:.72; text-align:center;
  display:flex; align-items:center; justify-content:center; padding:16px 8px;
  /* Тонкая золотая ось между колонками – граница, а не стена */
  border-left:1px solid rgba(203,161,53,.5); border-right:1px solid rgba(203,161,53,.5);
}
.ires-compare__cell{
  font-family:var(--ff-body); font-size:.95rem; line-height:1.55; color:var(--graphite);
  padding:16px clamp(8px,1.1vw,13px); display:flex; align-items:center;
}
.ires-compare__cell--psy{ justify-content:flex-end; text-align:right; }
.ires-compare__cell--coach{ justify-content:flex-start; text-align:left; }
.ires-compare__who{ display:none; }  /* дубли заголовков нужны только на мобильном */

/* Замок схемы: снимает ложный выбор «кто лучше» и ведет к метафоре двух крыльев */
.ires-compare__note{
  margin:clamp(18px,2.4vw,26px) calc(-1 * clamp(16px,3vw,34px)) 0;
  padding:clamp(16px,2.2vw,22px) clamp(18px,3vw,34px);
  background:var(--navy); color:var(--ivory);
  font-family:var(--ff-accent); font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.5;
  display:flex; align-items:center; gap:14px;
}
.ires-compare__note b{ color:var(--gold); font-weight:600; }
.ires-compare__mark{ flex:0 0 auto; opacity:.9; }

@media (max-width:640px){
  /* Колонки складываются друг под друга: ось становится подзаголовком группы,
     а внутри каждой карточки появляется своя подпись – кто есть кто. */
  .ires-compare__heads{ display:none; }
  .ires-compare__row{ grid-template-columns:1fr; padding-bottom:6px; }
  .ires-compare__axis{
    order:-1; border:0; padding:14px 0 8px; justify-content:flex-start; text-align:left;
    font-size:.74rem; letter-spacing:.08em;
  }
  .ires-compare__cell{
    display:block; text-align:left; padding:8px 0; font-size:.93rem;
  }
  .ires-compare__cell--psy, .ires-compare__cell--coach{ text-align:left; }
  .ires-compare__who{
    display:block; font-family:var(--ff-head); font-size:.9rem; color:var(--bronze); margin-bottom:2px;
  }
  .ires-compare__note{ flex-direction:column; text-align:center; gap:10px; }
}

/* Подпись под картинкой в статье. По brand/visual-identity.md акцентный текст –
   Cormorant Garamond Italic. Живой текст в верстке, а не буквы на картинке:
   индексируется, читается скринридером, правится без перегенерации. */
.ires-article__body .ires-figure figcaption{
  font-family:var(--ff-accent); font-style:italic; font-size:1.02rem; line-height:1.5;
  color:var(--graphite); opacity:.85; text-align:center; padding:12px 18px 2px;
}

/* ==========================================================================
   Схема-маршрутизатор «К кому идти» (.ires-route)
   --------------------------------------------------------------------------
   Дает ПРАВИЛО выбора; таблица примеров под ней остается справочником.
   Три маршрута, а не бинарная развилка: третий («не уверены») – ключевой,
   он ведет к позиционированию института, где обе стороны в одном специалисте.
   HTML, а не SVG: стрелки не нужны, полосы сами складываются на мобильном,
   текст живой – это блок, который охотнее всего цитируют нейросети.

   ⚠️ Почему полосы, а не три карточки в ряд: текстовая колонка статьи ~585px,
   три колонки в нее не влезают – третья карточка срывалась на второй ряд.
   ========================================================================== */
.ires-article__body .ires-route{
  margin:2.2em 0; padding:clamp(20px,3vw,30px) clamp(16px,3vw,28px);
  background:var(--ivory); border:1px solid rgba(139,105,20,.18);
  border-radius:var(--radius-lg);
}
.ires-route__q{
  font-family:var(--ff-head); color:var(--navy); text-align:center;
  font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.35; margin:0 0 clamp(16px,2.4vw,22px);
}
.ires-route__grid{ display:flex; flex-direction:column; gap:clamp(10px,1.4vw,14px); }
.ires-article__body .ires-route__card{
  background:#fff; border:1px solid rgba(139,105,20,.16); border-radius:var(--radius-md);
  padding:clamp(14px,1.8vw,18px);
  display:grid; grid-template-columns:minmax(150px,34%) 1fr; gap:clamp(12px,2vw,20px);
  align-items:start;
  /* цветная кромка слева = быстрый визуальный код маршрута */
  border-left:3px solid var(--platinum);
}
.ires-route__card--psy{ border-left-color:var(--champagne); }
.ires-route__card--coach{ border-left-color:var(--gold); }
.ires-route__card--both{ border-left-color:var(--navy); }
.ires-route__head{ display:flex; flex-direction:column; gap:5px; }
.ires-route__when{
  font-family:var(--ff-body); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--graphite); opacity:.7;
}
.ires-route__who{
  font-family:var(--ff-head); font-size:clamp(1rem,1.7vw,1.12rem); line-height:1.3; color:var(--navy);
}
/* ⚠️ Селектор с .ires-article__body обязателен: у темы есть правило
   .ires-article__body ul{...} с большим отступом, оно специфичнее голого класса
   и перебивало margin:0 – список отрывался от заголовка полосы. */
.ires-article__body .ires-route__signals{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:6px;
}
.ires-article__body .ires-route__signals li{
  font-family:var(--ff-body); font-size:.88rem; line-height:1.45; color:var(--graphite);
  margin:0; padding-left:14px; position:relative;
}
.ires-article__body .ires-route__signals li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.75;
}
.ires-route__note{
  margin:clamp(16px,2.2vw,22px) 0 0; padding-top:clamp(14px,2vw,18px);
  border-top:1px solid rgba(139,105,20,.18);
  font-family:var(--ff-accent); font-style:italic; font-size:clamp(1rem,1.7vw,1.15rem);
  line-height:1.5; color:var(--graphite); text-align:center;
}
.ires-route__note b{ font-style:normal; color:var(--bronze); font-weight:600; }

@media (max-width:600px){
  .ires-article__body .ires-route__card{ grid-template-columns:1fr; gap:10px; }
}