/* ============================================================================
   HealOneSelf — SHARED COMPONENTS (Block 2, Build List 3 August 2026)
   ----------------------------------------------------------------------------
   Built once, used everywhere. Every value here comes from tokens.css; this
   file introduces no colours, no shadows and no font stacks of its own.

     hos-drift      ambient gem animation          sitewide
     hos-headline   upright serif + italic terra   every page headline
     hos-rule       terracotta hairline opener     heroes
     hos-beat       single statement line          home, about, offer pages
     hos-method     the four Method steps          home, WWM, Remember You, FY
     hos-pathway    offer card block               work with me, home

   Markup for each is produced by the render helpers in
   includes/components.php — use those rather than hand-writing the HTML, so
   the structure stays identical across pages.
   ========================================================================== */


/* ── hos-drift ───────────────────────────────────────────────────────────────
   The ambient floating gems behind heroes. Was duplicated as `drift` in
   about/finally-you/stories/work-with-me and `hos-drift` in contact/homepage —
   six copies of the same keyframes, and because @keyframes are global rather
   than scoped by selector, the unprefixed name collided across stylesheets.
   Peak opacity is capped at 0.15 per the build list (it was 0.32).
   ========================================================================== */

.hos-drift {
  position: absolute;
  font-family: var(--hos-serif);
  color: var(--hos-terra);
  pointer-events: none;
  animation: hos-drift ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes hos-drift {
  0%, 100% { transform: translateY(0) rotate(0deg);      opacity: .08; }
  50%      { transform: translateY(-10px) rotate(6deg);  opacity: .15; }
}


/* ── hos-headline ────────────────────────────────────────────────────────────
   Upright dark serif, then italic terracotta via an <em>. One rule, so a
   headline reads the same on every page.
   ========================================================================== */

.hos-headline {
  font-family: var(--hos-serif);
  font-weight: 300;
  line-height: 1.15;
  color: var(--hos-ink);
  margin: 0;
}

.hos-headline em {
  font-style: italic;
  color: var(--hos-terra);
}

/* size modifiers — the tiers named in theme.json */
.hos-headline--display { font-size: clamp(48px, 8vw, 112px); }
.hos-headline--large   { font-size: clamp(36px, 6vw, 68px); }
.hos-headline--section { font-size: clamp(32px, 5vw, 58px); }
.hos-headline--sub     { font-size: clamp(28px, 4vw, 52px); }


/* ── hos-rule ────────────────────────────────────────────────────────────────
   The terracotta hairline that opens a hero. Vertical by default because
   that is how the heroes use it; --horizontal for section dividers.
   ========================================================================== */

.hos-rule {
  display: block;
  width: 1px;
  height: 64px;
  margin: 0 auto var(--hos-tight);
  background: linear-gradient(to bottom, transparent, var(--hos-terra));
  border: 0;
  opacity: .5;
}

.hos-rule--horizontal {
  width: 64px;
  height: 1px;
  margin: var(--hos-tight) 0;
  background: linear-gradient(to right, var(--hos-terra), transparent);
}


/* ── hos-beat ────────────────────────────────────────────────────────────────
   A single statement line dropped between paragraphs. Larger than body,
   italic emphasis in terracotta, and given room to breathe on both sides.
   ========================================================================== */

.hos-beat {
  font-family: var(--hos-serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--hos-ink);
  margin: var(--hos-block) 0;
  text-align: center;
}

.hos-beat em {
  font-style: italic;
  color: var(--hos-terra);
}


/* ── hos-method ──────────────────────────────────────────────────────────────
   The four Method steps. Compact = number, name, one line. Expanded = a
   paragraph each. Same markup, one modifier.
   ========================================================================== */

.hos-method {
  display: grid;
  gap: var(--hos-block);
  max-width: var(--hos-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.hos-method--compact  { grid-template-columns: repeat(4, 1fr); }
.hos-method--expanded { grid-template-columns: repeat(2, 1fr); }

.hos-method-step {
  position: relative;
  padding-top: var(--hos-tight);
  border-top: 1px solid var(--hos-hairline);
}

.hos-method-num {
  display: block;
  font-family: var(--hos-sans);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hos-ink-3);
  margin-bottom: 12px;
}

.hos-method-name {
  font-family: var(--hos-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.25;
  color: var(--hos-ink);
  margin: 0 0 10px;
}

.hos-method-name em {
  font-style: italic;
  color: var(--hos-terra);
}

.hos-method-body {
  font-family: var(--hos-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--hos-ink-2);
  margin: 0;
}

.hos-method--compact .hos-method-body {
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .hos-method--compact { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hos-method--compact,
  .hos-method--expanded { grid-template-columns: 1fr; }
}


/* ── hos-pathway ─────────────────────────────────────────────────────────────
   The offer card block. Hover is a hairline change from 0.15 to 0.34 — no
   lift, no glow, per Block 1.
   ========================================================================== */

.hos-pathways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hos-block);
  max-width: var(--hos-max);
  margin: 0 auto;
}

.hos-pathway {
  display: flex;
  flex-direction: column;
  padding: var(--hos-block);
  background: var(--hos-white);
  border: 1px solid var(--hos-hairline);
  border-radius: 2px;
  box-shadow: var(--hos-shadow-card);
  transition: border-color .25s ease;
}

.hos-pathway:hover {
  border-color: rgba(196, 130, 90, 0.34);
}

.hos-pathway-eyebrow {
  font-family: var(--hos-sans);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hos-ink-3);
  margin: 0 0 14px;
}

.hos-pathway-name {
  font-family: var(--hos-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--hos-ink);
  margin: 0 0 6px;
}

.hos-pathway-name em {
  font-style: italic;
  color: var(--hos-terra);
}

.hos-pathway-meta {
  font-family: var(--hos-sans);
  font-size: 14px;
  color: var(--hos-ink-3);
  margin: 0 0 var(--hos-tight);
}

.hos-pathway-price {
  font-family: var(--hos-serif);
  font-size: 28px;
  color: var(--hos-terra);
}

.hos-pathway-body {
  font-family: var(--hos-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--hos-ink-2);
  margin: 0 0 var(--hos-tight);
}

.hos-pathway-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hos-cta);
  color: var(--hos-white);
  font-family: var(--hos-sans);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 32px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s ease;
}

.hos-pathway-cta:hover {
  background: var(--hos-ink-2);
  color: var(--hos-white);
}


/* ── Motion ──────────────────────────────────────────────────────────────────
   One place, covering every shared component and the per-page animations
   that are still in the page stylesheets.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hos-drift {
    animation: none;
    opacity: .12;
  }

  .hos-pathway {
    transition: none;
  }
}