/*
 * Keeps the CKEditor 5 templates laid out correctly on text formats that have
 * "Convert line breaks into HTML" (filter_autop) enabled. Every site's Basic
 * HTML format has it, and most sites' Full HTML format does too.
 *
 * The filter wraps an image that sits directly inside a template block in a
 * <p>, and adds a <br> after the image when an HTML comment comes right before
 * it. The block rules in strata-3.4-blocks.css and wysiwyg-templates.css target
 * those images as direct children (.blocks .item > img), so the wrapper breaks
 * them: arrows and points separate from their boxes, and images lose their
 * gutters and gain extra space below.
 *
 * A <p> whose only element children are images or line breaks is removed from
 * the layout with display: contents, and the image gets the direct-child rules.
 */

.blocks .item > p:has(> img):not(:has(> :not(img, br))) {
  display: contents;
}

.blocks .item > p:has(> img):not(:has(> :not(img, br))) > br {
  display: none;
}

.blocks .item > p:has(> img):not(:has(> :not(img, br))) > img {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  height: auto;
  margin: -1px 7px 0;
  width: -webkit-fill-available;
}

/*
 * The filter also adds a <br> after a template image when a heading, paragraph
 * or block follows it (Promo with Images, Hover Cards, Hero Hover, Image
 * Gallery, Contact Cards, Image Text Wrap...). The images display as blocks, so
 * the <br> only adds an empty line. Hide it in that exact position.
 */
:is(.img-responsive, .img-expand) + br:has(+ :is(h1, h2, h3, h4, h5, h6, p, div, ul, ol, figcaption)) {
  display: none;
}

/*
 * In the linked list templates (Promo with Icons, Promo with Images Round) the
 * filter starts each item's link with a <br> and ends it with an empty <p>.
 */
.list-unstyled > li > a > br:first-child:has(+ div),
.list-unstyled > li > a > p:empty {
  display: none;
}