/* =========================================================
   Дизайн-токены — источник правды для всех кастомных классов.
   Перенесено из colors_and_type.css (референс в репо).
   GP-настройки шрифтов и размеров заголовков остаются в Customizer.
   ========================================================= */
:root {
  /* ── COLOR PRIMITIVES ─────────────────────────────── */

  /* Brand blues */
  --color-blue-100: #EEF4FC;
  --color-blue-200: #F0F6FF;
  --color-blue-300: #C5DCF5;
  --color-blue-400: #29ABE2;   /* primary accent — labels, hover borders, Telegram */
  --color-blue-800: #0C447C;   /* badge text (doctor) */
  --color-blue-900: #0D1B2A;   /* deep navy — headings */

  /* Neutrals */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8F9FA;
  --color-neutral-100: #F0F4F8;
  --color-neutral-200: #E0E6ED;
  --color-neutral-300: #C9D3DC;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #0D1B2A;

  /* Badge / status */
  --color-badge-doctor-bg:     #EEF4FC;
  --color-badge-doctor-text:   #0C447C;
  --color-badge-discuss-bg:    #FAECE7;
  --color-badge-discuss-text:  #712B13;
  --color-badge-personal-bg:   #F1EFE8;
  --color-badge-personal-text: #444441;

  /* Social */
  --color-telegram:        #29ABE2;
  --color-whatsapp:        #25D366;
  --color-instagram-from:  #f58529;
  --color-instagram-to:    #515bd4;

  /* ── SEMANTIC COLOR TOKENS ────────────────────────── */

  /* Text */
  --text-heading:    var(--color-blue-900);    /* #0D1B2A */
  --text-body:       var(--color-neutral-700); /* #374151 */
  --text-muted:      var(--color-neutral-500); /* #6B7280 */
  --text-subtle:     var(--color-neutral-400); /* #9CA3AF */
  --text-link:       var(--accent);             /* #255D96 */
  --text-link-hover: var(--color-blue-400);    /* #29ABE2 */
  --text-accent:     var(--color-blue-400);    /* #29ABE2 */
  --text-on-dark:    rgba(255,255,255,0.85);

  /* Backgrounds */
  --bg-page:    var(--color-neutral-0);   /* #FFFFFF */
  --bg-surface: var(--color-neutral-50);  /* #F8F9FA */
  --bg-subtle:  var(--color-neutral-100); /* #F0F4F8 */
  --bg-tinted:  var(--color-blue-200);    /* #F0F6FF */
  --bg-dark:    var(--color-neutral-600); /* #4B5563 */

  /* Borders */
  --border-default: var(--color-neutral-200); /* #E0E6ED */
  --border-subtle:  var(--color-neutral-100); /* #F0F4F8 */
  --border-focus:   var(--color-blue-400);    /* #29ABE2 */
  --border-accent:  var(--color-blue-400);    /* #29ABE2 */

  /* Interactive */
  --btn-primary-bg:       var(--accent);
  --btn-primary-bg-hover: var(--base-3);
  --btn-accent-bg:        var(--color-blue-400);
  --btn-accent-bg-hover:  var(--base-3);
  --btn-whatsapp-bg:      var(--color-whatsapp);

  /* Shadows */
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.10);
  --shadow-card-sm:    0 4px 16px rgba(0,0,0,0.07);

  /* ── TYPOGRAPHY — BASE SCALE ──────────────────────── */

  /* Font families */
  --font-display: 'Rubik', sans-serif;
  --font-body:    'Karla', sans-serif;

  /* Font sizes */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.75;

  /* Letter spacing */
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;

  /* ── LAYOUT TOKENS ────────────────────────────────── */

  --container-max:    1100px;
  --container-wide:   1200px;
  --container-narrow: 720px;
  --container-text:   760px;

  --page-px:    20px;
  --section-pt: 56px;

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-card: 10px;
  --radius-lg:   12px;
  --radius-pill: 20px;
  --radius-full: 9999px;

  --card-padding:    24px;
  --card-padding-sm: 16px;
}

/* =========================================================
   Глобальные стили чайлд-темы karinabondarenko.ru
   Подключается на всех страницах через functions.php.
   До 10.05.2026 эти правила лежали в Customizer → Дополнительные стили.
   ========================================================= */

/* --- Перенесено из Customizer --- */

/* =========================================================
   SITE CSS — BASE CLEANUP
   Проект: karinabondarenko.ru
     ========================================================= */

/* =========================================================
   1. LAYOUT
   Базовые правки каркаса страницы
   ========================================================= */

/* Убираем лишний верхний отступ у основного контента */
.site-content {
  padding-top: 0 !important;
}

/* Убираем верхний отступ у H1
   Используется для корректного выравнивания hero-блока */
h1 {
  margin-top: 0 !important;
}

/* =========================================================
   3. BUTTON SYSTEM
   Глобальные скругления для всех кнопок сайта
   Используется как временное системное решение,
   так как в глобальных настройках темы нет общего radius
   ========================================================= */

/* Стандартные кнопки WordPress */
button,
.wp-block-button__link,
a.wp-block-button__link,

/* GenerateBlocks buttons */
.gb-button,
.gb-button a {
  border-radius: 6px;
}


/* =========================================================
   4. UTILITIES
   Точечные служебные правки
   ========================================================= */

/* =========================================================
   Скрываем кнопку "наверх" только на главной странице
   ========================================================= */
.home .generate-back-to-top {
  display: none !important;
}

/* =========================================================
   5. MENU CTA
   Кнопка "Онлайн-консультация" в мобильном меню
   Прозрачный фон, акцент через цвет и вес
   ========================================================= */

.menu-consult-link > a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  background: transparent;
  color: #255D96 !important;
  font-weight: 600;
  text-decoration: none;
}

/* Hover / focus состояние */
.menu-consult-link > a:hover,
.menu-consult-link > a:focus {
  background: #F5F8FF;
  color: #255D96 !important;
}

/* Мобильное выравнивание */
@media (max-width: 767px) {
  .menu-consult-link > a {
    margin-left: 0;
  }
}

/* =========================================================
   CTA BUTTON — Telegram (авто по ссылке t.me)
   Чистый вариант: иконка без перегруза
   ========================================================= */

.wp-block-button__link[href*="t.me"] {
  position: relative;
  padding-left: 40px;
}

.wp-block-button__link[href*="t.me"]::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/telegram.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

/*
=========================================================
  удаляем стандартный футер
   =========================================================
*/
.copyright-bar {
    display: none;
}
/*.site-footer {
  display: none !important;
}*/

/* === Новый футер через виджеты GeneratePress === */

.site-footer {
  padding: 40px 20px 32px;
  border-top: 1px solid #E0E6ED;
  font-family: 'Karla', sans-serif;
  margin-top: 40px;
  background: transparent;
  color: #6B7280;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  --base-2: #ffffff;
  --contrast-2: #6B7280;
}

.footer-widgets {
  padding: 0;
}

.footer-widgets-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.inside-footer-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 32px;
  align-items: start;
}

.footer-widgets aside.widget {
  margin: 0;
  padding: 0;
}

.footer-widgets .widget-title {
  display: none;
}

.kb-footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  color: #0D1B2A;
  margin: 0 0 12px;
  letter-spacing: .04em;
}

.kb-footer-col p {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 8px;
  line-height: 1.5;
}

.kb-footer-col a {
  display: block;
  font-size: 13px;
  color: #6B7280;
  text-decoration: none;
  margin-bottom: 8px;
  transition: color .15s;
  word-break: break-word;
}

.kb-footer-col a:hover {
  color: #255D96;
}

.kb-footer-social {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.kb-footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

/* Панель подвала (дисклеймер + копирайт) */

.footer-bar {
  background: transparent;
  padding: 24px 0 0;
  border-top: 1px solid #F0F4F8;
}

.footer-bar .inside-footer-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.footer-bar aside.widget {
  margin: 0;
}

.kb-footer-disclaimer {
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.6;
  text-align: left;
  margin: 0 0 16px;
}

.kb-footer-disclaimer p {
  margin: 0 0 10px;
}

.kb-footer-disclaimer p:last-child {
  margin-bottom: 0;
}

.kb-footer-disclaimer a {
  color: #9CA3AF;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}

.kb-footer-disclaimer a:hover {
  color: #255D96;
}

.inside-footer-widgets {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 1.35fr;
  column-gap: 56px;
  align-items: flex-start;
}

/* Скрыть родную GP-полосу копирайта */
.copyright-bar { display: none; }

/* Mobile */
@media (max-width: 640px) {
  .inside-footer-widgets {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .kb-footer-disclaimer {
    text-align: left;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .inside-footer-widgets {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/*=========================================================
  Кнопка карточки сегмента — кастомная, не WP-кнопка,
  color !important перебивает глобальные стили темы
 ========================================================= */
.kb-segment-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff !important;
  background: #255D96;
  border-radius: 6px;
  padding: 8px 16px;
  text-decoration: none !important;
  text-align: center;
  margin-top: 4px;
  transition: background .15s;
  width: 100%;
  box-sizing: border-box;
}

/*
=========================================================
  удаление циклической ссылки с главной
   =========================================================
*/
.home header a[rel="home"] {
  pointer-events: none;
  cursor: default;
}


/* --- Блок соцсетей (kb_render_social_block, shortcode [kb_social]) --- */

.kb-social-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
    margin: 32px auto;
}

.kb-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid #E0E6ED;
    border-radius: 8px;
    background: #FFFFFF;
    color: #374151;
    font-family: 'Karla', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.kb-social-link:hover {
    border-color: #29ABE2;
    color: #0D1B2A;
}

.kb-social-link .kb-icon {
    flex-shrink: 0;
}

.kb-social-link--telegram .kb-icon {
    color: #29ABE2;
}

.kb-social-link--instagram .kb-icon {
    color: #E1306C;
}

/* =========================================================
   Страница материала (single-kb_video, single-kb_material)
   Используется в шаблонах CPT kb_video и kb_material.
   ========================================================= */

.kb-material-page {
    max-width: var(--container-text);
    margin: 0 auto;
    padding: 32px var(--page-px) 64px;
}

/* === Мета-блок (kb/meta) — одна строка с группировкой === */
.kb-material-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 24px 0 32px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

/* Группы внутри meta */
.kb-meta-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.kb-meta-group--muted {
    color: var(--text-muted);
}

/* Тип и аудитория — бейджи-плашки */
.kb-meta-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-tinted);
    color: var(--text-link);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.kb-meta-badge:hover {
    background: var(--color-blue-300);
    color: var(--text-heading);
}

/* Темы — лёгкие теги-ссылки, без фона */
.kb-meta-tag {
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.15s;
}

.kb-meta-tag:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* Длительность, дата, обновлено — muted text */
.kb-meta-duration,
.kb-meta-date,
.kb-meta-updated {
    color: var(--text-muted);
}

/* Разделитель — точка между однородными элементами */
.kb-meta-sep {
    color: var(--text-subtle);
    user-select: none;
}

.kb-material-title {
    font-size: var(--text-2xl);
    font-weight: 500;
    margin-bottom: 12px;
}

.kb-material-lead {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    margin: 0 0 24px;
}

.kb-material-video-wrap {
    margin: 0 0 32px;
}

.kb-material-video-wrap iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md);
}

.kb-material-body {
    margin-bottom: 32px;
}

.kb-material-outdated {
    padding: 12px 16px;
    margin-bottom: 24px;
    border-left: 3px solid var(--border-accent);
    background: var(--bg-subtle);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-body);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Featured Image ────────────────────────── */
.kb-material-featured {
    margin: 0 0 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bg-subtle);
}

.kb-material-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Audio (kb/audio) ──────────────────────── */
.kb-material-audio {
    margin: 24px 0 32px;
    padding: 16px 20px;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}

.kb-material-audio-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0 0 10px;
    font-weight: 500;
}

.kb-material-audio audio {
    width: 100%;
    display: block;
}

/* =========================================================
   Главная страница (front-page.php)
   ========================================================= */

.kb-home-page {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--page-px);
    font-family: var(--font-body);
}

/* ── HERO ────────────────────────────────────────── */
.kb-home-hero {
    padding: 40px 0 48px;
}

.kb-home-hero-inner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 48px;
    align-items: center;
}

.kb-home-hero-text { min-width: 0; }

.kb-home-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-blue-400);
    margin: 0 0 16px;
}

.kb-home-hero-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--text-heading);
    line-height: var(--leading-tight);
    margin: 0 0 16px;
}

.kb-home-hero-quote {
    font-size: var(--text-base);
    color: var(--text-subtle);
    font-style: italic;
    line-height: var(--leading-relaxed);
    margin: 0 0 20px;
}

.kb-home-hero-body {
    font-size: var(--text-md);
    color: var(--text-body);
    line-height: var(--leading-loose);
    margin: 0 0 24px;
}

.kb-home-hero-sig {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    margin: 0;
}

.kb-home-hero-sig strong {
    display: block;
    color: var(--text-heading);
    font-weight: 600;
}

.kb-home-hero-photo {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.kb-home-hero-photo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

/* ── EDITORIAL DIVIDER ──────────────────────────── */
/*.kb-home-divider {
    height: 48px;
    background: linear-gradient(
        180deg,
        var(--bg-page) 0%,
        var(--bg-tinted) 100%
    );
    margin: 0 calc(-1 * var(--page-px));
}
закоментировал admin*/
/* ── СЕТКА 2×2 ──────────────────────────────────── */
.kb-home-grid {
    padding: 56px 0 32px;
}

.kb-home-grid-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.kb-home-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    background: var(--bg-subtle);
}

.kb-home-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.kb-home-card-img--placeholder {
    background: linear-gradient(135deg, var(--color-blue-200), var(--color-neutral-100));
}

.kb-home-card:hover .kb-home-card-img {
    transform: scale(1.03);
}

.kb-home-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 28px 28px;
    background: linear-gradient(
        180deg,
        rgba(13, 27, 42, 0) 0%,
        rgba(13, 27, 42, 0.85) 100%
    );
    color: var(--color-neutral-0);
}

.kb-home-card-eyebrow {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 6px;
}

.kb-home-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-neutral-0);
    line-height: var(--leading-snug);
    margin: 0;
}

/* ── БОЛЬШАЯ ЦИТАТА ─────────────────────────────── */
.kb-home-quote {
    padding: 96px var(--page-px);
    margin: 0 calc(-1 * var(--page-px));
    background: var(--bg-subtle);
    text-align: center;
}

.kb-home-quote-text {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--text-heading);
    line-height: var(--leading-snug);
    max-width: var(--container-text);
    margin: 0 auto;
}

/* ── TELEGRAM-БЛОК ──────────────────────────────── */
.kb-home-tg {
    padding: 32px 0 0;
    max-width: var(--container-text);
    margin: 0 auto;
}

.kb-home-tg-heading {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--text-heading);
    line-height: var(--leading-snug);
    margin: 0 0 12px;
}

.kb-home-tg-sub {
    font-size: var(--text-md);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 32px;
}

.kb-home-tg-shell {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-page);
    overflow: hidden;
}

.kb-home-tg-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.kb-home-tg-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

.kb-home-tg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kb-home-tg-info {
    flex: 1;
    min-width: 0;
}

.kb-home-tg-name {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-heading);
    margin: 0 0 2px;
}

.kb-home-tg-stat {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

.kb-home-tg-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-telegram);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: background 0.15s;
}

.kb-home-tg-btn:hover {
    background: var(--btn-accent-bg-hover);
}

.kb-home-tg-post {
    display: block;
    margin: 12px;
    padding: 16px 20px;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.15s, box-shadow 0.15s;
}

.kb-home-tg-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-sm);
}

.kb-home-tg-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.kb-meta-badge-status {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: var(--tracking-wide);
}

.kb-meta-badge-status--doctor {
    background: var(--color-badge-doctor-bg);
    color: var(--color-badge-doctor-text);
}

.kb-meta-badge-status--discuss {
    background: var(--color-badge-discuss-bg);
    color: var(--color-badge-discuss-text);
}

.kb-meta-badge-status--personal {
    background: var(--color-badge-personal-bg);
    color: var(--color-badge-personal-text);
}

.kb-home-tg-post-date,
.kb-home-tg-post-views {
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

.kb-home-tg-post-text {
    font-size: var(--text-base);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    margin: 0 0 10px;
}

.kb-home-tg-post-text strong {
    color: var(--text-heading);
    font-weight: 600;
}

.kb-home-tg-post-reactions {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
}

.kb-home-tg-footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.kb-home-tg-footer-link {
    font-size: var(--text-base);
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.15s;
}

.kb-home-tg-footer-link:hover {
    color: var(--text-link-hover);
}

/* ── SOCIAL BLOCK ───────────────────────────────── */
.kb-home-social {
    padding: 0px 0 80px;
}

/* ── МОБИЛЬНЫЙ ─────────────────────────────────── */
@media (max-width: 767px) {
    .kb-home-hero-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kb-home-hero-photo {
        order: -1;
    }

    .kb-home-hero-title {
        font-size: var(--text-2xl);
    }

    .kb-home-grid-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kb-home-quote {
        padding: 64px var(--page-px);
    }

    .kb-home-quote-text {
        font-size: var(--text-xl);
    }
}

/* =========================================================
   Архив материалов (archive-kb_material.php)
   ========================================================= */

.kb-archive-page--materials {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 32px var(--page-px) 80px;
}

.kb-archive-header {
    margin-bottom: 24px;
}

.kb-archive-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--text-heading);
    margin: 0;
}

/* ── Фильтры ────────────────────────────────── */
.kb-archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
}

.kb-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.kb-filter-group label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 500;
}

.kb-filter-group select {
    padding: 8px 12px;
    font-size: var(--text-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-page);
    color: var(--text-body);
}

.kb-filter-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kb-filter-submit {
    padding: 8px 20px;
    background: var(--btn-primary-bg);
    color: var(--color-neutral-0);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.kb-filter-submit:hover {
    background: var(--btn-primary-bg-hover);
}

.kb-filter-reset {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.kb-filter-reset:hover {
    color: var(--text-link);
}

/* ── Список карточек: общий grid ────────────── */
.kb-materials-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ── Tier 1: Feature (две крупные карточки в ряду) ─── */
.kb-material-card--feature {
    grid-column: span 2;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.kb-material-card--feature:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.kb-material-card--feature .kb-card-thumbnail {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
}

.kb-material-card--feature .kb-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.kb-material-card--feature:hover .kb-card-thumbnail img {
    transform: scale(1.03);
}

.kb-material-card--feature .kb-card-content {
    padding: 16px 20px 20px;
}

.kb-material-card--feature .kb-card-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: var(--leading-snug);
    margin: 8px 0 8px;
}

.kb-material-card--feature .kb-card-lead {
    font-size: var(--text-base);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    margin: 0 0 8px;
}

/* ── Tier 2: Mid (четыре в ряду) ──────────── */
.kb-material-card--mid {
    grid-column: span 1;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.kb-material-card--mid:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.kb-material-card--mid .kb-card-thumbnail {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.kb-material-card--mid .kb-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.kb-material-card--mid:hover .kb-card-thumbnail img {
    transform: scale(1.03);
}

.kb-material-card--mid .kb-card-content {
    padding: 12px 10px 10px;
}

.kb-material-card--mid .kb-card-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 500;
    line-height: var(--leading-snug);
    margin: 6px 0 6px;
}

/* ── Tier 3: Compact (карточка во всю ширину, img слева 80×80) ─── */
.kb-material-card--compact {
    grid-column: span 4;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background 0.15s, box-shadow 0.3s ease;
}

.kb-material-card--compact:hover {
    background: var(--bg-subtle);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.kb-material-card--compact .kb-card-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}

.kb-material-card--compact .kb-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kb-material-card--compact .kb-card-content {
    flex: 1;
    min-width: 0;
}

.kb-material-card--compact .kb-card-title {
    font-size: var(--text-md);
    font-weight: 500;
    line-height: var(--leading-snug);
    margin: 4px 0 0;
}

/* ── Заголовки карточек (ссылки) ────────────── */
.kb-card-title a {
    color: var(--text-heading);
    text-decoration: none;
}

.kb-card-title a:hover {
    color: var(--text-link);
}

/* ── Meta-блок в карточке (бейджи + теги) ──── */
.kb-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── Дата ────────────────────────────────── */
.kb-card-date {
    display: block;
    margin-top: 8px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Пустое состояние ───────────────────── */
.kb-archive-empty {
    padding: 48px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-base);
}

/* ── Мобильный (1 колонка для всех тиров) ─── */
@media (max-width: 767px) {
    .kb-materials-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kb-material-card--feature,
    .kb-material-card--mid,
    .kb-material-card--compact {
        grid-column: span 1;
    }

    .kb-material-card--feature .kb-card-title {
        font-size: var(--text-xl);
    }

    .kb-archive-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .kb-filter-group {
        min-width: 0;
    }
}

/* =========================================================
   Play-оверлей на карточках видео (archive-kb_video.php)
   ========================================================= */

.kb-archive-page--video .kb-card-thumbnail {
    position: relative;
}

.kb-archive-page--video .kb-card-thumbnail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='8,5 19,12 8,19' fill='%23255D96'/></svg>");
    background-repeat: no-repeat;
    background-position: 54% center;
    background-size: 40% 40%;
    pointer-events: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.kb-archive-page--video .kb-material-card:hover .kb-card-thumbnail::after {
    background-color: rgba(255, 255, 255, 0.95);
    transform: translate(-50%, -50%) scale(1.08);
}

.kb-archive-page--video .kb-material-card--compact .kb-card-thumbnail::after {
    width: 32px;
    height: 32px;
}

/* =========================================================
   Иконка поиска в primary menu (utility-элемент, не CTA)
   ========================================================= */

.kb-menu-search .kb-menu-search-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--text-body);
    transition: color 0.15s;
}

.kb-menu-search .kb-menu-search-link:hover,
.kb-menu-search .kb-menu-search-link:focus {
    color: var(--color-blue-400);
}

.kb-menu-search .kb-icon {
    display: block;
}

/* =========================================================
   Страница глобального поиска (search.php)
   ========================================================= */

.kb-search-page {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 32px var(--page-px) 80px;
}

.kb-search-header {
    margin-bottom: 24px;
}

.kb-search-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--text-heading);
    margin: 0;
}

.kb-search-form {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    padding: 20px;
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
}

.kb-search-input {
    flex: 1;
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-page);
    color: var(--text-heading);
    outline: none;
    transition: border-color 0.15s;
}

.kb-search-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.kb-search-input:focus {
    border-color: var(--color-blue-400);
}

.kb-search-submit {
    padding: 12px 24px;
    background: var(--btn-primary-bg);
    color: var(--color-neutral-0);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.kb-search-submit:hover {
    background: var(--btn-primary-bg-hover);
}

/* =========================================================
   Локальный поиск в формах фильтров архивов
   (archive-kb_material.php, archive-kb_video.php)
   ========================================================= */

.kb-filter-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 240px;
    min-width: 240px;
}

.kb-filter-search label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 500;
}

.kb-filter-search input[type="search"] {
    padding: 8px 12px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-page);
    color: var(--text-heading);
    outline: none;
    transition: border-color 0.15s;
}

.kb-filter-search input[type="search"]:focus {
    border-color: var(--color-blue-400);
}

.kb-filter-search input[type="search"]::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

@media (max-width: 767px) {
    .kb-search-form {
        flex-direction: column;
    }
    .kb-search-submit {
        width: 100%;
    }
    .kb-filter-search {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* =========================================================
   404 — страница не найдена (404.php)
   Узкий блок с мягким градиентом, eyebrow, h1, форма поиска,
   разделитель и 4 outlined-карточки в ряд (2×2 на mobile).
   ========================================================= */

.kb-404 {
    background: linear-gradient(
        180deg,
        var(--bg-page) 0%,
        var(--bg-tinted) 100%
    );
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.kb-404-inner {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.kb-404-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-subtle);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.kb-404-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--text-heading);
    line-height: var(--leading-tight);
    margin: 0 0 16px;
}

.kb-404-text {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    margin: 0 0 32px;
}

.kb-404 .kb-search-form {
    margin: 0 0 40px;
    text-align: left;
}

.kb-404-divider {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0 0 16px;
}

.kb-404-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.kb-404-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.kb-404-card:hover,
.kb-404-card:focus {
    background: var(--accent);
    color: var(--color-neutral-0);
}

@media (max-width: 767px) {
    .kb-404-inner {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .kb-404-cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   Юридические страницы (/legal/ и потомки)
   Класс kb-legal-page вешается через body_class в functions.php.
   Тематический H1 скрываем — название документа задаётся внутри контента
   (например, «Политика обработки персональных данных»).
   Контейнер контента — стандарт 760px по центру, как на «Обо мне».
   ========================================================= */

body.kb-legal-page .entry-header {
    display: none;
}

body.kb-legal-page .entry-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

body.kb-legal-page .kb-legal-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--text-heading);
    line-height: var(--leading-tight);
    margin: 0 0 16px;
}

/* Юридический текст — justify с переносами, чтобы избежать дыр в русском тексте.
   Заголовки (h1.kb-legal-title, h2 и т.д.) сохраняют выравнивание по левому краю. */
body.kb-legal-page .entry-content p,
body.kb-legal-page .entry-content li {
    text-align: justify;
    hyphens: auto;
}

/* На узких экранах justify даёт неприемлемые дыры даже с переносами — возвращаем left. */
@media (max-width: 480px) {
    body.kb-legal-page .entry-content p,
    body.kb-legal-page .entry-content li {
        text-align: left;
        hyphens: manual;
    }
}

/* =========================================================
   Index-страница /legal/ — оглавление по группам документов.
   Контент заливается через REST API в page 926.
   ========================================================= */

body.kb-legal-page .kb-legal-index-intro {
    margin-bottom: var(--space-xl, 48px);
}

/* Intro-параграфы НЕ justify — перекрываем общее правило для .entry-content p. */
body.kb-legal-page .kb-legal-index-intro p {
    text-align: left;
    hyphens: manual;
}

body.kb-legal-page .kb-legal-index-group {
    margin-bottom: var(--space-xl, 48px);
}

body.kb-legal-page .kb-legal-index-group-title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-subtle);
    font-weight: 500;
    margin-bottom: var(--space-md, 16px);
}

body.kb-legal-page .kb-legal-index-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-subtle, #E5E7EB);
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

body.kb-legal-page .kb-legal-index-link:first-of-type {
    border-top: 1px solid var(--border-subtle, #E5E7EB);
}

body.kb-legal-page .kb-legal-index-link:hover {
    color: var(--text-heading);
}

body.kb-legal-page .kb-legal-index-link:hover .kb-legal-index-arrow {
    transform: translateX(4px);
    color: var(--accent);
}

body.kb-legal-page .kb-legal-index-arrow {
    color: var(--text-subtle);
    transition: transform 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}


/* ==========================================================================
   SINGLE EVENT (single-kb_event.php) — лендинг события
   ========================================================================== */

.kb-event-page {
    max-width: var(--container-wide);
    width: 100%;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.kb-event {
    width: 100%;
}

/* ── Hero-cover: featured image full-width + overlay с H1 ────────────────── */

.kb-event-hero-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-subtle);
    margin: 32px 0 40px;
}

.kb-event-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.kb-event-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    display: flex;
    align-items: flex-end;
    padding: 32px 40px;
    box-sizing: border-box;
}

.kb-event-hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 48px;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Meta-wrap: meta-line, duration, lead, action ────────────────────────── */

.kb-event-meta-wrap {
    max-width: var(--container-text);
    margin: 32px auto 0;
}

.kb-event-meta-line {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-heading);
    margin: 0 0 6px;
}

.kb-event-duration {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 28px;
}

.kb-event-lead {
    background: #F8F9FA;
    border-left: 2.4px solid #29ABE2;
    padding: 20px 24px;
    border-radius: 0 8px 8px 0;
    margin: 32px 0;
    font-size: 17px;
    color: #4B5563;
    font-style: normal;
}

/* ── Hero-action: CTA-кнопка и текстовые блоки состояний ──────────────────── */

.kb-event-action {
    margin: 0 0 56px;
}

.kb-event-action:empty {
    display: none;
}

.kb-event-cta-button {
    display: inline-block;
    padding: 16px 36px;
    background: var(--accent);
    color: var(--color-neutral-0);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease, transform 0.05s ease;
}

.kb-event-cta-button:hover,
.kb-event-cta-button:focus-visible {
    background: var(--color-blue-400);
    color: var(--color-neutral-0);
}

.kb-event-cta-button:active {
    transform: translateY(1px);
}

.kb-event-action-text {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--text-body);
    background: var(--bg-subtle);
    padding: 18px 22px;
    border-radius: 8px;
    margin: 0;
}

.kb-event-action-text--live {
    background: var(--color-blue-400);
    color: var(--color-neutral-0);
    font-weight: 500;
}

.kb-event-action-text--placeholder {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border-default);
    font-style: italic;
}

/* ── Body — описание / программа (the_content) ───────────────────────────── */

.kb-event-body {
    max-width: var(--container-text);
    margin: 0 auto 64px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-body);
}

.kb-event-body h2,
.kb-event-body h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text-heading);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    line-height: 1.25;
}

.kb-event-body h2 { font-size: 26px; }
.kb-event-body h3 { font-size: 21px; }

.kb-event-body p { margin: 0 0 1.1em; }

.kb-event-body ul,
.kb-event-body ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.kb-event-body li { margin-bottom: 0.4em; }

.kb-event-body a {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.kb-event-body a:hover { color: var(--text-link-hover); }

/* ── Section title (Спикеры, FAQ) ────────────────────────────────────────── */

.kb-event-section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0 0 24px;
}

/* ── Спикеры ─────────────────────────────────────────────────────────────── */

.kb-event-speakers {
    max-width: var(--container-text);
    margin: 0 auto 64px;
}

.kb-event-speakers-list {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-body);
}

/* ── FAQ — native <details>/<summary> аккордеон ──────────────────────────── */

.kb-event-faq {
    max-width: var(--container-text);
    margin: 0 auto 64px;
}

.kb-event-faq-item {
    border-bottom: 1px solid var(--border-default);
    padding: 0;
}

.kb-event-faq-item:first-of-type {
    border-top: 1px solid var(--border-default);
}

.kb-event-faq-q {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-heading);
    padding: 18px 36px 18px 0;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: color 0.15s ease;
}

/* Скрываем нативный маркер, рисуем свой через ::after */
.kb-event-faq-q::-webkit-details-marker { display: none; }

.kb-event-faq-q::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    font-weight: 400;
    transition: transform 0.2s ease, color 0.15s ease;
}

.kb-event-faq-item[open] .kb-event-faq-q::after {
    content: '−';
    color: var(--accent);
}

.kb-event-faq-q:hover { color: var(--accent); }

.kb-event-faq-a {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
    padding: 0 0 20px;
}

.kb-event-faq-a p { margin: 0 0 0.8em; }
.kb-event-faq-a p:last-child { margin-bottom: 0; }

/* ── Mobile adjustments (≤ 767px) ────────────────────────────────────────── */

@media (max-width: 767px) {

    .kb-event-page {
        padding: 0 16px 48px;
    }

    .kb-event-hero-cover {
        border-radius: 10px;
        margin: 20px 0 28px;
    }

    .kb-event-hero-overlay {
        padding: 20px 20px;
        height: 65%;
    }

    .kb-event-hero-title {
        font-size: 26px;
        line-height: 1.2;
    }

    .kb-event-meta-wrap {
        margin-top: 24px;
    }

    .kb-event-meta-line {
        font-size: 16px;
    }

    .kb-event-duration {
        margin-bottom: 22px;
    }

    .kb-event-cta-button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 16px 24px;
    }

    .kb-event-action-text {
        font-size: 16px;
        padding: 16px 18px;
    }

    .kb-event-action,
    .kb-event-body,
    .kb-event-speakers,
    .kb-event-faq {
        margin-bottom: 44px;
    }

    .kb-event-section-title {
        font-size: 23px;
    }

    .kb-event-faq-q {
        font-size: 16px;
        padding: 16px 32px 16px 0;
    }
}


/* ==========================================================================
   ARCHIVE EVENTS (archive-kb_event.php) — /events/ со списком событий
   Reuses .kb-archive-page / .kb-archive-header / .kb-archive-title /
   .kb-archive-filters / .kb-filter-search / .kb-filter-actions /
   .kb-filter-submit / .kb-filter-reset / .kb-archive-empty
   из общей archive-секции.
   ========================================================================== */

/* ── Группы (Ближайшие / Прошедшие) ──────────────────────────────────────── */

.kb-archive-page--events .kb-event-archive-group {
    margin: 48px 0 64px;
}

.kb-archive-page--events .kb-event-archive-group:first-of-type {
    margin-top: 32px;
}

.kb-archive-page--events .kb-event-archive-group-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-default);
}

.kb-archive-page--events .kb-events-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Сетка «Ближайшие»: feature крупная сверху, mid в две колонки ────────── */

.kb-archive-page--events .kb-events-list--upcoming {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.kb-archive-page--events .kb-event-card--feature {
    grid-column: 1 / -1;
}

.kb-archive-page--events .kb-event-card--mid {
    grid-column: span 1;
}

/* ── Список «Прошедшие»: стэк строк ──────────────────────────────────────── */

.kb-archive-page--events .kb-events-list--past {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Card: feature (одна крупная сверху ближайших) ──────────────────────── */

.kb-event-card--feature {
    background: var(--bg-page);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.kb-event-card--feature:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.kb-event-card--feature .kb-event-card-thumb {
    display: block;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: var(--bg-subtle);
}

.kb-event-card--feature .kb-event-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.kb-event-card--feature:hover .kb-event-card-thumb img {
    transform: scale(1.03);
}

.kb-event-card--feature .kb-event-card-content {
    padding: 24px 28px 28px;
}

.kb-event-card--feature .kb-event-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    margin: 8px 0 12px;
}

/* ── Card: mid (под feature, две в ряд) ──────────────────────────────────── */

.kb-event-card--mid {
    background: var(--bg-page);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.kb-event-card--mid:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.kb-event-card--mid .kb-event-card-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-subtle);
}

.kb-event-card--mid .kb-event-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.kb-event-card--mid:hover .kb-event-card-thumb img {
    transform: scale(1.03);
}

.kb-event-card--mid .kb-event-card-content {
    padding: 18px 20px 22px;
}

.kb-event-card--mid .kb-event-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.25;
    margin: 6px 0 10px;
}

/* ── Card: общие элементы (eyebrow, title-link, lead, location) ──────────── */

.kb-event-card-eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.kb-event-card-sep {
    color: var(--text-subtle);
}

.kb-event-card-title a {
    color: var(--text-heading);
    text-decoration: none;
    transition: color 0.15s ease;
}

.kb-event-card-title a:hover {
    color: var(--accent);
}

.kb-event-card-lead {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0 0 10px;
}

.kb-event-card-location {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ── Card: compact (одна строка для «Прошедшие», без image) ──────────────── */

.kb-event-card--compact {
    border-bottom: 1px solid var(--border-subtle);
}

.kb-event-card--compact:first-of-type {
    border-top: 1px solid var(--border-subtle);
}

.kb-event-card-compact-link {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
    text-decoration: none;
    color: var(--text-body);
    font-family: var(--font-body);
    transition: color 0.15s ease;
}

.kb-event-card-compact-link:hover {
    color: var(--accent);
}

.kb-event-card-compact-date {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 200px;
}

.kb-event-card-compact-format {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    flex-shrink: 0;
}

.kb-event-card-compact-title {
    font-size: 16px;
    color: var(--text-heading);
    flex: 1 1 auto;
}

.kb-event-card-compact-link:hover .kb-event-card-compact-title {
    color: var(--accent);
}

.kb-event-card-compact-arrow {
    color: var(--text-subtle);
    font-size: 16px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.kb-event-card-compact-link:hover .kb-event-card-compact-arrow {
    transform: translateX(4px);
    color: var(--accent);
}

/* ── Mobile (≤ 767px) ────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    .kb-archive-page--events .kb-event-archive-group {
        margin: 36px 0 44px;
    }

    .kb-archive-page--events .kb-event-archive-group-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .kb-archive-page--events .kb-events-list--upcoming {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kb-event-card--feature .kb-event-card-thumb {
        aspect-ratio: 5 / 2;
    }

    .kb-event-card--feature .kb-event-card-content {
        padding: 18px 18px 22px;
    }

    .kb-event-card--feature .kb-event-card-title {
        font-size: 21px;
    }

    .kb-event-card--mid .kb-event-card-content {
        padding: 14px 16px 18px;
    }

    .kb-event-card--mid .kb-event-card-title {
        font-size: 17px;
    }

    .kb-event-card-compact-link {
        gap: 4px 10px;
        padding: 12px 0;
    }

    .kb-event-card-compact-date {
        min-width: 0;
        flex-basis: 100%;
        font-size: 13px;
    }

    .kb-event-card-compact-format {
        display: none;
    }

    .kb-event-card-compact-title {
        font-size: 15px;
    }
}


/* ==========================================================================
   HOME EVENTS BLOCK (front-page.php) — слайдер «Ближайшие события»
   CSS scroll-snap + IntersectionObserver-driven точки в JS.
   ========================================================================== */

.kb-home-events {
    max-width: var(--container-wide);
    width: 100%;
    margin: 0 auto;
    padding: 56px 0px 24px;
}

/* Внешний блок-ссылка над секцией событий. Выровнен по правому краю
 * в той же ширине контейнера, что и сама секция, — выглядит как
 * вложенный элемент, но семантически живёт вне <section>. */
.kb-home-events-link {
    max-width: var(--container-wide);
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    text-align: right;
}

.kb-home-events-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 24px;
}

.kb-home-events-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0;
}

.kb-home-events-all {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-link);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.kb-home-events-all:hover {
    color: var(--text-link-hover);
}

/* ── Viewport + track ────────────────────────────────────────────────────── */

/* aspect-ratio на viewport определяет высоту слота карточки. Карточка
 * внутри занимает 100% × 100% и не задаёт собственных размеров. На
 * десктопе соотношение 8:1 даёт ≈139px при ширине 1112 — карточка
 * визуально совпадает с прежним размером блока (когда сверху был
 * header с H2 «Ближайшие события»). После удаления заголовка в патче
 * 7.1 (микро) высота берётся из самой карточки. На мобиле — 16:9
 * для читаемости заголовка на узких экранах. */
.kb-home-events-viewport {
    aspect-ratio: 7 / 1;
    overflow: hidden;
}

.kb-home-events-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kb-home-events-track::-webkit-scrollbar {
    display: none;
}

/* ── Карточка ────────────────────────────────────────────────────────────── */

/* Карточка занимает 100% слота. Слот формирует track / viewport через
 * aspect-ratio выше. Сама карточка не имеет фиксированной ширины и
 * aspect-ratio — это позволяет одной карточке (single-режим) заполнить
 * весь viewport, а в multi-режиме — одна карточка на viewport со
 * scroll-snap'ом между ними. */
.kb-home-event-card {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.kb-home-event-card-link {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease;
}

.kb-home-event-card-link:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.kb-home-event-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: var(--bg-subtle);
    transition: transform 0.5s ease;
}

.kb-home-event-card-link:hover .kb-home-event-card-img {
    transform: scale(1.03);
}

.kb-home-event-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 22px;
    box-sizing: border-box;
}

.kb-home-event-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.kb-home-event-card-meta {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Вариант с одним событием (без точек, карточка центрирована) ─────────── */

/* Single-режим: одна карточка занимает весь viewport (как и в multi —
 * там просто карточка одна). Точки слайдера не выводятся (см. JS).
 * justify-content не нужен, width-override не нужен — карточка уже 100%. */

/* ── Точки-индикаторы ────────────────────────────────────────────────────── */

.kb-home-events-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
}

.kb-home-events-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--text-subtle);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.kb-home-events-dot:hover {
    background: var(--text-muted);
}

.kb-home-events-dot.is-active {
    background: var(--accent);
    transform: scale(1.4);
}

.kb-home-events-dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ── Mobile (≤ 767px) ────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    .kb-home-events {
        padding: 36px 0 16px;
    }

    .kb-home-events-link {
        padding: 0 16px;
    }

    .kb-home-events-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 0 16px;
        margin-bottom: 18px;
    }

    .kb-home-events-title {
        font-size: 22px;
    }

    .kb-home-events-track {
        gap: 12px;
        padding: 0 16px;
        scroll-padding-left: 16px;
    }

    /* На мобиле aspect viewport переключается с 14:1 на 16:9 —
     * на узких экранах низкая карточка делает заголовок нечитаемым. */
    .kb-home-events-viewport {
        aspect-ratio: 16 / 9;
    }

    .kb-home-event-card-overlay {
        height: 70%;
        padding: 16px 18px;
    }

    .kb-home-event-card-title {
        font-size: 20px;
    }

    .kb-home-event-card-meta {
        font-size: 13px;
    }

    .kb-home-events-dots {
        margin-top: 16px;
    }
}

/* ─── Primary button — переиспользуется формами и thanks-page ────────────── */

.kb-btn-primary {
    display: inline-block;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--color-neutral-0);
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.kb-btn-primary:hover,
.kb-btn-primary:focus-visible {
    background: var(--color-blue-400);
    color: var(--color-neutral-0);
}

.kb-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Форма регистрации на single-kb_event.php ──────────────────────────── */

.kb-event-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.kb-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kb-form-label {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-heading);
}

.kb-form-input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-body);
    background: var(--color-neutral-0);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.kb-form-input:focus {
    outline: none;
    border-color: var(--border-focus);
}

.kb-form-error {
    font-family: var(--font-body);
    font-size: 14px;
    color: #C0392B;
    min-height: 0;
}

.kb-form-error:empty {
    display: none;
}

.kb-form-checkbox-wrap {
    margin-top: 4px;
}

.kb-form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-body);
    cursor: pointer;
}

.kb-form-checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.kb-form-checkbox-label a {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-form-checkbox-label a:hover {
    color: var(--text-link-hover);
}

.kb-form-submit {
    margin-top: 6px;
}

.kb-form-status {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-body);
}

.kb-form-status:empty {
    display: none;
}

.kb-form-status.error {
    padding: 12px 14px;
    background: #FDECEA;
    border: 1px solid #F5C6CB;
    border-radius: 6px;
    color: #842029;
}

.kb-form-status.error a {
    color: #842029;
    text-decoration: underline;
}

.kb-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* ─── /events/{slug}/thanks/ page ────────────────────────────────────────── */

.kb-event-thanks {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 24px;
}

.kb-event-thanks-inner {
    text-align: left;
}

.kb-event-thanks-title {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text-heading);
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 20px;
}

.kb-event-thanks-text {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0 0 32px;
}

.kb-event-thanks-cta {
    margin: 0;
}

@media (max-width: 480px) {
    .kb-event-thanks {
        padding: 48px 20px;
    }
    .kb-event-thanks-title {
        font-size: 26px;
    }
    .kb-event-thanks-text {
        font-size: 16px;
    }
}

/* =========================================================
   FAQ-аккордеон на странице события (single-kb_event.php)
   Визуальные значения (border, border-radius, цвета active/hover, отступы)
   взяты из docs/reference/intensiv.html — выверены вручную, не подбираем
   заново. Отличия от референса: нет .kb-accordion-num (нумерации блоков),
   padding-left у body 16px (а не 80px, компенсация num не нужна),
   focus-outline ВИДИМЫЙ (a11y; в референсе скрыт через !important).
   ========================================================= */

.kb-event-faq {
    margin-top: 48px;
}

.kb-faq-list {
    margin-top: 24px;
}

.kb-faq-item {
    border-bottom: 1px solid #E0E6ED;
    border-radius: 8px;
    transition: border 0.15s, margin 0.15s, background 0.15s;
}

.kb-faq-item:first-of-type {
    border-top: 1px solid #E0E6ED;
}

.kb-faq-item:hover,
.kb-faq-item.is-open {
    border: 1px solid #374151;
    border-radius: 8px;
    margin: 4px 0;
    background: #fff;
}

/* Компенсация: соседний item после раскрытого не теряет свою верхнюю границу
   (раскрытый item получает свою рамку по периметру, и без этой строки
   соседний снизу выглядит без top-border). */
.kb-faq-item.is-open + .kb-faq-item {
    border-top: 1px solid #E0E6ED;
}

/* Heading-обёртка нужна для семантики (h3 внутри списка FAQ), но визуально
   она не должна добавлять собственных размеров — стиль на span.kb-faq-title. */
.kb-faq-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.kb-faq-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

/* Сбросы GeneratePress button-стилей (без них фокус/active дают рамку и фон).
   focus-visible НЕ перетираем — для него отдельное правило ниже. */
.kb-faq-btn:hover,
.kb-faq-btn:focus,
.kb-faq-btn:active {
    background: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

/* Видимый focus для клавиатурной навигации (a11y). focus-visible срабатывает
   только при tab-навигации, не при клике мышью. */
.kb-faq-btn:focus-visible {
    outline: 2px solid #255D96;
    outline-offset: -2px;
    border-radius: 6px;
}

.kb-faq-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: #0D1B2A;
    flex: 1;
    transition: color 0.15s;
}

.kb-faq-btn:hover .kb-faq-title {
    color: #255D96;
}

.kb-faq-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #9CA3AF;
    transition: transform 0.2s;
}

.kb-faq-item.is-open .kb-faq-icon {
    transform: rotate(180deg);
}

.kb-faq-body {
    display: none;
    padding: 0 16px 20px 16px;
}

.kb-faq-item.is-open .kb-faq-body {
    display: block;
}

.kb-faq-answer {
    font-family: var(--font-body);
    font-size: 15px;
    color: #374151;
    line-height: 1.65;
    margin: 0;
}

/* Стиль ссылок в ответах — синхронизирован с проектной палитрой ссылок. */
.kb-faq-answer a {
    color: #255D96;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-faq-answer a:hover {
    color: #111827;
}