/* Authentus — home page styles */

/* ---------- Hero ---------- */

.homeHero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(640px, 82svh);
  overflow: hidden;
  background: var(--teal);
}
.homeHeroImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.homeHero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 70, 71, 0.88) 20%, rgba(2, 70, 71, 0.45) 70%, rgba(2, 70, 71, 0.25));
}
.homeHeroContent {
  position: relative;
  z-index: 1;
  padding: 5rem 0;
  max-width: 640px;
}
.homeHeroContent h1 { color: var(--white); margin-bottom: 0.5em; }
.homeHeroContent .lede {
  color: var(--cream);
  font-size: 1.25rem;
  margin-bottom: 1.8em;
}
.heroActions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* The site's one authored motion moment: a staged hero entrance. */
html.js .homeHeroContent > * {
  opacity: 0;
  transform: translateY(22px);
  animation: heroRise 700ms var(--ease-out) forwards;
}
html.js .homeHeroContent > :nth-child(2) { animation-delay: 120ms; }
html.js .homeHeroContent > :nth-child(3) { animation-delay: 240ms; }

@keyframes heroRise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .homeHeroContent > * { opacity: 1; transform: none; animation: none; }
}

/* ---------- Collage band ---------- */

.collageGrid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
}
.collageCopy .btn { margin-top: 0.5rem; }
.collageImgs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.collageImgs img {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
}
.collageImgs img:first-child { grid-column: 1 / 10; grid-row: 1; }
.collageImgs img:last-child {
  grid-column: 6 / 13;
  grid-row: 1;
  margin-top: 55%;
  border: 6px solid var(--white);
}

@media (max-width: 820px) {
  .collageGrid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ---------- Split band ---------- */

.splitBand { display: grid; grid-template-columns: 1fr 1fr; }
.splitPanel { padding: 4rem clamp(1.5rem, 5vw, 5rem); }
.splitPanel p { margin-bottom: 1.6em; }
.splitTeal { background: var(--teal); }
.splitTeal h2 { color: var(--white); }
.splitTeal p { color: var(--cream); }
.splitCream { background: var(--cream); }

@media (max-width: 820px) {
  .splitBand { grid-template-columns: 1fr; }
}