/* hero — how its words and its photo stand, by its own classes (`hero--side`, `hero--cover`,
   `hero--center`). No outer padding: the section's large space gives it its height. */

.hero         { position: relative; isolation: isolate; }
.hero-inner   { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); align-items: center; }
.hero-photo   { width: 100%; border-radius: var(--radius); }

.hero .lead { margin-bottom: 2.4rem; }

.hero--center .lead { margin-left: auto; margin-right: auto; }

/* side: the photo beside the words, both in the page's column */
.hero--side.has-photo .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); }
.hero--side.has-photo .hero-photo { order: 2; aspect-ratio: 4 / 3; object-fit: cover; }

/* cover: the photo behind the words — placed against the hero (the column is not positioned), edge to edge —
   a scrim over it, the words light */
.hero--cover .hero-photo            { position: absolute; inset: 0; height: 100%; object-fit: cover; border-radius: 0; z-index: -1; }
.hero--cover.has-photo              { color: #fff; padding-block: var(--space); }
/* Over the darkened photo the words are light whatever the design's ground: its colours are set again here, so
   the heading (--ink), the lead (--body-text), the eyebrow and the outlined button (--mark) follow. */
.hero--cover.has-photo              { --ink: #fff; --body-text: rgba(255, 255, 255, .88); --muted: rgba(255, 255, 255, .72);
                                      --mark: #fff; --line: rgba(255, 255, 255, .4); }
/* …the whole band: the section's space is taken inside the hero, under the photo (the drawer's «space» still sets it) */
.section:has(> .hero--cover.has-photo) { padding-block: 0; }
.hero--cover.has-photo::after       { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .55); }
/* …in the page's column (a band of normal or narrow width), not edge to edge: the photo is a card there — its
   corners rounded as a photo beside the words is — and the words keep a margin inside it; a container in a
   container has none of its own. */
.container .hero--cover.has-photo                                  { border-radius: var(--radius); overflow: hidden; }
.container .hero--cover.has-photo .hero-inner                      { padding-inline: clamp(24px, 5vw, 64px); }

/* center: the words in the middle */
.hero--center .hero-inner           { text-align: center; justify-items: center; }

@media (max-width: 900px) {
  .hero--side.has-photo .hero-inner { grid-template-columns: 1fr; }
}