/* ============================================================
   BLOG — light theme section
   Наследует токены и nav/footer из ../style.css
   Здесь только то, чего нет на основном сайте
   ============================================================ */

/* ——— ЛЕНТА: светлая секция-карточка со списком статей ——— */
.blog-main {
  background: var(--bg);                 /* кремовый #F5F0E9 — как секция Work */
  margin: 20px 16px var(--gap-section);  /* отступы как у остальных секций сайта */
  border-radius: var(--r-section);
  padding: 150px var(--px) 80px;         /* сверху место под фиксированную nav-таблетку */
}
.blog-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);                  /* фиолетовый — пунктуально, как на сайте */
  display: block;
  margin-bottom: 20px;
}
.blog-title {
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.blog-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 520px;
  margin-bottom: 56px;
}

/* ——— СЕТКА КАРТОЧЕК: 3 в ряд → 2 → 1 ——— */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);            /* белая карточка на кремовом */
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(10,10,10,0.10);
}
.blog-card-img {
  aspect-ratio: 16 / 10;                 /* один формат у всех обложек — сетка не пляшет */
  overflow: hidden;
  background: var(--bg-subtle);
}
.blog-card-img img { transition: transform 0.55s cubic-bezier(0.25, 0, 0.1, 1); }
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 10px;
}
.blog-card-meta .m-dot { color: var(--accent); }
.blog-card-body h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 10px;
}
.blog-card-teaser {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mid);
}

/* ——— СТАТЬЯ: шапка ——— */
.post-hero {
  background: var(--bg);
  margin: 20px 16px var(--gap-section);
  border-radius: var(--r-section);
  padding: 150px var(--px) 64px;
}
.post-hero .back-link { color: var(--text-mid); }
.post-hero .back-link:hover { color: var(--text); }
.post-meta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 24px;
}
.post-meta .m-dot { color: var(--accent); }
.post-title {
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text);
  max-width: 900px;
}

/* ——— СТАТЬЯ: обложка ——— */
.post-cover {
  margin: 0 16px var(--gap-section);
  border-radius: var(--r-section);
  overflow: hidden;
  background: var(--bg-subtle);
}
.post-cover img {
  width: 100%;
  aspect-ratio: 21 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ——— СТАТЬЯ: тело ——— */
.post-body {
  background: var(--bg);
  margin: 0 16px var(--gap-section);
  border-radius: var(--r-section);
  padding: 80px var(--px);
}
.post-content { max-width: 720px; margin: 0 auto; }   /* узкая колонка ≈ 70 символов */
.post-content p {
  font-size: 17px;
  line-height: 1.75;
  color: #333333;
  margin-bottom: 20px;
}
.post-content h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin: 44px 0 16px;
}
.post-content h2:first-child { margin-top: 0; }
.post-content ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 20px;
}
.post-content ul li {
  font-size: 17px;
  line-height: 1.65;
  color: #333333;
  padding-left: 20px;
  position: relative;
}
.post-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.post-content a { color: var(--accent); }
.post-content a:hover { text-decoration: underline; }

/* Callout — как в кейсах */
.post-callout {
  margin: 28px 0;
  padding: 24px 28px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Фото внутри статьи: одно или пара в ряд, подпись в Space Mono */
.post-img { margin: 32px 0; }
.post-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.post-img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.post-img-caption {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-mid);
  text-align: center;
  padding-top: 12px;
}

/* Блок автора + CTA в конце статьи */
.post-author {
  max-width: 720px;
  margin: 56px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.post-author-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.post-author-info { flex: 1; min-width: 200px; }
.post-author-name { font-size: 16px; font-weight: 600; color: var(--text); }
.post-author-role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-top: 3px;
}
.post-author-cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  transition: all 0.2s;
}
.post-author-cta:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.35); }

/* Блок «ещё статьи» под статьёй */
.post-more {
  background: var(--bg-page);
  padding: 0 16px;
  margin: 0 0 var(--gap-section);
}
.post-more-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
  display: block;
  margin-bottom: 20px;
}
.post-more .blog-grid { grid-template-columns: repeat(2, 1fr); }

/* ============================================================
   МИКРО-АНИМАЦИИ — точечно
   Всё внутри prefers-reduced-motion: no-preference —
   у людей с отключёнными анимациями сайт остаётся статичным
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Каскад при загрузке: label → заголовок → подзаголовок */
  .blog-label, .post-hero .back-link { animation: blog-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .blog-title, .post-meta          { animation: blog-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both; }
  .blog-sub,  .post-title          { animation: blog-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.16s both; }
  @keyframes blog-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Появление при скролле: JS вешает .rv, при входе в кадр — .rv-in */
  .rv {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .rv-in { opacity: 1; transform: translateY(0); }

  /* Стрелка «← All Posts» уезжает влево при наведении */
  .post-hero .back-link { transition: color 0.18s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .post-hero .back-link:hover { transform: translateX(-5px); }

  /* Кнопки в блоке автора чуть приподнимаются */
  .post-author-cta:hover { transform: translateY(-2px); }

  /* Ссылки в тексте статьи: подчёркивание «дорисовывается» слева направо */
  .post-content a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s ease;
  }
  .post-content a:hover { text-decoration: none; background-size: 100% 1px; }

  /* Фото в статье мягко «оседает» из лёгкого увеличения */
  .post-img.rv img { transform: scale(1.015); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .post-img.rv-in img { transform: scale(1); }
}

/* ——— ПЛАНШЕТ ——— */
@media (max-width: 1024px) and (min-width: 769px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ——— МОБИЛА ——— */
@media (max-width: 768px) {
  .blog-main { margin: 0 8px var(--gap-section); padding: 110px 16px 48px; }
  .blog-grid { grid-template-columns: 1fr; gap: 14px; }
  .post-hero { margin: 0 8px var(--gap-section); padding: 100px 16px 40px; }
  .post-cover { margin: 0 8px var(--gap-section); }
  .post-cover img { aspect-ratio: 16 / 10; }
  .post-body { margin: 0 8px var(--gap-section); padding: 40px 20px; }
  .post-content p, .post-content ul li { font-size: 16px; }
  .post-callout { font-size: 17px; padding: 20px 22px; }
  .post-img-pair { grid-template-columns: 1fr; }
  .post-more { padding: 0 8px; }
  .post-more .blog-grid { grid-template-columns: 1fr; }
}