/* ====== БЛОГ (theme-aware через data-theme) ====== */

/* Контейнер статьи */
.post-wrap {
  max-width: 820px;
  margin: 0 auto;
}

/* Основная типографика поста */
.post-content {
  color: var(--text);
  line-height: 1.75;
  font-size: 18px;
  word-wrap: break-word;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  line-height: 1.25;
  margin: 1.6em 0 .6em;
  font-weight: 800;
}

.post-content h1 { font-size: 34px; }
.post-content h2 { font-size: 28px; border-bottom: 1px solid var(--line); padding-bottom: .3em; }
.post-content h3 { font-size: 22px; }
.post-content h4 { font-size: 18px; color: var(--muted); }

.post-content p { margin: 1em 0; }

.post-content ul,
.post-content ol {
  margin: .6em 0 1.2em 1.4em;
  padding: 0;
}
.post-content li { margin: .35em 0; }

.post-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in oklab, var(--accent) 70%, transparent);
}
.post-content a:hover { border-bottom-style: solid; }

/* Обложка и картинки */
.post-cover {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 14px;
  margin: 8px 0 18px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
}

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 16px auto;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
}

/* Таблицы */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 16px;
  background: var(--card);
}
.post-content th,
.post-content td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  color: var(--text);
}
/* Шапка таблиц в постах */
.post-content thead th {
  background: var(--table-head-bg);
  font-weight: 700;
}

/* Светлая тема */
:root[data-theme="light"] {
  --table-head-bg: color-mix(in srgb, var(--card) 90%, #000 10%);
}

/* Тёмная тема */
:root[data-theme="dark"] {
  --table-head-bg: color-mix(in srgb, var(--card) 85%, #4da3ff 15%);
}


/* Цитаты */
.post-content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  color: var(--text);
  border-radius: 8px;
}

/* Код и преформатированный текст */
.post-content code {
  background: color-mix(in oklab, var(--card) 85%, transparent);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}
.post-content pre {
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}
.post-content pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Метаданные поста */
.post-meta {
  color: var(--muted);
  font-size: 14px;
  margin: -4px 0 16px;
}

/* Карточки в списке блога */
.blog-card__cover {
  display: block;
  width: 100%;
  max-height: 380px; /* как в постах */
  object-fit: cover;
  border-radius: 14px; /* как у .post-cover */
  margin-bottom: 12px;
  background: var(--bg-soft);
  box-shadow: 0 0 0 1px var(--border);
}


/* «Назад к статьям» */
.btn.back { margin-bottom: 12px; }

/* Ограничение ширины списка блога для воздуха */
.blog-list-narrow {
  max-width: 1100px;
  margin: 0 auto;
}

/* Мелкие улучшения типографики */
.post-content hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 24px 0;
}
.post-content strong { font-weight: 800; }
.post-content em { color: var(--muted); }

/* Обложка внутри страницы поста — без обрезания */
article .post-cover {
  width: 100%;
  height: auto;        /* считаем высоту из ширины */
  max-height: none;    /* не ограничиваем высоту */
  object-fit: unset;   /* убираем cover, чтобы не кропало */
}

/* ====== Статистика поста (просмотры + лайк) ====== */
.post-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 18px;
  color: var(--muted);
}

.post-stats__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 85%, transparent);
  box-shadow: 0 0 0 1px var(--line) inset;
  font-size: 14px;
}

.post-stats__like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--card) 85%, transparent);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease;
}
.post-stats__like:hover { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent) inset; }
.post-stats__like[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 18%, var(--card)); }
.post-stats__like:active { transform: translateY(1px); }

/* ====== Статистика в карточке списка ====== */
.card-stats {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 12px; /* 🔹 отодвигаем от кнопки */
  color: var(--muted);
  font-size: 14px;
}

.card-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 85%, transparent);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.card-stat b { font-weight: 700; }

/* Если в HTML пришли "голые" таблицы от Google Docs */
.post-content table { width:100%; border-collapse: collapse; }
.post-content th, .post-content td { border:1px solid var(--line); padding:10px 12px; }

/* ====== Заметки в тексте ====== */
.post-content .note {
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  border-radius: 8px;
  margin: 16px 0;
}
.post-content .note p { margin: 0; }
.post-content .note + .note { margin-top: 12px; }

/* Варианты */
.post-content .note.important { border-color: #e74c3c; }
.post-content .note.warning   { border-color: #f39c12; }
.post-content .note.example   { border-color: #3498db; }
.post-content .note.tip       { border-color: #27ae60; }
.post-content .note.info      { border-color: #8e44ad; }

/* ===== Компактные карточки в списке блога ===== */
.features__grid .feature-card {
  padding: 12px 12px 14px;
  border-radius: 14px;
  max-width: 360px;
}

.features__grid .blog-card__cover {
  max-height: 180px;           /* было 380px */
  border-radius: 12px;
  margin-bottom: 10px;
}

.features__grid .feature-title {
  font-size: 18px;             /* компактнее */
  line-height: 1.3;
  margin: 6px 0 6px;
}

.features__grid .feature-text {
  font-size: 14px;
  line-height: 1.5;
  margin: 6px 0;
  color: var(--muted);
}

/* обрезаем описание "визуально" на 2 строки (на случай длинных слов) */
.features__grid .feature-text--compact {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* дата – ещё легче и компактнее */
.features__grid .feature-date {
  margin-top: 4px;
  font-size: 13px;
}

/* компактная кнопка "Читать" */
.features__grid .btn--compact {
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 10px;
  margin-top: 6px;
}

/* ===== Статистика в карточке списка (статичная) ===== */
.features__grid .post-stats.post-stats--list {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0 8px;
}

.features__grid .post-stats--list .post-stats__item {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 85%, transparent);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--muted);
}

/* На всякий случай: если где-то просочится .post-stats__like — прячем её в списке */
.features__grid .post-stats--list .post-stats__like {
  display: none !important;
}

/* ===== Анимация лайка ===== */
.post-stats__like {
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.post-stats__like.like-anim {
  transform: translateY(-2px) scale(1.04);
}
.post-stats__like[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 20%, var(--card));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent) inset;
}
.post-stats__like[aria-pressed="true"] span,
.post-stats__like[aria-pressed="true"] { color: var(--text); }

/* ===== Блог: адаптивная сетка без разрывов ===== */
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 1→2→3 колонки */
  gap: 24px;                 /* расстояние между карточками */
  align-items: stretch;      /* высота колонок одинакова */
}

.features__grid .feature-card {
  max-width: none;           /* убираем ограничение 360px */
  height: 100%;              /* растягиваем по колонке */
  display: flex;
  flex-direction: column;
}

.features__grid .blog-card__cover { 
  max-height: 200px;         /* компактная обложка */
}

.features__grid .btn--compact {
  margin-top: auto;          /* кнопка утыкается вниз карточки */
}

/* ===== Рубрикатор категорий ===== */
.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.categories li {
  display: inline-block;
}

.categories a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--panel, #0e1628cc);
  color: var(--text, #d7e0ff);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.categories a:hover {
  background: var(--accent, #9d7dff);
  color: #fff;
}

.categories a.active {
  background: var(--accent2, #a8ff60);
  color: #000;
  font-weight: 600;
}

/* ===== Рубрики/теги (пилюли) ===== */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 14px;
}
.filter-pill, .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  background: color-mix(in oklab, var(--card) 85%, transparent);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--text);
}
.filter-pill.is-active {
  background: color-mix(in oklab, var(--accent) 20%, var(--card));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent) inset;
}
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }

/* ===== Hover для пилюли в карточке ===== */
.feature-card .card-tags .tag-pill {
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
  cursor: pointer;
}

/* hover + клавиатурный фокус */
.feature-card .card-tags .tag-pill:hover,
.feature-card .card-tags .tag-pill:focus-visible {
  background: color-mix(in oklab, var(--accent) 18%, var(--card));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 28%, transparent) inset;
  transform: translateY(-1px);
  color: var(--text);
  outline: none; /* убираем стандартный, заменяем box-shadow-ом выше */
}

/* активное нажатие — возвращаем на место */
.feature-card .card-tags .tag-pill:active {
  transform: translateY(0);
}

/* доступность: если пользователю не нравятся анимации */
@media (prefers-reduced-motion: reduce) {
  .feature-card .card-tags .tag-pill {
    transition: none;
  }
}



/* Тюнинг на больших экранах — три колонки гарантированно */
@media (min-width: 1200px) {
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}