/* Ebenezer Simple Header hero.
   A centered eyebrow, heading, supporting text, and buttons over the
   midnight purple building-blocks pattern, with no media item. Loaded on
   top of hero.css, which keeps providing the shared heading, button, and
   sticker styles; everything here scopes under the --simple modifier. */

.acu-ebenezer-hero--simple {
  background-color: var(--acu-midnight-purple);
  color: var(--acu-white);
}

/* The pattern renders on its own layer, like the comp's single image fill
   over the flat background color, so the copy never mixes with it. */
.acu-ebenezer-hero--simple::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/building-blocks-pattern.webp");
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.acu-ebenezer-hero__simple-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* 64px gutters around the design's 1312px content width. */
  max-width: 90rem;
  margin-inline: auto;
  padding: clamp(var(--space-3xl), 8vw, 7rem) var(--space-3xl);
  text-align: center;
}

/* The design's 864px column. */
.acu-ebenezer-hero--simple .acu-ebenezer-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 54rem;
}

/* The Simple Header eyebrow trades the general hero's pill for the page
   sections' coral icon treatment. */
.acu-ebenezer-hero--simple .acu-ebenezer-hero__eyebrow {
  align-items: center;
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  display: flex;
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  gap: var(--space-sm);
  justify-content: center;
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-md);
  padding: 0;
  text-transform: uppercase;
}

.acu-ebenezer-hero--simple .acu-ebenezer-hero__eyebrow-icon {
  display: block;
  flex: 0 0 auto;
  height: 0.75rem;
  width: 1rem;
}

/* The comp's 76px/40px heading matches the Form hero's in-between size. */
.acu-ebenezer-hero--simple .acu-ebenezer-hero__content h1 {
  font-size: clamp(2.5rem, 5.3vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.acu-ebenezer-hero--simple .acu-ebenezer-hero__description {
  color: inherit;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  margin-top: var(--space-md);
  max-width: none;
}

.acu-ebenezer-hero--simple .acu-ebenezer-hero__actions {
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}

@media (max-width: 47.9375rem) {
  .acu-ebenezer-hero__simple-container {
    padding: var(--space-3xl) var(--space-lg);
  }

  .acu-ebenezer-hero--simple .acu-ebenezer-hero__content h1 {
    line-height: 1.1;
  }

  .acu-ebenezer-hero--simple .acu-ebenezer-hero__description {
    font-size: var(--text-md);
  }
}
