/* Center Image with Text blocks on the page if they are smaller than the
page width. */
.block-inline-blockimage-with-text {
  display: flex;
  justify-content: center;
}
/* Fix block content (including images) overflowing the page if there are long
words in wrapped text. https://stackoverflow.com/a/66689926 */
.block-inline-blockimage-with-text > div {
  min-width: 0;
}

/* Remove margins around the rendered image field. */
.block-inline-blockimage-with-text .field--name-field-image {
  margin: 0;
}

.block-inline-blockimage-with-text .field--name-field-image img {
  height: auto;
  display: block;
  max-width: 100%;
}

/* Remove large spaces between multi-line text if the user creates multiple
paragraphs or headings in CKEditor. */
.block-inline-blockimage-with-text .iwt-text-container p {
  margin: 0;
  /* Always prevent wapping mid-word. */
  overflow-wrap: normal;
  word-break: normal;
}
.block-inline-blockimage-with-text .iwt-text-container h1,
.block-inline-blockimage-with-text .iwt-text-container h2,
.block-inline-blockimage-with-text .iwt-text-container h3,
.block-inline-blockimage-with-text .iwt-text-container h4,
.block-inline-blockimage-with-text .iwt-text-container h5,
.block-inline-blockimage-with-text .iwt-text-container h6 {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  /* Always prevent wapping mid-word. */
  overflow-wrap: normal;
  word-break: normal;
}

/********************* Panel styles *********************/
.layout[dir="ltr"] .iwt-block-panel.horizontal-position-right .iwt-overlay,
.layout[dir="rtl"] .iwt-block-panel.horizontal-position-left .iwt-overlay {
  flex-direction: row-reverse;
}
.iwt-block-panel.horizontal-position-center .iwt-overlay {
  justify-content: center;
}
.iwt-block-panel.vertical-position-top .iwt-overlay {
  align-items: flex-start;
}
.iwt-block-panel.vertical-position-center .iwt-overlay {
  align-items: center;
}
.iwt-block-panel.vertical-position-bottom .iwt-overlay {
  align-items: flex-end;
}

/********************* Half styles *********************/
.iwt-style-half {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.wildfire-layout-section[dir="ltr"] .image-position-right .iwt-style-half,
.wildfire-layout-section[dir="rtl"] .image-position-left .iwt-style-half {
  flex-direction: row-reverse;
}
.iwt-half-text .field--name-field-image {
  visibility: hidden;
}
.iwt-style-half .iwt-text-container {
  width: 100%;
  height: 100%;
}
.iwt-style-half > * {
  flex: 1 1 0;
  max-width: 50%;
}

/**** Text container with optional button. Used in Panel and Half styles. ****/
/* Wrapper container for styles where the text is placed over the image. Enables
the .iwt-overlay container to be positioned properly. */
.iwt-text-over-image {
  position: relative;
}
/* Container to place text over the image. */
.iwt-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
}
.iwt-text-container {
  display: flex;
  flex-direction: column;
  line-height: normal;
  max-height: 100%;
  padding: 1% 2%;
  box-sizing: border-box;
  /* Prevent text box from becoming too short on short, wide images. */
  min-height: 30px;
}
/* Center text vertically. Do not use textfit's alignVert feature, because it
positions the text container absolutely which can cause the text to "spill out"
of the layout block if it is too long to fit. */
.iwt-text-container .text {
  display: flex;
  align-items: center;
  max-height: 100%;
}
/* Ensure the text box width 100% so CKEditor alignment works as expected. */
.iwt-text-container .text > * {
  width: 100%;
}
/* Stretch the text box to the width of its container, so the left/center/right
buttons in CKEditor behave as expected. */
.iwt-text-container .textfit .textFitted {
  width: 100%;
  /* Add a small margin to work around a textFit bug in older Chrome versions.
  For some reason, it makes text tiny when the image takes up less than the
  width of the section. */
  margin: 1px;
}
/* The main text in the text container should take most of the space if a button
exists. */
.iwt-text-with-button .text {
  flex: 3;
  /* Prevent long text from making the text container grow past its initial
  size. Textfit will later shrink the text to fit the container if needed. */
  overflow: hidden;
}
/* The button in the text container should take up the remaining, small amount
of space. */
.iwt-text-with-button .iwt-button-container {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
}
/* Button position left or right. */
.button-position-left .iwt-text-with-button .iwt-button-container,
.wildfire-layout-section[dir="rtl"] .button-position-right .iwt-text-with-button .iwt-button-container {
  justify-content: flex-start;
}
.button-position-right .iwt-text-with-button .iwt-button-container,
.wildfire-layout-section[dir="rtl"] .button-position-left .iwt-text-with-button .iwt-button-container {
  justify-content: flex-end;
}
.iwt-button {
  display: inline-block;
  font-size: 20px;
  padding-top: 10px;
  max-width: max(100%, 132px);
  min-width: min(100%, 132px);
}
.iwt-button.iwt-button a {
  margin: 0;
  padding: 5px 1em;
  text-decoration: none;
  border-radius: 4px;
  display: block;
  color: inherit;
  line-height: 1.5em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iwt-button a:hover {
  text-decoration: none;
}

/********************* Wrap styles *********************/
.iwt-block-wrap {
  flex-grow: 1;
}
.iwt-block-wrap .field--name-field-image {
  max-width: 50%;
}
.iwt-block-wrap.image-position-left .field--name-field-image {
  float: left;
  margin-right: 10px;
}
.iwt-block-wrap.image-position-right .field--name-field-image {
  float: right;
  margin-left: 10px;
}

/* Disable the 100% width rule for several elements in a full-width Image with
Text block, so they do not get stretched. Overrides rule in layout-blocks.css. */
.image-style-full-width div.iwt-overlay,
.image-style-full-width div.iwt-button-container,
.image-style-full-width div.iwt-button {
  width: auto;
}

/* Parallax effect styles. */
/* Remove white page background defined by responsive menu which covers up the
images. */
.mm-page {
  background-color: transparent;
}

/* Leave the original <img> elements on the page when parallax is applied, but
make them invisible. This allows the parallax background to show through, while
maintaining the image block's original size. */
.region .wildfire-parallax .field--name-field-image * {
  visibility: hidden;
}

/* Do not hide the original images in Layout Builder mode where the parallax
effect is not applied. */
.region .layout-builder .wildfire-parallax * {
  visibility: visible;
}
.region .layout-builder .wildfire-parallax .iwt-half-text .field--name-field-image * {
  visibility: hidden;
}

@media (max-width: 767px) {

  /* Don't let the panel shrink beyond 50% on mobile. */
  .iwt-text-over-image .iwt-text-container {
    min-width: 50%;
    /* Prevent text box from becoming too short on short, wide images. */
    min-height: max(50%, 30px);
  }

}

@media (max-width: 450px) {

  /* Half style: Place the image centered above the text instead of beside the
  text on narrow screens.
  Except in slideshows, since their width is always wider than their height. */
  .layout:not(.layout--slideshow-section) .iwt-style-half {
    justify-content: center;
  }
  .layout:not(.layout--slideshow-section) .iwt-style-half > * {
    flex: 0 1 auto;
    max-width: 100%;
  }

  /* Wrap style: place the image centered above the text instead of wrapping on
  narrow screens. */
  .iwt-block-wrap.iwt-block-wrap .field--name-field-image {
    float: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Slightly shrink buttons. Should this be applied globally? */
  .iwt-button.iwt-button a {
    font-size: 0.85em;
    padding: 3px 0.5em;
  }

}