/* Blog art: generated post covers (frontend/blog_art.py, {% blog_cover %}) and the
   explainer diagrams (templates/landing/blog/blocks/diagram_*.html). Colours come
   from the landing.css tokens; the SVGs carry the same values as hex fallbacks. */

/* ---------- covers ---------- */
.lpb-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--lp-r); background: var(--lp-surface); }
.lpb-cover--hero { border-radius: var(--lp-r-lg); }
.lpb-cover > svg, .lpb-cover > img { width: 100%; height: 100%; display: block; object-fit: cover; }

.lpb-art .ba-fp { fill: var(--lp-primary); }
.lpb-art .ba-fp2 { fill: var(--lp-primary-2); }
.lpb-art .ba-fa { fill: var(--lp-accent); }
.lpb-art .ba-fg { fill: var(--lp-green); }
.lpb-art .ba-fr { fill: var(--lp-red); }
.lpb-art .ba-fm { fill: var(--lp-muted); }
.lpb-art .ba-ft { fill: var(--lp-text); }
.lpb-art .ba-fs { fill: var(--lp-surface); }
.lpb-art .ba-sp { stroke: var(--lp-primary); }
.lpb-art .ba-sa { stroke: var(--lp-accent); }
.lpb-art .ba-sm { stroke: var(--lp-muted); }
.lpb-art .ba-st { stroke: var(--lp-text); }
.lpb-art .ba-cp { stop-color: var(--lp-primary); }
.lpb-art .ba-ca { stop-color: var(--lp-accent); }
.lpb-art .ba-cr { stop-color: var(--lp-red); }
.lpb-art .ba-cs { stop-color: var(--lp-surface); }
.lpb-art .ba-cb { stop-color: var(--lp-bg); }

/* ---------- diagrams ---------- */
.lpb-diagram {
  margin: var(--lp-sp-6) 0; padding: var(--lp-sp-5);
  background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-r);
}
.lpb-diagram .dg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lpb-diagram figcaption { margin-top: var(--lp-sp-4); color: var(--lp-muted); font-size: var(--lp-fs-sm); line-height: 1.55; }
.dg-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--lp-sp-5); }
@media (max-width: 560px) { .lpb-diagram { padding: var(--lp-sp-4); } }

/* 22 user units stays at 12px or more with the 520-wide view boxes on a 360px screen. */
.lpb-diagram text { font-family: var(--lp-font); font-size: 22px; fill: var(--lp-text); }
.lpb-diagram .dg-label--title { font-weight: 600; }
.lpb-diagram .dg-label--sub { font-size: 18px; }
.lpb-diagram .dg-label--muted, .lpb-diagram .dg-label--muted text { fill: var(--lp-muted); }
.lpb-diagram .dg-label--accent { fill: var(--lp-accent); }

.lpb-diagram .dg-axis { stroke: var(--lp-muted); opacity: .6; }
.lpb-diagram .dg-bar--pos { fill: var(--lp-green); }
.lpb-diagram .dg-bar--neg { fill: var(--lp-red); }
.lpb-diagram .dg-flip { stroke: var(--lp-accent); }
.lpb-diagram .dg-spot, .lpb-diagram .dg-leader { stroke: var(--lp-text); }
.lpb-diagram .dg-spot-head, .lpb-diagram .dg-spot-dot, .lpb-diagram .dg-dot { fill: var(--lp-text); }
.lpb-diagram .dg-curve { stroke: var(--lp-accent); }
.lpb-diagram .dg-bubble { fill: var(--lp-primary); stroke: var(--lp-accent); }
.lpb-diagram .dg-arrow--pos { stroke: var(--lp-green); }
.lpb-diagram .dg-arrow--neg { stroke: var(--lp-red); }
.lpb-diagram .dg-arrow-head--pos { fill: var(--lp-green); }
.lpb-diagram .dg-arrow-head--neg { fill: var(--lp-red); }

/* Reveal: only with JS (landing.js adds .is-in to [data-lp-reveal]) and motion allowed;
   otherwise every diagram is static and complete. */
@media (prefers-reduced-motion: no-preference) {
  html.js .lpb-diagram[data-lp-reveal] .dg-grow {
    transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%;
    transition: transform .7s var(--lp-ease) .1s;
  }
  html.js .lpb-diagram[data-lp-reveal] .dg-bar--neg .dg-grow { transform-origin: 50% 0; }
  html.js .lpb-diagram[data-lp-reveal] .dg-grow:nth-child(2n) { transition-delay: .18s; }
  html.js .lpb-diagram[data-lp-reveal] .dg-grow:nth-child(3n) { transition-delay: .26s; }
  html.js .lpb-diagram[data-lp-reveal] .dg-draw {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s var(--lp-ease) .15s;
  }
  html.js .lpb-diagram[data-lp-reveal] .dg-pop {
    transform: scale(0); transform-box: fill-box; transform-origin: center;
    transition: transform .5s var(--lp-ease) .6s;
  }
  html.js .lpb-diagram[data-lp-reveal].is-in .dg-grow,
  html.js .lpb-diagram[data-lp-reveal].is-in .dg-pop { transform: none; }
  html.js .lpb-diagram[data-lp-reveal].is-in .dg-draw { stroke-dashoffset: 0; }
}