/*
The Services page. Every value comes from tokens.css, spec: docs/blocks/services-archive.md.

Nothing here is new: the card is the service hero's card at another height, the heading is the
shared two-tone component, the button is the shared button, the list is the shared service list at
its static setting, and the arrival is the shared reveal. What this file says is where those
instances stand.

THE HEAD IS A GRID BECAUSE THE BUTTON MOVES — the same arrangement as the benefits block. On the
wide frame it sits at the right-hand end of the heading's line; on a phone it drops under the list.
One order in the markup, two placements.
*/

.services-archive {
  padding-block: var(--services-archive-top) var(--services-archive-bottom);
}

/*
The card is the grid, not a head inside it, because the button travels the whole length of it: on
the wide frame it sits at the right-hand end of the heading's line and on a phone it stands under
the list, at the very foot. One order in the markup — heading, button, paragraph, label, list,
which is also the order it reads in — and two placements.
*/
.services-archive__card {
  display: grid;
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
  padding: var(--services-archive-card-pad-y) var(--services-archive-card-pad-x);
  border-radius: var(--services-archive-card-radius);
  background: var(--services-archive-card-fill);
  box-shadow: var(--services-archive-card-shadow);
  grid-template-areas:
    "title cta"
    "lead lead"
    "label label"
    "list list";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.services-archive__title {
  max-width: var(--services-archive-title-w);
  grid-area: title;

  --heading-fs: var(--fs-services-archive-title);
  --heading-ls: var(--ls-services-archive-title);
  --heading-lh: var(--lh-services-archive-title);
  --heading-segment-display: inline;
  --fw-display-dark: var(--fw-bold);
}

.services-archive__cta {
  grid-area: cta;
  margin-top: var(--services-archive-cta-top);

  --btn-w: min(var(--services-archive-cta-w), 100%);
}

.services-archive__lead {
  max-width: var(--services-archive-lead-w);
  margin: var(--services-archive-lead-gap) 0 0;
  grid-area: lead;
  color: var(--services-archive-lead-color);
  font-size: var(--fs-services-archive-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-services-archive-lead);
}

.services-archive__label {
  margin: var(--services-archive-label-gap) 0 0;
  grid-area: label;
  color: var(--services-archive-label-color);
  font-size: var(--fs-services-archive-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-services-archive-label);
  line-height: var(--lh-services-archive-label);
  text-transform: uppercase;
}

/*
The list is the shared component, and it needs almost nothing said to it: measured off the frame,
the number sits 14 from the card's text edge, the name 92 and the description 828 — which are the
component's own defaults, the home page's. Only the description is narrower here, 386 against 518.
*/
.services-archive__list {
  margin-top: var(--services-archive-list-gap);
  grid-area: list;

  --services-desc-w: var(--services-archive-desc-w);
}

/*
--bp-lg: one column, and the button goes to the foot of the card — under the list, which is where
the phone frame draws it.

The area has to stay named. Dropping "cta" from the template does not remove the button; it makes
it an implicitly placed item, which grows a third column of its own — measured at 320 as a 289-wide
track that pushed the page sideways.
*/
@media (max-width: 1300px) {
  .services-archive__card {
    grid-template-areas:
      "title"
      "lead"
      "label"
      "list"
      "cta";
    grid-template-columns: minmax(0, 1fr);
  }

  .services-archive__cta {
    justify-self: start;
    margin-top: var(--services-archive-cta-stacked-gap);
  }
}