/* ==========================================================================
   Innervana Coaching — home.css
   Page-specific styles for index.html (home / welcome).
   ========================================================================== */

/* --- Hero --- */
/* Solid pale apricot. No photo, no scrim — the warmth comes from the colour.
   TODO: a warmer, sunrise-toned photograph may replace this later. If it does,
   the scrim and light-text rules need to come back with it. */
.home-hero {
  display: flex;
  align-items: center;
  min-height: 78vh;
  background: var(--color-bg-hero);
  color: var(--color-text-body);
}

.home-hero__content {
  max-width: 40rem;
  padding-block: var(--space-24);
}

.home-hero h1 {
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.home-hero__subhead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  max-width: 34ch;
  text-wrap: balance;
}

/* Option B, 27 Sep 2026: the hero runs on one type family. This line used to
   be DM Sans, which made it read as the start of the body copy rather than
   part of the hero. The subhead's italic still separates it from this. */
.home-hero__body {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-body);
  margin-bottom: var(--space-8);
  max-width: 46ch;
}

/* --- Centred statement section (the real need) --- */
.statement {
  text-align: center;
}
.statement .prose {
  margin-inline: auto;
}
.statement .prose p { text-align: center; }

/* Pull quotes now live in components.css: about.html and coaching.html
   use them too and neither page loads this file. */

/* --- "Who I am" split layout --- */
.split__text h2 { margin-bottom: var(--space-6); }

.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
  }
  .split--reverse .split__media { order: 2; }
}

.split__media img {
  width: 100%;
  border-radius: var(--border-radius-lg);
}

/* --- Closing invitation --- */
.invite {
  text-align: center;
}
.invite .prose { margin-inline: auto; }
.invite .prose p { text-align: center; }
.invite .btn-group { justify-content: center; margin-top: var(--space-8); }