/* ============ Дополнительные стили сайта-отзовика ============ */
/* Стили блока комментариев (токены дизайн-системы) и главной страницы. */

/* ---------- Логотип-текст в шапке ---------- */
/* !important: внутри статьи дизайн-блок лежит во встроенном <style> позже <link>, иначе SVG-логотип школы перебивает текст.
   В базовом правиле .brand есть text-indent:-9999px;overflow:hidden;flex:none — их тоже надо глушить, иначе текст не виден. */
.site-header .brand,.site-header.light .brand,.site-header.is-compact .brand{
  display:inline-flex !important;align-items:center !important;width:auto !important;height:auto !important;
  aspect-ratio:auto !important;min-width:0 !important;background:none !important;padding:6px 2px !important;
  color:var(--accent) !important;font-family:var(--font-ui);font-weight:800;
  font-size:clamp(16px,2.2vw,20px) !important;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;line-height:1.2;
  text-indent:0 !important;overflow:visible !important;flex:0 0 auto !important
}
.site-header .brand:hover{color:var(--accent-lg) !important}
.site-header.is-compact .brand{font-size:15px}

/* ---------- Блок комментариев ---------- */
.wp-comments-block{margin:26px 0 4px}
.wp-comments-block .comments-title{font-family:var(--font-ui);font-weight:800;font-size:19px;margin:0 0 16px}
.comment-notes,.comment-awaiting{font-size:16px;color:var(--ink-2)}
.comments-list{margin:0 0 18px}
.comment-item{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);padding:16px 18px;margin:0 0 14px;box-shadow:0 2px 6px rgba(23,24,27,.04)}
section.alt .comment-item{background:var(--ground)}
.comment-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:6px}
.comment-author{font-family:var(--font-ui);font-weight:700;font-size:16px;color:var(--ink)}
.comment-date{font-family:var(--font-num);font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.school-reply{display:inline-block;background:var(--accent);color:#17181B;font-family:var(--font-ui);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill)}
.comment-text{font-size:16.5px;color:var(--ink-2);line-height:1.6}
.comment-reply{margin-top:10px;font-size:15px}
.comment-reply .comment-reply-link{color:var(--accent-text);text-decoration:none;font-weight:600}
.comment-reply .comment-reply-link:hover{text-decoration:underline}
.comment-form{margin-top:18px}
.comment-form p{margin:0 0 16px}
.comment-form label{display:block;font-family:var(--font-ui);font-weight:700;font-size:15px;margin-bottom:6px}
.comment-form label .required,.comment-form label .optional{font-family:var(--font-body);font-weight:500}
.comment-form label .required{color:var(--warn)}
.comment-form label .optional{color:var(--ink-3);font-size:14px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form textarea{width:100%;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r-s);padding:12px 14px;font-size:17px;line-height:1.4;color:var(--ink);outline:none;transition:border-color var(--t),box-shadow var(--t)}
.comment-form textarea{min-height:130px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--accent-lg);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent)}
.comment-form-hp{display:none !important}
.comment-form-consent .check{font-size:16px;color:var(--ink-2)}
.comment-form .submit{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;font-family:var(--font-ui);font-weight:800;font-size:16px;line-height:1;padding:14px 22px;border-radius:var(--r-s);border:1px solid transparent;cursor:pointer;text-decoration:none;background:var(--grad-btn);color:#17181B;border-color:#D9962A;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(120,70,0,.18),0 2px 4px rgba(120,70,0,.15);transition:transform var(--t) var(--ease),box-shadow var(--t)}
.comment-form .submit:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(120,70,0,.18),var(--shadow-btn)}
.comment-form .logged-in-as{font-size:16px;color:var(--ink-2)}

/* ---------- Разводящая главная ---------- */
.hub-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)) 0%,color-mix(in srgb,var(--accent) 3%,var(--ground)) 100%);padding:60px 0 56px;position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--rule);color:var(--ink)}
.hub-hero::before{content:"";position:absolute;inset:auto -8% -70% auto;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),transparent);z-index:-1;pointer-events:none}
.hub-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent-lg) 0%,var(--accent) 45%,transparent 100%)}
.hub-hero h1 em{font-style:normal;color:var(--accent-lg)}
.hub-hero .deck{color:var(--ink-2)}
.hub-cta{background:var(--grad-dark);color:var(--on-dark);border-radius:var(--r-l);padding:28px 30px;border-left:4px solid var(--accent);box-shadow:0 24px 48px -20px rgba(23,24,27,.45);margin:10px 0 26px}
.hub-cta h3{color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
.hub-cta h2{color:var(--on-dark);margin:0 0 8px}
.hub-cta p{color:var(--on-dark-2);font-size:17px}
.hub-cta .btn-row{margin-top:16px}
.hub-cta .btn-secondary{color:var(--on-dark);border-color:#3D414A}
.hub-cta .btn-secondary:hover{background:var(--dark-2);border-color:#5A5F69}
.link-row{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:17px;margin:14px 0 6px}
.link-row a{color:var(--accent-text)}
.doc-page{padding:40px 0 20px}
.doc-page h1{font-size:clamp(30px,4vw,44px)}
.doc-page .sec-sub{color:var(--ink-2);font-size:17px;max-width:76ch}

/* ---------- Главная: список записей ---------- */
.blog-index{padding:44px 0 24px}
.blog-index-head{margin-bottom:26px}
.blog-index-head .pill{margin-bottom:14px}
.blog-index-head h1{font-size:clamp(30px,4.5vw,46px);margin:0 0 10px}
.blog-index-head p{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:70ch;margin:0}
.to-razbor{margin:20px 0 0}
.blog-list{border-top:1px solid var(--rule)}
.post-item{display:flex;gap:22px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--rule)}
.post-thumb{display:block;flex:0 0 96px;width:96px;height:96px;border-radius:var(--r-m);overflow:hidden;background:var(--surface);border:1px solid var(--rule)}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{min-width:0}
.post-title{font-size:clamp(19px,2.4vw,24px);margin:0 0 6px;letter-spacing:-.01em}
.post-title a{color:var(--ink);text-decoration:none}
.post-title a:hover{color:var(--accent-lg)}
.post-meta{font-family:var(--font-num);font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:8px}
.post-excerpt{color:var(--ink-2);font-size:16.5px;line-height:1.6;margin:0 0 10px;max-width:72ch}
.post-more{color:var(--accent-text);font-weight:600;font-size:16px;text-decoration:none}
.post-more:hover{text-decoration:underline}
.post-empty{color:var(--ink-2);font-size:17px;padding:18px 0}
.pagination{display:flex;gap:8px;justify-content:center;padding:26px 0 10px;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--rule-2);border-radius:var(--r-s);color:var(--ink);text-decoration:none;font-weight:600;background:var(--surface)}
.pagination .page-numbers.current{background:var(--accent);color:#17181B;border-color:#D9962A}
.pagination .page-numbers:hover{border-color:var(--accent-lg)}
@media(max-width:640px){
  .post-item{flex-direction:column;gap:12px}
  .post-thumb{flex:0 0 auto;width:100%;max-width:220px;height:auto;aspect-ratio:1}
  .to-razbor .btn,.to-razbor .btn-lg{white-space:normal;max-width:100%;padding:14px 18px;font-size:17px;text-align:center}
}

/* ---------- Кнопка «Бесплатные интенсивы» в шапке: hover ---------- */
/* .site-header nav a:hover задаёт тёмный фон и перебивает градиент кнопки, а .btn:hover сдвигает её вверх
   — на тёмной шапке это выглядит как «сломанная» кнопка. Здесь градиент сохраняем, сдвиг убираем. */
.site-header nav a.btn-primary,.site-header nav.main a.btn-primary,.site-header .menu nav a.btn-primary{
  background:var(--grad-btn) !important
}
.site-header nav a.btn-primary:hover{
  background:var(--grad-btn) !important;
  transform:none;
  filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(120,70,0,.18),var(--shadow-btn)
}
.site-header nav a.btn-primary:active{transform:none;filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(120,70,0,.18)}
.site-header nav a.btn-primary::after{background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%)}