/* ==========================================================================
   HyperVPN — css/blog.css
   Blog list (page head, topic filters, post grid) and the article view
   (cover panel, meta row, prose, author card, prev/next, «Другие статьи»).
   Shared atoms (.post-grid, .post-card, .avatar, .prose, .chip--toggle)
   live in css/style.css. DESIGN.md §6.4 + §5.11.
   ========================================================================== */

/* --------------------------------------------------------------------------
   List view: page head (indigo aurora, x 20 %) + filters + grid
   -------------------------------------------------------------------------- */
.blog-head{padding-top:48px}
.blog-head__text{margin-bottom:32px}
.blog-head__text h1{max-width:16ch}
.blog-filters{margin-bottom:40px}
.blog-filters .chip--toggle{height:40px;padding:0 18px}
.blog-grid .post-card{min-height:100%}
.blog-grid .post-card[hidden]{display:none!important}
@media (max-width:640px){
  .blog-head{padding-top:32px}
  .blog-head__text{margin-bottom:24px}
  .blog-filters{gap:8px;margin-bottom:28px}
  .blog-filters .chip--toggle{height:38px;padding:0 14px}
}

/* --------------------------------------------------------------------------
   Article view
   -------------------------------------------------------------------------- */
.blog-post{padding-top:32px}
.blog-post__body{display:grid;gap:24px;justify-items:start}
.blog-post__body>*{max-width:100%}

/* «← Все статьи» ghost link */
.blog-back{margin-left:-18px;color:var(--text-2)}
.blog-back .icon{width:18px;height:18px;transition:transform var(--dur-2) var(--ease-out)}
.blog-back:hover .icon{transform:translateX(-3px)}

/* cover panel 100 % × 240, radius 24, category aurora + author avatar 48 */
.post-cover{position:relative;width:100%;height:240px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg-2);overflow:hidden;isolation:isolate}
.post-cover::before{content:"";position:absolute;inset:-60% -10% -30%;background:var(--aurora,var(--aurora-coral));z-index:0;pointer-events:none}
.post-cover::after{content:"";position:absolute;left:24px;right:24px;bottom:34px;height:3px;border-radius:2px;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--lane) 0 28px,transparent 28px 44px);opacity:.7}
.post-cover .badge{position:absolute;top:16px;left:16px;z-index:1}
.post-cover .avatar{position:absolute;left:16px;bottom:16px;z-index:1;box-shadow:var(--shadow-1)}
@media (max-width:640px){
  .post-cover{height:200px;border-radius:var(--r-md)}
  .post-cover::after{left:16px;right:16px}
}

.blog-post__body h1{font-size:var(--fs-h1);max-width:20ch}
.blog-post__body h1:focus{outline:none;box-shadow:none}

/* meta row: avatar 32 · author (Onest 500 14, text-2) · date · reading (text-3 13) */
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--text-3)}
.post-meta .avatar{margin-right:2px}
.post-meta__author{font:500 14px var(--font-display);color:var(--text-2)}
.post-meta__sep{color:var(--text-4)}
.post-meta time{font-variant-numeric:tabular-nums lining-nums}

/* article body: Golos 17/1.7, h2 Onest 26, lane lists, coral blockquote bar, code chips */
.blog-post__body .prose{width:100%;max-width:none;margin-top:8px}
.blog-post__body .prose>h2:first-child{margin-top:0}
.blog-post__body .prose h2{max-width:none;font-weight:700;letter-spacing:-.02em;line-height:1.2;scroll-margin-top:calc(var(--header-h) + 24px)}
.nowrap{white-space:nowrap}
.blog-post__body .prose ol{counter-reset:item;list-style:none;padding-left:0;display:grid;gap:10px}
.blog-post__body .prose ol li{position:relative;padding-left:40px;counter-increment:item;margin:0}
.blog-post__body .prose ol li::before{content:counter(item);position:absolute;left:0;top:.15em;width:28px;height:28px;border-radius:50%;background:var(--accent-tint);color:var(--accent);font:600 14px/28px var(--font-display);text-align:center}
.blog-post__body .prose ul.lane-list li{margin:0}
.blog-post__body .prose p:last-child{margin-bottom:0}

/* author card at the end */
.post-author{display:flex;align-items:center;gap:16px;width:100%;padding:20px 24px;border-radius:var(--r-md);margin-top:16px}
.post-author__text{display:grid;gap:2px;min-width:0}
.post-author__name{font:600 16px var(--font-display);color:var(--text-1)}
.post-author__role{font-size:14px;color:var(--text-3)}
.post-author__date{margin-left:auto;font-size:13px;color:var(--text-3);white-space:nowrap}
@media (max-width:480px){.post-author__date{display:none}}

/* prev / next */
.post-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;margin-top:8px}
.post-nav__link{display:grid;gap:8px;padding:20px 22px;border-radius:var(--r-md);min-height:112px;align-content:start;text-decoration:none}
.post-nav__link--next{text-align:right;justify-items:end}
.post-nav__label{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.post-nav__label .icon{width:16px;height:16px;color:var(--accent);transition:transform var(--dur-2) var(--ease-out)}
.post-nav__link:hover .post-nav__label{color:var(--accent)}
.post-nav__link--prev:hover .post-nav__label .icon{transform:translateX(-3px)}
.post-nav__link--next:hover .post-nav__label .icon{transform:translateX(3px)}
.post-nav__title{font:600 16px/1.35 var(--font-display);color:var(--text-1);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* first/last post: no placeholder frame — the lone «next» link keeps the right column */
.post-nav__empty{display:none}
.post-nav__link--next:only-child{grid-column:2}
@media (max-width:560px){
  .post-nav{grid-template-columns:minmax(0,1fr)}
  .post-nav__link--next:only-child{grid-column:auto}
  .post-nav__link--next{text-align:left;justify-items:start}
}

/* «Другие статьи» */
.blog-post__more{margin-top:var(--section-y);padding-top:var(--s-9);border-top:1px solid var(--border)}
.blog-post__more .section-head{margin-bottom:28px}
.blog-post__more-foot{display:flex;justify-content:center;margin-top:40px}
.blog-post__more-foot .icon{width:18px;height:18px}
@media (max-width:640px){
  .blog-post{padding-top:20px}
  .blog-post__body{gap:20px}
  .blog-post__more-foot{margin-top:28px}
  .blog-post__more-foot .btn{width:100%}
}

/* view swap: article enters with a reveal (320 ms, §8) */
.blog-post.is-entering{animation:blog-enter var(--dur-3) var(--ease-out) both}
@keyframes blog-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.blog-post.is-entering{animation:none}}