/* =============================================================
 * blog.css — /blog (список статей) и /blog/{slug} (статья).
 * Поверх catalog.css. Использует общие токены Zetta.
 * ============================================================= */

/* Баннер-герой (.page-hero--banner, __bg, __scrim) и прозрачный сайдбар
   над фото живут в catalog.css. На блоге грузится только blog.css, поэтому
   подключаем catalog.css здесь — иначе баннер и стекло сайдбара не работают. */
@import url("catalog.css");

/* ── СПИСОК: сетка карточек ── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 561px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 993px) { .blog-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .blog-card:hover {
    border-color: var(--color-grey-300);
    box-shadow: 0 10px 28px rgba(20, 18, 16, 0.07);
    transform: translateY(-2px);
  }
}
.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-warm-grey);
  overflow: hidden;
}
.blog-card__badge {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgba(26, 23, 21, 0.74);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  line-height: 1;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.blog-card__badge svg { width: 12px; height: 12px; display: block; }
.blog-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
@media (hover: hover) { .blog-card:hover .blog-card__media img { transform: scale(1.04); } }
.blog-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-weight: var(--fw-semibold); letter-spacing: 0.14em;
  font-size: var(--fs-sm); color: var(--color-warm-black);
  background: linear-gradient(135deg, var(--color-warm-grey) 0%, var(--color-grey-150) 100%);
}
.blog-card__body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  flex: 1;
}
.blog-card__date { font-size: var(--fs-xs); color: var(--color-text-secondary); letter-spacing: 0.04em; }
.blog-card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.blog-card__title a { color: var(--color-text); text-decoration: none; }
@media (hover: hover) { .blog-card__title a:hover { color: var(--color-accent-text); } }
.blog-card__excerpt {
  font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-body);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   СТАТЬЯ — широкий «редакционный» макет.
   Контейнер во всю ширину контента (1185px). Медиа (обложка/видео) и
   заголовок занимают всю ширину; колонка читаемого текста центрируется
   в комфортной мере (--blog-measure) — широкое фото + аккуратный текст.
   ════════════════════════════════════════════════════════════════ */
.blog-article {
  padding-block: var(--sp-7) var(--sp-9);
  --blog-measure: 820px;     /* читаемая ширина бегущего текста */
}
/* текстовые блоки — центрированная колонка; медиа остаётся во всю ширину */
.blog-article__back,
.blog-article__head,
.blog-article__body,
.blog-article__footer {
  max-width: var(--blog-measure);
  margin-inline: auto;
}
.blog-article__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--color-text-secondary);
  text-decoration: none; margin-bottom: var(--sp-5);
}
@media (hover: hover) { .blog-article__back:hover { color: var(--color-text); } }
.blog-article__head { margin-bottom: var(--sp-6); }
.blog-article__title {
  font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.4rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  margin-top: var(--sp-3); margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.blog-article__meta {
  font-size: var(--fs-sm); color: var(--color-text-secondary);
  display: flex; align-items: center; gap: var(--sp-2);
}
.blog-article__dot { opacity: 0.5; }

/* ── ШИРОКОЕ МЕДИА (во всю ширину контейнера) ── */
.blog-article__cover {
  margin: 0 0 var(--sp-7);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-warm-grey);
  aspect-ratio: 2 / 1;                 /* широкий «киношный» кадр — фото обрежется сверху/снизу */
  box-shadow: 0 16px 44px rgba(20, 18, 16, 0.14);
}
.blog-article__cover img {
  width: 100%; height: 100%;
  object-fit: cover;                   /* кадрируем по ширине, без полей */
  object-position: center 42%;
  display: block;
}
/* видео — во всю ширину, 16:9, тёмная подложка под letterbox */
.blog-article__video {
  margin: 0 0 var(--sp-7);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-warm-black);
  aspect-ratio: 16 / 9;
  box-shadow: 0 16px 44px rgba(20, 18, 16, 0.18);
}
.blog-article__video video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: var(--color-warm-black);
}
/* встроенный плеер YouTube/RuTube */
.blog-article__video--embed iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ── ТЕКСТ + АКЦЕНТЫ ── */
.blog-article__body {
  font-size: 17.5px;
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}
.blog-article__body p { margin: 0 0 var(--sp-4); }
.blog-article__body > :last-child { margin-bottom: 0; }

/* лид — первый абзац, крупнее и весомее */
.blog-article__lead {
  font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.36rem);
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: var(--sp-5) !important;
}

/* подзаголовки */
.blog-article__h2 {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem);
  font-weight: var(--fw-medium);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: var(--sp-7) 0 var(--sp-3);
}
.blog-article__h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  margin: var(--sp-6) 0 var(--sp-2);
}

/* врезка-акцент */
.blog-article__callout {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-accent-tint);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-warm-black);
}

/* списки с коралловыми маркерами */
.blog-article__list {
  list-style: none;
  margin: var(--sp-5) 0;
  padding: 0;
}
.blog-article__list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--sp-3);
  line-height: var(--lh-body);
}
.blog-article__list li:last-child { margin-bottom: 0; }
.blog-article__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--color-accent);
}
.blog-article__list--num { counter-reset: blogitem; }
.blog-article__list--num li::before {
  content: counter(blogitem) ".";
  counter-increment: blogitem;
  left: 0; top: 0;
  width: auto; height: auto;
  background: none; border-radius: 0;
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  font-size: 0.98em;
}

.blog-article__body strong { font-weight: var(--fw-semibold); }
.blog-article__body a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) { .blog-article__body a:hover { text-decoration-thickness: 2px; } }

.blog-article__footer {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--color-grey-200);
}

@media (max-width: 768px) {
  .blog-article__cover { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .blog-article { padding-block: var(--sp-6) var(--sp-7); }
  .blog-article__body { font-size: 16.5px; }
  .blog-article__cover { aspect-ratio: 4 / 3; }
}