/* ============================================================
   AXIS WEBPRO | components/hero.css
   Unified hero across all page templates. Per-page image lives in
   .hero-bg via <picture>. Navy + mesh + dot overlay reads the same
   regardless of the underlying image.

   Stacking order (top to bottom of the z-axis):
     z=3  .hero-content (eyebrow, h1, sub, CTAs)
     z=3  .hero-mark    (top-right signature SVG)
     z=2  .hero::after  (dot pattern, ellipse-masked)
     z=1  .hero::before (navy tint + mesh blobs)
     z=0  .hero-bg      (background image)

   References tokens.css. Zero hardcoded hex except inside the
   inline signature SVG (centre dot uses --color-accent literal).
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: clamp(80px, 12vh, 140px);
  min-block-size: clamp(440px, 60vh, 680px);
  color: var(--color-base);
  background-color: var(--color-primary);
}

/* ----------------------------------------
   LAYER 0 | image
   ---------------------------------------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg picture,
.hero-bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
  margin: 0;
}

/* ----------------------------------------
   LAYER 1 | navy tint + mesh blobs
   ---------------------------------------- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 18% 22%,
      color-mix(in srgb, var(--color-secondary) 35%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse 70% 60% at 82% 78%,
      color-mix(in srgb, var(--color-accent) 22%, transparent) 0%,
      transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary) 88%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 70%, transparent) 100%);
  pointer-events: none;
}

/* ----------------------------------------
   LAYER 2 | dot pattern, masked toward edges
   ---------------------------------------- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(circle at center,
    color-mix(in srgb, var(--color-base) 12%, transparent) 1.5px,
    transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}

/* ----------------------------------------
   LAYER 3 | content + signature mark
   ---------------------------------------- */
.hero-content {
  position: relative;
  z-index: 3;
  max-inline-size: 720px;
}

.hero-mark {
  position: absolute;
  inset-block-start: clamp(20px, 3vw, 36px);
  inset-inline-end: clamp(20px, 3vw, 36px);
  z-index: 3;
  pointer-events: none;
  display: block;
  inline-size: 56px;
  block-size: 56px;
}

/* Override the .axis-mark base color on the dark hero surface.
   The base.css rule uses --color-base 18%, which is fine but a bit
   timid against a busy image overlay. Bump it for hero usage. */
.hero .axis-mark.is-on-dark {
  color: color-mix(in srgb, var(--color-base) 28%, transparent);
}

/* ----------------------------------------
   TYPE LADDER INSIDE HERO
   ---------------------------------------- */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  margin-block-end: var(--space-4);
}
.hero .eyebrow::before {
  content: "";
  display: inline-block;
  inline-size: 18px;
  block-size: 1px;
  background: var(--color-accent);
}

.hero h1 {
  color: var(--color-base);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-block-end: var(--space-4);
  max-inline-size: 18ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--color-accent);
}

.hero .hero-lede {
  color: color-mix(in srgb, var(--color-base) 86%, transparent);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.55;
  max-inline-size: 56ch;
  margin-block-end: var(--space-5);
}

.hero .hero-positioning {
  display: inline-block;
  color: var(--color-accent);
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin-block-end: var(--space-5);
}

/* ----------------------------------------
   CTA ROW
   ---------------------------------------- */
.hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}
.hero .hero-ctas .btn-primary {
  padding-inline: var(--space-6);
}

/* The shared .btn-secondary in components.css already targets
   dark surfaces (transparent bg, white border, white text, inverts
   on hover). It works as-is inside .hero. No override needed. */

.hero .hero-note {
  color: color-mix(in srgb, var(--color-base) 65%, transparent);
  font-size: var(--fs-small);
  margin-block-start: var(--space-4);
  max-inline-size: 48ch;
}

/* ----------------------------------------
   MOBILE | tighten the box
   ---------------------------------------- */
@media (max-width: 47.99em) {
  .hero {
    padding-block: clamp(56px, 9vh, 88px);
    min-block-size: clamp(360px, 50vh, 460px);
  }
  .hero-mark {
    inline-size: 40px;
    block-size: 40px;
  }
  .hero .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .hero-ctas .btn {
    inline-size: 100%;
    justify-content: center;
  }
}

/* ----------------------------------------
   REDUCED MOTION already honored globally via base.css.
   No extra rules needed.
   ---------------------------------------- */