/* ============================================================
 * v26 — Home view (/), justified per-view classes
 * ------------------------------------------------------------
 * base.css deliberately has no marketing primitives — it is built for
 * calm interior pages (plain .s-card, page-scale headings). The landing
 * page needs two surfaces base.css does not provide: a display-scale
 * welcome band and a closing invitation band. Each class below is
 * justified in its comment. Colour comes ONLY from theme tokens — no raw
 * hex/rgb appears in any rule.
 * ============================================================ */

/* Welcome band + closing invitation band share one calm, rounded surface.
 * Justification: .s-card is a plain bordered content card with no gradient
 * and page-scale type — neither reads as a hero/CTA band. Tokens only. */
.home-hero,
.home-cta {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-secondary);
  background: linear-gradient(135deg, var(--primary-50), var(--bg-secondary));
  padding: clamp(var(--s-space-6), 6vw, var(--s-space-8)) var(--s-gutter);
}
.home-hero { margin-bottom: var(--s-space-7); }
.home-cta  { margin-top: var(--s-space-8); }

/* Centered reading column for band copy (hero + CTA). */
.home-hero__inner,
.home-cta__inner {
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-space-4);
}

/* Display heading — larger than base's interior-page .s-main h1 (capped at
 * --s-h1); the landing hero wants Satoshi at display scale. */
.home-hero__title,
.home-cta__title {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
}
.home-hero__title { font-size: clamp(2rem, 5vw, 3.25rem); }
.home-cta__title  { font-size: clamp(1.75rem, 4vw, 2.5rem); }

/* Lead copy under a band heading. */
.home-hero__subtitle,
.home-cta__subtitle {
  font-size: var(--s-text-lg);
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0;
}

/* Small uppercase label above the hero content (daily reflection / featured). */
.home-hero__eyebrow {
  font-size: var(--s-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

/* Quote mode — the reflection reads as a calm oversized blockquote.
 * Justification: base.css has no blockquote/pull-quote type style. */
.home-hero__quote {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
}
.home-hero__quote-author {
  color: var(--text-tertiary);
  font-size: var(--s-text-base);
  margin: 0;
}

/* Practitioner spotlight rating line. */
.home-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  color: var(--text-secondary);
  font-size: var(--s-text-sm);
}
.home-hero__star { color: var(--warning); }

/* Reused post-card calls renderAvatar() directly; that legacy helper emits
 * Tailwind size classes (w-8 h-8) which don't resolve in v26, and
 * homepage-v2.css never sizes the blog-card avatar — so without this it renders
 * at the image's intrinsic size. Same pattern base.css uses to size
 * renderAvatar output in chrome contexts (.s-avatar, .s-nav__avatar). The
 * helper always emits an <img>, so this never touches the name/date column. */
.hp2-blog__card-author img {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}