/* ============================================================
   CIRRUS LAKE SOLUTIONS — Diagram component
   Architecture / workflow diagram figure styling. Used on:
   - Case study detail pages (.csd-section)
   - Service detail pages with embedded diagrams
   - Anywhere else we frame an inline SVG with a caption.

   Loaded by both pages/case-study-detail.css consumers and
   pages/service-detail.css consumers (via explicit <link>).
   ============================================================ */

.csd-diagram-figure {
  margin: 0;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 28px 24px 22px;
  box-shadow: var(--shadow-sm);
}

/* Layout wrapper used on service detail pages, where the diagram lives
   inside an svc-detail-section and needs top-margin separation from the
   preceding text plus a max-width that's wider than the .svc-detail-block
   body copy. Case study detail pages don't need this — their .csd-section
   container handles widths differently. */
.svc-diagram-wrap {
  margin: 36px auto 0;
  max-width: 880px;
}
.csd-diagram-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.csd-diagram-caption {
  font-size: 0.86rem;
  color: var(--gray-500);
  line-height: 1.65;
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
}