/* ==========================================================================
   Hero Section — East Dallas Primary Care
   Full-width gradient hero with topographic texture overlay
   "Warm Professional" — authoritative yet approachable
   ========================================================================== */

/* -----------------------------------------------------------------------
   Hero Container
   Full-width, centered content, navy gradient + texture
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  background: linear-gradient(135deg, var(--hero-start), var(--hero-mid) 50%, var(--hero-end));
  overflow: hidden;
}

/* Animated SVG texture layer — inline SVG with SMIL EKG heartbeat animation */
.hero__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hero__texture animate,
  .hero__texture animateTransform {
    display: none;
  }
}

/* -----------------------------------------------------------------------
   Hero Content
   Centered text block with proper z-index above overlay
   ----------------------------------------------------------------------- */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 6rem;
  padding-bottom: var(--space-12);
  gap: var(--space-6);
}

/* -----------------------------------------------------------------------
   Hero H1
   Lora serif, white, 32px mobile / 48px desktop
   ----------------------------------------------------------------------- */
.hero h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl); /* 32px — mobile first */
  font-weight: var(--weight-semibold);
  color: var(--white);
  line-height: var(--leading-tight);
  max-width: 720px;
  margin: 0;
}

/* -----------------------------------------------------------------------
   Hero Subtitle
   DM Sans, white at 80% opacity, 18px
   ----------------------------------------------------------------------- */
.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg); /* 18px */
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--leading-normal);
  max-width: 560px;
  margin: 0;
}

/* -----------------------------------------------------------------------
   Hero Actions (CTA Buttons)
   Stacked on mobile, side-by-side on desktop
   ----------------------------------------------------------------------- */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
  width: 100%;
}

/* Full-width buttons on small mobile */
.hero__actions .btn {
  width: 100%;
  max-width: 360px;
}

/* -----------------------------------------------------------------------
   Responsive — Tablet (768px)
   ----------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero {
    min-height: 65vh;
  }

  .hero__content {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }

  .hero__actions .btn {
    width: auto;
    max-width: none;
  }
}

/* -----------------------------------------------------------------------
   Responsive — Desktop (1024px)
   ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero {
    min-height: 70vh;
  }

  .hero h1 {
    font-size: var(--text-6xl); /* 48px */
  }

  .hero__content {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
    gap: var(--space-8);
  }
}