/* ============================================================
   Caplan — treatment (condition) page styles.
   Builds on tokens.css + homepage.css (shared components reused).
   Page-specific bits only: hero sizing, aim cards, subtype chips,
   safety, references, single testimonial.
   ============================================================ */

/* ---------- hero: reuse .hero, just cap the height and reset the homepage's video-specific mobile crop ---------- */
.t-hero { min-height:min(84svh, 720px); }
@media (min-width:900px){ .t-hero { min-height:min(82svh, 740px); } }
.t-eyebrow { font-size:var(--step--1); color:var(--muted); margin:0 0 1rem; max-width:52ch; }
@media (max-width:600px){
  .t-hero { min-height:min(90svh, 680px); }
  .t-hero .hero-bg { top:0; bottom:0; height:100%; object-position:62% center; }
  .t-hero .hero-content { transform:none; }
}

/* ---------- "what we protect": reuses .cond-grid / .cond-card (already styled) ---------- */

/* ---------- registry disclaimer (garnet section) ---------- */
.registry-disclaimer {
  font-size:var(--step--1); line-height:1.55; margin:clamp(1.1rem, .7rem + 1vw, 1.6rem) 0 0; max-width:62ch;
  color:color-mix(in srgb, var(--surface) 76%, var(--garnet));
}

/* ---------- About ALS: subtype chips ---------- */
.als-chips { list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; margin:1.7rem 0 0; padding:0; }
.als-chips .chip {
  font-size:var(--step--1); color:var(--text-soft);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:999px;
  padding:.5em 1.05em; line-height:1.3;
}
.als-chips .chip strong { color:var(--ink); font-weight:600; margin-right:.4em; }

/* ---------- "safe for ALS" points (garnet section, above the accordion) ---------- */
.als-safe { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; max-width:58ch; }
.als-safe li {
  position:relative; padding-left:1.7em; font-size:var(--step-0); line-height:1.5;
  color:color-mix(in srgb, var(--surface) 88%, var(--garnet));
}
.als-safe li::before {
  content:""; position:absolute; left:0; top:.6em; width:.55em; height:.55em; border-radius:50%;
  background:color-mix(in srgb, var(--surface) 66%, var(--garnet));
}

/* ---------- journey: numbered step cards (1 / 2 / 3 columns) ---------- */
.als-steps { grid-template-columns:1fr; gap:clamp(1rem, .6rem + 1.4vw, 1.5rem); }
@media (min-width:560px){ .als-steps { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:900px){ .als-steps { grid-template-columns:repeat(3, 1fr); } }

.als-steps .step {
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 34px -26px rgba(30,27,23,.4);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.als-steps .step:hover {
  transform:translateY(-4px);
  box-shadow:0 24px 48px -24px rgba(30,27,23,.5);
  border-color:var(--border-strong);
}
/* big editorial numeral + a thin "track" line running to the card edge */
.als-steps .step .n {
  display:flex; align-items:center; gap:.75rem; padding-top:0;
  font-family:var(--font-sans); font-weight:400; color:var(--garnet);
  font-size:var(--step-2); line-height:1; margin-bottom:.5em; letter-spacing:.01em;
}
.als-steps .step .n::after {
  content:""; flex:1 1 auto; height:1px; background:var(--garnet-tint);
  transition:background .22s ease, transform .22s ease; transform-origin:left;
}
.als-steps .step:hover .n::after { background:color-mix(in srgb, var(--garnet) 60%, var(--garnet-tint)); }
.als-steps .step h3 { font-size:var(--step-1); margin:.1em 0 .5em; letter-spacing:.04em; }
.als-steps .step p { color:var(--text-soft); font-size:var(--step--1); line-height:1.65; margin:0; }

/* ---------- safety card ---------- */
.safety-card {
  margin-top:clamp(1.9rem, 1rem + 2.2vw, 2.9rem);
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:clamp(1.4rem, 1rem + 1.6vw, 2.3rem); max-width:46rem;
  box-shadow:0 18px 40px -28px rgba(30,27,23,.35);
}
.safety-card h3 { font-size:var(--step-1); margin:0 0 .85em; }
.safety-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.safety-list li { position:relative; padding-left:1.7em; font-size:var(--step-0); color:var(--text-soft); line-height:1.45; }
.safety-list li::before {
  content:""; position:absolute; left:.15em; top:.5em; width:.6em; height:.6em; border-radius:50%;
  background:var(--garnet-tint); border:1.5px solid var(--garnet); box-sizing:border-box;
}
.safety-note { font-size:var(--step--1); color:var(--muted); margin:1.3em 0 0; line-height:1.55; max-width:54ch; }

/* desktop: put the whole contraindication card to the RIGHT of the intro text,
   so the section is shorter and there is no dead space on the right.
   Mobile/tablet keep the stacked layout (intro text, then the card below). */
@media (min-width:900px){
  #safety .section-inner {
    display:grid; align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  }
  #safety .block-head { max-width:none; margin-bottom:0; }
  #safety .safety-card { margin-top:0; max-width:none; }
}

/* ---------- testimonial (garnet): image + single quote ---------- */
.t-story { display:grid; grid-template-columns:1fr; gap:clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items:center; }
.t-story-figure { aspect-ratio:4/3; }
.t-quote {
  font-family:var(--font-serif); font-weight:300; font-size:var(--step-2); line-height:1.4;
  color:var(--surface); margin:0; letter-spacing:.004em;
}
.t-who {
  font-size:var(--step--1); margin:1.3em 0 0; letter-spacing:.05em; text-transform:uppercase;
  color:color-mix(in srgb, var(--surface) 78%, var(--garnet));
}
.t-cta-line { font-size:var(--step-0); margin:1.7em 0 0; line-height:1.55; color:color-mix(in srgb, var(--surface) 88%, var(--garnet)); }
.t-cta-line a { color:var(--surface); text-decoration:underline; text-underline-offset:.15em; }
@media (min-width:820px){
  .t-story { grid-template-columns:.82fr 1.18fr; gap:clamp(3rem, 2rem + 2.5vw, 5rem); }
  .t-story-figure { aspect-ratio:1/1; }
}

/* ---------- tighter seams between specific sections ----------
   Trim the empty vertical space where two sections meet: about→protect and
   results→approach. Halves the touching edges vs the default .section padding. */
#about    { padding-bottom: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
#protect  { padding-top:    clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
#results  { padding-bottom: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
#approach { padding-top:    clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
#journey  { padding-bottom: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
#safety   { padding-top:    clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }

/* ---------- references: editorial two-column — head + note left (sticky), studies right ---------- */
#science { padding-bottom:clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
.sci-grid { display:grid; grid-template-columns:1fr; gap:clamp(1.3rem, .9rem + 1.4vw, 2rem); }
@media (min-width:920px){
  .sci-grid { grid-template-columns:0.86fr 1.14fr; column-gap:clamp(3rem, 2rem + 4vw, 7rem); align-items:start; }
  .sci-head { position:sticky; top:110px; }
}
.sci-head .block-head { margin-bottom:clamp(1.1rem, .8rem + 1vw, 1.6rem); }
.refs { list-style:none; counter-reset:ref; margin:0; padding:0; }
.refs li { counter-increment:ref; position:relative; border-top:1px solid var(--line);
  padding:clamp(.8rem, .65rem + .5vw, 1.1rem) 0 clamp(.8rem, .65rem + .5vw, 1.1rem) clamp(2.9rem, 2.4rem + 1.6vw, 4.2rem); }
.refs li:last-child { border-bottom:1px solid var(--line); }
.refs li::before { content:counter(ref, decimal-leading-zero); position:absolute; left:0; top:clamp(.95rem, .8rem + .5vw, 1.25rem);
  font-family:var(--font-serif); font-weight:300; font-size:var(--step-1); line-height:1; color:var(--garnet-link); letter-spacing:.02em; }
.refs li a { display:inline-block; font-size:var(--step-0); font-weight:500; line-height:1.35; color:var(--ink);
  text-decoration:none; transition:color .2s ease; }
.refs li a::after { content:"\2197"; font-size:.72em; margin-left:.35em; color:var(--garnet-link); }
.refs li a:hover { color:var(--garnet-link); text-decoration:underline; text-underline-offset:.18em; }
.ref-src { display:block; margin-top:.25rem; font-size:var(--step--1); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.refs-note { position:relative; font-size:var(--step--1); color:var(--muted); margin:0; max-width:44ch; line-height:1.55; padding-top:.9rem; }
.refs-note::before { content:""; position:absolute; top:0; left:0; width:30px; height:2px; border-radius:2px; background:var(--gold-grad); }