/* hero component — GENERATED by tools/make-fixtures.py --emit-components
   from the same source ranges as widgets/hero/fixture.html
   (../../site/css/shared-responsive.css + ../../site/css/blocks-responsive.css + build/css/responsive.css via fixtures.config.json). Byte-identical rules are
   the contract: edit the stage-2 source and regenerate, never this file. */
/* == hero == STAGE 2. The section carries the WHOLE photo (stage 1 split it with the header band) and pulls up
   under the sticky header by --header-h: at 1600 the box is 0–860 and cover on the 1764×860 cut scales 1:1
   centred, i.e. −82px — the stage-1 paint. The title sits 70 above the bottom edge (Figma y650 + 140 + 70 =
   860) and 13px in from the container at the desktop composition. */
.s-hero {
  height: clamp(560px, 24.7934vw + 463.356px, 860px);
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background: linear-gradient(var(--c-scrim), var(--c-scrim)), url("../img/hero-photo.jpg") center / cover no-repeat;
}
.hero { display: flex; align-items: flex-end; height: 100%; padding-bottom: clamp(40px, 2.47934vw + 30.3806px, 70px); }
.hero__title { width: 100%; max-width: 878px; color: var(--c-white); }   /* Figma's text box width; two 70px lines by line-height */
@media (min-width: 1200px) {
  .hero { padding-left: 13px; padding-bottom: 70px; }
}


/* ==== hand-maintained widget-phase additions (widgets/hero/wp-extra.css) ==== */
/* hero — the photo is a media control: the section carries it as --hero-photo (template); the stage-2 rule's
   literal url is restated to read the variable. Same scrim, same cover fit. */
.s-hero { background: linear-gradient(var(--c-scrim), var(--c-scrim)), var(--hero-photo) center / cover no-repeat; }