/* ===========================
   Базовий layout статті
   =========================== */
   
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}

.blog-article {
  /* Максимальна ширина колонки для комфортного читання */
  max-width: 760px;
  /* Центруємо статтю всередині .container */
  margin: 36px auto 40px;
}

/* Внутрішній header статті (заголовок, мета, теги, інтро) */
.blog-article header {
  margin-bottom: 24px;
}

/* ===========================
   Мета-інформація про пост
   =========================== */

/* Лінійка з датою, часом читання тощо */
.blog-article .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 13px;
  color: var(--muted); /* приглушений сірий */
  margin-bottom: 12px;
}

/* Окремі елементи в мета-лінійці (іконка + текст) */
.blog-article .post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===========================
   Теги статті
   =========================== */

.blog-article .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

/* Пігулка-таг */
.blog-article .post-tag {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  background: var(--card);
}

/* ===========================
   Заголовки
   =========================== */

/* H1 — головний заголовок статті */
.blog-article h1 {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

/* H2 — основні розділи статті */
.blog-article .post-content h2 {
  font-size: 22px;
  line-height: 1.35;
  margin: 28px 0 12px;
}

/* H3 — підрозділи всередині секції */
.blog-article .post-content h3 {
  font-size: 18px;
  line-height: 1.45;
  margin: 24px 0 10px;
}

/* ===========================
   Абзаци та базовий текст
   =========================== */

/* Інтро-абзац одразу під шапкою */
.blog-article .post-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
  margin-bottom: 20px;
}

/* Усі звичайні абзаци всередині контенту */
.blog-article .post-content p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 16px;
}

/* Футнота / службова примітка в кінці статті */
.blog-article .post-footnote {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 28px;
}

/* ===========================
   Виділення тексту
   =========================== */

/* Жирний текст для акцентів у тілі статті */
.blog-article .post-content strong {
  font-weight: 600;
}

/* Курсив — для термінів, ремарок тощо */
.blog-article .post-content em {
  font-style: italic;
}

/* ===========================
   Списки
   =========================== */

.blog-article .post-content ul,
.blog-article .post-content ol {
  margin: 0 0 18px 0;
  padding-left: 22px;  /* стандартний відступ під маркери */
  font-size: 16px;
  line-height: 1.7;
}

/* Невеликий вертикальний інтервал між елементами списку */
.blog-article .post-content li + li {
  margin-top: 4px;
}

/* ===========================
   Цитати / виділені блоки
   =========================== */

.blog-article blockquote {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.08); /* легкий сіруватий фон */
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg);
}

/* ===========================
   Код та інлайн-код
   =========================== */

/* Інлайн-код усередині тексту */
.blog-article code {
  font-family: var(--font, 'Inter'), 'Inter', sans-serif;
  font-size: 13px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.06);
}

/* Блоки коду (якщо будуть) */
.blog-article pre {
  font-family: var(--font, 'Inter'), 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.06);
  overflow-x: auto;
  margin: 16px 0;
}

/* ===========================
   Інформаційні / виділені блоки
   (використовуються як calc-info-block
   для чеклістів, нотаток тощо)
   =========================== */

.blog-article .calc-info-block {
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.06);
}

/* Заголовок всередині інформаційного блоку */
.blog-article .calc-info-block h2,
.blog-article .calc-info-block h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

/* ===========================
   Навігація по статті (prev/next)
   =========================== */

.blog-article .post-nav {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

/* Посилання навігації */
.blog-article .post-nav a {
  color: var(--accent);
  text-decoration: none;
}

.blog-article .post-nav a:hover {
  text-decoration: underline;
}

/* ===========================
   Адаптив
   =========================== */

@media (max-width: 560px) {
  .blog-article {
    margin-top: 24px;
    margin-bottom: 32px;
  }

  .blog-article h1 {
    font-size: 26px;
  }

  .blog-article .post-nav {
    flex-direction: column;
  }
}

/* ===========================
   Базові стилі зображень
   =========================== */

/* Усі картинки всередині контенту статті */
.blog-article .post-content img {
  display: block;                 /* усуває артефакти inline-картинок */
  max-width: 760px;               /* адаптивність по ширині */
  height: auto;                   /* коректне масштабування */
  border-radius: 16px;            /* як у блоків інструментів */
  margin: 24px 0;                 /* повітря зверху та знизу */
  box-shadow:
    0 4px 12px rgba(0,0,0,0.04),
    0 2px 4px rgba(0,0,0,0.03);   /* легка преміальна тінь */
  background: var(--card);        /* fallback фон, якщо png з прозорістю */
}

/* ===========================
   Підпис під зображенням
   =========================== */

/* Контейнер для картинки з підписом */
.blog-article figure {
  margin: 28px 0;
}

/* Сама картинка у figure */
.blog-article figure img {
  margin-bottom: 10px;            /* відступ перед caption */
}

/* Підпис */
.blog-article figure figcaption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

/* ===========================
   Широкі зображення (full-width)
   =========================== */

/* Якщо хочеш вставляти широкі ілюстрації */
.blog-article .img-wide {
  width: calc(100% + 48px);     /* вихід за межі контейнера */
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 0;             /* у wide виглядає чистіше */
  max-width: none;
}

/* На мобільних wide стає нормальним */
@media (max-width: 600px) {
  .blog-article .img-wide {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
  }
}

/* ===========================
   Маленькі inline-зображення
   (іконки, схемки, маленькі ілюстрації)
   =========================== */

.blog-article .img-inline {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 1.35em;               /* масштаб по висоті тексту */
  margin: 0 4px;
}

/* ===========================
   Галерея (2 або 3 зображення в ряд)
   =========================== */

.blog-article .img-row {
  display: flex;
  gap: 12px;
  margin: 24px 0;
}

.blog-article .img-row img {
  flex: 1;
  border-radius: 14px;
  height: auto;
}

/* Блок-контейнер для лід-картинки */
.blog-article .img-lead-wrapper {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* Сама картинка */
.blog-article .img-lead-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* Планшети */
@media (max-width: 900px) {
  .blog-article .img-lead-wrapper {
    max-width: 640px;
    margin-bottom: 28px;
  }
  .blog-article .img-lead-wrapper img {
    border-radius: 16px;
  }
}

/* Мобільні */
@media (max-width: 600px) {
  .blog-article .img-lead-wrapper {
    max-width: 92%;    /* Додає бокові поля */
    margin: 0 auto 24px;
  }
  .blog-article .img-lead-wrapper img {
    border-radius: 14px;
  }
}

/* Стилі для блоків з кодом - виправлена версія */
pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 24px 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

pre code {
  display: block;
  font-family: 'Courier New', Consolas, Monaco, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Мобільна версія */
@media (max-width: 768px) {
  pre {
    padding: 12px;
    font-size: 12px;
    border-radius: 6px;
    margin: 16px 0;
  }
  
  pre code {
    font-size: 11px;
    line-height: 1.5;
  }
}

/* Для дуже маленьких екранів */
@media (max-width: 480px) {
  pre {
    padding: 8px;
    margin: 12px 0;
    font-size: 10px;
  }
  
  pre code {
    font-size: 10px;
    line-height: 1.4;
  }
}