/*
  Pragmatic Audio – site overrides

  Purpose: Provide a simple, site‑wide max-width for images rendered in post content,
  including images inserted via Markdown or raw HTML. This complements the Markdown
  render-image hook which may also add width/height and per-image max-width.

  Adjust the default max width by changing the 850px value below.
*/

/* Generic images in post content */
.post .post-content img,
.post .post-content figure img,
.markdown img,
.markdown figure img {
    display: block;
    height: auto;
    max-width: 600px; /* prevents large images from exceeding 600px */
    width: auto;      /* keeps original width unless bigger than max-width */
/*    margin-left: auto;
    margin-right: auto;*/
}

/* Ensure figures don’t overflow and are centered nicely */
.post .post-content figure,
.markdown figure {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Avoid layout issues with long URLs/text near images */
.post .post-content,
.markdown {
  overflow-wrap: anywhere;
}

/*
  Images inside Markdown tables should shrink to fit their cell so that
  multi‑column image tables don't overflow the content area.
  We avoid upscaling smaller images by keeping width:auto and constraining
  with max-width:100%.
*/
.post .post-content table img,
.markdown table img,
.post .post-content td img,
.markdown td img {
  display: block;
  height: auto;
  max-width: 100%;  /* shrink to the cell width when needed */
  width: auto;      /* don't upscale small images */
}

/* Ensure tables themselves don't exceed the container width */
.post .post-content table,
.markdown table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed; /* helps columns share space evenly */
}

/*
  Note:
  - Per-image overrides via Markdown title (e.g., "600px") from the render-image
    hook apply inline and will take precedence over this CSS.
  - If you prefer a different global limit, change the 850px value above.
*/