/* Image styling with alt text control for positioning and sizing */
/* Base image styles - no hover effects by default */
.content img,
.markdown-content img,
.post-content img,
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.75em 0;
  border-radius: 4px;
  /* Ensure images stay within container boundaries */
  box-sizing: border-box;
  /* Disable hover effects by default */
  transition: none;
  cursor: default;
}

/* Header protection - ensure headers clear floated images */
.content h1,
.content h2,
.markdown-content h1,
.markdown-content h2,
.post-content h1,
.post-content h2,
.prose h1,
.prose h2 {
  clear: both;
}

/* Clear float utility */
.content img[alt*="clear"],
.markdown-content img[alt*="clear"],
.post-content img[alt*="clear"],
.prose img[alt*="clear"] {
  clear: both;
}

/* Left floating images */
.content img[alt*="left"],
.markdown-content img[alt*="left"],
.post-content img[alt*="left"],
.prose img[alt*="left"] {
  float: left;
  margin: 0.5em 1.5em 1em 0;
  clear: left;
}

/* Right floating images */
.content img[alt*="right"],
.markdown-content img[alt*="right"],
.post-content img[alt*="right"],
.prose img[alt*="right"] {
  float: right;
  margin: 0.5em 0 1em 1.5em;
  clear: right;
}

/* Center aligned images */
.content img[alt*="center"],
.markdown-content img[alt*="center"],
.post-content img[alt*="center"],
.prose img[alt*="center"] {
  display: block;
  margin: 1em auto;
  float: none;
  clear: both;
}

/* Inline images - allow multiple images on same line */
.content img[alt*="inline"],
.markdown-content img[alt*="inline"],
.post-content img[alt*="inline"],
.prose img[alt*="inline"] {
  display: inline-block;
  margin: 0.25em 0.5em;
  vertical-align: top;
  float: none;
}

/* Size variations */
.content img[alt*="small"],
.markdown-content img[alt*="small"],
.post-content img[alt*="small"],
.prose img[alt*="small"] {
  max-width: 200px;
  width: 200px;
}

.content img[alt*="medium"],
.markdown-content img[alt*="medium"],
.post-content img[alt*="medium"],
.prose img[alt*="medium"] {
  max-width: 400px;
  width: 400px;
}

.content img[alt*="large"],
.markdown-content img[alt*="large"],
.post-content img[alt*="large"],
.prose img[alt*="large"] {
  max-width: 600px;
  width: 600px;
}

.content img[alt*="quarter"],
.markdown-content img[alt*="quarter"],
.post-content img[alt*="quarter"],
.prose img[alt*="quarter"] {
  width: 25%;
  min-width: 150px;
}

.content img[alt*="half"],
.markdown-content img[alt*="half"],
.post-content img[alt*="half"],
.prose img[alt*="half"] {
  width: 50%;
  min-width: 200px;
}

.content img[alt*="third"],
.markdown-content img[alt*="third"],
.post-content img[alt*="third"],
.prose img[alt*="third"] {
  width: 33.333%;
  min-width: 150px;
}

/* Clearfix for containers with floated images */
.content::after,
.markdown-content::after,
.post-content::after,
.prose::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive behavior - improved mobile handling */
@media (max-width: 768px) {
  /* Float removal for mobile */
  .content img[alt*="left"]:not([alt*="small"]):not([alt*="inline"]),
  .content img[alt*="right"]:not([alt*="small"]):not([alt*="inline"]),
  .markdown-content img[alt*="left"]:not([alt*="small"]):not([alt*="inline"]),
  .markdown-content img[alt*="right"]:not([alt*="small"]):not([alt*="inline"]),
  .post-content img[alt*="left"]:not([alt*="small"]):not([alt*="inline"]),
  .post-content img[alt*="right"]:not([alt*="small"]):not([alt*="inline"]),
  .prose img[alt*="left"]:not([alt*="small"]):not([alt*="inline"]),
  .prose img[alt*="right"]:not([alt*="small"]):not([alt*="inline"]) {
    float: none;
    display: block;
    margin: 1em auto;
    max-width: 100%;
  }
  
  /* Preserve small images on mobile if explicitly sized */
  .content img[alt*="small"],
  .markdown-content img[alt*="small"],
  .post-content img[alt*="small"],
  .prose img[alt*="small"] {
    max-width: min(200px, 100%);
    width: auto;
  }
  
  /* Inline images stack vertically on mobile */
  .content img[alt*="inline"],
  .markdown-content img[alt*="inline"],
  .post-content img[alt*="inline"],
  .prose img[alt*="inline"] {
    display: block;
    margin: 0.5em auto;
  }
  
  /* Adjust percentage widths for mobile */
  .content img[alt*="quarter"],
  .content img[alt*="half"],
  .content img[alt*="third"],
  .markdown-content img[alt*="quarter"],
  .markdown-content img[alt*="half"],
  .markdown-content img[alt*="third"],
  .post-content img[alt*="quarter"],
  .post-content img[alt*="half"],
  .post-content img[alt*="third"],
  .prose img[alt*="quarter"],
  .prose img[alt*="half"],
  .prose img[alt*="third"] {
    width: 80%;
    max-width: 100%;
    margin: 1em auto;
    display: block;
    float: none;
  }
}