/*
 * WordPress image alignment (float text-wrap) fix.
 * theme's own style.css has full .alignleft/.alignright/.aligncenter rules but that
 * file is never enqueued (it only serves as the required theme-metadata header), and
 * the compiled assets/css/main.css only carries a partial `.alignright` rule (width,
 * no float) scoped to `.wp-block-image`. Classic-editor markup and `.alignleft` never
 * got real float/text-wrap at all. This file is hand-written (NOT compiled from
 * src/sass) and only adds the missing float + clearfix behavior for post/page content.
 */

.entry-content,
.prose-sm,
.doctor-info__content {
  overflow: hidden; /* clearfix: contains the floats below so the content box doesn't collapse */
}

.entry-content img.alignleft,
.entry-content .alignleft,
.prose-sm img.alignleft,
.prose-sm .alignleft,
.doctor-info__content img.alignleft,
.doctor-info__content .alignleft {
  display: inline;
  float: left;
  max-width: 50%;
  margin: 0.4em 1.5em 1em 0;
}

.entry-content img.alignright,
.entry-content .alignright,
.prose-sm img.alignright,
.prose-sm .alignright,
.doctor-info__content img.alignright,
.doctor-info__content .alignright {
  display: inline;
  float: right;
  max-width: 50%;
  margin: 0.4em 0 1em 1.5em;
}

/* Gutenberg often splits classes across a wrapper (.wp-block-image) and the
   .alignright/.alignleft figure inside it rather than combining them on one
   element. The rules above already match that split structure (no
   .wp-block-image compound needed), but the wrapper itself must not force
   full width or the float/max-width on the figure has no effect. */
.entry-content .wp-block-image:has(> .alignleft),
.entry-content .wp-block-image:has(> .alignright),
.prose-sm .wp-block-image:has(> .alignleft),
.prose-sm .wp-block-image:has(> .alignright),
.doctor-info__content .wp-block-image:has(> .alignleft),
.doctor-info__content .wp-block-image:has(> .alignright) {
  display: block;
  width: auto;
}

/* The <img> itself carries width/height HTML attributes (e.g. 833x555) as a
   sizing hint; without a CSS width it renders at that intrinsic size and
   overflows the 50%-wide floated figure. Force it to fill the figure. */
.entry-content .alignleft > img,
.entry-content .alignright > img,
.prose-sm .alignleft > img,
.prose-sm .alignright > img,
.doctor-info__content .alignleft > img,
.doctor-info__content .alignright > img {
  width: 100%;
  height: auto;
  margin: 0;
}

.entry-content img.aligncenter,
.entry-content .aligncenter,
.prose-sm img.aligncenter,
.prose-sm .aligncenter,
.doctor-info__content img.aligncenter,
.doctor-info__content .aligncenter {
  display: block;
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

/* Gutenberg image blocks: same float behavior, plus a sane default width so a
   full-bleed image doesn't just fill the line and defeat the wrap. */
.entry-content .wp-block-image.alignleft,
.entry-content .wp-block-image.alignright,
.prose-sm .wp-block-image.alignleft,
.prose-sm .wp-block-image.alignright,
.doctor-info__content .wp-block-image.alignleft,
.doctor-info__content .wp-block-image.alignright {
  display: inline;
  max-width: 50%;
}

.entry-content .wp-block-image.alignleft img,
.entry-content .wp-block-image.alignright img,
.prose-sm .wp-block-image.alignleft img,
.prose-sm .wp-block-image.alignright img,
.doctor-info__content .wp-block-image.alignleft img,
.doctor-info__content .wp-block-image.alignright img {
  width: 100%;
  height: auto;
  margin: 0;
}

.entry-content .wp-block-image.aligncenter,
.prose-sm .wp-block-image.aligncenter,
.doctor-info__content .wp-block-image.aligncenter {
  display: block;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

/* Captions (.wp-caption / figure) need the same float treatment as the bare <img>,
   since a caption wrapper is what actually carries the align class in older markup. */
.entry-content .wp-caption.alignleft,
.prose-sm .wp-caption.alignleft,
.doctor-info__content .wp-caption.alignleft {
  float: left;
  margin: 0.4em 1.5em 1em 0;
}

.entry-content .wp-caption.alignright,
.prose-sm .wp-caption.alignright,
.doctor-info__content .wp-caption.alignright {
  float: right;
  margin: 0.4em 0 1em 1.5em;
}

.entry-content .wp-caption.aligncenter,
.prose-sm .wp-caption.aligncenter,
.doctor-info__content .wp-caption.aligncenter {
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .wp-caption img,
.prose-sm .wp-caption img,
.doctor-info__content .wp-caption img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.entry-content .wp-caption-text,
.prose-sm .wp-caption-text,
.doctor-info__content .wp-caption-text {
  font-size: 0.85em;
  text-align: center;
  padding: 0.5em 0;
}

/* Small screens: stop floating so wrapped text doesn't get squeezed into a sliver. */
@media (max-width: 600px) {
  .entry-content img.alignleft,
  .entry-content img.alignright,
  .entry-content .alignleft,
  .entry-content .alignright,
  .entry-content .wp-block-image.alignleft,
  .entry-content .wp-block-image.alignright,
  .entry-content .wp-caption.alignleft,
  .entry-content .wp-caption.alignright,
  .prose-sm img.alignleft,
  .prose-sm img.alignright,
  .prose-sm .alignleft,
  .prose-sm .alignright,
  .prose-sm .wp-block-image.alignleft,
  .prose-sm .wp-block-image.alignright,
  .prose-sm .wp-caption.alignleft,
  .prose-sm .wp-caption.alignright,
  .doctor-info__content img.alignleft,
  .doctor-info__content img.alignright,
  .doctor-info__content .alignleft,
  .doctor-info__content .alignright,
  .doctor-info__content .wp-block-image.alignleft,
  .doctor-info__content .wp-block-image.alignright,
  .doctor-info__content .wp-caption.alignleft,
  .doctor-info__content .wp-caption.alignright {
    float: none;
    display: block;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}