/* Chapter Hero Photo normalization
   Keeps chapter hero photos visually aligned with homepage chapter cover photos. */

:root {
  --chapter-hero-radius: 24px;
  --chapter-hero-shadow: 0 18px 40px rgba(22, 22, 18, 0.14);
  --chapter-hero-caption: rgba(48, 39, 28, 0.78);
}

.page-hero-image.chapter-cover-frame,
.water-hero-photo.chapter-cover-frame,
.chapter-hero figure.chapter-cover-frame {
  width: min(100%, 760px);
  margin-inline: auto;
}

.page-hero-image.chapter-cover-frame img,
.water-hero-photo.chapter-cover-frame img,
.chapter-hero figure.chapter-cover-frame img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--chapter-hero-radius);
  box-shadow: var(--chapter-hero-shadow);
}

.page-hero-image.chapter-cover-frame figcaption,
.water-hero-photo.chapter-cover-frame figcaption,
.chapter-hero figure.chapter-cover-frame figcaption {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--chapter-hero-caption);
}

.water-hero .chapter-cover-frame,
.chapter-hero .chapter-cover-frame {
  align-self: start;
}

@media (min-width: 900px) {
  .water-hero-photo.chapter-cover-frame,
  .chapter-hero figure.chapter-cover-frame {
    width: min(42vw, 760px);
  }
}

@media (max-width: 899px) {
  .water-hero,
  .chapter-hero {
    gap: 1.25rem;
  }
}