/*
Block 03 "Services". Spec: docs/blocks/03-services.md. Every value comes from tokens.css.

The block itself is only a placement: the heading is the shared two-tone component, the
call to action is the shared button, the list is the shared service list. What is written
here is where the three of them sit and what size this section asks them to be.

Three things the design file contains and this block deliberately does not — each one
checked against the rendered frame rather than taken on trust, see the spec:

  1. A #f6f6f6 rectangle covering the whole section, last in the layer order. It is not in
     the render: the section's background there is the page canvas, with the aurora ribbon
     crossing it, and every pixel sampled inside the section is blue-tinted (#f7fdfd and
     down) rather than the neutral grey a #f6f6f6 fill would give. A hidden layer.
  2. The "Precision health · Longevity" pill and the three bullets in the mobile frame.
     The same leftovers as in the hero, and left out for the same reason.
  3. The intro paragraph is #35485c here and #09213b on the mobile frame. Built to the
     desktop at both sizes; noted in the spec as a discrepancy for the designer.
*/
.services {
  padding-block: var(--services-top) var(--services-bottom);
}

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

/*
The head is a grid and not a pair of rows, because the three things in it are ordered one
way on the desktop and another on mobile: there the button leaves the heading's row and
goes under the intro paragraph. Named areas restate the arrangement in the media query
without the markup having to change, and without the button being printed twice.

On the desktop the button is centred against the heading block rather than pinned to one
of its edges — measured on the render, where the two centres are within 3px of each other
across two lines of 82px.
*/
.services__head {
  display: grid;
  align-items: center;
  gap: var(--services-lead-gap) var(--space-3xl);
  grid-template-areas:
    "title cta"
    "lead  lead";
  grid-template-columns: 1fr auto;
}

/*
The shared two-tone heading at this section's size. The tones themselves belong to the
component; the size and, here, the tighter tracking are set on the instance.
*/
.services__title {
  max-width: var(--services-title-w);
  grid-area: title;

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

/* The shared button; the block only says where it sits and how large this instance is. */
.services__cta {
  grid-area: cta;
  justify-self: end;

  --btn-w: var(--services-cta-w);
  --btn-h: var(--services-cta-h);
}

.services__lead {
  max-width: var(--services-lead-w);
  margin: 0;
  grid-area: lead;
  color: var(--ink-muted);
  font-size: var(--fs-services-lead);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-services-lead);
  line-height: var(--lh-services-lead);
}

/*
The list is also a reveal group of its own — see the note in the template. The block sizes
that instance through the component's own knob rather than restyling its rules, the same
way it sizes the button and the heading.
*/
.services__list {
  margin-top: var(--services-list-gap);

  --reveal-shift: var(--services-list-reveal-shift);
}

/*
Mobile: the call to action leaves the heading row and becomes a row of its own under the
intro, at its own width. --bp-sm
*/
@media (max-width: 700px) {
  .services__head {
    grid-template-areas:
      "title"
      "lead"
      "cta";
    grid-template-columns: 1fr;
  }

  .services__cta {
    justify-self: start;
  }
}