/* Блог v2: /{locale}/blog и /{locale}/blog/{slug}. Подключается только там (@push('head')), Vite не пересобираем.
   Общие куски — в jc-components.css (layouts): кнопки .jc-btn, .jc-d/.jc-m, чипы .jc-chip, вставка .jc-promo,
   призыв в конце статьи .jp-cta/.jp-steps, пагинация .jc-pg, иконки .jc-i. Здесь их не повторяем. */

/* Отступы страницы списка (в сборке Tailwind нет pb-10 и md:pt-8) */
.jb-page{padding-top:24px;padding-bottom:40px}
@media (min-width:768px){.jb-page{padding-top:32px}}

/* ===== Список ===== */
.jb-head{margin:4px 0 16px}
.jb-head h1{margin:0;font:800 30px/1.1 Nunito,Inter,sans-serif;color:#17171f;letter-spacing:-.01em}
.jb-head p{margin:8px 0 0;font-size:15px;line-height:1.5;color:#5b6169;max-width:40rem}
.jb-head .jb-head__note{margin-top:12px;font-size:12px;color:#9ca3af}
@media (min-width:768px){.jb-head{margin:8px 0 20px}.jb-head h1{font-size:40px}.jb-head p{font-size:16px}}

.jb-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.jb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){.jb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.jb-card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(16,24,40,.06);border:1.5px solid transparent;transition:border-color .15s,box-shadow .15s}
.jb-card:hover{border-color:#e2e3ea;box-shadow:0 8px 22px rgba(16,24,40,.08)}
.jb-card:focus-visible{outline:2px solid #00708a;outline-offset:2px}

/* Обложка: цвет рубрики + значок (partials/blog_cover); если у статьи есть cover — картинка */
.jb-cover{position:relative;height:150px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.jb-cover:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 1.5px,transparent 1.6px);background-size:18px 18px;opacity:.7}
.jb-cover:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-70px;bottom:-140px;background:var(--c);opacity:.35}
.jb-cover__ic{position:relative;z-index:1;width:72px;height:72px;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--c2);box-shadow:0 6px 18px rgba(0,0,0,.08);transform:rotate(-6deg)}
.jb-cover__ic svg{width:40px;height:40px}
.jb-cover__tag{position:absolute;z-index:1;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);font:700 12.5px/1 Inter,sans-serif;color:#17171f}
.jb-cover__tag i{width:8px;height:8px;border-radius:50%;background:var(--c2);display:block}
.t-cb{--bg:linear-gradient(135deg,#FFF3C4 0%,#FFD95C 100%);--c:#FFC629;--c2:#C98F00}
.t-code{--bg:linear-gradient(135deg,#DDF8FE 0%,#7FE3F8 100%);--c:#0BCDF3;--c2:#0094B5}
.t-tips{--bg:linear-gradient(135deg,#FFE3F1 0%,#FF9ACB 100%);--c:#FF0583;--c2:#D6006B}
.jb-cover--img:before,.jb-cover--img:after{display:none}
.jb-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.jb-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.jb-body h2{margin:0;font-weight:700;font-size:17px;line-height:1.3;color:#17171f}
.jb-body p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#5b6169;flex:1}
.jb-meta{margin-top:12px;font-size:12.5px;color:#8a8f98}

/* Главная статья */
.jb-feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.jb-feat .jb-cover{height:auto;min-height:260px}
.jb-feat .jb-cover__ic{width:112px;height:112px;border-radius:28px}
.jb-feat .jb-cover__ic svg{width:62px;height:62px}
.jb-feat .jb-body{padding:30px 32px;justify-content:center}
.jb-feat .jb-body h2{font:800 27px/1.2 Nunito,Inter,sans-serif}
.jb-feat .jb-body p{flex:none;font-size:15.5px;margin-top:10px}
.jb-feat .jb-meta{margin:0 0 10px}
.jb-read{margin-top:18px;display:inline-flex;align-items:center;gap:4px;color:#d6006b;font-weight:700;font-size:15px}
.jb-read .jc-i{width:16px;height:16px}
/* ar: у главной карточки подпись и «Читать статью» с dir="auto" — стрелка смотрит по ходу чтения */
.jb-read:dir(rtl) .jc-i{transform:scaleX(-1)}

/* Телефон: строки-список с маленькой обложкой */
@media (max-width:639.98px){
  .jb-card:not(.jb-feat){flex-direction:row;align-items:stretch}
  .jb-card:not(.jb-feat) .jb-cover{flex:none;width:92px;height:auto;min-height:100%}
  .jb-card:not(.jb-feat) .jb-cover__ic{width:48px;height:48px;border-radius:14px}
  .jb-card:not(.jb-feat) .jb-cover__ic svg{width:26px;height:26px}
  .jb-card:not(.jb-feat) .jb-cover__tag,.jb-card:not(.jb-feat) .jb-cover:after{display:none}
  .jb-card:not(.jb-feat) .jb-body{padding:12px 14px}
  .jb-card:not(.jb-feat) .jb-body h2{font-size:15.5px}
  .jb-card:not(.jb-feat) .jb-body p{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .jb-card:not(.jb-feat) .jb-meta{margin-top:6px}
  .jb-feat{grid-template-columns:1fr}
  .jb-feat .jb-cover{min-height:140px}
  .jb-feat .jb-cover__ic{width:76px;height:76px;border-radius:22px}.jb-feat .jb-cover__ic svg{width:42px;height:42px}
  .jb-feat .jb-body{padding:16px 18px 18px}
  .jb-feat .jb-body h2{font-size:21px}
  .jb-feat .jb-body p{font-size:14.5px}
  .jb-read{margin-top:12px}
}

/* Вставка-призыв в сетке: на ПК — карточка в ячейке, на 640–1023 — во всю строку */
.jb-grid .jc-promo{margin:0}
/* В две колонки вставка во всю строку оставляла пустую ячейку перед собой — её занимает следующая карточка */
@media (min-width:640px) and (max-width:1023.98px){.jb-grid{grid-auto-flow:row dense}}
@media (min-width:1024px){.jb-grid .jc-promo{grid-column:auto;flex-direction:column;align-items:flex-start;justify-content:center;padding:24px}.jb-grid .jc-promo .jc-btn{width:100%}
  /* Сразу за главной статьёй (в рубрике одна статья) карточка осталась бы одна в первой колонке — во всю строку */
  .jb-grid .jb-feat+.jc-promo{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;padding:18px 22px}
  .jb-grid .jb-feat+.jc-promo .jc-btn{width:auto}}

/* Разнообразие обложек одной рубрики: пятно и наклон значка зависят от позиции */
.jb-card:nth-child(3n+1) .jb-cover:after{right:auto;left:-80px;bottom:-150px}
.jb-card:nth-child(3n+2) .jb-cover:after{bottom:auto;top:-160px;right:-40px}
.jb-card:nth-child(2n) .jb-cover__ic{transform:rotate(5deg)}

/* ===== Статья ===== */
/* Другие языки — свёрнутый <details> */
.jp-langs{margin-top:20px;font-size:13.5px;color:#6b7280}
.jp-langs summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#3f444b}
.jp-langs summary::-webkit-details-marker{display:none}
.jp-langs summary .jc-i{width:16px;height:16px;transition:transform .15s}
.jp-langs[open] summary .jc-i{transform:rotate(180deg)}
.jp-langs div{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.jp-langs div a{padding:4px 8px;border-radius:6px;background:#fff;color:#3f444b;text-decoration:none;font-weight:600}
.jp-langs div a:hover{color:#d6006b}

/* Оформление markdown: prose в собранном CSS списки и цитаты не трогает.
   Отступы — логическими свойствами: у .post-body dir="auto", и в ar маркеры списков и черта цитаты
   должны стоять справа. В ltr это ровно прежние padding-left / border-left / text-align:left. */
.post-body { color: #374151; font-size: 17px; line-height: 1.75; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: 1.6em; font-weight: 800; color: #111827; margin-top: 1.8em; }
.post-body h3 { font-size: 1.25em; font-weight: 700; color: #111827; margin-top: 1.5em; }
.post-body ul, .post-body ol { padding-inline-start: 1.5rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: .4em; }
.post-body a { color: #ff007f; text-decoration: underline; }
.post-body a:hover { color: #d6006b; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; }
.post-body blockquote { border-inline-start: 3px solid #ffd1e8; padding-inline-start: 1rem; color: #6b7280; }
.post-body code { background: #f3f4f6; padding: .15em .35em; border-radius: 4px; font-size: .9em; }
.post-body pre { background: #1a1a24; color: #e5e7eb; padding: 1rem; border-radius: 10px; overflow-x: auto; }
.post-body pre code { background: none; padding: 0; color: inherit; }
.post-body table { width: 100%; border-collapse: collapse; }
.post-body th, .post-body td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: start; }