/*
 * hero.css
 * S1 — Hero
 * Homepage · scoped under .page-homepage .hero
 * Tokens only — no hard-coded values.
 */

/* ─── Section ────────────────────────────────────────────── */
.page-homepage .hero {
  min-height: 600px;
  background-image:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 1) 35%,
      rgba(255, 255, 255, 0) 70%
    ),
    url("https://tichealth.co.uk/wp-content/uploads/2025/01/sliderOneMobile.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

/*
 * Homepage exception: container left-anchored instead of centered.
 * Keeps copy flush to the left gutter rather than mid-page.
 */
.page-homepage .hero .container {
  margin-left: 0;
  padding-left: var(--space-2xl);
}

/* ─── Copy column ────────────────────────────────────────── */
.hero__inner {
  max-width: 640px;
  padding-left: var(--space-2xl);
}

/* ─── Heading ────────────────────────────────────────────── */
.hero__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-height);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-spacing);
  color: var(--color-text-heading);
  margin-bottom: var(--space-lg);
}

.hero__highlight {
  color: var(--color-primary);
}

/* ─── Body ───────────────────────────────────────────────── */
.hero__description {
  font-family: var(--font-base);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-height);
  color: var(--color-text-body);
  margin-bottom: var(--space-xl);
}

/* ─── CTA area ───────────────────────────────────────────── */
.hero__action-area {
  display: flex;
  gap: var(--space-xl);
}

.hero__button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.hero__btn-subtext {
  font-family: var(--font-base);
  font-size: var(--text-body-sm-size);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-homepage .hero {
    background:
      linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
      url("https://tichealth.co.uk/wp-content/uploads/2025/01/sliderOneMobile.webp");
    justify-content: center;
    text-align: center;
  }

  /* Reset desktop left-anchor so container centres correctly on mobile */
  .page-homepage .hero .container {
    margin-left: auto;
    padding-left: var(--space-lg);
  }

  .hero__inner {
    max-width: 100%;
    padding-left: 0;
  }

  .hero__action-area {
    flex-direction: column;
    align-items: center;
  }

  .hero__heading {
    font-size: 28px;
  }

  .hero__description {
    font-size: 16px;
  }
}