/*
 * Hero component — the photograph layer, and nothing else.
 *
 * The hero's layout, type scale, overlay gradient and button treatment are
 * defined ONCE in assets/css/home.css (.hcr-hero and its children); this file
 * does not repeat or override any of them. All it adds is what home.css has no
 * equivalent for: the real <img> the component renders as the backdrop, which
 * exists so the photograph can carry alt text and a srcset instead of being an
 * undescribed CSS background.
 *
 * .hcr-hero sets `isolation: isolate` and its overlay ::before sits at
 * z-index: -1, so the picture goes one layer further back and the copy stays in
 * normal flow above both.
 *
 * No colours, no spacing and no breakpoints of its own — nothing here to drift
 * from the design tokens, and nothing that can overflow a 320px screen.
 */

.hcr-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	overflow: hidden;
}

.hcr-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* A real <img> is on the page, so the CSS background fallback in home.css must
   stand down — otherwise the browser downloads the same photograph twice. */
.hcr-hero--photo {
	background-image: none;
}