/* hero.css - Hero section */

.hero {
  position: relative;
  min-height: 80vh;
  padding: var(--sp-9) 0 var(--sp-8);
  background: var(--cal-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* --- Background motif ----------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__bg-circle {
  position: absolute;
  border-radius: 50%;
  background: var(--cal-teal-tint);
}
.hero__bg-circle--a {
  width: 520px; height: 520px;
  top: -180px; right: -200px;
  opacity: 0.55;
}
.hero__bg-circle--b {
  width: 320px; height: 320px;
  bottom: -140px; left: -140px;
  opacity: 0.5;
}
.hero__bg-circle--c {
  width: 180px; height: 180px;
  top: 30%; left: 8%;
  opacity: 0.35;
}
.hero__bg-circle--d {
  width: 80px; height: 80px;
  top: 14%; left: 46%;
  opacity: 0.3;
}
.hero__bg-circle--e {
  width: 60px; height: 60px;
  top: 72%; right: 28%;
  opacity: 0.35;
}
.hero__bg-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--cal-coral);
}
.hero__bg-dot--a { width: 10px; height: 10px; bottom: 20%; right: 12%; }

/* The single allowed gradient — very subtle radial in upper right */
.hero__bg-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 85% 15%,
    rgba(204, 251, 241, 0.35) 0%,
    transparent 45%
  );
}

/* --- Inner ---------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-wide);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  display: grid;
  grid-template-columns: 6fr 4fr;
  align-items: center;
  gap: var(--sp-7);
}

.hero__content {
  max-width: 560px;
}

.hero__heading {
  margin-bottom: var(--sp-5);
  /* Allow wrap only at <wbr>, never mid-phrase. */
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}

.hero__lead {
  color: var(--fg-2);
  margin-bottom: var(--sp-6);
}

/* --- Campaign badge ------------------------------------------- */
.hero__campaign {
  background: var(--cal-teal-tint);
  border-left: 4px solid var(--cal-teal);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: 0;
}

.hero__campaign-main {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--cal-text);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}
.hero__campaign-main strong {
  color: var(--cal-teal-dark);
  font-weight: var(--fw-bold);
}
.hero__campaign-dot {
  flex-shrink: 0;
  color: var(--cal-teal);
  font-size: 0.95em;
  line-height: 1;
}

.hero__campaign-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Note now sits OUTSIDE the badge (just below). */
.hero__campaign-note {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--cal-text-muted);
  line-height: var(--lh-normal);
  margin: var(--sp-2) 0 var(--sp-6);
}

/* --- CTAs ----------------------------------------------------- */
.hero__ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* --- Visual --------------------------------------------------- */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* --- Tablet (1024px and below): stack ------------------------- */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .hero__content {
    max-width: none;
  }
  .hero__visual {
    max-width: 380px;
    margin: 0 auto;
  }
}

/* --- Mobile (≤768px) ----------------------------------------- */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: var(--sp-7) 0 var(--sp-6);
  }
  .hero__inner {
    gap: var(--sp-6);
  }
  /* Fluid scale so it never overflows on 320px screens */
  .hero__heading.cal-display {
    font-size: clamp(2rem, 8.5vw, 2.5rem);
  }
  .hero__campaign-main {
    font-size: var(--fs-body-lg);
  }
  .hero__bg-circle--a {
    width: 320px; height: 320px;
    top: -120px; right: -120px;
  }
  .hero__bg-circle--b {
    width: 200px; height: 200px;
    bottom: -100px; left: -80px;
  }
  .hero__bg-circle--c {
    width: 120px; height: 120px;
  }
  .hero__bg-circle--d,
  .hero__bg-circle--e {
    display: none;
  }
  .hero__visual {
    max-width: 320px;
  }
}