/*
Block Treatment-07 "Related Services". Every value comes from tokens.css, spec:
docs/blocks/treatment-07-related.md.

The heading is the shared two-tone component, the plate is the shared badge and the button is the
shared button. What is this block's own is a two-card row and the way a card holds its picture.
*/

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

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

/*
One line, not two: the design sets "Related Services" on a single line, and the component gives a
segment a line each. Same knob and same reason as Treatment-02.
*/
.treatment-related__title {
  --heading-segment-display: inline;

  --heading-fs: var(--fs-treatment-related-title);
  --heading-ls: var(--ls-treatment-related-title);
  --heading-lh: var(--lh-treatment-related-title);
  --heading-ink: var(--ink-deep);
}

/*
Two cards of equal share rather than a stated 709: the design's pair plus its 22 of gap comes to
1440, so equal shares reproduce it exactly and keep doing so at every narrower width.

minmax(0, 1fr) and not a bare 1fr. A bare one is minmax(auto, 1fr), and auto will not go below the
widest thing inside — which here is the 288px button. At 320 that made each column 289 in a 280
column and the card hung out of the page.
*/
.treatment-related__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--treatment-related-gap);
  margin: var(--treatment-related-cards-gap) 0 0;
  padding: 0;
  list-style: none;
}

.treatment-related__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/*
position: relative is the plate's business — it hangs inside this box — and overflow: hidden is what
clips the picture to the corner. The frame is an anchor on a published service and a span on a
draft; display is stated here so the two behave identically.
*/
.treatment-related__frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--treatment-related-radius);

  /*
  A floor under the picture, and it is not decoration: a service with no card picture still gets a
  card — its name on a plate — and without a height that card would be a plate on nothing. It also
  holds the shape while a picture is still loading.
  */
  aspect-ratio: var(--treatment-related-ratio);
  background: var(--surface-mist);
}

/*
height: auto for the reason it is everywhere on this site: the <img> carries its own dimensions so
the card holds its place before the picture arrives, and without this the attribute beats
aspect-ratio and the card is drawn at the file's height instead of the design's.
*/
.treatment-related__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--treatment-related-ratio);
  object-fit: cover;
}

/*
The plate. The shared badge at its md rung, placed by this instance — the component knows how a
badge looks, the block knows which corner it sits in.
*/
.treatment-related__badge {
  position: absolute;
  bottom: var(--treatment-related-badge-bottom);
  left: var(--treatment-related-badge-left);
}

.treatment-related__cta {
  margin-top: var(--treatment-related-cta-gap);

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

/* --bp-sm: one card under another. minmax(0, …) here for the reason it is above. */
@media (max-width: 700px) {
  .treatment-related__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}