/* ═══════════════════════════════════════════════════════════════════════
   Sergeev Electronics — дизайн-система блога (вариант 7 «Карточки без фильтров»).
   Перенос из React-сборки в обычный CSS: компоненты там не использовали классов,
   только CSS-переменные, поэтому вся визуальная часть переносится один в один.

   ☠ВАЖНО: в исходном файле дизайн-системы переменные объявлены на :root, а базовый
   сброс правит *, body, a, img, h1-h4 ГЛОБАЛЬНО. На боевой теме это снесло бы вёрстку
   всего сайта, поэтому здесь ВСЁ ограничено контейнером .se-blog.
   ═══════════════════════════════════════════════════════════════════════ */

/* Шрифт дизайн-системы. В README он помечен как ПОДСТАНОВКА вместо шрифта темы —
   на дубле грузим его, чтобы вы увидели макет как задуман; для боя решаем отдельно. */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap");

.se-blog {
  /* ── нейтральная шкала: сайт монохромный, чёрное на белом ── */
  --se-white: #ffffff;
  --se-ink-100: #f4f4f6;
  --se-ink-150: #eeeef1;
  --se-ink-200: #e3e3e7;
  --se-ink-300: #c9c9cf;
  --se-ink-400: #9a9aa2;
  --se-ink-500: #77777f;
  --se-ink-600: #4d4d54;
  --se-ink-800: #191919;
  --se-ink-900: #0d0d0d;

  --se-red: #e5322b;
  --se-blue: #2b7cd3;
  --se-blue-soft: #eaf2fb;
  --se-green: #1eb85a;
  --se-amber: #c07f24;
  --se-amber-soft: #fdf6e9;

  --text-strong: var(--se-ink-900);
  --text-body: var(--se-ink-800);
  --text-muted: var(--se-ink-400);
  --text-link-hover: var(--se-blue);
  --surface-chip: var(--se-ink-100);
  --border-hairline: var(--se-ink-200);

  /* ── типографика ── */
  --font-core: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display-1: 44px;  --lh-display-1: 1.08;  --tr-display-1: -0.02em;
  --fs-h3: 18px;         --lh-h3: 1.33;
  --fs-body-lg: 17px;    --lh-body-lg: 1.6;
  --fs-body-sm: 14px;    --lh-body-sm: 1.5;
  --fs-caption: 13px;    --lh-caption: 1.4;
  --fs-micro: 11px;      --lh-micro: 1.3;  --tr-micro: 0.04em;

  /* ── отступы, радиусы, движение ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --container-max: 1280px;
  --container-pad: 24px;
  --gutter-grid: 20px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --ease-standard: cubic-bezier(.2,.6,.25,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms; --dur-slow: 340ms;

  /* сброс — только внутри контейнера, наружу не течёт */
  font-family: var(--font-core);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
.se-blog *, .se-blog *::before, .se-blog *::after { box-sizing: border-box; }
.se-blog img { display: block; max-width: 100%; }
.se-blog p { margin: 0; }
.se-blog ul { margin: 0; padding: 0; list-style: none; }
.se-blog a { text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }

/* ── обёртка страницы ── */
.se-blog__wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-10) var(--container-pad) var(--sp-16);
}
/* Шапка страницы = компонент PageHeading: колонка, шаг sp-3, H1 первым,
   крошки под ним. Порядок именно такой — иначе слово «Блог» в крошках
   стоит вплотную над крупным «Блог» и читается как дубль. */
.se-blog__head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-3);
}
.se-blog__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body-sm); color: var(--text-muted);
}
.se-blog__crumbs a { color: var(--text-muted); }
.se-blog__crumbs a:hover { color: var(--text-link-hover); }
.se-blog__crumbs .is-current { color: var(--se-ink-600); }
.se-blog__crumbs span[aria-hidden] { opacity: .5; }

.se-blog .se-blog__title {
  margin: 0;
  font-family: var(--font-core);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display-1);
  letter-spacing: var(--tr-display-1);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.se-blog__lead {
  max-width: 620px; margin-top: var(--sp-4);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--se-ink-600);
}

/* ☠тема захардкодила body.page-homepage на ВСЕХ страницах, и её правило
   `body.page-homepage main h2{font-size:4.5rem}` затекает в любой блок.
   Поэтому заголовки здесь объявлены с двумя классами — вес выше темы. */

/* ── сетка карточек ── */
.se-blog__grid {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-10) var(--gutter-grid);
}

/* ── карточка ── */
.se-card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.se-card__media {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--se-ink-100);
  aspect-ratio: 4 / 3;
}
.se-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.se-card:hover .se-card__media img { transform: scale(1.04); }

/* плашка рубрики — единственное, что лежит НА изображении */
.se-card__cat {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: inline-flex; align-items: center; max-width: calc(100% - var(--sp-6));
  padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--se-ink-900); color: var(--se-white);
  font-size: var(--fs-micro); line-height: 1.3; font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.se-card__meta {
  display: flex; gap: var(--sp-3); align-items: center;
  font-size: var(--fs-caption); color: var(--text-muted);
}
.se-card__meta svg { width: 15px; height: 15px; fill: currentColor; }
.se-card__meta span { display: inline-flex; align-items: center; gap: 6px; }

.se-blog .se-card__title {
  margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3);
  font-weight: var(--fw-semibold); letter-spacing: -0.01em;
}
.se-blog .se-card__title a { color: var(--text-strong); }
.se-blog .se-card__title a:hover { color: var(--text-link-hover); }

.se-card__excerpt {
  font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--se-ink-600);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ═══ ТЕГИ ═══
   Требование: не вылезать за пределы карточки и не налезать друг на друга.
   Решение: (1) лежат ПОД изображением, а не поверх; (2) число видимых ограничено
   в контроллере; (3) строка не переносится и обрезается — что не влезло, скрыто;
   (4) каждый тег сам по себе обрезается многоточием, если длинный. */
.se-card__tags {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: nowrap; overflow: hidden;
  min-width: 0; max-width: 100%;
}
.se-tag {
  flex: 0 1 auto; min-width: 0;
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  font-size: var(--fs-micro); line-height: 1.3; font-weight: var(--fw-medium);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-hairline);
  background: var(--surface-chip);
  color: var(--se-ink-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all var(--dur-fast) var(--ease-standard);
}
a.se-tag:hover { color: var(--se-ink-900); border-color: var(--se-ink-300); background: var(--se-white); }
.se-tag--more { flex: 0 0 auto; color: var(--text-muted); background: transparent; border-style: dashed; }

/* ── пагинация ── */
.se-pag { margin-top: var(--sp-12); display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.se-pag__i {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--se-ink-800);
  background: var(--se-white);
}
.se-pag__i:hover { border-color: var(--se-ink-300); }
.se-pag__i--on { background: var(--se-ink-900); border-color: var(--se-ink-900); color: var(--se-white); }

/* ── плашка «дубль» ── */
.se-blog__flag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-6); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill); background: var(--se-amber-soft);
  border: 1px solid #ecd9b0; color: var(--se-amber);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}

/* ── адаптив: те же брейкпоинты, что в дизайн-системе ── */
@media (max-width: 1024px) {
  .se-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .se-blog {
    --fs-display-1: 32px; --fs-h3: 16px;
    --fs-body-lg: 16px;
    --container-pad: 16px; --gutter-grid: 14px;
    --sp-10: 28px; --sp-12: 32px; --sp-16: 40px;
  }
  .se-blog__grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .se-blog { --fs-display-1: 28px; --container-pad: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   СТРАНИЦА СТАТЬИ (макет ArticleV7): крошки → H1 → мета → обложка →
   две колонки (текст + липкое «Содержание») → теги → автор → товары → статьи.
   ═══════════════════════════════════════════════════════════════════════ */

.se-art { --measure-article: 720px; --fs-h1: 28px; --lh-h1: 1.18; --fs-h2: 22px; --lh-h2: 1.25; }

.se-blog .se-art__title {
  margin: var(--sp-4) 0 0; max-width: 900px;
  font-size: var(--fs-display-1); line-height: var(--lh-display-1);
  letter-spacing: var(--tr-display-1); font-weight: var(--fw-bold); color: var(--text-strong);
}

.se-art__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
  margin-top: var(--sp-4); font-size: var(--fs-body-sm); color: var(--text-muted);
}
.se-art__meta span { display: inline-flex; align-items: center; gap: 6px; }
.se-art__meta svg { width: 15px; height: 15px; fill: currentColor; }
.se-art__draft {
  padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--se-amber-soft); border: 1px solid #ecd9b0; color: var(--se-amber);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
}

.se-art__hero { margin: var(--sp-6) 0 0; }
.se-art__hero img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-xl, 20px); background: var(--se-ink-100);
}
.se-art__hero figcaption {
  margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--text-muted);
}

/* ── две колонки ── */
.se-art__cols {
  margin-top: var(--sp-10);
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-10); align-items: start;
}
.se-art__main { display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0; }
.se-art__rail { position: sticky; top: 100px; }

.se-art__lead {
  max-width: var(--measure-article);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
  font-weight: var(--fw-medium); color: var(--se-ink-800);
}

/* ── содержание сбоку ── */
.se-toc { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--se-ink-100); }
.se-toc__title {
  margin: 0 0 var(--sp-3); font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: var(--tr-micro); color: var(--text-muted); font-weight: var(--fw-semibold);
}
.se-toc__list { display: flex; flex-direction: column; gap: var(--sp-2); counter-reset: se-toc; }
.se-toc__list li { counter-increment: se-toc; }
.se-toc__list a {
  display: flex; gap: var(--sp-2); font-size: var(--fs-body-sm); line-height: 1.4;
  color: var(--se-ink-600);
}
.se-toc__list a::before { content: counter(se-toc) "."; color: var(--text-muted); flex: 0 0 auto; }
.se-toc__list a:hover { color: var(--se-ink-900); }

/* ── тело статьи ── */
.se-art__body { max-width: var(--measure-article); }
.se-blog .se-art__body h2 {
  margin: var(--sp-10) 0 var(--sp-4);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.015em;
  scroll-margin-top: 100px;
}
.se-blog .se-art__body h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold);
}
.se-art__body p { margin: 0 0 var(--sp-4); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--se-ink-800); }
.se-art__body a { color: var(--se-blue); text-decoration: underline; text-underline-offset: 2px; }
.se-art__body a:hover { color: var(--se-ink-900); }
.se-art__body ul, .se-art__body ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.se-art__body ul { list-style: disc; }
.se-art__body ol { list-style: decimal; }
.se-art__body li { margin-bottom: var(--sp-2); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--se-ink-800); }
.se-art__body figure { margin: var(--sp-6) 0; }
.se-art__body figure img { width: 100%; border-radius: var(--r-lg); background: var(--se-ink-100); }
.se-art__body figcaption { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--text-muted); }
.se-art__body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--fs-body-sm); }
.se-art__body th, .se-art__body td { padding: var(--sp-3); border-bottom: 1px solid var(--border-hairline); text-align: left; }
.se-art__body th { font-weight: var(--fw-semibold); color: var(--text-strong); }
/* таблица не должна распирать колонку на узких экранах */
.se-art__body .table-wrap, .se-art__body table { display: block; overflow-x: auto; }

.se-art__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── поделиться ── */
.se-art__share { display: flex; align-items: center; gap: var(--sp-3); }
.se-art__share-label { font-size: var(--fs-caption); color: var(--text-muted); }
.se-art__share button {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-pill); border: 1px solid var(--border-hairline);
  background: var(--se-white); color: var(--se-ink-800);
}
.se-art__share button:hover { border-color: var(--se-ink-300); }
.se-art__share svg { width: 17px; height: 17px; fill: currentColor; }

/* ── автор ── */
.se-art__author {
  display: flex; gap: var(--sp-4); padding: var(--sp-5);
  border: 1px solid var(--border-hairline); border-radius: var(--r-lg);
}
.se-art__author-ava {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--se-ink-900); color: var(--se-white);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .04em;
}
.se-art__author-name { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.se-art__author-text { margin-top: 4px; font-size: var(--fs-body-sm); color: var(--se-ink-600); }

/* ── товары и другие статьи ── */
.se-strip { margin-top: var(--sp-16); }
.se-blog .se-strip__title { margin: 0 0 var(--sp-5); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.se-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter-grid); }
.se-prod { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.se-prod__media {
  display: block; border-radius: var(--r-lg); overflow: hidden;
  background: var(--se-ink-100); aspect-ratio: 1 / 1;
}
.se-prod__media img { width: 100%; height: 100%; object-fit: contain; }
.se-prod__name {
  font-size: var(--fs-body-sm); line-height: 1.4; color: var(--text-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.se-prod__price { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); }
.se-prod__stock { font-size: var(--fs-micro); color: var(--se-green); }

.se-rel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-grid); }
.se-card__media--wide { aspect-ratio: 16 / 9; }

@media (max-width: 1024px) {
  .se-art__cols { grid-template-columns: 1fr; }
  .se-art__rail { position: static; order: -1; }
  .se-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .se-art { --fs-h1: 22px; --fs-h2: 19px; }
  .se-art__hero img { aspect-ratio: 4 / 3; }
  .se-rel__grid { grid-template-columns: 1fr; }
}