/*
Block Treatment-01 "Service hero". Every value comes from tokens.css, spec:
docs/blocks/treatment-01-hero.md.

Nothing is drawn here that the site does not already have. The heading is the shared two-tone
component, the list is the shared ticked list, the button is the shared button at its md rung and
the entrance is the shared scroll reveal — this file says where those instances sit and how large
they are, and nothing about how any of them behaves.

THERE IS NO MEDIA QUERY IN THIS FILE, and that is not an omission. Between the design's two
frames only sizes change and one of them changes meaning: the photograph is the right-hand part
of the card on a computer and the bottom part of it on a phone. Anchored to the bottom right
corner it is the same rule at both — a width and a height are enough to move it — so the whole
difference lives in tokens.css beside the other mobile values, where the frame it was measured on
is named.
*/

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

/*
The card is the page column: 1440 at the design frame, and below it the same fallback to
--page-inset the header and the other heroes use, so they shift together.

The fill is a ramp rather than a plate — transparent at the top edge, opaque white about six
sevenths of the way down — see --treatment-hero-card-fill.

overflow: hidden is the photograph's business. The picture is a layer pinned to the bottom right
corner and it has to be cut by the card's own radius; nothing in this block overflows on purpose,
so clipping the box costs nothing.

min-height is the design's 624. The column of text comes to a little less than that at the design
frame, and without it the card would close on its contents and the photograph would lose the band
it is measured in.
*/
.treatment-hero__card {
  position: relative;
  overflow: hidden;
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  min-height: var(--treatment-hero-card-min-h);
  margin-inline: auto;
  padding:
    var(--treatment-hero-card-pad-y)
    var(--treatment-hero-card-pad-x)
    var(--treatment-hero-card-pad-b);
  border-radius: var(--treatment-hero-card-radius);
  background: var(--treatment-hero-card-fill);
  box-shadow: var(--treatment-hero-card-shadow);
}

/*
The photograph. A layer of its own rather than a second background on the card, because the
card's fill ends in opaque white and a background layer under it would be washed out along its
bottom edge — which the render does not show. Above the fill and under the text is where the
design has it.

Pinned to the bottom right corner and given a width and a height, so the desktop's right-hand
column and the phone's bottom band are one rule at two sizes.

background-size: cover rather than a stated size: at the design frame the layer and the file are
the same 800x624 and nothing is cropped, and at every narrower card the picture keeps its
proportion and gives up its edges instead of stretching the people in it.
*/
.treatment-hero__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--treatment-hero-photo-w);
  height: var(--treatment-hero-photo-h);
  background-image: var(--treatment-hero-photo, none);
  background-position: var(--treatment-hero-photo-pos);
  background-size: cover;
  background-repeat: no-repeat;

  /*
  The leading edge is faded out, and this is a consequence of where the picture comes from rather
  than a decision about it. In the design the photograph is a fill of the card itself, so it has
  no edge at all — it dissolves into whatever the card is at that height. Ours is a rectangle cut
  from the finished render, and the strip along its edge carries the card as it was there: at the
  top of the card, where the fill is still transparent and the page shows through, that strip is
  lighter than the card underneath it and the rectangle announces itself as a seam. Measured on
  the first diff round as a hard vertical line down the whole height.

  A mask rather than a re-cut: no crop removes it, because the mismatch is between two different
  backgrounds and not inside the picture. The direction is the token's, so the same rule fades
  the left edge on a computer and the top edge on a phone.
  */
  mask-image: linear-gradient(
    var(--treatment-hero-photo-fade-dir),
    transparent 0,
    rgb(0 0 0 / 100%) var(--treatment-hero-photo-fade)
  );
}

/*
position: relative, and it is load-bearing: the photograph is positioned and would otherwise be
painted over the text whatever the order in the markup.
*/
/*
THE COLUMN IS DISTRIBUTED, NOT STACKED WITH FIXED GAPS, and that is what makes this template hold
a second service rather than only the one it was cut from.

The design gives every service the same 556-tall column and lets the gaps inside it come out
different: TRT runs 34 / 24 / 34, Medical Weight Loss runs 56 / 49 / 56. The words are what
differ — a heading of three lines against one of two, three ticked points against four — and the
space left over is shared out between them. Fixed margins can reproduce one of those two frames
and never both; the first version had TRT's numbers written down as constants, which is the same
mistake as writing TRT's photograph into the template.

So the margins below stay as the floor — what the gaps collapse to when the words fill the column
— and space-between hands out whatever is left. Measured against both frames it lands within
about three pixels of each, from one rule.

position: relative is load-bearing separately: the photograph is positioned and would otherwise
be painted over the text whatever the order in the markup.
*/
.treatment-hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--treatment-hero-text-min-h);
  max-width: var(--treatment-hero-text-w);
}

/*
The heading is the shared component (assets/css/two-tone-heading.css) and this block tells it what
size to be and that its tones run on. They run on because the line break belongs to the column's
width and not to the heading's halves: TRT breaks between the tones, Weight Loss breaks inside the
dark one. See the loop in hero.php for the space that separates them.
*/
.treatment-hero__title {
  --heading-fs: var(--fs-treatment-hero-title);
  --heading-ls: var(--ls-treatment-hero-title);
  --heading-lh: var(--lh-treatment-hero-title);
  --heading-segment-display: inline;
}

.treatment-hero__lead {
  max-width: var(--treatment-hero-lead-w);
  margin: var(--treatment-hero-lead-gap) 0 0;
  color: var(--treatment-hero-lead-color);
  font-size: var(--fs-treatment-hero-lead);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-treatment-hero-lead);
  line-height: var(--lh-treatment-hero-lead);
}

/*
The facts, where another service ticks off promises. A description list: the small label is the
term, the line under it is what it means. The pairs are the flex column's items, so they take part
in the same distribution as everything else in the card — see the note above.

The label wears the same type as every other eyebrow on the site; the value is the paragraph's
size in the display face, which is what the frame draws.
*/
.treatment-hero__specs {
  margin: var(--treatment-hero-specs-gap) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--treatment-hero-spec-gap);
}

.treatment-hero__spec-label {
  margin: 0;
  color: var(--treatment-hero-spec-label-color);
  font-size: var(--fs-treatment-hero-spec-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-treatment-hero-spec-label);
  line-height: var(--lh-treatment-hero-spec-label);
  text-transform: uppercase;
}

.treatment-hero__spec-value {
  margin: var(--treatment-hero-spec-pad) 0 0;
  color: var(--treatment-hero-spec-value-color);
  font-size: var(--fs-treatment-hero-spec-value);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-treatment-hero-spec-value);
  line-height: var(--lh-treatment-hero-spec-value);
}

/*
The list brings its own rhythm and its own marker; the block only says how far under the
paragraph it starts. This rule comes after the component's own margin: 0 because blocks are
enqueued after components, which is the cascade inc/enqueue.php is ordered by.
*/
.treatment-hero__points {
  margin-top: var(--treatment-hero-points-gap);
}

/*
The button is the shared component at its md rung — 15px and 2 of tracking is that rung, and it
is not restated here. What is the instance's own is its width, which the design fixes at 288
where the rung is otherwise sized by its label, and it arrives through the component's own knob
rather than through a rule reaching into it. The component's own inline-flex is kept.
*/
.treatment-hero__cta {
  /*
  align-self, because the column is a flex one now and a stretched item would be as wide as the
  text beside it. The button keeps the width the design gives it.
  */
  align-self: flex-start;
  margin-top: var(--treatment-hero-cta-gap);

  /*
  min() rather than the design's flat 288: at 320 the card's own width is 280, and a button that
  cannot give way is clipped by the card — the section carries overflow: hidden for the
  photograph, so the failure is silent rather than a sideways scroll. Above the narrowest frames
  the design's width is what applies.
  */
  --btn-w: min(var(--treatment-hero-cta-w), 100%);
}