@charset "UTF-8";
/* ---------------------------------------------------------------------------
   PHOTO BAND — full-bleed photographic pause between sections.
   Added 2026-08-13 with the home page.

   Full-bleed works because the band is placed as its own block: block.html.twig
   emits a bare <div id="block-…">, field.html.twig a bare <div>, and
   region.html.twig a bare <div> — none of them constrain width. Only .group
   sets a max-width, and the band deliberately sits outside one. Two existing
   front-page blocks (hhc_reviewquotewcullison, hhc_reviewquotejoanne) already
   rely on the same fact via .width-100-pct.

   Rhythm is the theme's own $section-margin-bottom (clamped(37px, 67px)), so a
   band separates from the next section exactly as one .group does from another.
   Margin-bottom only.
   --------------------------------------------------------------------------- */
.photo-band {
  width: 100%;
  margin-bottom: clamp(2.313rem, 1.271rem + 3.333vw, 4.188rem);
}

/* Aspect ratio rather than a viewport-height clamp. The prototype measured the
   old `height: clamp(280px, 45vh, 520px)` at 1.03:1 on a phone, 2.96:1 and
   1.67:1 on the SAME tablet in two orientations, 4.92:1 at 2560x1440 — so the
   shape was a function of viewport height while <picture> art direction keys on
   min-width. No width-based media query could pick the right crop. Ratio-by-
   width makes the crop deterministic.

   These three ratios ARE the three crops in /sites/default/files/resp_img
   (fire-ceremony-{sm,md,lg}-*, jungle-walk-{sm,md,lg}-*). Changing a ratio
   without regenerating the matching file breaks the pairing.

   max-height is the safety valve for short wide laptops: 1366x768 would
   otherwise take a 512px band. It trims ~13% via object-fit, centred.

   BREAKPOINTS ARE THE PROTOTYPE'S, NOT THE THEME'S — deliberately, and this is
   the one place on this page that departs from CLAUDE.md §6.2. 901px and 1301px
   are the same min-widths the <picture> element's own <source> media attributes
   use. The theme's nearest steps are 800px and 1100px; moving the CSS to them
   would leave the aspect-ratio and the selected file disagreeing across a
   200px band. Reported in the completion notes rather than silently rounded. */
.photo-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  max-height: 58vh;
  object-fit: cover;
}

@media (min-width: 901px) {
  .photo-band img {
    aspect-ratio: 12/5;
  }
}
@media (min-width: 1301px) {
  .photo-band img {
    aspect-ratio: 8/3;
  }
}

/*# sourceMappingURL=photo-band.css.map */