/* ============================================================================
   McBride Digital — Phase II services page
   Owned by Task 2. Page header, buttons and the closing CTA come from
   css/reset.css.
   ============================================================================ */

/* Only space-6 here, not space-section: the closing .cta section (css/reset.css)
   already adds its own padding-top of space-section above its border-top, so
   stacking two space-section gaps left a large empty box between the last
   row's hairline and the CTA's. */
.services {
  padding-bottom: var(--space-6);
}

/* The last row already draws its own hairline (.service's border-bottom);
   .cta's own border-top (css/reset.css) right after it reads as a second,
   redundant line. Scoped to this adjacency so index.html's .cta — which has
   no bordered section above it — keeps its border-top. */
.services + .cta {
  border-top: none;
}

.service-list {
  list-style: none;   /* the visible numbers are the <span>s, not markers */
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Full-width rows on a hairline, with the number sitting out in the left
   margin like a call sheet — the number column is what makes the sequence
   readable as a sequence rather than five headings in a stack. */
.service {
  display: grid;
  grid-template-columns: minmax(6rem, 12%) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);

  /* The homepage links straight into #social, #email and #advertising, and the
     nav is fixed — without this the target row lands underneath it. */
  scroll-margin-top: calc(var(--nav-height) + var(--space-3));
}

/* Large, but set light: at 700 the numbers fought the service names for the
   same job. The weight contrast is what keeps the sequence quiet and the
   names loud. */
.service__num {
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--electric-blue);
  font-variant-numeric: tabular-nums;
}

.service__name {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-display);
}

.service__desc {
  margin-top: var(--space-2);
  max-width: 60ch;
  color: var(--ink-muted);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 767px) {
  /* The number moves above the name rather than beside it; a 12% column at
     phone widths leaves the names too narrow to read well. */
  .service {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding-block: var(--space-5);
  }

  .service__num { font-size: var(--fs-h2); }
}