/* Fonts (Space Grotesk/Manrope) load via <link rel="preconnect"> + <link rel="stylesheet">
   in each page's own <head> (added 2026-08-08, SEO/perf pass) — not @import here, which forces
   the browser to fetch and parse this whole file before it even discovers the font request,
   serializing an extra round trip in front of first paint on every public page. */
:root {
  --primary: #5E2B9A;
  --primary-dark: #4D237E;
  --primary-light: #ECE6F3;
  --primary-glass: rgba(94, 43, 154, .07);
  --success: #1C882D;
  --success-light: #E4F1E6;
  --orange: #E56200;
  --orange-light: #FDEADB;
  --text: #1A1A1F;
  --text-secondary: #55555c;
  --text-muted: #6e6e75;
  --bg: #F7F6F3;
  --bg-card: #ffffff;
  --border: #E4E2DC;
  --r-xs: 6px;
  --r: 12px;
  --r-lg: 18px;
  --sh: 0 1px 2px rgba(20,15,10,.04), 0 6px 16px rgba(20,15,10,.04);
  --sh-lg: 0 6px 14px rgba(20,15,10,.05), 0 20px 44px rgba(60,30,100,.08);
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --font-heading: 'Space Grotesk', var(--font);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.62; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-heading); text-wrap: balance; }
svg { display: block; }
.blog-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Nav — logo only, no wordmark ──
   Shared across every public page via templates/public_header.php (blog.php, blog_post.php,
   calc.php, landing.php) — one nav block, one place to restyle it everywhere at once. */
.blog-nav { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.blog-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; flex-wrap: wrap; row-gap: 8px; }
.blog-brand { display: flex; align-items: center; }
.blog-brand img { height: 34px; width: auto; display: block; }
/* Optional center menu — landing.php's in-page anchors, and the same 5-item menu on blog.php/
   blog_post.php (see their $publicNavLinks). Still absent on calc.php, which only passes
   brand + actions to public_header.php. */
/* 16px, not 24: guest landing has seven links plus flags, «Войти» and the trial button.
   At 24px that row is ~17px wider than the 1080px bar and the actions drop to a second line. */
.blog-nav-links { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.blog-nav-links a { white-space: nowrap; }
.blog-nav-links a:hover { color: var(--primary); }
.blog-nav-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.blog-nav-login { font-size: 13.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.blog-nav-login:hover { color: var(--primary); }

/* Mobile menu toggle — below 900px, .blog-nav-links/.blog-nav-login (above) are hidden and this
   hamburger is the only way to reach them, via the #blogNavMobileMenu panel (below) it controls.
   Only rendered by public_header.php when there's actually something to put behind it. */
.blog-nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: none; background: none; color: var(--text);
  cursor: pointer; flex-shrink: 0;
}
.blog-nav-toggle svg { width: 20px; height: 20px; }
.blog-nav-toggle-close { display: none; }
.blog-nav.is-open .blog-nav-toggle-open { display: none; }
.blog-nav.is-open .blog-nav-toggle-close { display: block; }
.blog-nav-mobile-menu { display: none; }
@media (max-width: 900px) {
  .blog-nav-links, .blog-nav-login { display: none; }
  .blog-nav-toggle { display: inline-flex; }
  .blog-nav.is-open .blog-nav-mobile-menu {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border);
  }
  .blog-nav-mobile-menu a, .blog-nav-mobile-login {
    width: 100%; padding: 9px 2px; font-size: 14.5px; font-weight: 600; color: var(--text-secondary);
  }
  .blog-nav-mobile-login { font-weight: 700; color: var(--text); border-top: 1px solid var(--border); margin-top: 2px; padding-top: 12px; }
  .blog-nav-mobile-menu a:hover, .blog-nav-mobile-login:hover { color: var(--primary); }
}
.btn-cta {
  background: var(--primary); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 10px 20px; border-radius: 100px; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(94,43,154,.25);
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(94,43,154,.32); }

/* ── Hero ── */
.blog-hero { position: relative; padding: 68px 0 52px; overflow: hidden; }
.blog-hero-decor {
  position: absolute; inset: -40% -10% auto -10%; height: 480px;
  background:
    radial-gradient(560px 320px at 12% 20%, rgba(94,43,154,.14), transparent 60%),
    radial-gradient(420px 300px at 88% 0%, rgba(229,98,0,.09), transparent 60%),
    radial-gradient(600px 360px at 50% 100%, rgba(28,136,45,.06), transparent 60%);
  pointer-events: none;
}
.blog-hero-inner { position: relative; }
.blog-eyebrow { color: var(--primary); font-weight: 800; font-size: 12.5px; letter-spacing: .7px; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.blog-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); display: inline-block; border-radius: 2px; }
.blog-hero h1 { font-size: clamp(34px, 5vw, 50px); font-weight: 700; letter-spacing: -.5px; line-height: 1.08; margin: 0 0 18px; color: var(--text); }
.blog-hero p { color: var(--text-secondary); font-size: 17px; max-width: 62ch; margin: 0; }

/* ── Featured card ── */
.blog-main { padding: 10px 24px 80px; }
.blog-empty { color: var(--text-muted); font-size: 14px; }
.price-alt-currency { font-size: 11px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }

.blog-featured {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  background: linear-gradient(155deg, var(--bg-card) 60%, var(--primary-light) 145%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 32px 34px; box-shadow: var(--sh-lg); margin-bottom: 28px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-featured:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(20,15,10,.06), 0 28px 56px rgba(60,30,100,.13); }
.blog-featured-body h2 { font-size: 25px; margin: 6px 0 10px; line-height: 1.28; }
.blog-featured-body p { font-size: 15px; color: var(--text-secondary); margin: 0 0 16px; max-width: 68ch; }
.blog-featured-badge {
  background: var(--orange-light); color: var(--orange); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; padding: 3px 10px; border-radius: 100px; margin-left: auto;
}

.blog-card-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; flex-wrap: wrap; }
.blog-cat { color: var(--primary); font-weight: 700; }
.blog-meta-dot { opacity: .5; }
.blog-time { display: inline-flex; align-items: center; gap: 5px; }
.blog-time svg { width: 13px; height: 13px; }
.blog-card-more { font-size: 13px; font-weight: 700; color: var(--primary); }

/* ── Grid ── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.blog-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px 24px 22px; box-shadow: var(--sh); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.blog-card:hover { border-color: rgba(94,43,154,.35); transform: translateY(-3px); box-shadow: var(--sh-lg); }
.blog-card h3 { font-size: 17px; margin: 0; line-height: 1.35; }
.blog-card p { font-size: 13.5px; color: var(--text-secondary); margin: 0; flex: 1; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }

/* ── Скетч-иллюстрации статей (2026-09-28) ──
   Картинка: img/blog/ill/<тема>.svg, выбор темы - blogPostIllustration() в blog_helpers.php.
   Тот же стиль, что у иллюстраций лендинга: пастельный фон и рамка с неровными скруглениями,
   будто нарисованная от руки (радиусы намеренно вне шкалы --r-*). */
.blog-ill {
  --sk-ink: #2B2838;
  aspect-ratio: 200 / 120; border: 1.5px solid var(--sk-ink); overflow: hidden;
  border-radius: 14px 17px 13px 18px / 17px 13px 18px 14px; box-shadow: 3px 4px 0 rgba(43,40,56,.08);
}
.blog-ill img { display: block; width: 100%; height: 100%; }
.blog-ill-sky { background: #EAF2FA; } .blog-ill-peach { background: #FCEEE3; } .blog-ill-mint { background: #E8F5EA; }
.blog-ill-sun { background: #FBF4DA; } .blog-ill-lav { background: #F1EBF9; } .blog-ill-rose { background: #FBEBE9; }
.blog-card-ill { margin: -6px -6px 6px; transition: transform .2s ease; }
.blog-card:hover .blog-card-ill { transform: rotate(-.6deg); }
.blog-featured-ill { width: 300px; flex-shrink: 0; border-radius: 16px 22px 14px 20px / 20px 14px 22px 16px; }
@media (max-width: 900px) { .blog-featured-ill { width: 220px; } }
@media (prefers-reduced-motion: reduce) { .blog-card-ill { transition: none; } .blog-card:hover .blog-card-ill { transform: none; } }

/* ── Footer ── */
.blog-footer { border-top: 1px solid var(--border); background: #fff; padding: 26px 0; }
.blog-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-muted); }
.blog-footer-links { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.blog-footer-links a:hover { color: var(--primary); }

@media (max-width: 640px) {
  .blog-hero { padding: 48px 0 36px; }
  .blog-featured { grid-template-columns: 1fr; padding: 24px; }
  .blog-featured-ill { width: 100%; max-width: 360px; }
  .blog-featured-body h2 { font-size: 21px; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* Блок калькулятора той же темы в конце статьи и ссылка под оглавлением (blogPostCalculator()). */
.post-calc {
  display: flex; flex-direction: column; gap: 6px; margin: 28px 0 0; padding: 18px 20px;
  border-radius: 14px; border: 1.5px solid rgba(94,43,154,.25); background: var(--primary-light, #f1ebf8);
  text-decoration: none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease;
}
.post-calc:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(94,43,154,.14); }
.post-calc-eyebrow { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--primary); }
.post-calc strong { font-family: var(--font-heading); font-size: 18px; line-height: 1.3; }
.post-calc-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.post-calc-more { font-size: 13.5px; font-weight: 700; color: var(--primary); }
.post-toc-calc { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none; }
.post-toc-calc:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .post-calc { transition: none; } .post-calc:hover { transform: none; } }
.blog-ill img[src*=".webp"] { object-fit: cover; }

/* Телефон (2026-10-17): шапка в одну строку - флаги языка в меню (templates/public_header.php,
   класс has-mobile-lang), меньше отступы. Раньше шапка занимала две строки и ~112px экрана. */
.blog-nav-mobile-lang { display: none !important; }
@media (max-width: 600px) {
  /* Зона нажатия от 44px (2026-10-17): кнопка была 38px, меню 34x34. Отступ шапки уменьшен на те же
     3px, высота шапки прежняя. Меню растет за счет отрицательного поля - по ширине места не
     прибавилось, на 320px шапка по-прежнему помещается. */
  .blog-nav-inner { padding: 7px 16px; gap: 8px; }
  .blog-nav-actions { gap: 10px; }
  .blog-nav-actions .btn-cta { padding: 9px 14px; font-size: 13px; display: inline-flex; align-items: center; min-height: 44px; }
  .blog-nav-toggle { width: 44px; height: 44px; margin: -5px; }
  .blog-brand { min-height: 44px; }
  .blog-brand img { height: 28px; }
  .blog-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .blog-nav.has-mobile-lang .blog-nav-actions .public-lang-switcher { display: none !important; }
  .blog-nav.has-mobile-lang.is-open .blog-nav-mobile-lang {
    display: flex !important; gap: 18px !important; padding: 12px 2px 4px; margin-left: 11px;
  }
}

/* Узкие телефоны (до 380px, 2026-10-17): флаги языка + "Начать бесплатно" + меню не помещались в
   320px, кнопка меню уходила за край экрана и вся страница прокручивалась вбок. */
@media (max-width: 380px) {
  /* gap 6px: на 320px логотип + кнопка + меню с gap 8px не помещались на 1px, шапка переносилась
     на две строки (121px высотой). */
  .blog-nav-inner { padding: 7px 14px; gap: 6px; }
  .blog-nav-actions { gap: 8px; }
  .blog-nav-actions .btn-cta { padding: 9px 13px; font-size: 13px; }
}

/* Телефон (2026-10-17): поля ввода не мельче 16px - иначе iOS Safari увеличивает страницу при
   нажатии в поле (вход 14px, поиск по отчетам 12.5-13px, даты на карточке товара). Тот же блок
   в style.css, css/product.css, order.css, css/blog.css, css/settings.css, css/register.css. */
@media (max-width: 600px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]):not([type=file]),
  select, textarea { font-size: 16px !important; }
}

.post-calc-mid { margin: 28px 0; }