/* Wasilo blog (/blog, /en/blog). Plain CSS on the brand tokens; loaded only by blog pages. Lime is a fill, never text. */
.bl-wrap {
  --ink: var(--color-ink, #0E0E10); --ink-muted: var(--color-graphite, #3A3A40); --line: var(--color-line, #E4E1D8);
  --surface: #FFFFFF; --raised: #FFFFFF; --brand: var(--color-lime, #C6F432); --brand-soft: var(--color-lime-tint, #EEFCC2);
  --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  max-width: 1200px; margin-inline: auto; padding: 8px 20px 64px; color: var(--ink);
}
.bl-h1 { font-family: var(--font-display); font-weight: 800; }
.bl-prose a, .bl-byline a { color: var(--ink); text-decoration-thickness: 1.5px; }
.bl-prose a:hover { background: var(--brand-soft); }
.bl-cta { background: var(--ink) !important; color: #F7F5F0; }
.bl-cta p { color: #D6D3CA !important; }
.bl-cta .m-btn--ghost { color: #F7F5F0; border-color: rgb(247 245 240 / .4); }
.bl-preview { background: var(--color-lime, #C6F432); color: var(--color-ink, #0E0E10); text-align: center; padding: 10px; font-weight: 600; }
/* Tajrova blog: index, article and prose. Built on tajrova-ui.css tokens and tajrova-site.css header/footer. */
.bl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-muted); margin: 8px 0 12px; }
.bl-crumbs a { color: var(--ink-muted); }
.bl-h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; text-wrap: balance; }
.bl-lead { font-size: 18px; line-height: 1.8; color: var(--ink-muted); max-width: 720px; margin: 0 0 22px; }
.bl-meta { font-size: 13px; color: var(--ink-muted); margin: 0; }
.bl-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 26px; }
.bl-pills a { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 16px; text-decoration: none; color: var(--ink); background: var(--surface); font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
.bl-pills a[aria-current="page"] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.bl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bl-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--raised, #fff); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.bl-card-link:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(46, 22, 64, .10); }
.bl-card-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bl-card-img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--brand-soft); }
.bl-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.bl-card-title { font-size: 19px; line-height: 1.45; font-weight: 600; }
.bl-card-excerpt { font-size: 15px; line-height: 1.75; color: var(--ink-muted); flex: 1; }
.bl-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 32px; }
.bl-pager a { min-height: 44px; display: inline-flex; align-items: center; }
.bl-article { max-width: 1000px; margin: 0 auto; }
.bl-byline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-muted); margin: 0 0 22px; }
.bl-cover { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--brand-soft); margin-bottom: 30px; }
.bl-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: start; }
.bl-body:not(:has(.bl-toc)) { grid-template-columns: minmax(0, 1fr); }
.bl-toc { order: 2; position: sticky; top: 20px; border-inline-start: 2px solid var(--line); padding-inline-start: 16px; font-size: 14px; }
.bl-toc-title { font-weight: 600; margin: 0 0 8px; }
.bl-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bl-toc a { color: var(--ink-muted); text-decoration: none; line-height: 1.5; }
.bl-toc a:hover { color: var(--ink); text-decoration: underline; }
.bl-prose { font-size: 18px; line-height: 1.95; max-width: 720px; overflow-wrap: anywhere; }
.bl-prose h2 { font-size: 27px; line-height: 1.4; margin: 42px 0 12px; scroll-margin-top: 20px; }
.bl-prose h3 { font-size: 21px; line-height: 1.45; margin: 30px 0 10px; scroll-margin-top: 20px; }
.bl-prose p, .bl-prose ul, .bl-prose ol { margin: 0 0 18px; }
.bl-prose ul, .bl-prose ol { padding-inline-start: 24px; }
.bl-prose li { margin-bottom: 8px; }
.bl-prose a { color: var(--action); text-underline-offset: 3px; }
.bl-prose blockquote { margin: 22px 0; padding: 16px 20px; background: var(--surface); border-inline-start: 4px solid var(--brand); border-radius: var(--r-md); }
.bl-prose blockquote p:last-child { margin-bottom: 0; }
.bl-prose code { background: var(--surface); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.bl-prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.bl-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.bl-figure { margin: 28px 0; text-align: center; }
.bl-figure img { display: block; margin-inline: auto; background: var(--brand-soft); }
.bl-figure--tall img { max-width: min(100%, 360px); }
.bl-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.bl-table { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r-md); }
.bl-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bl-table th, .bl-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.bl-table th { background: var(--surface); font-weight: 600; }
.bl-table tr:last-child td { border-bottom: 0; }
.bl-note { margin: 24px 0; padding: 18px 20px; background: var(--warning-soft); border-radius: var(--r-md); }
.bl-note-title { font-weight: 600; margin: 0 0 6px; }
.bl-note p:last-child { margin-bottom: 0; }
.bl-cta { margin: 44px 0 0; padding: 28px; background: var(--brand-soft); border-radius: var(--r-lg); max-width: 720px; }
.bl-cta h2 { margin: 0 0 8px; font-size: 24px; }
.bl-cta p { margin: 0 0 18px; color: var(--ink-muted); line-height: 1.8; }
.bl-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-related { margin-top: 56px; }
.bl-related h2 { font-size: 24px; margin: 0 0 18px; }
.bl-preview { background: var(--warning); color: #1a1a1a; text-align: center; padding: 10px 16px; font-weight: 600; }
@media (max-width: 960px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-body { grid-template-columns: minmax(0, 1fr); }
  .bl-toc { order: 0; position: static; margin-bottom: 8px; }
}
@media (max-width: 760px) {
  .bl-nav { display: none; }
}
@media (max-width: 640px) {
  .bl-wrap { padding-inline: 16px; }
  .bl-h1 { font-size: 28px; line-height: 1.3; }
  .bl-lead { font-size: 17px; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-prose { font-size: 17px; }
  .bl-prose h2 { font-size: 23px; }
  .bl-cta { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .bl-card-link { transition: none; } .bl-card-link:hover { transform: none; } }
.bl-table th, .bl-table td { min-width: 7.5em; }
.bl-table th:first-child, .bl-table td:first-child { min-width: 6em; }