/* Блог. Шапка, подвал, кнопки и цвета берутся из styles.css - здесь только
   то, чего на лендинге нет: лента статей и текст статьи.
   Ширина колонки текста ~68 символов: так читают, а не «пробегают глазами». */

.blog-head {
  padding: 56px 0 28px;
}

.blog-head h1 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
  max-width: 20ch;
}

.blog-lead {
  color: var(--muted, #6E6B63);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 0;
}

.blog-list { padding: 12px 0 40px; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.post-card {
  background: #fff;
  border: 1px solid #E4E1D8;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(31, 31, 29, 0.08); }

.post-card-link { display: grid; color: inherit; text-decoration: none; height: 100%; }

.post-card-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #EFEDE6;
}

.post-card-cover-empty {
  background: linear-gradient(135deg, #EFEDE6 0%, #F7E7C8 100%);
}

.post-card-body { display: grid; gap: 8px; padding: 18px 20px 20px; align-content: start; }

.post-card-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: #6E6B63;
  text-transform: uppercase;
}

.post-card-title {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.post-card-excerpt { color: #47443C; font-size: 0.95rem; }
.post-card-more { color: #A87213; font-weight: 600; font-size: 0.9rem; margin-top: 4px; }
.blog-empty { color: #6E6B63; }

.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 38px 0 0; flex-wrap: wrap; }
.pager-link { color: #1F1F1D; text-decoration: none; border: 1px solid #1F1F1D; border-radius: 999px; padding: 8px 18px; font-size: 0.92rem; }
.pager-link:hover { background: rgba(31, 31, 29, 0.06); }
.pager-pos { color: #6E6B63; font-size: 0.9rem; }

/* ---------- страница статьи ---------- */

.post-container { max-width: 760px; }

.breadcrumbs {
  font-size: 0.85rem;
  color: #6E6B63;
  padding: 30px 0 0;
}

.breadcrumbs a { color: #6E6B63; text-decoration: none; }
.breadcrumbs a:hover { color: #1F1F1D; }

.post-draft-note {
  margin: 24px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #FDF3DC;
  border: 1px solid #F5B754;
  font-size: 0.92rem;
}

.post-header { padding: 18px 0 8px; }

.post-header h1 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
}

.post-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6E6B63;
  margin: 0 0 16px;
}

.post-lead { font-size: 1.12rem; color: #47443C; margin: 0; }

.post-cover { margin: 26px 0 0; }
.post-cover img { width: 100%; height: auto; border-radius: 16px; display: block; }

.post-body { font-size: 1.06rem; line-height: 1.75; color: #26241F; padding: 6px 0 20px; }
.post-body > *:first-child { margin-top: 12px; }
.post-body p { margin: 0 0 20px; }
.post-body a { color: #A87213; text-underline-offset: 3px; }

.post-body h2 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 40px 0 14px;
}

.post-body h3 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: 1.24rem;
  line-height: 1.3;
  margin: 32px 0 12px;
}

.post-body h4 { font-size: 1.08rem; margin: 26px 0 10px; }
.post-body ul, .post-body ol { margin: 0 0 20px; padding-left: 24px; }
.post-body li { margin-bottom: 8px; }
.post-body li > ul, .post-body li > ol { margin: 8px 0 0; }
.post-body code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9em; background: #EFEDE6; padding: 2px 6px; border-radius: 5px; }
.post-body mark { background: #FBE4B0; padding: 0 3px; }

.post-figure { margin: 28px 0; }
.post-figure img { width: 100%; height: auto; border-radius: 14px; display: block; }
.post-figure figcaption, .post-embed figcaption, .post-quote figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: #6E6B63;
}

.post-quote { margin: 28px 0; padding: 0 0 0 20px; border-left: 3px solid #F5B754; }
.post-quote blockquote { margin: 0; font-size: 1.14rem; line-height: 1.6; color: #1F1F1D; }

.post-embed { margin: 28px 0; }
.post-embed-frame { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #1F1F1D; }
.post-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.post-delimiter { border: none; text-align: center; margin: 34px 0; }
.post-delimiter::before { content: "◆ ◆ ◆"; color: #C8C3B4; letter-spacing: 0.5em; font-size: 0.7rem; }

.post-related { padding: 30px 0 10px; border-top: 1px solid #E4E1D8; }
.post-related h2 { font-family: "Inter Tight", "Inter", sans-serif; font-size: 1.4rem; margin: 0 0 20px; }

/* ---------- призыв в конце ---------- */

.blog-cta { padding: 46px 0 70px; }

.blog-cta-inner {
  background: #161922;
  color: #F5F4EF;
  border-radius: 22px;
  padding: 40px 36px;
  text-align: center;
}

.blog-cta h2 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.2;
  margin: 0 0 12px;
}

.blog-cta p { color: #C9C6BE; max-width: 56ch; margin: 0 auto 22px; }
.blog-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* На тёмном фоне кнопки лендинга нечитаемы: чёрная сливается с фоном, а светлая
   даёт белое на белом. Переворачиваем обе - золото логотипа даёт контраст 9.9:1. */
.blog-cta .btn-primary { background: #F5B754; color: #161922; border-color: #F5B754; }
.blog-cta .btn-primary:hover { background: #FFC978; }
.blog-cta .btn-ghost { background: transparent; border-color: rgba(245, 244, 239, 0.55); color: #F5F4EF; }
.blog-cta .btn-ghost:hover { background: rgba(245, 244, 239, 0.12); border-color: #F5F4EF; }

/* ---------- блок «Из блога» на лендинге ---------- */

.home-blog[hidden] { display: none; }
.home-blog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.home-blog-all { color: #A87213; font-weight: 600; text-decoration: none; white-space: nowrap; }
.home-blog-all:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .blog-head { padding: 34px 0 20px; }
  .post-body { font-size: 1.02rem; }
  .blog-cta-inner { padding: 30px 22px; }
}