/*
  public/CSS/PAGES/_HOME_/External_CSS/hero.css
  The home page hero (views/PAGES/_HOME_/Sections/hero.ejs): text only, over the
  whole width. The headline is the picture: very large and tight. Under it the
  lead with the actions. The whole hero fits one screen.
*/

.hero {
  padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px);
}

.hero-inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.hero h1 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* The lead, and right under it the two buttons, both on the headline's left edge. */
.hero-bottom {
  display: grid;
  justify-items: start;
  gap: 28px;
}

.hero-bottom .lead {
  max-width: 52ch;
}

@media (min-width: 960px) {
  /* The hero fills the screen under the header, but never more. */
  .hero {
    display: flex;
    align-items: center;
    min-height: min(780px, calc(100vh - var(--header-height)));
  }

  .hero-inner {
    width: 100%;
  }
}