/* Components */

/* Shared figcaption style */
figcaption {
  font-size: 0.85em;
  font-style: italic;
  margin-top: 0.3em;
}

/* Hero image */
.hero-image {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* Image row (side by side) */
.image-row {
  display: flex;
  gap: 1em;
  margin: 1.5em 0;
}

.image-row figure {
  flex: 1;
  margin: 0;
}

.image-row img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
}

/* Image with text (side by side) */
.image-text {
  display: flex;
  gap: 1.5em;
  align-items: flex-start;
  margin: 1.5em 0;
}

.image-text.image-right {
  flex-direction: row-reverse;
}

.image-text figure {
  flex: 1;
  margin: 0;
}

.image-text img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.image-text .text-content {
  flex: 1;
  font-size: 1rem;
}

.image-text .text-content > *:first-child {
  margin-top: 0;
}

/* Banner (full-width cropped image) */
.banner {
  width: 100%;
  margin: 1.5em 0;
}

.banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
}

/* Image float (text wraps around) */
.image-float {
  margin: 0.5em 0 1em 0;
}

.image-float-left {
  float: left;
  margin-right: 1.5em;
}

.image-float-right {
  float: right;
  margin-left: 1.5em;
}

.image-float img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.clearfix {
  clear: both;
}