/* ==========================================================================
   ЖУРНАЛ ЦЕХА (/blog/) — надстройка над styles.css + twin.css.
   Витрина статей + типографика статьи. Без JS-анимаций: страницы статики
   не тянут js/main.js (нет интро/искр), поэтому никаких .reveal здесь.
   ========================================================================== */

/* ---------- Общее полотно раздела ---------- */
.blog-main{ max-width:var(--maxw); margin:0 auto; padding:118px 20px 40px; }
@media (max-width:760px){ .blog-main{ padding-top:96px; } }

.blog-crumbs{ font-size:13px; color:var(--ink-dim); margin-bottom:18px; }
.blog-crumbs a{ color:var(--blue); }
.blog-crumbs a:hover{ text-decoration:underline; }

/* ---------- Витрина ---------- */
.blog-hero{ margin-bottom:34px; }
.blog-hero h1{ font-size:clamp(30px,5vw,44px); margin-bottom:10px; }
.blog-hero h1 .grad{
  background:linear-gradient(90deg,var(--blue-bright),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.blog-hero p{ color:var(--ink-2); max-width:640px; }

.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.blog-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-card .card-cover{
  width:calc(100% + 44px); margin:-22px -22px 4px; height:auto;
  border-radius:var(--radius) var(--radius) 0 0; display:block;
}
.blog-card .tag{
  align-self:flex-start; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); padding:4px 10px; border-radius:99px;
}
.blog-card h2{ font-size:19px; line-height:1.25; }
.blog-card h2 a:hover{ color:var(--blue); }
.blog-card p{ color:var(--ink-2); font-size:14.5px; flex:1; }
.blog-card .meta{ font-size:12.5px; color:var(--ink-dim); }

/* ---------- Статья ---------- */
.post{ max-width:760px; margin:0 auto; }
.post-head h1{ font-size:clamp(26px,4.4vw,40px); line-height:1.15; margin:8px 0 14px; }
.post-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--ink-dim); margin-bottom:26px; }

.post-hero{ width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:26px; }
.post-body{ font-size:17px; color:var(--ink-2); }
.post-body > *+*{ margin-top:1.05em; }
.post-body h2{ font-size:24px; margin-top:1.9em; color:var(--ink); }
.post-body h3{ font-size:19px; margin-top:1.5em; color:var(--ink); }
.post-body strong{ color:var(--ink); }
.post-body a{ color:var(--blue); }
.post-body a:hover{ text-decoration:underline; }
.post-body ul,.post-body ol{ padding-left:1.35em; }
.post-body li+li{ margin-top:.45em; }
.post-body blockquote{
  border-left:3px solid var(--orange); padding:10px 18px;
  background:var(--orange-soft); border-radius:0 12px 12px 0; color:var(--ink);
}
.post-body table{ width:100%; border-collapse:collapse; font-size:15px; }
.post-body th,.post-body td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; }
.post-body th{ background:var(--bg-2); color:var(--ink); font-weight:700; }
.post-table-wrap{ overflow-x:auto; }

/* TL;DR — коротко в начале */
.post-tldr{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blue);
  border-radius:12px; padding:16px 20px; box-shadow:var(--shadow);
}
.post-tldr b{ color:var(--ink); display:block; margin-bottom:6px; }

/* FAQ внутри статьи */
.post-body details{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px;
}
.post-body details+details{ margin-top:10px; }
.post-body summary{ cursor:pointer; font-weight:700; color:var(--ink); }
.post-body details p{ margin-top:10px; }

/* CTA-панель в конце статьи */
.post-cta{
  margin-top:2.2em; text-align:center;
  background:linear-gradient(150deg,var(--blue-soft),var(--orange-soft));
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px;
}
.post-cta h2{ margin:0 0 8px; font-size:22px; }
.post-cta p{ margin:0 auto 16px; max-width:520px; }

/* Низ статьи: назад в журнал */
.post-back{ margin-top:30px; font-size:14px; }
.post-back a{ color:var(--blue); }