/* Practice topic pages written as selling pages (content/topics/*.json "pitch"). Loaded after home.css; reuses its hm- tokens and components. */
.topic-pitch .breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem .75rem; padding: 0 0 2.5rem; font-size: .8125rem; color: var(--hm-muted); }
.topic-pitch .breadcrumbs a { color: var(--hm-muted); }
.topic-pitch .breadcrumbs a:hover { color: var(--hm-text); text-decoration: underline; }
.topic-pitch .breadcrumbs [aria-current] { color: var(--hm-text); }

/* Section headings: keep each clause together, wrap inside a clause with normal CJK line-breaking rules */
.tp-clause { display: inline-block; word-break: normal; overflow-wrap: normal; line-break: strict; }

/* Hero */
.tp-hero { padding-top: 2rem; padding-bottom: 3rem; }
.tp-hero-figure { justify-self: end; width: min(26rem, 100%); }
.tp-hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--hm-radius-card); box-shadow: 0 1.5rem 3rem rgb(18 26 24 / .16); }
/* Landscape hero art: keep the figure, left of centre, inside the portrait crop */
.topic-tai-chi .tp-hero-figure img { object-position: 45% 50%; }

/* History */
.tp-history { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
.tp-history .hm-section-head { margin-bottom: 0; }
.tp-prose p { color: var(--hm-muted); font-size: 1.125rem; line-height: 1.9; }
.tp-prose p + p { margin-top: 1.25rem; }
.tp-prose p:first-child { color: var(--hm-text); }
.tp-stats { list-style: none; padding: 0; margin: 4rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: .0625rem solid var(--hm-line-strong); }
.tp-stats li { padding: 1.75rem 1.5rem 0 0; display: grid; gap: .375rem; }
.tp-stats li + li { padding-left: 1.5rem; border-left: .0625rem solid var(--hm-line); }
.tp-stats strong { font-family: var(--hm-serif); font-weight: 600; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.1; color: var(--hm-jade-ink); }
.tp-stats small { font-size: 1.125rem; margin-left: .25rem; color: var(--hm-text); }
.tp-stats span { color: var(--hm-muted); font-size: .9375rem; line-height: 1.6; }

/* Benefits */
.tp-benefits { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.5rem; align-items: start; }
.tp-benefits-side { display: grid; gap: 1.5rem; }
.tp-benefits-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--hm-radius-card); }
.tp-research { padding: 1.75rem; border-radius: var(--hm-radius-card); background: var(--hm-surface); border: .0625rem solid var(--hm-line); box-shadow: var(--hm-shadow); }
.tp-research-label { color: var(--hm-gold-ink); font-size: .875rem; font-weight: 700; letter-spacing: .12em; }
.tp-research-value { font-family: var(--hm-serif); font-weight: 600; font-size: 1.125rem; margin-top: .25rem; }
.tp-research-value strong { font-size: 3rem; line-height: 1.15; color: var(--hm-jade-ink); margin-right: .375rem; }
.tp-research p:not([class]) { color: var(--hm-muted); font-size: .9375rem; line-height: 1.75; margin-top: .5rem; }
.tp-research a { display: inline-block; margin-top: .75rem; padding: .375rem 0; color: var(--hm-jade-ink); font-weight: 700; }
.tp-research a:hover { color: var(--hm-text); }
/* Second study: same card, smaller number so the first stays the headline */
.tp-research-minor .tp-research-value strong { font-size: 2.25rem; }
.tp-benefit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.tp-benefit-list li { padding: 1.375rem 1.5rem; border-radius: var(--hm-radius-sm); background: var(--hm-surface); border: .0625rem solid var(--hm-line); }
.tp-benefit-list li > p:last-child { color: var(--hm-muted); font-size: .9375rem; line-height: 1.7; margin-top: .375rem; }
.tp-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.tp-change span:first-child { color: var(--hm-muted); font-size: .9375rem; text-decoration: line-through; text-decoration-color: rgb(196 154 92 / .7); }
.tp-change-arrow { color: var(--hm-gold-ink); font-weight: 700; }
.tp-change strong { font-family: var(--hm-serif); font-weight: 600; font-size: 1.3125rem; color: var(--hm-text); }
#benefits .hm-caption { margin-top: 1.5rem; }

/* Easier than tai chi */
.tp-ease { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
.tp-ease .hm-section-head { margin-bottom: 0; }
.tp-compare { min-width: 0; }
.tp-compare tbody th { width: 6.5em; }
.tp-compare td { text-wrap: pretty; }

/* Long-term timeline */
.tp-timeline { list-style: none; padding: 0; margin: 0 0 4rem; display: grid; grid-template-columns: repeat(4, 1fr); border-top: .125rem solid var(--hm-jade); }
.tp-timeline li { position: relative; padding: 1.75rem 1.5rem 0 0; }
.tp-timeline li::before { content: ""; position: absolute; top: -.4375rem; left: 0; width: .75rem; height: .75rem; border-radius: 50%; background: var(--hm-bg); border: .125rem solid var(--hm-jade); }
.tp-timeline-when { color: var(--hm-gold-ink); font-weight: 700; font-size: .875rem; letter-spacing: .04em; }
.tp-timeline h3 { margin: .375rem 0 .5rem; font-size: 1.375rem; }
.tp-timeline li > p:last-child { color: var(--hm-muted); font-size: .9375rem; line-height: 1.75; }
.tp-benefits-subtitle { font-size: 1.25rem; margin: 0 0 1rem; }

/* Learn */
.tp-learn-note span { white-space: nowrap; }
.tp-learn-note { margin-top: 1.75rem; color: var(--hm-jade-ink); font-weight: 700; font-size: .9375rem; }

/* Topics without an App course: point to the courses the App has */
.tp-next { margin-top: 3rem; padding: 2rem; display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; align-items: center; border-radius: var(--hm-radius-card); background: var(--hm-surface); border: .0625rem solid var(--hm-line); border-top: .25rem solid var(--hm-jade); box-shadow: var(--hm-shadow); }
.tp-next-eyebrow { color: var(--hm-gold-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .5rem; }
.tp-next h3 { font-size: 1.5rem; line-height: 1.45; }
.tp-next-copy p:not([class]) { color: var(--hm-muted); font-size: .9375rem; line-height: 1.8; margin-top: .75rem; }
.tp-next-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tp-next-card { height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--hm-radius-sm); background: var(--hm-bg); border: .0625rem solid var(--hm-line); color: var(--hm-text); }
.tp-next-card:hover { border-color: rgb(74 122 115 / .45); box-shadow: var(--hm-shadow-hover); }
.tp-next-card img { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tp-next-body { display: grid; gap: .25rem; padding: 1rem 0 1.125rem 1.125rem; }
.tp-next-body strong { font-family: var(--hm-serif); font-weight: 600; font-size: 1.25rem; }
.tp-next-tag { color: var(--hm-jade-ink); font-size: .9375rem; font-weight: 700; }
.tp-next-meta { color: var(--hm-muted); font-size: .8125rem; }
.tp-next-arrow { align-self: center; padding: 0 1.125rem; color: var(--hm-jade-ink); }
.hm-cta-copy .tp-cta-next { margin-top: .375rem; }
.tp-cta-next a { color: #f5f5f0; text-decoration: underline; text-underline-offset: .1875rem; }

/* Further reading */
.tp-reading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
.tp-reading .hm-section-head { margin-bottom: 0; }
.tp-reading-list { border-top: .0625rem solid var(--hm-line-strong); }
.tp-reading-row { display: grid; grid-template-columns: 7em 1fr auto; gap: 1rem; align-items: baseline; padding: 1.25rem 0; border-bottom: .0625rem solid var(--hm-line); }
.tp-reading-row:hover strong { color: var(--hm-jade-ink); }
.tp-reading-label { color: var(--hm-gold-ink); font-size: .8125rem; font-weight: 700; }
.tp-reading-row strong { font-family: var(--hm-serif); font-weight: 600; font-size: 1.125rem; line-height: 1.55; }
.tp-reading-arrow { color: var(--hm-jade-ink); }
.tp-reading-more { margin-top: 1.25rem; color: var(--hm-muted); font-size: .9375rem; line-height: 1.8; }
.tp-reading-more a { color: var(--hm-jade-ink); }
.tp-reading-more a { text-decoration: underline; text-underline-offset: .1875rem; }
.tp-reading-all { margin-top: .75rem; font-size: .9375rem; }
.tp-reading-all a { color: var(--hm-jade-ink); font-weight: 700; }

/* Source pills are links here */
.tp-sources li { padding: 0; }
.tp-sources a { display: block; padding: .375rem .875rem; }
.tp-sources a:hover { color: var(--hm-text); }
.tp-sources li:hover { border-color: var(--hm-jade); }

@media (max-width: 60em) {
  .tp-hero-figure { justify-self: start; }
  .tp-history, .tp-reading, .tp-benefits, .tp-ease, .tp-next { grid-template-columns: 1fr; gap: 2rem; }
  .tp-timeline { grid-template-columns: 1fr 1fr; row-gap: 2rem; border-top: 0; }
  .tp-timeline li { border-top: .125rem solid var(--hm-jade); }
  .tp-benefits-side { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (max-width: 40em) {
  .topic-pitch .breadcrumbs { padding-bottom: 1.5rem; }
  .tp-hero { padding-top: 1.25rem; padding-bottom: 2rem; }
  .tp-hero-figure { width: 100%; }
  .tp-hero-figure img { aspect-ratio: 4 / 3; }
  /* Seated figure fills the portrait art top to bottom; 4:3 would cut the head or feet */
  .topic-yoga .tp-hero-figure img { aspect-ratio: 1 / 1; object-position: 50% 60%; }
  .topic-meditation .tp-hero-figure img { aspect-ratio: 1 / 1; object-position: 50% 55%; }
  .tp-next { margin-top: 2.5rem; padding: 1.5rem 1.25rem; }
  .tp-next h3 { font-size: 1.3125rem; }
  .tp-next-list { grid-template-columns: 1fr; }
  .tp-prose p { font-size: 1.0625rem; }
  .tp-stats { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .tp-stats li, .tp-stats li + li { padding: 1.25rem 0; border-left: 0; }
  .tp-stats li + li { border-top: .0625rem solid var(--hm-line); }
  .tp-benefits-side { grid-template-columns: 1fr; }
  .tp-timeline { grid-template-columns: 1fr; row-gap: 0; margin-bottom: 3rem; border-left: .125rem solid var(--hm-jade); }
  .tp-timeline li { border-top: 0; padding: 0 0 1.75rem 1.5rem; }
  .tp-timeline li:last-child { padding-bottom: 0; }
  .tp-timeline li::before { top: .25rem; left: -.4375rem; }
  /* Fixed layout so long column headings can't squeeze the row labels into one character per line */
  .tp-compare { table-layout: fixed; }
  .tp-compare th, .tp-compare td { padding: .875rem .75rem; }
  .tp-compare thead th { white-space: normal; font-size: 1rem; }
  .tp-compare tr > :first-child { width: 4.5rem; }
  .tp-compare tbody th { white-space: normal; }
  .tp-research { padding: 1.375rem 1.25rem; }
  .tp-benefit-list li { padding: 1.125rem 1.25rem; }
  .tp-change strong { font-size: 1.1875rem; }
  .tp-reading-row { grid-template-columns: 1fr auto; gap: .25rem 1rem; }
  .tp-reading-label { grid-column: 1 / -1; }
}