/* The ground-line hero (template-parts/hero.php). Shared by the hero and
   page-hero blocks and the project page, registered as 'deltaes-hero'. */

.deltaes-hero {
  --deltaes-hero-h: var(--deltaes-h1-page);
  --deltaes-hero-photo: clamp(320px, 58vh, 640px);
  position: relative;
  background: var(--deltaes-graphite-950);
  color: var(--deltaes-text);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.deltaes-hero--page.deltaes-hero--long { --deltaes-hero-h: calc(var(--deltaes-h1-page) * .8); }
/* The homepage headline is also capped by screen HEIGHT: on a short laptop
   screen a width-only size left the photo as a thin strip above three huge
   lines. At 1440x900 the cap and the width size are about equal. */
.deltaes-hero--home { --deltaes-hero-h: min(var(--deltaes-h1), 14svh); }
.deltaes-hero--home.deltaes-hero--long { --deltaes-hero-h: min(calc(var(--deltaes-h1) * .76), 10.5svh); }

.deltaes-hero__title {
  position: relative;
  max-width: 20ch;
  margin: 0 0 .28em;
  font-size: var(--deltaes-hero-h);
  line-height: .88;
  color: #ffffff;
}
/* The contract number: part of the heading, set in silver. */
.deltaes-hero__prefix { color: var(--deltaes-silver-300); }

.deltaes-hero__lede { color: var(--deltaes-silver-300); margin-bottom: 0; }
.deltaes-hero__actions { margin-top: clamp(24px, 3vw, 36px); }

.deltaes-hero__crumbs { padding-block: 14px 12px; }
.deltaes-hero__crumbs .deltaes-breadcrumbs { margin: 0; }

/* ---- Full and inset: the headline stands on the ground line ------------ */

.deltaes-hero--full .deltaes-hero__photo,
.deltaes-hero--inset .deltaes-hero__photo { height: var(--deltaes-hero-photo); }

/* The homepage hero fits the screen: headline, line, button and the
   certificates link must all be visible without scrolling (Dan, 2026-10-21).
   The section is one screen tall less the header, the text takes what it
   needs, and the photo gets the rest, so a longer line or a smaller laptop
   screen shortens the photo rather than pushing the button below the fold.
   min-height, not height, so on a very short screen the page simply scrolls
   instead of the text overflowing into the next section; capped so a tall
   monitor does not get a giant photo. */
.deltaes-hero--home:is(.deltaes-hero--full, .deltaes-hero--inset) {
  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - var(--deltaes-header-height)), 1040px);
  padding-bottom: clamp(24px, 4.5vh, 48px);
}
.admin-bar .deltaes-hero--home:is(.deltaes-hero--full, .deltaes-hero--inset) {
  min-height: min(calc(100svh - var(--deltaes-header-height) - 32px), 1040px);
}
.deltaes-hero--home:is(.deltaes-hero--full, .deltaes-hero--inset) .deltaes-hero__media {
  flex: 1 1 0;
  display: grid;
  min-height: 220px;
}
/* The figure stretches to the media's flexed height (a grid item), and the
   image fills it absolutely, so no percentage height depends on an
   indefinite parent. */
.deltaes-hero--home:is(.deltaes-hero--full, .deltaes-hero--inset) .deltaes-hero__photo { height: auto; min-height: 220px; }
.deltaes-hero--home:is(.deltaes-hero--full, .deltaes-hero--inset) .deltaes-hero__photo > :is(img, picture) { position: absolute; inset: 0; }
.deltaes-hero--home .deltaes-hero__body { flex: none; }

.deltaes-hero--inset .deltaes-hero__media {
  /* width, because on the homepage hero this is a flex item, and auto margins
     there shrink it to its content: an absolutely placed photo, so nothing. */
  width: 100%;
  box-sizing: border-box;
  max-width: calc(var(--deltaes-content-max) + 2 * var(--deltaes-gutter));
  margin-inline: auto;
  padding-inline: var(--deltaes-gutter);
}

/* Pull the body up by exactly one line of the heading, so the first line sits
   inside the darkest part of the overlay and the rest is on solid graphite. */
.deltaes-hero--full .deltaes-hero__body,
.deltaes-hero--inset .deltaes-hero__body {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--deltaes-hero-h) * -.88 - 6px);
}
.deltaes-hero--inset .deltaes-hero__body { padding-inline: calc(var(--deltaes-gutter) + clamp(16px, 2.5vw, 40px)); }

/* The caption strip sits top right on a hero, clear of the headline. */
.deltaes-hero .deltaes-caption { top: 0; bottom: auto; }

/* ---- Portrait: a split ---------------------------------------------------- */

.deltaes-hero--portrait {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  padding-bottom: 0;
}
.deltaes-hero--portrait .deltaes-hero__media { flex: 0 0 min(44%, 620px); }
.deltaes-hero--portrait .deltaes-hero__photo { aspect-ratio: 4 / 5; max-height: 86vh; }
.deltaes-hero--portrait .deltaes-hero__body {
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  padding-block: clamp(48px, 7vw, 104px);
  padding-left: max(var(--deltaes-gutter), calc((100vw - var(--deltaes-content-max)) / 2));
}

/* ---- No photo: a graphite title band -------------------------------------- */

.deltaes-hero--band { padding-top: clamp(40px, 6vw, 88px); }

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 800px) {
  .deltaes-hero--portrait { display: block; padding-bottom: clamp(40px, 8vw, 64px); }
  .deltaes-hero--portrait .deltaes-hero__photo { max-height: 70vh; }
  .deltaes-hero--portrait .deltaes-hero__body { padding: 32px var(--deltaes-gutter) 0; }
  .deltaes-hero--inset .deltaes-hero__media { padding-inline: 0; }
  .deltaes-hero--inset .deltaes-hero__body { padding-inline: var(--deltaes-gutter); }
}