/* Стили контентных страниц (блог, статьи, о проекте).
   Наследует токены из style.css — подключать ПОСЛЕ него. */

.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 22px;
  background: rgba(10,17,32,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.site-nav .brand-name { font-family: var(--mono); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-decoration: none; color: var(--text); }
.site-nav .brand-name .accent { background: linear-gradient(90deg, var(--emerald), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav a { color: var(--text-dim); text-decoration: none; font-size: 13px; transition: color .15s; }
.site-nav a:hover { color: var(--brand); }
.site-nav .nav-spacer { flex: 1; }
.site-nav .nav-cta { color: var(--emerald); }

.wrap { max-width: 760px; margin: 0 auto; padding: 36px 22px 60px; }

.crumbs { font-size: 12px; color: var(--text-mute); margin-bottom: 18px; }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }

article h1, .wrap h1 {
  font-size: 30px; line-height: 1.2; font-weight: 800; color: var(--text);
  margin-bottom: 10px; letter-spacing: -.01em;
}
.lead { font-size: 16px; color: #cdd8e8; line-height: 1.6; margin-bottom: 26px; }

article h2 { font-size: 21px; font-weight: 700; color: var(--text); margin: 34px 0 12px; }
article h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 22px 0 8px; }
article p  { font-size: 15px; line-height: 1.75; color: #dbe4f2; margin: 0 0 15px; }
article ul, article ol { margin: 0 0 16px; padding-left: 22px; }
article li { font-size: 15px; line-height: 1.7; color: #dbe4f2; margin-bottom: 7px; }
article strong { color: var(--text); }
article a { color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(56,189,248,.35); }
article a:hover { border-bottom-color: var(--brand); }

.callout {
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(52,211,153,.07));
  border: 1px solid rgba(56,189,248,.25); border-left: 3px solid var(--emerald);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 22px 0;
  font-size: 14px; line-height: 1.6; color: #dbe4f2;
}
.formula {
  font-family: var(--mono); background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 18px 0;
  font-size: 14px; color: var(--emerald); overflow-x: auto;
}

/* Таблицы в статьях (тарифы, сравнение возможностей) */
.table-wrap { overflow-x: auto; margin: 18px 0; }
article table { width: 100%; border-collapse: collapse; font-size: 14px; }
article th, article td {
  padding: 9px 12px; text-align: left; color: #dbe4f2;
  border-bottom: 1px solid var(--line-soft);
}
article th {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute); white-space: nowrap;
}
article td:first-child { color: var(--text); }
article tbody tr:last-child td { border-bottom: none; }

article code {
  font-family: var(--mono); font-size: 13px; color: var(--emerald);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 4px; padding: 1px 5px;
}

.cta-box {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  margin: 34px 0 0; padding: 18px 20px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(52,211,153,.10));
  border: 1px solid rgba(56,189,248,.3); color: var(--text);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.cta-box:hover { transform: translateY(-2px); border-color: rgba(56,189,248,.6); }
.cta-box .ico { font-size: 26px; }
.cta-box b { font-size: 15px; }
.cta-box span { font-size: 12px; color: var(--text-dim); }

.promo-banner-slot { margin: 28px 0 0; min-height: 10px; }
.promo-banner-slot :is(img, iframe, a) { max-width: 100%; border-radius: var(--radius-sm); }

.disclaimer { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--text-mute); line-height: 1.6; }

/* Заголовок секции блога */
.post-section {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); margin: 30px 0 4px;
}

/* Featured-карточка — точка входа */
.post-card.featured {
  display: block; text-decoration: none; margin-top: 22px; padding: 24px;
  background: linear-gradient(135deg, rgba(52,211,153,.14), rgba(56,189,248,.08));
  border: 1px solid rgba(52,211,153,.4); border-radius: var(--radius);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.post-card.featured:hover { transform: translateY(-3px); border-color: var(--emerald); }
.post-card.featured .tag { color: var(--amber); }
.post-card.featured h2 { font-size: 22px; color: var(--text); margin: 8px 0 8px; }
.post-card.featured p { font-size: 14.5px; color: #cdd8e8; line-height: 1.6; margin: 0; }

/* Список статей */
.post-list { display: grid; gap: 14px; margin-top: 12px; }
.post-card {
  display: block; text-decoration: none; padding: 18px 20px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.post-card:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.5); }
.post-card h2 { font-size: 18px; color: var(--text); margin: 0 0 6px; }
.post-card p  { font-size: 13.5px; color: #b9c6da; line-height: 1.55; margin: 0; }
.post-card .tag { font-size: 11px; color: var(--emerald); font-family: var(--mono); }

@media (max-width: 560px) {
  article h1, .wrap h1 { font-size: 24px; }
  .site-nav { gap: 12px; flex-wrap: wrap; }
}