/* ============================================================
   services.css — /services/ page
   Classes invented here are prefixed `svc-`.
   Palette comes only from base.css custom properties.
   Layout: hero, six service blocks (sticky side label / content,
   mirrored on even blocks), 1px --line rules between, CTA band.
   ============================================================ */

/* ---------- hero ---------- */

.svc-hero {
  padding-top: clamp(72px, 12vw, 160px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.svc-hero__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
}

.svc-hero__title {
  font-size: clamp(52px, 9vw, 124px);
}

/* accent-bg highlight on the emphasis line (SPEC 铁律). inline-block (same
   pattern as about-hero/ct-hero/f08): an inline span's background overflows
   its 1.05 line box (Oswald's em box ≈1.48em) and paints over the previous
   line's glyphs; a block box keeps the fill inside its own line. Long copy
   is split into two spans in the markup so it can still wrap on mobile. */
.svc-hero__em {
  display: inline-block;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 0.12em;
}

.svc-hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none; /* the giant title must not squeeze the count onto two lines */
  gap: 10px;
  padding-bottom: clamp(6px, 1.2vw, 14px); /* optically align with title baseline */
}

.svc-hero__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.svc-hero__lede {
  margin: clamp(20px, 3vw, 32px) 0 0;
  max-width: 58ch;
  color: var(--ink-dim);
  font-size: 14px;
}

/* ---------- service blocks ---------- */

.svc-list {
  padding-bottom: clamp(64px, 9vw, 120px);
}

.svc-block {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  grid-template-areas: "label body";
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(40px, 6vw, 80px) 0;
  scroll-margin-top: 96px; /* sticky header (72px) + breathing room */
}

/* mirrored variant for even blocks */
.svc-block--flip {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 320px);
  grid-template-areas: "body label";
}

.svc-block__label {
  grid-area: label;
  align-self: start;
  position: sticky;
  top: 96px; /* clear the 72px sticky header */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.svc-block--flip .svc-block__label {
  align-items: flex-end;
  text-align: right;
}

.svc-block__tag {
  margin: 0;
}

.svc-block__index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.12em;
}

.svc-block__body {
  grid-area: body;
  min-width: 0; /* keep long headlines from blowing out the grid track */
}

.svc-block__name {
  font-size: clamp(34px, 5vw, 64px);
  margin-bottom: 18px;
}

.svc-block__desc {
  margin: 0 0 28px;
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: 14px;
}

.svc-block__delivs {
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  max-width: 760px;
}

.svc-block__delivs li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-dim);
}

.svc-block__delivs li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tag-ink); /* readable in both themes; --accent 不做文字色 */
}

.svc-block__link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--link-ink); /* 链接一律 --link-ink,两主题 AA */
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s var(--ease-out-quart), color 0.2s var(--ease-out-quart);
}

.svc-block__link:hover {
  border-color: var(--link-ink);
}

.svc-block__arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-out-quart);
}

.svc-block__link:hover .svc-block__arrow {
  transform: translateX(6px);
}

/* ---------- closing CTA band ---------- */

.svc-cta {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: clamp(72px, 10vw, 128px) 0;
}

.svc-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}

.svc-cta__title {
  font-size: clamp(36px, 6vw, 80px);
  margin-top: 14px;
}

/* mid-sentence accent-bg highlight; inline-block so the fill can never
   paint over the previous line (see .svc-hero__em) */
.svc-cta__em {
  display: inline-block;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 0.12em;
}

.svc-cta__sub {
  margin: 18px 0 0;
  max-width: 52ch;
  color: var(--ink-dim);
  font-size: 14px;
}

.svc-cta .btn {
  flex-shrink: 0;
}

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

@media (max-width: 768px) {
  .svc-hero__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .svc-hero__side {
    flex-direction: row;
    align-items: center;
    padding-bottom: 0;
  }

  /* stack: label drops in above content, no sticky, flip is irrelevant */
  .svc-block,
  .svc-block--flip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "body";
    gap: 16px;
    padding: clamp(32px, 8vw, 48px) 0;
    scroll-margin-top: 76px; /* 60px mobile header + breathing room */
  }

  .svc-block__label {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .svc-block--flip .svc-block__label {
    align-items: center;
    text-align: left;
  }

  .svc-block__delivs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .svc-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}