/* hero — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .76rem;
  font-weight: 600;
  color: var(--mark, var(--primary));
  margin-bottom: 1rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem);
  border-bottom: 1px solid var(--line);
}

.hero--split .hero-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  align-items: center;
}

.hero--centered .hero-inner { text-align: center; }

.hero--centered .hero-title { margin-left: auto; margin-right: auto; }


.hero--centered .hero-actions { justify-content: center; }

/* The photo under the words (side, centred): as far from them as the split look's column gap. */
.hero--centered .hero-visual--photo { margin-top: 3rem; }

/* --- hero photo -----------------------------------------------------------
   `background` covers the whole section; `side` puts the photo where the drawn
   mark otherwise sits. Both keep the section's own padding and grid, so the
   layout knobs stay in charge of shape and only the surface changes.

   The scrim is a LITERAL colour on purpose — it is not a brand colour, no token
   expresses "darken whatever is underneath", and tinting it with --primary
   would stain every photo with the palette. `auto` resolves through
   color-mix against --bg, which is the only thing that knows whether this theme
   is light or dark. */
.hero--media-background { border-bottom: 0; }

/* The photo behind it all: a picture covering the section (so srcset gives a
   phone a phone-sized file), under the scrim and the copy. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* A GRADIENT, not a flat wash. An even 78% veil is safe and pointless: it
   makes the photograph read as a faint texture, so the hero costs a download
   and a decision and gains nothing a plain background would not have given.
   The copy sits on the left, so that is the only side that needs covering —
   the far side can open up and let the picture actually be a picture. */
.hero--media-background::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 84%, transparent) 46%,
    color-mix(in srgb, var(--bg) 34%, transparent) 100%);
}


.hero--media-background.hero--overlay-none::before { background: none; }


.hero--media-background.hero--overlay-light::before { background: rgba(255, 255, 255, .72); }


.hero--media-background.hero--overlay-dark::before  { background: rgba(0, 0, 0, .58); }

.hero--media-background.hero--overlay-dark .hero-title {
  color: #f7f5f2;
}


/* Over a darkened photo: the accent lifted toward white — a light palette's accent is dark and vanished there. */
.hero--media-background.hero--overlay-dark .eyebrow { color: color-mix(in srgb, var(--accent) 30%, #fff); }

.hero--media-background.hero--overlay-light .hero-title {
  color: #1c1a18;
}

/* Above the scrim. Without this the copy sits under it and the whole thing
   looks like a fogged window. A frame laid over the photo says how much of
   the top it covers (--header-over); the words keep clear of it. */
.hero--media-background .hero-inner { position: relative; z-index: 2; padding-top: var(--header-over, 0px); }

.hero-visual--photo { pointer-events: auto; }


.hero-visual--photo img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.hero-visual {
  color: var(--mark, var(--primary));
  pointer-events: none;
}


.hero-visual svg { width: 100%; max-width: 460px; height: auto; margin-left: auto; }

.hero-title { max-width: 780px; margin-bottom: 1.2rem; }

.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; }

/* side — in the split look a tall photo, as high as the words beside it, the
   columns even: a small landscape picture beside three lines of headline read
   as a thumbnail. */
.hero--split.hero--media-side .hero-inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
.hero--split.hero--media-side .hero-visual--photo img { aspect-ratio: 4 / 5; height: auto; max-height: 620px; }

/* half — the photo is half the first screen: from the header to the section's
   end and out to the window's edge, no frame and no corners; the words keep
   their place in the grid on the other half. */
.hero--split.hero--media-half {
  display: flex;
  align-items: center;
  min-height: min(78vh, 720px);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero--split.hero--media-half .hero-inner { grid-template-columns: 1fr 1fr; width: 100%; }
.hero--split.hero--media-half .hero-visual--photo { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; }
.hero--split.hero--media-half .hero-visual--photo img { height: 100%; max-height: none; border-radius: 0; }

/* half in the centered look: a wide band under the words, not the side's picture. */
.hero--centered.hero--media-half .hero-visual--photo img { aspect-ratio: 21 / 9; height: auto; max-height: none; }

@media (max-width: 960px) {
    .hero--split .hero-inner { grid-template-columns: 1fr; }
    /* A phone has no half beside the words: the photo is a band above them. */
    .hero--split.hero--media-half { display: block; min-height: 0; padding-top: 0; }
    .hero--split.hero--media-half .hero-inner { grid-template-columns: 1fr; gap: 0; }
    .hero--split.hero--media-half .hero-visual--photo { position: static; width: auto; order: -1; margin: 0 -24px 2rem; }
    .hero--split.hero--media-half .hero-visual--photo img { aspect-ratio: 16 / 10; height: auto; max-height: none; }
    .hero--split.hero--media-side .hero-visual--photo img { aspect-ratio: 4 / 3; }
    .hero-visual:not(.hero-visual--photo) { display: none; }
    .hero-visual--photo img { max-height: 280px; }
    .hero--media-background::before {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
  }
}