/* ==========================================================================
   Innervana Coaching — page.css
   Shared styles for the standard inner pages (bio, contact, sales).
   ========================================================================== */

/* --- Standard page hero (text only, no full-bleed image) --- */
.page-hero {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-24);
  text-align: center;
}
/* The wrapper used to cap everything at the 44rem text column, which forced
   the About headline onto two lines even on a wide screen. The cap now sits on
   each child instead, so the headline gets room to hold one line when there is
   room and wraps by itself when there is not. */
.page-hero__inner {
  margin-inline: auto;
}
.page-hero h1 {
  margin-bottom: var(--space-4);
  max-width: 56rem;
  margin-inline: auto;
  /* When it does wrap, break it into even lines rather than leaving one word
     stranded. Browsers without support just wrap the old way. */
  text-wrap: balance;
}

/* A headline whose sentences each want their own line, whatever the width.
   Keep the space between the spans in the markup: it is what separates the
   sentences if the CSS never loads. */
.page-hero h1.headline-lines span {
  display: block;
  /* Each sentence balances its own wrap on a narrow screen, rather than
     inheriting a balance calculated across the whole headline. */
  text-wrap: balance;
}
.page-hero__subhead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-body);
  max-width: 40ch;
  margin-inline: auto;
  /* Keeps a two-line subhead from ending on a one-word orphan. Ignored by
     browsers that do not support it, which just wrap the old way. */
  text-wrap: balance;
}

/* A Book now button inside the hero, for small screens only. On a phone the
   calendar button further down the page sits well below the fold, so the hero
   carries its own. On a desktop the page is short enough that the lower button
   is already visible, and a second one would just repeat itself. The hero also
   loses some of its vertical padding on a phone, to keep the button up. */
.page-hero__cta {
  display: none;
  justify-content: center;
  margin-top: var(--space-6);
}
@media (max-width: 48rem) {
  .page-hero__cta { display: flex; }
  .page-hero { padding-block: var(--space-12); }
}

/* --- Bio: portrait + story split --- */
.bio-intro {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1024px) {
  .bio-intro {
    grid-template-columns: 4fr 8fr;
    gap: var(--space-16);
  }
}

/* A 4:5 portrait is much taller than the story beside it, which left a long
   empty column. Capped and cropped so the two sit closer in height. */
.bio-intro__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 30rem;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--border-radius-lg);
}
.bio-intro__media figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  text-align: center;
}

/* Section heading inside a story block */
.story-block + .story-block { margin-top: var(--space-16); }
.story-block h2 { margin-bottom: var(--space-6); }

/* --- Contact --- */
.contact-body {
  text-align: center;
}
.contact-body .prose { margin-inline: auto; }
.contact-body .prose p { text-align: center; }
.contact-body .btn-group {
  justify-content: center;
  margin-top: var(--space-12);
}

.signoff {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-text-primary);
  margin-top: var(--space-16);
  text-align: center;
}

/* --- Sales --- */
.sales-graphic {
  margin-block: var(--space-16);
}
.sales-graphic img {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  border-radius: var(--border-radius-lg);
}
.sales-graphic figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-4);
}

/* Final CTA band reused across inner pages */
.cta-band {
  text-align: center;
}
.cta-band .prose { margin-inline: auto; }
.cta-band .prose p { text-align: center; }
.cta-band .btn-group {
  justify-content: center;
  margin-top: var(--space-8);
}

/* --- Coaching: the price block --- */
.price-card {
  max-width: var(--width-text);
  margin-top: var(--space-12);
  padding: var(--space-12);
  background: var(--color-bg-secondary);
  border-radius: var(--border-radius-lg);
  position: relative;
}
.price-card::before {
  content: "";
  position: absolute;
  inset-inline: var(--space-12);
  top: 0;
  height: 4px;
  border-radius: 0 0 2px 2px;
  background: var(--gradient-dawn);
}
.price-card__figure {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
/* Sits inline after the figure now, rather than on its own line below it. */
.price-card__until {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--color-coral-text);
  white-space: nowrap;
}
.price-card__figure { margin-bottom: var(--space-8); }
.price-card p { max-width: none; }
.price-card p + p { margin-top: var(--space-4); }