/* Hero layout */
.ebp-hero-1 {
  --ebp-hero-background: var(--clr-air);
  position: relative;
  display: grid;
  /* min-height: clamp(34rem, 51vw, 46rem); */
  overflow: hidden;
  color: var(--clr-ink);
  background-color: var(--ebp-hero-background);
  isolation: isolate;
  aspect-ratio: 1440/810;
}

.ebp-hero-1__media,
.ebp-hero-1__overlay {
  position: absolute;
  inset: 0;
}

.ebp-hero-1__media {
  z-index: -2;
}

.ebp-hero-1__image {
  aspect-ratio: 1440/810;
}

/* The gradient keeps the text readable while leaving the subject visible. */

.ebp-hero-1__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 83.75rem;
  margin-inline: auto;
  /* padding: var(--spacing-56) var(--spacing-20); */
}

.ebp-hero-1__content {
  width: min(100%, 31rem);
}

/*
 * Start the animated text hidden so it cannot flash before the footer script
 * runs. Visitors who prefer reduced motion always see the text immediately.
 */
@media (prefers-reduced-motion: no-preference) {
  .ebp-hero-1--animate .ebp-hero-1__subheading,
  .ebp-hero-1--animate .ebp-hero-1__heading,
  .ebp-hero-1--animate .ebp-hero-1__copy,
  .ebp-hero-1--animate .ebp-hero-1__actions {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
  }
}

.ebp-hero-1__heading {
  font-size: clamp(var(--fs-36), 3.35vw, var(--fs-48));
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.ebp-hero-1__copy {
  max-width: 29rem;
  margin-block-start: var(--spacing-28);
  font-size: var(--fs-24);
  line-height: 1.25;
}

.ebp-hero-1__actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--spacing-20);
  margin-top: var(--spacing-28);
}

@media (max-width: 1024px) {
  .ebp-hero-1 {
    min-height: 39rem;
  }

  .ebp-hero-1__content {
    width: min(60%, 31rem);
  }
}

@media (max-width: 575px) {
  .ebp-hero-1 {
    display: flex;
    min-height: 70vh;
    align-items: flex-end;
  }

  .ebp-hero-1__media {
    height: 70vh;
  }

  .ebp-hero-1__image {
    object-position: center top;
    aspect-ratio: auto;
  }

  .ebp-hero-1__inner {
    align-items: flex-end;
    padding: var(--spacing-28) 1rem;
  }

  .ebp-hero-1__content {
    width: 100%;
  }

  .ebp-hero-1__heading {
    font-size: var(--fs-36);
  }

  .ebp-hero-1__copy {
    font-size: var(--fs-16);
  }

  .ebp-hero-1__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .ebp-hero-1__actions .ebp-button {
    min-width: 0;
    min-height: 3.25rem;
    padding-inline: 0.75rem;
  }
}