/* ==========================================================
   HOME — full-page hero photo with the header laid over it.
   Only loaded on the home page (pageCss: home in index.njk).
   ========================================================== */

.has-hero {
  --hero-focus: 35% 45%;                 /* crop anchor: keeps truss, pole, and fireweed on phones */
  --shade: 14, 18, 24;                   /* night-sky tone used for the shading */

  position: relative;
  isolation: isolate;
  background: rgb(var(--shade));         /* shows while the photo loads, and under the footer on phones */
}

/* Header floats over the photo instead of sitting above it.
   Nothing else about the header changes. */
.has-hero .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.hero {
  position: relative;
  display: flex;
  min-height: max(34rem, 100svh);
}

.hero picture,
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;                           /* behind the text and buttons */
}

.hero__img {
  object-fit: cover;
  object-position: var(--hero-focus);
}

/* Light shading only where text sits: top (header + headline),
   left (headline), and bottom (buttons, then the photo dissolves
   into the dark footer on phones). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(var(--shade), 0.5) 0%, rgba(var(--shade), 0) 30%),
    linear-gradient(to right, rgba(var(--shade), 0.6) 0%, rgba(var(--shade), 0.25) 35%, rgba(var(--shade), 0) 60%),
    linear-gradient(to top, rgb(var(--shade)) 0%, rgba(var(--shade), 0) 30%);
}

/* Desktop and laptop: the whole home page is one screen. The photo
   runs behind the header, hero, AND footer. (.hero stops being the
   positioning box, so the photo and shading size to the whole page.) */
@media (min-width: 64em) and (min-height: 40em) {
  .has-hero .site-main { display: flex; flex-direction: column; }
  .hero { position: static; flex: 1; min-height: 0; }
  .has-hero .hero__content { padding-top: clamp(7.5rem, 18vh, 12rem); padding-bottom: 1.5rem; }
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(var(--shade), 0.5) 0%, rgba(var(--shade), 0) 30%),
      linear-gradient(to right, rgba(var(--shade), 0.6) 0%, rgba(var(--shade), 0.25) 35%, rgba(var(--shade), 0) 60%),
      linear-gradient(to top, rgba(var(--shade), 0.8) 0%, rgba(var(--shade), 0.4) 22%, rgba(var(--shade), 0) 42%);
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 64rem;
  /* starts just under the header, in the open sky */
  padding: clamp(7.5rem, 5rem + 8vw, 12rem) var(--gutter) clamp(2rem, 6vh, 4rem);
}

.hero__title {
  max-width: 24ch;
  font-size: clamp(1.3rem, 1rem + 2.5vw, 3.1rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  font-variant-caps: all-petite-caps;
  text-shadow: 0 1px 1.5rem rgba(var(--shade), 0.45);
}

.hero__lede {
  max-width: 38rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: var(--text);
  opacity: 0.9;
  text-shadow: 0 1px 1rem rgba(var(--shade), 0.5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Phones: headline stays in the sky, buttons drop to the bottom
   of the screen (over the dark grass, easy thumb reach). */
@media (max-width: 40em) {
  .hero__actions { margin-top: auto; padding-top: 2rem; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Footer on the home page ----------
   Light text over the photo (desktop) or the dark shade (phones). */
.has-hero .site-footer {
  margin-top: 0;
  border-top: 0;
  color: rgba(232, 230, 225, 0.82);
  text-shadow: 0 1px 0.75rem rgba(var(--shade), 0.7);
}
.has-hero .footer-name,
.has-hero .footer-ids dt { color: var(--text); }
.has-hero .site-footer a:hover { color: #fff; }
.has-hero .emblem__b { fill: var(--text); }

/* Desktop: push everything to the screen edges so the middle of the
   photo stays clear. Company info bottom-left; links, IDs, and emblem
   bottom-right. */
@media (min-width: 64em) and (min-height: 40em) {
  .has-hero .site-footer__inner {
    grid-template-columns: 1fr;          /* company info takes the left... */
    grid-auto-flow: column;              /* ...links and IDs line up on the right */
    grid-auto-columns: auto;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    padding-top: 0;
    padding-bottom: 0.75rem;
  }
  .has-hero .footer-links,
  .has-hero .footer-ids { text-align: right; }
  .has-hero .footer-ids { margin-left: 0; }
  .has-hero .footer-ids div { justify-content: flex-end; }
  .has-hero .footer-base { padding-right: var(--gutter); padding-bottom: 1rem; }
}