/* =========================================================
   Content images styled like the Plant Finder cards
   ---------------------------------------------------------
   Same frame as the home page plant cards: 1px #d7dfd5
   border, 14px rounded corners, white background, soft
   shadow. Applies to images in the main content area,
   except:
     - the Virginia hardiness zone map
       (/sites/default/files/inline-images/hardinesszones-va_0.png)
     - the plant cards themselves (already framed)

   To exempt another image, add it to the :not() lists below,
   or give it the class "no-frame" in the editor.

   Load after style.css and custom-style.css.
   ========================================================= */

/* ---------- Any content image ---------- */

main img:not(.plant-card__image, .no-frame, [src*="hardinesszones-va_0.png"]) {
  max-width: 100%;
  height: auto;
  border: 1px solid #d7dfd5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

/* ---------- Captioned images in body text (e.g. About) ---------- */
/* The figure becomes the card: photo on top, caption below. */

main figure.caption-img:not(:has(img.no-frame, img[src*="hardinesszones-va_0.png"])) {
  display: table;
  overflow: hidden;
  border: 1px solid #d7dfd5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

main figure.caption-img:not(:has(img.no-frame, img[src*="hardinesszones-va_0.png"])) img {
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

main figure.caption-img:not(:has(img.no-frame, img[src*="hardinesszones-va_0.png"])) > figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: 0.7rem 1rem 0.85rem;
  border: 1px solid #d7dfd5;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #fff;
  color: #4b5a4b;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* With display: table the caption sits outside the figure box,
   so the figure's own bottom corners and border are squared off
   and the caption supplies them. */
main figure.caption-img:not(:has(img.no-frame, img[src*="hardinesszones-va_0.png"])):has(> figcaption) {
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: none;
}

/* Breathing room around floated images */
main figure.align-right,
main img.align-right {
  margin: 0.25rem 0 1rem 1.5rem;
}

main figure.align-left,
main img.align-left {
  margin: 0.25rem 1.5rem 1rem 0;
}

@media (max-width: 575.98px) {
  main figure.align-right,
  main figure.align-left,
  main img.align-right,
  main img.align-left {
    float: none;
    margin: 0 0 1rem;
  }
}

/* ---------- Photo galleries (plant and non-native pages) ---------- */
/* Each photo and its credits become one card. */

.view-media-image-block .views-view-responsive-grid__item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.view-media-image-block .views-view-responsive-grid__item-inner {
  overflow: hidden;
  padding: 0 1rem 0.9rem;
  border: 1px solid #d7dfd5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Photo runs edge to edge across the top of the card. */
.view-media-image-block .views-view-responsive-grid__item-inner img {
  display: block;
  width: calc(100% + 2rem);
  max-width: none;
  height: auto;
  margin: 0 -1rem 0.75rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.view-media-image-block .views-view-responsive-grid__item-inner p:last-child {
  margin-bottom: 0;
}