/*
Block Treatment-05 "How Our … Program Works". Every value comes from tokens.css, spec:
docs/blocks/treatment-05-program-weight-loss.md.

Nothing is drawn here that the site does not already have. The accordion is the component block 10
introduced — assets/css/steps.css, every rule in it flat and place-independent, which is what makes
this reuse a call rather than a copy. The heading is the shared two-tone component, the button is
the shared button, the paragraph is set like block 03's unlabelled intro. This file says where
those instances stand and how wide they are.

THE HEAD IS BLOCK 03'S GRID. On the wide frame the button sits at the right-hand end of the
heading's line; on a phone it drops under the paragraph. One order in the markup — heading, button,
paragraph — and two placements, which is what grid areas are for.
*/

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

/*
The whole block is the grid, not just its head, because the button has to leave the heading's line
on a phone and land under the accordion — past the paragraph and past every step. Grid areas are
what let the markup keep one order (heading, button, paragraph, steps, which is the order it reads
in) while the picture changes.
*/
.treatment-program__inner {
  display: grid;
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
  grid-template-areas:
    "title cta"
    "lead lead"
    "list list";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

/*
The heading breaks in two lines where the design does, and it does it by the box being narrower
than the words rather than by anything in the markup: "How Our Medical Weight" comes to 779 and the
next word does not fit the measure.

The tones run on, because the break the design draws falls inside the light half.
*/
.treatment-program__title {
  max-width: var(--treatment-program-title-w);
  grid-area: title;

  --heading-fs: var(--fs-treatment-program-title);
  --heading-ls: var(--ls-treatment-program-title);
  --heading-lh: var(--lh-treatment-program-title);
  --heading-segment-display: inline;
}

.treatment-program__cta {
  grid-area: cta;
  margin-top: var(--treatment-program-cta-top);

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

/*
The paragraph, read off the node rather than off the render: 18 over 24 with no tracking, in a box
of 862. It had been taken for block 03's unlabelled intro — 16 over 24 at a tracking of 0.8 — which
measures the same width for this sentence and is a different setting. Two candidates fitted the
pixels and only one is in the file.
*/
.treatment-program__lead {
  max-width: var(--treatment-program-lead-w);
  margin: var(--treatment-program-lead-gap) 0 0;
  grid-area: lead;
  color: var(--treatment-benefits-intro-color);
  font-size: var(--fs-treatment-program-lead);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-treatment-program-lead);
  line-height: var(--lh-treatment-program-lead);
}

/*
The accordion takes the whole column here, where on the home page it takes about half because a
diagram stands beside it. The component states no width of its own, so this is the only place the
difference lives.
*/
.treatment-program__list {
  margin-top: var(--treatment-program-list-gap);
  grid-area: list;

  /*
  The link arrows go up and to the right here, where the home page's accordion draws them flat.
  Set as the component's own knob rather than by reaching into it with a descendant selector —
  see the note in arrow.css.
  */
  --arrow-rotate: -45deg;

  /*
  The panel's paragraph runs wider here than on the home page, where the accordion shares its row
  with a diagram. The component keeps the number as its own knob, so this is a value and not a
  rule reaching inside.
  */
  --steps-body-w: var(--treatment-program-body-w);
}

/* --bp-lg: one column, and the button goes to the foot of the block. */
@media (max-width: 1300px) {
  .treatment-program__inner {
    grid-template-areas:
      "title"
      "lead"
      "list"
      "cta";
    grid-template-columns: minmax(0, 1fr);
  }

  .treatment-program__cta {
    justify-self: start;
    margin-top: var(--treatment-program-cta-stacked-gap);
  }
}