/*
Block Treatment-02 "What is …?". Every value comes from tokens.css, spec:
docs/blocks/treatment-02-what-is.md.

It is About-02's card with one column instead of two, no button, and a badge on each tile — so
almost nothing is drawn here. The heading is the shared two-tone component, the row of portraits
is the shared portrait row (which carries the tiles, the checker pattern, the shadow, the
entrance and the badges), and the arrival is the shared scroll reveal. What this file says is how
large those instances are and how far apart they stand.

THE HAIRLINE IS A BORDER AND NOT AN ELEMENT. The design draws one rule above the paragraph and
none below it, and About-02 already gets that from the list's top border. Same here, one column
instead of two — which is also why there is no vertical rule: in the node the item's own stroke
is switched off rather than absent, so its absence is a decision of the design and not a gap in
the data.
*/

.treatment-what {
  padding-block: var(--treatment-what-top) var(--treatment-what-bottom);
}

/*
The plate itself is the shared panel — assets/css/panel.css — which this block wears as a second
class. Nothing about it is said here.

The heading is the shared component and this block only says what size it is. Two tones here, as
almost everywhere on this site — the weight and the colour stay the component's decision — and
the two lines come from the box being narrower than the words.
*/
.treatment-what__title {
  /*
  The tones run on rather than taking a line each. In the design the first line ends inside the
  accent half — "What is Testosterone" / "Replacement Therapy?" — so the two segments have to be
  one flow of text and the break has to fall where the width puts it. Every other heading on this
  site breaks between its tones, which is why this is the instance asking and not the component
  changing. See two-tone-heading.css.
  */
  --heading-segment-display: inline;

  --heading-fs: var(--fs-treatment-what-title);
  --heading-ls: var(--ls-treatment-what-title);
  --heading-lh: var(--lh-treatment-what-title);
}


/*
The rule above the paragraph is this element's top border, so the two cannot come apart: there is
no separate line to keep in step with the copy's position, and a longer paragraph carries nothing
with it because the border is above.

The gap between the heading and the rule is a margin here rather than padding on the heading —
the heading is a shared component and this is a distance between two things in this block, not a
property of headings.
*/
.treatment-what__copy {
  margin-top: var(--treatment-what-list-gap);
  padding-top: var(--treatment-what-copy-pad-t);
  border-top: var(--rule-w) solid var(--rule-color);
}

/*
The measure is narrower than the rule above it — 1003 against 1278 — and that is the design's,
not an accident of the box. Stated as a maximum so it gives way on a narrower card instead of
setting the card's width.
*/
.treatment-what__body {
  max-width: var(--treatment-what-copy-w);
  margin: 0;
  color: var(--treatment-what-copy-color);
  font-size: var(--fs-treatment-what-copy);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-treatment-what-copy);
  line-height: var(--lh-treatment-what-copy);
}

/*
The row of portraits is the shared component (assets/css/portrait-row.css). The band, the tiles,
the checker pattern, the shadow, the stagger and the badges are all its own; the only thing that
belongs to this block is how far under the paragraph it starts.
*/
.treatment-what__portraits {
  margin-top: var(--treatment-what-portraits-gap);
}