/* ==========================================================================
   Block: Hero
   Only rules unique to this block. Section padding, background and surface
   colours come from the shell.
   ========================================================================== */

.awx-hero {
  overflow: hidden;
}

.awx-hero--tall {
  min-height: min(78vh, 760px);
  display: flex;
  align-items: center;
}

.awx-hero--tall > .awx-section__inner {
  width: min(100% - (var(--awx-gutter) * 2), 1440px);
}

/* The pale sweep behind the navy hero in the comps. Masked from the real
   comp export (assets/img/vector-hero.svg, a 1440x642 curve already drawn
   to bleed past both edges of the frame) rather than approximated with a
   border-radius arc. Masking instead of an <img> means the colour still
   comes from the surface token, not a hardcoded value baked into the file. */
.awx-hero--sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--surface-accent);
  opacity: 0.05;
  -webkit-mask-image: url("../../assets/img/vector-hero.svg");
  mask-image: url("../../assets/img/vector-hero.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  pointer-events: none;
  z-index: 0;
}

.awx-hero__grid {
  display: grid;
  gap: var(--awx-space-lg);
}

@media (min-width: 62rem) {
  .awx-hero--split .awx-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
  }
}

.awx-hero__lede {
  min-width: 0;
}

.awx-hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--awx-space-md);
  min-width: 0;
}

.awx-hero__body {
  max-width: 48ch;
  color: var(--surface-text);
}

.awx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--awx-space-sm);
  align-items: center;
}

/* ---- Optional bullet columns (Products hero) --------------------------- */

.awx-hero__bullets {
  display: grid;
  gap: var(--awx-space-md);
  margin-top: var(--awx-space-lg);
}

@media (min-width: 48rem) {
  .awx-hero__bullets {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.awx-hero__bullet-title {
  margin: 0 0 var(--awx-space-sm);
  color: var(--surface-text);
  font-weight: 600;
}

.awx-hero__bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--awx-space-xs);
}

.awx-hero__bullet-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--surface-text);
}

/* the short gold dash used instead of a bullet glyph in the comps */
.awx-hero__bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1rem;
  height: 2px;
  background: var(--surface-accent);
}

.awx-hero__footnote {
  max-width: var(--awx-measure);
  margin: var(--awx-space-lg) 0 0;
  color: var(--surface-text);
}