/* ═══════════════════════════════════════════════════════════════
 * TestRoute - Guide diagrams
 * Wrapper for the server-drawn SVGs from includes/guide-diagrams.php:
 * <figure class="trg-diagram">SVG<figcaption>…</figcaption></figure>
 * The SVG carries its own card (#152536) and scales to the column.
 * !important throughout for Cornerstone's cascade, like guide.css.
 * ═══════════════════════════════════════════════════════════════ */

.trg-art-body .trg-diagram { display: block !important; margin: 32px 0 !important; padding: 0 !important; max-width: 100% !important; }
.trg-art-body .trg-diagram > svg { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; overflow: hidden !important; border-radius: 16px !important; }
.trg-art-body .trg-diagram figcaption { display: block !important; margin: 12px auto 0 !important; padding: 0 12px !important; max-width: 600px !important; font-size: 13px !important; line-height: 1.55 !important; color: rgba(255,255,255,.45) !important; text-align: center !important; }

/* Phones: let the drawing use the gutters so its labels stay readable. */
@media (max-width: 600px) {
	.trg-art-body .trg-diagram { margin: 28px -10px !important; max-width: none !important; }
	.trg-art-body .trg-diagram > svg { border-radius: 12px !important; }
	.trg-art-body .trg-diagram figcaption { padding: 0 14px !important; }
}

@media print {
	.trg-art-body .trg-diagram { break-inside: avoid !important; }
}