/*
 * 02 Services.
 *
 * The prototype's breakpoints were container queries against a wrapper this
 * theme does not have, so they are media queries here. There is deliberately
 * no rule at 1100px: the prototype's grid carried the mobile stack class only,
 * so three columns hold all the way down to 640px.
 *
 * The hairlines are a border-top on the grid plus a border-bottom on every
 * row, with no row-gap. That is the prototype's technique and it is what makes
 * the nine cells read as one continuous ruled block rather than nine boxes.
 */

/*
 * #services is a nav target, so the jump has to clear the 89px sticky header
 * or the eyebrow and the top of the h2 land underneath it (SC 2.4.11). That
 * offset is owned globally by `:target, [id] { scroll-margin-top: 96px }` in
 * header.css, so it is deliberately not repeated here.
 */
.ad-services {
  /*
   * Zero top padding is deliberate: the About section's bottom padding
   * supplies the gap. Mobile puts it back, because the sections stack.
   */
  padding: 0 var(--ad-space-page) var(--ad-space-section);
}

/* ------------------------------------------------------------ head row */

.ad-services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.ad-services__titles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ad-services__eyebrow {
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ad-color-accent);
}

.ad-services__title {
  font-size: 56px;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ad-color-text);
}

.ad-services__intro {
  max-width: 360px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ad-color-text-muted);
}

/* --------------------------------------------------------------- grid */

.ad-services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  border-top: 1px solid var(--ad-color-hairline);
}

.ad-services__item {
  border-bottom: 1px solid var(--ad-color-hairline);
}

/*
 * The row is a child of the list item rather than the item itself, so its
 * hover transition cannot collide with the reveal transition hero.css sets on
 * [data-reveal]. Both live on one element otherwise, and the shorthand that
 * loses the cascade takes the other one with it.
 */
.ad-services__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 24px;
  transition: padding-inline-start .35s ease, color .35s ease;
}

.ad-services__row:hover {
  padding-inline-start: 14px;
  color: var(--ad-color-accent);
}

.ad-services__index {
  font-family: var(--ad-font-mono);
  font-size: 12px;
  color: var(--ad-color-accent);
}

.ad-services__icon {
  display: flex;
  align-self: center;
  color: var(--ad-color-accent);
}

.ad-services__icon svg { display: block; }

/* Inherits the row's colour, so it turns accent on hover with the rest. */
.ad-services__name {
  font-size: 22px;
  font-weight: 500;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .ad-services {
    padding: var(--ad-space-section-mobile) var(--ad-space-page-mobile);
  }

  .ad-services__title { font-size: 34px; }

  /* The design drops the intro line on mobile. */
  .ad-services__intro { display: none; }

  /*
   * One column, so the border-top and the nine border-bottoms form a single
   * clean stack. The 40px column-gap stops applying on its own.
   */
  .ad-services__list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- motion */

/*
 * Nothing here loops, so there is no ambient animation to stop. What the
 * pause control still owes the visitor is the staggered entrance: the last
 * row would otherwise crawl in 560ms after the first. hero.css already
 * handles prefers-reduced-motion for every [data-reveal] on the page and
 * that rule is not repeated here, but it does not cover the explicit toggle
 * (SC 2.2.2). The attribute selector keeps this above `.js [data-reveal]`
 * in the cascade regardless of stylesheet order.
 */
[data-ad-motion="off"] .ad-services__item[data-reveal] {
  transition: none;
}

[data-ad-motion="off"] .ad-services__row {
  transition: none;
}