/* ==========================================================================
   Kopus — explanatory visuals on the service pages (shared part)
   Each visual has its own stylesheet in assets/css/vz/{type}.css.
   Conventions:
   - the figure gets .is-visible when it scrolls into view: animations start from
     ".js .vz-figure.is-visible …"; without JavaScript the final state is shown
   - no inline style attributes (blocked by the CSP): sizes and delays are classes
   - the panel colour follows the section: paper on white sections, white on paper ones
   ========================================================================== */
.vz-head { max-width: 900px; margin-bottom: 40px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.vz-head .h2 { margin-bottom: 20px; }
.vz-head .sv-text { margin: 0; }
.vz-figure { margin: 0; min-width: 0; }
.vz-caption { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* heading beside the visual */
@media (min-width: 1000px) {
  .vz--side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; gap: clamp(40px, 5vw, 96px); align-items: center; }
  .vz--side .vz-head { margin-bottom: 0; }
}

/* card behind a visual; colour follows the section */
.vz-panel { background: var(--paper); border-radius: var(--radius); padding: 32px; padding: clamp(18px, 3vw, 44px); }
.section--paper .vz-panel { background: var(--white); }
.vz-dark { background: var(--forest); color: var(--white); border-radius: var(--radius); padding: 32px; padding: clamp(18px, 3vw, 44px); }

/* small shared pieces */
.vz-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; background: var(--mint); color: var(--forest); }
.vz-label { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
.vz-dark .vz-label { color: var(--green); }
.vz-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.vz-legend span { display: inline-flex; align-items: center; gap: 8px; }
.vz-key { width: 14px; height: 14px; border-radius: 4px; background: var(--forest); flex: none; }
.vz-key--green { background: var(--green); }
.vz-key--mint { background: var(--mint); border: 1.5px solid var(--green-2); }
.vz-key--line { height: 0; width: 26px; border-radius: 0; border-top: 2px solid var(--forest); background: none; }
.vz-key--dash { height: 0; width: 26px; border-radius: 0; border-top: 2px dashed #7d8a80; background: none; }
.vz-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }