/* TEXPLET — блог: список, карточки, страница статьи. Подключается после texplet.css */

/* ---------- шапка раздела ---------- */
.blog-hero{padding:44px 0 6px}
.blog-hero h1{font-size:clamp(34px,5.2vw,58px);margin-bottom:14px}
.blog-hero .lead{margin-bottom:28px;max-width:720px}
.bchips{display:flex;flex-wrap:wrap;gap:8px}
.bchips a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;color:var(--muted);transition:border-color .15s,color .15s,background .15s}
.bchips a small{font-size:12px;font-weight:700;opacity:.7}
.bchips a:hover{border-color:var(--cu);color:var(--fg)}
.bchips a[aria-current]{background:var(--cu);border-color:var(--cu);color:var(--on-accent)}
.blog-list{padding:36px 0 96px}

/* ---------- карточки ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,background .2s}
.bcard:hover{border-color:var(--cu-line);transform:translateY(-3px);background:var(--s2)}
.bcard-img{display:block;aspect-ratio:16/9;background:var(--s2);overflow:hidden}
.bcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bcard:hover .bcard-img img{transform:scale(1.04)}
.bcard-noimg{background:linear-gradient(135deg,var(--s2),var(--s3))}
.bcard-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.bcard-meta{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cu)}
.bcard h2{font-size:19px;line-height:1.28;margin:0}
.bcard p{color:var(--muted);font-size:15px;line-height:1.5}
.bcard-more{margin-top:auto;padding-top:6px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.bcard-more::after{content:" →";color:var(--cu)}
.bpager{display:flex;gap:8px;justify-content:center;margin-top:44px}
.bpager a,.bpager span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r);font-weight:700;text-decoration:none}
.bpager a:hover{border-color:var(--cu);color:var(--cu)}
.bpager [aria-current]{background:var(--cu);border-color:var(--cu);color:var(--on-accent)}

/* ---------- статья ---------- */
.post{padding:26px 0 88px}
.post-head{max-width:900px;margin:0 0 30px}
.post-rubric{display:inline-block;margin-bottom:18px;padding:6px 13px;border:1px solid var(--cu-line);border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cu);text-decoration:none;transition:background .15s}
.post-rubric:hover{background:var(--cu-soft)}
.post-head h1{font-size:clamp(27px,4.1vw,46px);line-height:1.14;margin-bottom:18px;overflow-wrap:break-word}
.policy .post-head h1{font-size:clamp(19px,6vw,46px)}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 0;color:var(--muted);font-size:14px;font-weight:600}
.post-meta span+span::before{content:"·";margin:0 14px;color:var(--muted2)}
.post-cover{margin:0 0 30px;max-width:1040px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--s1)}
.post-cover img{width:100%;height:auto}

.post-tldr{max-width:780px;margin:0 0 38px;padding:20px 24px 22px;border:1px solid var(--cu-line);border-left:4px solid var(--cu);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--cu-soft),transparent 85%),var(--s1)}
.tldr-t{font-size:12px;font-weight:800;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--cu);margin-bottom:10px}
.post-tldr p{color:var(--fg);font-size:18px;line-height:1.55}
.post-tldr a{color:var(--cu)}

.post-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.post-side{min-width:0}
.toc{margin:0 0 30px;padding:18px 20px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1)}
.toc-t{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:0}
.toc li{counter-increment:t}
.toc a{display:block;position:relative;padding:7px 0 7px 28px;font-size:14.5px;line-height:1.38;color:var(--muted);text-decoration:none;transition:color .15s}
.toc a::before{content:counter(t);position:absolute;left:0;top:8px;font-family:Unbounded,sans-serif;font-size:11px;font-weight:600;line-height:1.6;color:var(--cu)}
.toc a:hover{color:var(--fg)}
.side-cta{display:none}

@media (min-width:1080px){
  .post-grid{grid-template-columns:minmax(0,780px) 300px;column-gap:76px;align-items:start}
  .post-body{grid-column:1;grid-row:1}
  .post-side{grid-column:2;grid-row:1;position:sticky;top:96px}
  .toc{padding-bottom:14px}
  .side-cta{display:grid;gap:10px;padding:20px;border:1px solid var(--cu-line);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--cu-soft),transparent 70%),var(--s1)}
  .side-cta b{font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:17px;line-height:1.22}
  .side-cta span{color:var(--muted);font-size:14.5px;line-height:1.5}
  .side-cta .btn{height:46px;margin-top:4px}
  .side-link{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--cu);text-decoration:none;white-space:nowrap}
  .side-link:hover{text-decoration:underline}
}

/* тело статьи */
.post-body{font-size:18px;line-height:1.72;color:#d3cdc4}
.post-body>*:first-child{margin-top:0}
.post-body h2{font-size:clamp(23px,2.9vw,31px);line-height:1.2;margin:54px 0 18px;scroll-margin-top:92px}
.post-body h3{font-size:20px;line-height:1.25;margin:34px 0 12px;scroll-margin-top:92px}
.post-body p{margin:0 0 18px;color:#d3cdc4}
.post-body strong{color:var(--fg);font-weight:700}
.post-body a{color:var(--cu);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(201,164,92,.45);transition:text-decoration-color .15s}
.post-body a:hover{text-decoration-color:var(--cu)}
.post-body a.btn,.post-cta a.btn,.side-cta a.btn{text-decoration:none}
.post-cta a.btn-solid,.side-cta a.btn-solid{color:var(--on-accent)}
.post-cta a.btn-solid:hover{color:var(--cu)}
.post-cta a.btn-line{color:var(--fg)}
.post-cta a.btn-line:hover{color:#111}
.post-body ul,.post-body ol{display:block;list-style:none;margin:0 0 22px;padding:0}
.post-body li{display:block;position:relative;margin:0 0 10px;padding-left:28px;color:#d3cdc4}
.post-body li ul,.post-body li ol{margin:10px 0 0}
.post-body ul>li::before{content:"";position:absolute;left:4px;top:.74em;width:7px;height:7px;margin:0;border-radius:50%;background:var(--cu)}
.post-body ol{counter-reset:o}
.post-body ol>li{counter-increment:o}
.post-body ol>li::before{content:counter(o);position:absolute;left:0;top:.2em;width:22px;height:22px;display:grid;place-items:center;border:1.5px solid var(--cu-line);border-radius:50%;font-family:Unbounded,sans-serif;font-size:11px;font-weight:600;line-height:1;color:var(--cu)}
.post-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.post-body code{padding:1px 6px;border:1px solid var(--line);border-radius:4px;background:var(--s2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;color:var(--cu-2)}
.post-body pre{margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1);overflow-x:auto;font-size:14.5px;line-height:1.55}
.post-body pre code{padding:0;border:0;background:none;color:var(--fg)}

.post-body .tbl-wrap{margin:26px 0 30px}
.post-body table{min-width:520px;font-size:15px}
.post-body td{white-space:normal;line-height:1.45}
.post-body tbody tr{cursor:default}
.post-body th{padding:12px 14px}
.post-body td{padding:12px 14px}
@media (max-width:600px){
  .post-body table{min-width:0;font-size:14px}
  .post-body th,.post-body td{padding:10px 12px}
  .post-body .tbl-stack{overflow:visible}
  .post-body .tbl-stack thead{display:none}
  .post-body .tbl-stack table,.post-body .tbl-stack tbody{display:block;width:100%}
  .post-body .tbl-stack tr{display:block;padding:12px 16px;border-top:1px solid var(--line)}
  .post-body .tbl-stack tr:first-child{border-top:0}
  .post-body .tbl-stack td{display:grid;grid-template-columns:40% 1fr;gap:10px;padding:3px 0;border:0;text-align:left!important;background:none}
  .post-body .tbl-stack td>*{justify-self:start}
  .post-body .tbl-stack td::before{content:attr(data-label);color:var(--muted);font-size:13px;line-height:1.45}
  .post-body .tbl-stack td:first-child{display:block;padding:0 0 6px;font-weight:800;font-size:15px}
  .post-body .tbl-stack td:first-child::before{display:none}
}

.post-fig{margin:32px 0}
.post-body a.fig-link{display:block;text-decoration:none;cursor:zoom-in}
.post-fig img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1)}
.post-fig figcaption{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}

.post-body blockquote.note{margin:26px 0;padding:16px 22px;border-left:3px solid var(--cu);border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--s1)}
.post-body blockquote.note p{margin:0 0 10px;font-size:17px}
.post-body blockquote.note p:last-child{margin-bottom:0}

.post-body .faq{max-width:none;margin-top:18px}
.post-body .faq summary{font-size:17px}
.post-body .faq p{margin:0;padding:0 0 20px;color:var(--muted);font-size:17px}
.post-body .faq a{color:var(--cu)}

.post-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin:54px 0 0;padding:26px 28px;border:1px solid var(--cu-line);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--cu-soft),transparent 75%),var(--s1)}
.pc-text{flex:1 1 280px;display:grid;gap:6px}
.pc-text b{font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:clamp(18px,2vw,22px);line-height:1.2}
.pc-text span{color:var(--muted);font-size:15.5px;line-height:1.5}
.pc-btns{display:flex;flex-wrap:wrap;gap:10px}

.post-rel{padding:64px 0 0;margin-top:72px;border-top:1px solid var(--line)}
.post-rel>h2{font-size:clamp(24px,3vw,32px);margin-bottom:26px}

.pv-banner{position:sticky;top:0;z-index:200;padding:10px 16px;background:var(--cu);color:#1a1408;text-align:center;font-size:14px;font-weight:700}
.pv-banner a{color:#1a1408;margin-left:10px}

@media (max-width:1000px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .bgrid{grid-template-columns:1fr;gap:18px}
  .blog-hero{padding-top:30px}
  .blog-list{padding:28px 0 72px}
  .post{padding:18px 0 64px}
  .post-body{font-size:17px;line-height:1.7}
  .post-tldr{padding:18px 18px 20px}
  .post-tldr p{font-size:17px}
  .post-cta{padding:22px 20px}
  .pc-btns{width:100%}
  .pc-btns .btn{flex:1 1 100%}
  .post-meta span+span::before{margin:0 10px}
}