/*
Block Treatment-04 "How TRT Works". Every value comes from tokens.css, spec:
docs/blocks/treatment-04-options.md.

The heading is the shared two-tone component, the button is the shared button, the arrival is the
shared scroll reveal. What is this block's own is the card and the way the photograph sits under
it — and both are the reason this file is longer than the three before it.

THE SECTION IS WIDER THAN ITS CONTENT. The photograph starts at 1445 and is cut by the right edge
of the screen; the text keeps the ordinary 1440 column. So the section spans the viewport and the
column lives inside it, rather than the section being the column and the picture escaping it —
which is what would push the page sideways.
*/

.treatment-options {
  position: relative;
  overflow: hidden;
  padding-block: var(--treatment-options-top) var(--treatment-options-bottom);
}

/*
The photograph. Its left edge is a share of the viewport rather than a length, so it holds the
design's proportion instead of its pixel: 1445 of 1920 is 75.26%, and on a wider screen the
picture keeps the same part of the frame instead of leaving a growing strip of canvas beside it.

background-size: cover rather than a stated size, and it is doing real work here. The file was cut
to the right of the picture's own left edge — the cards lie over it in the render and a straight
rectangle would have taken their edges with it — so it is 63 design-pixels short. cover fills the
box from a source of a different proportion and gives up a little height instead, which on a
portrait of two people costs nothing.
*/
/*
THE PICTURE IS CENTRED ON THE STACK OF CARDS, and that is a rule rather than the constant it used
to be. It stood at a flat 113.66 from the top of the section, which is exactly where centring puts
it when there are two cards — TRT's frame, the one it was measured on. Medical Weight Loss draws
four, the stack is 377 taller, and the frame moves the picture down with it: measured on the
render, the picture's middle and the stack's middle are half a pixel apart on both services.

So it is expressed as the centre it actually is. The nudge is half the difference between the
space above the stack and the space below it, because centring on the section is not the same as
centring on the stack when the two paddings differ.
*/
.treatment-options__photo {
  position: absolute;
  top: calc(
    50% - var(--treatment-options-photo-h) / 2 +
    (var(--treatment-options-top) - var(--treatment-options-bottom)) / 2
  );
  right: var(--treatment-options-photo-right);
  left: var(--treatment-options-photo-left);
  height: var(--treatment-options-photo-h);
  border-radius: var(--treatment-options-photo-radius);
  background-image: var(--treatment-options-photo, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
position: relative and nothing else: the column is painted after the photograph in the markup, and
that is what puts the cards on top of it. No z-index, so nothing has to be kept in step with the
header's or the background's.
*/
.treatment-options__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
  gap: var(--treatment-options-gap);
}

/*
align-items: center on the row is what centres the text against the cards, which is how the design
draws it: the text block is 386 tall in a row of 449.73, i.e. 31.87 of air above and below.
*/
.treatment-options__text {
  flex: 0 1 var(--treatment-options-text-w);
  min-width: 0;
}

/*
The tones run on rather than taking a line each: the design breaks the heading inside the accent
half — "Understanding Your" / "Treatment Options" — which a block segment cannot do. Same knob and
same reason as Treatment-02; see two-tone-heading.css.
*/
.treatment-options__title {
  --heading-segment-display: inline;

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

/*
Card titles four points smaller, for a stack whose titles run to two lines. It is the frame's own
step rather than a size anyone typed: "Semaglutide Injections" measures 345 in the Weight Loss
render, which is 32 in this face and tracking, against 392 at 36.
*/
.treatment-options__cards--small {
  --fs-treatment-options-card-title: var(--fs-treatment-options-card-title-sm);
  --lh-treatment-options-card-title: var(--lh-treatment-options-card-title-sm);
}


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

.treatment-options__cta {
  margin-top: var(--treatment-options-cta-gap);

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

.treatment-options__cards {
  display: flex;
  flex: 0 0 var(--treatment-options-card-w);
  flex-direction: column;
  gap: var(--treatment-options-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
The card is frosted glass, and the node does not say so.

What the node gives is #e8efef at a tenth with a white hairline. Built from that alone the card is
all but transparent over the photograph — the first diff showed the two men reading straight
through it, where the render shows them softened almost away. So the fill was measured instead:
inside the card over the photograph the render gives 237 to 253 against the 205 of the bare
picture beside it, and over the page canvas it gives 252 against 255. A tenth of anything cannot
do that; white at about four fifths over a blurred backdrop can, and does.

This is the third time on this project that the missing piece was an effect — the header's shadow,
block 05's card, and now this. get_node_info returns no `effects` for any node, so an effect is
never absent from a spec because the designer left it out; it is absent because it cannot arrive.

The border is a real border and not an inset shadow: this box does not move, so the reason the
button's edge is a shadow (a translucent hairline tearing while it animates) does not apply, and a
border keeps the corner honest at any radius.
*/
.treatment-options__card {
  padding: var(--treatment-options-card-pad);
  border: var(--rule-w) solid var(--treatment-options-card-border);
  border-radius: var(--treatment-options-card-radius);
  background: var(--treatment-options-card-bg);
  backdrop-filter: blur(var(--treatment-options-card-blur));
  -webkit-backdrop-filter: blur(var(--treatment-options-card-blur));
}

/*
The icon and the title share a line and the title's own leading is shorter than the icon is tall —
25.875 against 26 — so the row is aligned on its centre rather than on a baseline that the two do
not share.
*/
.treatment-options__card-head {
  display: flex;
  align-items: center;
  margin: 0;
}

.treatment-options__icon {
  display: flex;
  flex: 0 0 var(--treatment-options-icon-col);
  align-items: center;
}

.treatment-options__icon img {
  display: block;
  width: var(--treatment-options-icon-size);
  height: var(--treatment-options-icon-size);
  object-fit: contain;
}

.treatment-options__card-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-treatment-options-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-treatment-options-card-title);
  line-height: var(--lh-treatment-options-card-title);
}

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

/*
--bp-lg: one column, and the photograph stops being a column of its own and becomes a band under
the cards.

It keeps the overlap the design draws: on the phone the second card's rounded bottom edge lies on
the picture, and that is a negative margin rather than a coincidence of heights. The cards are
painted after it, so they stay on top with nothing else to say.
*/
@media (max-width: 1300px) {
  /*
  The section itself becomes the column, because the photograph is its child rather than the inner
  column's — it has to reach past the right edge of the screen on the wide frame, and a box inside
  the 1440 column cannot. So the order is set here, on the two children the section actually has.
  */
  .treatment-options {
    display: flex;
    flex-direction: column;
  }

  .treatment-options__inner {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-inline: var(--page-inset);
  }

  /*
  The picture keeps the overlap the design draws: the second card's rounded bottom edge lies on it.
  A negative margin rather than a coincidence of heights, and the cards stay on top by being later
  in the markup — order moves boxes, not the order they are painted in.
  */
  /*
  static, and that is the whole of why the cards stay on top of it.

  It was relative first — enough to take it out of the absolute placement of the wide frame — and
  that made it a positioned element, which paints above the in-flow cards whatever the markup
  order. On the phone the picture covered the second card's last three lines. Static leaves both
  boxes unpositioned, so paint order is markup order and the picture is first.
  */
  .treatment-options__photo {
    position: static;
    order: 2;
    width: calc(100% - var(--page-inset) * 2);
    margin-inline: auto;
    margin-top: var(--treatment-options-photo-overlap);
  }

  .treatment-options__text,
  .treatment-options__cards {
    flex: 0 0 auto;
  }
}