/* D2 Diagram Mobile Overrides — loaded after styles.css */
/* Only contains D2-specific responsive tweaks */

@media (max-width: 640px) {
  .d2-diagram {
    margin: 1.25em calc(-1 * var(--gap));
  }

  .d2-diagram img,
  .d2-diagram svg {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* Standalone D2 SVGs are rendered via Pandoc's <figure> wrapper, not .d2-diagram.
     The huge intrinsic width (e.g. 3344px) crushes into 390px viewports, making
     labels unreadable. Let the figure scroll horizontally and enforce a minimum
     readable width so text resolves at a legible size. */

  /* The <img> keeps its forced horizontal min-width so text stays at the size
     we set when regenerating SVGs at 2x fonts. The CAP goes on the parent
     <figure> instead — SVG-as-<img> honors width + max-height together by
     scaling the diagram DOWN to fit, which would re-shrink text. Capping the
     figure gives internal vertical scroll instead, keeping text at the
     designed size. */
  /* Only apply scroll-container caps when the figure actually holds an SVG diagram.
     This way future photo <figure>s (e.g. <figure><img src="photo.jpg"></figure>)
     don't get the max-height + overflow-x/y treatment they don't need. */
  .post-content figure:has(img[src$=".svg"]) {
    overflow-x: auto;
    overflow-y: auto;
    max-height: clamp(500px, 75vh, 80vh);
    margin-left: calc(-1 * var(--gap));
    margin-right: calc(-1 * var(--gap));
    padding: 0 var(--gap);
  }

  .post-content figure img[src$=".svg"] {
    max-width: none;
    width: max(220%, 880px);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}