/* The plant cards' arrows and photograph credit (js/plant-photos.js). The arrows are DeepEarth's plant-card arrows
 * (simulation viewer cockpit.css, "quieter arrows"): small white chevrons on a breath of shade, shown on the card under
 * the pointer and always, fainter, on a touch screen. */
.image-wrapper { position: relative; }
.image-wrapper img.ph-swap { opacity: .55; transition: opacity .2s ease; }
.image-wrapper > .ph-arw { position: absolute; top: 50%; z-index: 3; width: 24px; height: 24px; margin-top: -12px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .16); cursor: pointer; opacity: 0; transition: opacity .25s ease, background .2s; }
.image-wrapper > .ph-arw.l { left: 10px; }
.image-wrapper > .ph-arw.r { right: 10px; }
.image-wrapper > .ph-arw svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .6)); }
.container-wrapper:hover .image-wrapper > .ph-arw { opacity: .8; }
.image-wrapper > .ph-arw:hover { opacity: 1; background: rgba(0, 0, 0, .3); }
.image-wrapper > .ph-arw:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 1px; }
/* the credit: a small "i" in the photograph's lower left; pressed, the photographer, licence and source over the
 * photograph's foot */
.image-wrapper > .ph-ci { position: absolute; left: 12px; bottom: 12px; z-index: 3; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .16); color: #fff; font: italic 600 11px/18px Georgia, 'Times New Roman', serif; text-align: center; cursor: pointer;
  opacity: 0; transition: opacity .25s ease, background .2s; text-shadow: 0 0 2px rgba(0, 0, 0, .6); }
.container-wrapper:hover .image-wrapper > .ph-ci, .image-wrapper.ph-open > .ph-ci { opacity: .8; }
.image-wrapper > .ph-ci:hover, .ph-ci:focus-visible { opacity: 1; background: rgba(0, 0, 0, .3); }
.image-wrapper > .ph-cred { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; padding: 8px 14px 9px 38px;
  background: rgba(1, 33, 61, .8); color: #fff; font: 12px/1.35 'Nunito', sans-serif; text-align: left; }
.image-wrapper > .ph-cred[hidden] { display: none; }
.image-wrapper > .ph-cred a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: none) {
  .image-wrapper > .ph-arw { opacity: .7; }
  .image-wrapper > .ph-ci { opacity: .7; }
}