/* STYDI-O V15 — «Журнал студии» (/zhurnal/): лента, рубрики, статья.
   Подключается метаданными страниц "css": ["zhurnal"] (build.py → extra_css). Токены и компоненты — из site.css.
   Макеты: Blog.dc.html, BlogRubric.dc.html, Article.dc.html, M-Blog, M-Article (Claude Design, 11.10.2026).
   Разделы: 1 лента и рубрики · 2 карточка · 3 пагинация · 4 статья · 5 тело статьи · 6 CTA · 7 адаптив. */

/* 1. Лента и рубрики ------------------------------------------------------- */
.zh-head{padding:40px 0 32px}
.zh-head .sec-head{margin-bottom:32px}
.zh-head h1{font-size:clamp(32px,3.6vw,48px)}
.zh-pills{gap:8px}
.zh-pill__n{margin-left:6px;color:var(--ink-3);letter-spacing:0}
.pill--on .zh-pill__n{color:rgba(255,255,255,.7)}
.zh-list{padding:32px 0 96px}
.zh-feed{row-gap:32px}
.zh-hub{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:28px 32px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:40px}
.zh-hub .h3{font-weight:400}
.zh-ask{margin-top:64px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.zh-ask .h3{font-weight:400}

/* 2. Карточка статьи — общий компонент .blogcard в site.css (IMP-21) ------------------- */

/* 3. Пагинация и «Показать ещё» --------------------------------------------- */
.zh-more{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:48px}
.zh-more [aria-busy="true"]{opacity:.6;pointer-events:none}
.zh-pager{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;font-size:14px}
.zh-pager a,.zh-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;border-radius:var(--r-xs);text-decoration:none;color:var(--ink-2)}
.zh-pager a:hover{color:var(--wine)}
.zh-pager span[aria-current]{background:var(--ink);color:var(--white)}

/* 4. Статья: шапка, обложка, сетка ------------------------------------------- */
.zh-ahead{padding:32px 0 40px}
.zh-ahead .wrap{gap:20px;max-width:1000px;margin-left:auto;margin-right:auto}
.zh-ahead h1{font-size:clamp(30px,3.4vw,46px)}
.zh-rub{text-decoration:none;align-self:flex-start;padding:14px 0;margin:-14px 0}
.zh-rub:hover{color:var(--wine-deep);text-decoration:underline}
.zh-meta{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-3);min-height:36px}
.zh-ava{width:36px;height:36px;border-radius:50%;background:var(--wine-tint);color:var(--wine);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;flex:none}
.zh-ahead .lead{margin:0;max-width:820px}
.zh-coverwrap{max-width:1000px}
.zh-cover{margin:0;aspect-ratio:21/9;max-height:460px}
.zh-cover .img{width:100%;height:100%;object-fit:cover}
.zh-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start;padding:64px 0 96px}
.zh-toc{position:sticky;top:calc(var(--hdr-h) + 24px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--hdr-h) - 48px);overflow:auto}
.zh-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.zh-toc ol a{display:block;font-size:14px;line-height:1.4;color:var(--ink-2);text-decoration:none;padding:2px 0 2px 14px;border-left:1px solid var(--line)}
.zh-toc ol a:hover{color:var(--wine);border-color:var(--wine)}
.zh-land{padding:20px;margin-top:10px;display:flex;flex-direction:column;gap:10px}

/* 5. Тело статьи ----------------------------------------------------------------- */
.zh-prose{max-width:760px}
.zh-prose p{margin:0}
.zh-prose h2{scroll-margin-top:calc(var(--hdr-h) + 16px)}
.zh-prose h3{font-weight:500}
.zh-prose strong{font-weight:500;color:var(--ink)}
.zh-prose hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:100%}
.zh-prose .table-box{margin:4px 0}
.zh-prose .table{font-size:14px;line-height:1.5}
.zh-prose .table td:first-child{color:var(--ink);font-weight:500}
.zh-prose .list{padding-left:0}
.zh-prose .note p+p{margin-top:8px}
.zh-short{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 32px;display:flex;flex-direction:column;gap:14px}
.zh-try{background:var(--paper-warm);border-left:2px solid var(--wine);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:24px 28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.zh-fig{margin:8px 0;display:flex;flex-direction:column;gap:10px}
.zh-fig .media{aspect-ratio:3/2}
.zh-fig .img{width:100%;height:100%;object-fit:cover}
.zh-fig figcaption{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.zh-prose .faq{margin-top:-4px}
.zh-prose .faq details p{padding-bottom:22px}

/* 6. CTA в середине и финальные ------------------------------------------------ */
.zh-mid{background:var(--ink);color:var(--white);border-radius:var(--r-md);padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:8px 0}
.zh-mid b{font-weight:500;font-size:17px}
.zh-mid span{color:rgba(255,255,255,.75);font-size:14px;line-height:1.55}
.zh-mid .stack{flex:1 1 320px}
.zh-finals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.zh-finals .card{display:flex;flex-direction:column;gap:14px;padding:32px;align-items:flex-start}
.zh-prose .zh-finals h2,.zh-finals .h3{font-size:20px;font-weight:400;margin:0}
.zh-finals .btn{white-space:normal}

/* 7. Адаптив --------------------------------------------------------------------- */
@media (max-width:1000px){
  .zh-layout{grid-template-columns:minmax(0,1fr);gap:40px;padding:48px 0 72px}
  .zh-toc{position:static;max-height:none}
  .zh-toc>.caps,.zh-toc ol{display:none}
  .zh-land{margin-top:0}
}
@media (max-width:640px){
  .zh-head{padding:24px 0 24px}
  .zh-pills{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .zh-pills::-webkit-scrollbar{display:none}
  .zh-pills .pill{flex:none}
  /* лента рубрик прокручивается — затухание справа подсказывает продолжение (IMP-12) */
  .zh-pills{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .zh-list{padding:16px 0 72px}
  .zh-hub{padding:24px}
  .zh-ahead{padding:20px 0 28px}
  .zh-cover{aspect-ratio:4/3}
  .zh-coverwrap{padding:0 var(--pad)}
  .zh-short{padding:22px 20px}
  .zh-try{padding:20px}
  .zh-mid{padding:24px}
  .zh-mid .btn,.zh-finals .btn{width:100%}
  .zh-finals{grid-template-columns:minmax(0,1fr)}
  .zh-finals .card{padding:24px}
  .zh-ask .cta-row{width:100%}
  .zh-ask .btn{width:100%}
}
@media (max-width:640px){
  .zh-meta>[aria-hidden="true"]:not(.zh-ava){display:none}
  .zh-meta{gap:6px 14px}
}
.zh-ask{margin-top:24px}