/* Gaps between the designer's styles.css and WordPress block output (owner: C). */

/* Plain core blocks (paragraph, heading, list, image) placed between sections */
#main > p, #main > h2, #main > h3, #main > ul, #main > ol, #main > figure,
.entry-content > p, .entry-content > h2, .entry-content > h3, .entry-content > ul, .entry-content > ol, .entry-content > figure {
  width: min(100% - 2 * var(--gutter, 24px), 760px);
  margin-inline: auto;
  margin-block: 0 16px;
}
#main > h2, .entry-content > h2 { margin-top: 32px; }
#main > ul, #main > ol, .entry-content > ul, .entry-content > ol { padding-left: 1.25em; }
#main > figure img, .entry-content > figure img { width: 100%; height: auto; border-radius: var(--radius, 8px); }

/* Editor-written HTML inside guide sections and FAQ answers */
.guide-body section > p, .faq__a p { margin: 0; }
.guide-body section > ul { padding-left: 1.25em; display: grid; gap: 6px; }
.faq__a > * + * { margin-top: 10px; }
.faq__a ul, .faq__a ol:not(.steps) { padding-left: 1.25em; }

/* WordPress images inside design wrappers fill their frame like the static <img> did */
.card__media img, .path__img, .photo-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature__icon { width: 48px; height: 48px; object-fit: contain; }

/* Page header with photo: grow with the viewport so wide screens don't slice the photo into a
   4:1 strip (people's heads got cut and the title landed on their faces at ~2000px). */
.image-hero:not(.image-hero--short) { min-height: clamp(430px, 36vw, 760px); }
/* Phones: the photo already shows its full height, so keep faces clear by setting the text at the bottom. */
@media (max-width: 700px) {
  .image-hero:not(.image-hero--short) { place-items: end center; padding-bottom: 40px; }
}

/* Below-the-fold photo backgrounds wait until they are near the viewport (main.js adds .is-bg-in).
   Without JS the rule doesn't apply and the photo loads as usual. */
.js [data-lazy-bg]:not(.is-bg-in) { background-image: none !important; }

/* Page-top heroes: render.php sets --bg (wide screens) and --bg-sm (phones); assets.php preloads the matching one */
.home-hero__bg[style*="--bg"], .image-hero__bg[style*="--bg"] { background-image: var(--bg); }
@media (max-width: 899px) {
  .home-hero__bg[style*="--bg"], .image-hero__bg[style*="--bg"] { background-image: var(--bg-sm); }
}