/* Article figures: hero and in-body editorial images inside .imported-content.
 *
 * Why this file exists as its own stylesheet rather than an edit to
 * styles.css: the sitewide sheet is 226 KB, is not tracked in this repository,
 * and defines NO responsive image rule at all -- every img selector in it is
 * scoped to a specific component (.area-guide-hero > img,
 * .luxury-landscape-feature > img, and so on). There is no global
 * `img { max-width: 100% }` to inherit. An article figure added without the
 * rules below renders at its intrinsic 1600px and overflows the page
 * horizontally on every phone.
 *
 * Verified 2026-08-22 against the live sheet
 * (/assets/styles.css?v=20260731-footer-tighten-v1): zero occurrences of
 * "article-figure", zero occurrences of "max-width: 100%". `figcaption` IS
 * already styled globally (colour, 14px, 10px top margin), so this file
 * deliberately does not restate it -- it only adds the width constraint the
 * global sheet is missing.
 */

.article-figure {
  margin: 0 0 28px;
}

.article-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(13, 31, 60, 0.14), 0 0 0 1px rgba(13, 31, 60, 0.04);
}

/* The illustrations are 16:9 line drawings. On a narrow screen the detail in
 * them stops being legible well before the layout breaks, so the caption
 * carries more of the load and is given a little more room from the image. */
@media (max-width: 700px) {
  .article-figure {
    margin-bottom: 22px;
  }

  .article-figure img {
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(13, 31, 60, 0.12), 0 0 0 1px rgba(13, 31, 60, 0.04);
  }
}