/*
Block Treatment-03 "Benefits of Our …". Every value comes from tokens.css, spec:
docs/blocks/treatment-03-benefits.md.

Almost nothing is drawn here. The list is the shared service list at its static setting — the
hairlines, the columns, the type and the way a row folds below --bp-lg are all its own — the
heading is the shared two-tone component, the button is the shared button, and the arrival is the
shared scroll reveal. What this file says is where those instances stand.

THE HEAD IS A GRID BECAUSE THE BUTTON MOVES. On the design's wide frame the button sits at the
right-hand end of the heading's line; on the phone it stands under the paragraph, above the list.
That is one order in the markup — heading, paragraph, button, which is also the order it reads in
— and two placements, which is what grid areas are for. Reordering with `order` would have left
the tab order following the design's picture instead of its sense.
*/

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

.treatment-benefits__inner {
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
}

/*
Two columns on the wide frame: the heading takes the first and the button the second, and the
paragraph runs under both. The button column is exactly the button, so the heading gets
everything else and the two never collide.
*/
.treatment-benefits__head {
  display: grid;
  grid-template-areas:
    "title cta"
    "note note";
  grid-template-columns: 1fr auto;
  align-items: start;
}

/*
The heading breaks in three lines where the design does, and it does it by the box being narrower
than the words rather than by anything in the markup. The tones take a line each, which is the
component's default: here the break the design draws falls between them and then again inside the
accent half, and a max-width is what produces the second one.
*/
.treatment-benefits__title {
  max-width: var(--treatment-benefits-title-w);
  grid-area: title;

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

  /*
  The tones run on: where the line ends belongs to the width of the column and not to which half
  of the heading a word is in. "Benefits of Our / Testosterone Therapy / Approach" and "The
  Life-Changing / Benefits of Medical / Weight Loss" are the same rule at the same measure —
  the second breaks in the middle of the dark half, which a segment holding its own line cannot
  do. See hero.css for the first place this came up.
  */
  --heading-segment-display: inline;
}

/*
The button is pushed to the bottom of the heading's line rather than to its top: in the design it
sits against the second of the heading's three lines, not against the first.
*/
.treatment-benefits__cta {
  grid-area: cta;
  margin-top: var(--treatment-benefits-cta-top);

  --btn-w: min(var(--treatment-benefits-cta-w), 100%);
}

.treatment-benefits__note {
  grid-area: note;
  margin-top: var(--treatment-benefits-note-gap);
  max-width: var(--treatment-benefits-note-w);
}

/*
"DISCLAIMER" is set in capitals here rather than typed in capitals by the client, the same
arrangement every eyebrow on this site uses.
*/
.treatment-benefits__label {
  margin: 0;
  color: var(--treatment-benefits-label-color);
  font-size: var(--fs-treatment-benefits-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-treatment-benefits-label);
  line-height: var(--lh-treatment-benefits-label);
  text-transform: uppercase;
}

/*
The one paragraph on this site set in SemiBold at a reading size. It is the design's — the node
gives weight 600 and the render is visibly denser than an ordinary paragraph beside it — and it
is stated here rather than taken for a mistake.
*/
.treatment-benefits__text {
  margin: var(--treatment-benefits-note-pad) 0 0;
  color: var(--treatment-benefits-note-color);
  font-size: var(--fs-treatment-benefits-note);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-treatment-benefits-note);
  line-height: var(--lh-treatment-benefits-note);
}

/*
THE EYEBROW IS WHAT MAKES IT SMALL PRINT. Without one the design sets the same paragraph as an
ordinary intro: Regular rather than SemiBold, the body colour rather than near-black, and 722 of
measure rather than 1388. Medical Weight Loss draws it that way and TRT draws it the other, and
the presence of the label is the only thing that differs between the two frames.

So it is read off the label rather than asked for again. A second switch beside the first would
let the client produce a state the design has no drawing of — an unlabelled paragraph in small
print — and would be one more thing to explain for no gain.
*/
.treatment-benefits__note--plain {
  max-width: var(--treatment-benefits-intro-w);
}

.treatment-benefits__note--plain .treatment-benefits__text {
  color: var(--treatment-benefits-intro-color);
  font-size: var(--fs-treatment-benefits-intro);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-treatment-benefits-intro);
  line-height: var(--lh-treatment-benefits-intro);
}

/*
The small label over the list, when there is one. Same type as the one over the paragraph — it is
the same eyebrow in the same block — so it wears that class and adds only the distance.
*/
.treatment-benefits__list-label {
  margin: var(--treatment-benefits-list-label-gap) 0 0;
}

.treatment-benefits__list-label + .treatment-benefits__list {
  margin-top: var(--treatment-benefits-list-label-pad);
}

/*
The list is the shared component and this block only tells it where its columns are: the design
starts the name 96 from the edge of the band where the home page's list starts it 92, and 42.5
against 31 on the phone. Instance values, set on the instance — the home page's list is not
touched.
*/
.treatment-benefits__list {
  margin-top: var(--treatment-benefits-list-gap);

  --services-name-x: var(--treatment-benefits-name-x);
}

/* --bp-lg: the head stops being two columns and the button follows the paragraph. */
@media (max-width: 1300px) {
  .treatment-benefits__head {
    grid-template-areas:
      "title"
      "note"
      "cta";
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .treatment-benefits__cta {
    margin-top: var(--treatment-benefits-cta-gap);
  }
}