/* Services: the page's one dark band (Luke 9/30: the whole services lineup, on ink).
   Luke 9/30 on the first list: no photos, fewer type styles, a price and a button in every
   service. So each uses the same four: the name in the statement style, body text for
   everything else (paper, never dimmed), the small stone label for numbers, and the button. Reads every value from tokens.css; eyebrow and button come from
   components.css and site.css. */

.services {
  /* The measure: where the text breaks to its next line. What's included ends on the same
     line (Luke 9/30), so both use this width. 38 body sizes lets the longest item ("Contractor
     and architect coordination") sit on one line in a half. */
  --svc-measure: calc(38 * var(--text-body));
  padding: var(--space-band) var(--gutter) var(--space-section);
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Heading: eyebrow + the two-tone statement ---------- */

.svc-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.svc-head__eyebrow { grid-column: 1 / -1; margin-bottom: var(--space-eyebrow); }
/* A .statement (components.css), trimmed at its foot too, so its last baseline to the list's
   first rule is exactly --space-head */
.svc-head__statement { grid-column: 1 / span 8; text-box: trim-both cap alphabetic; }

/* ---------- One service: shared pieces ---------- */

.svc-list { list-style: none; margin-top: var(--space-head); }
/* No rule closes the list (rules only sit above things), so the last service drops its own
   bottom padding and the band ends on the section's padding, the same as at the top */
.svc-list > .svc:last-child { padding-bottom: 0; }

/* 01, 02... small figures, the "organized" feel (KOBU's numbered rows) */
.svc__num {
  font-size: var(--text-small);
  font-weight: var(--weight-demi);
  line-height: var(--leading-text);
  font-variant-numeric: tabular-nums;
  color: var(--stone-on-ink);
}
/* The name is a .statement (components.css) */
.svc__text, .svc__includes, .svc__price {
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-text);
}
.svc__text { max-width: var(--svc-measure); text-wrap: pretty; }
.svc__includes { list-style: none; }
/* One style and one color for the whole line (Luke 10/14: the figure no longer bolder or
   brighter than its words); the color is tokens.css --svc-price-color */
.svc__price { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--svc-price-color); }
.svc__cta { justify-self: start; }

/* Tops line up on the capitals: number, name and text start level. The text ends on its
   baseline, so what's included starts exactly --space-near under it. */
.svc__num, .svc__name { text-box: trim-start cap alphabetic; }
.svc__text { text-box: trim-both cap alphabetic; }

/* ---------- A row: KOBU's numbered rows, the price and button under the name ---------- */
/* Luke 9/30 (picked from seven layouts, locked 10/9): number and name at left, the price
   right under the name, the button at the foot of the row, ending level with the last line of
   what's included. The right side is the text and what's included, both on the measure, in
   one block (.svc__body), so it flows on its own whatever the left does. The name to the
   price is measured baseline to capitals, so the gap is exactly the token. */

.svc {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  padding: var(--space-tiles) 0; /* the rule to the row's capitals, and its last line to the next rule */
  border-top: var(--hairline-width) solid var(--hairline-on-ink);
}
.svc__num { grid-column: 1; grid-row: 1; }
.svc__name { grid-column: 2 / span 5; grid-row: 1; text-box: trim-both cap alphabetic; }
.svc__price { grid-column: 2 / span 5; grid-row: 2; margin-top: var(--space-svc-price); text-box: trim-start cap alphabetic; }
.svc__cta { grid-column: 2 / span 5; grid-row: 4; margin-top: var(--space-near); }
.svc__body { grid-column: 7 / -1; grid-row: 1 / -1; }

/* What's included: two ruled columns, together exactly as wide as the text's measure. A
   hairline above each item (KOBU's "What's included", Koto's list); rules only ever sit above
   things, never under the last one (Luke 9/30). */
.svc__includes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter);
  max-width: var(--svc-measure);
  margin-top: var(--space-near);
}
/* Each item a cell: the rule to its capitals, its baseline to the next rule (tokens.css) */
.svc__includes li {
  padding: var(--space-cell-top) 0 var(--space-cell);
  border-top: var(--hairline-width) solid var(--hairline-on-ink);
  text-box: trim-both cap alphabetic;
}

/* With the button at the foot: what's included ends on its last line's baseline, no padding
   under it, so the button's bottom edge sits on that baseline and each row is that much
   shorter (Luke 9/30). The last row is the last item, and the one before it when it's in the
   left column. */
@media (min-width: 990px) {
  .svc__includes li:is(:last-child, :nth-last-child(2):nth-child(odd)) {
    padding-bottom: 0;
  }
}

/* ---------- Narrower desktop ---------- */
@media (max-width: 1279px) {
  .svc__name, .svc__price, .svc__cta { grid-column: 2 / span 4; }
  .svc__body { grid-column: 6 / -1; }
}

/* ---------- Tablet: the name, the price, the text and list, then the button ---------- */
@media (max-width: 989px) {
  .svc-head__statement { grid-column: 1 / -1; }
  .svc { grid-template-rows: none; }
  .svc__name { grid-column: 2 / -1; grid-row: 1; }
  .svc__price { grid-column: 2 / -1; grid-row: 2; }
  .svc__body { grid-column: 2 / -1; grid-row: 3; margin-top: var(--space-near); }
  .svc__cta { grid-column: 2 / -1; grid-row: 4; }
}

/* ---------- Phone: one column, everything on the left edge ---------- */
/* The number over the name, as an eyebrow over a statement (the phone's eyebrow gap), then
   the tablet's order and gaps: the price, then --space-near to the text, to what's included
   and to the button. One left edge for the whole row. */
@media (max-width: 600px) {
  .svc-head__eyebrow { margin-bottom: var(--space-eyebrow-phone); }
  .svc { grid-template-columns: minmax(0, 1fr); padding: var(--space-tiles) 0; }
  .svc > * { grid-column: 1 / -1; }
  .svc__num { grid-row: 1; text-box: trim-both cap alphabetic; }
  .svc__name { grid-row: 2; margin-top: var(--space-eyebrow-phone); }
  .svc__price { grid-row: 3; }
  .svc__body { grid-row: 4; margin-top: var(--space-near); }
  .svc__includes { grid-template-columns: minmax(0, 1fr); }
  /* The header's phone button size, so the two match */
  .svc__cta { grid-row: 5; padding: var(--button-pad-y-phone) var(--button-pad-x-phone); }
}