/* =========================================================================
   Service pages (cloud migration, observability). They are built from the
   security services page's bands and classes, so they load
   security-services.css first and this file after it. Only what those
   pages add lives here.
   ========================================================================= */

/* Hero metrics that hold words ("GCP → AWS") rather than numbers need a
   smaller size than the numeric ones. They may wrap: on a phone the row is
   two narrow columns and a forced single line pushes the page sideways. */
.metric-value--text {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
@media (max-width: 799px) {
  .metric-card:has(.metric-value--text) { padding: 28px 16px 32px 0; }
  .metric-card:has(.metric-value--text):nth-child(2n) { padding-left: 16px; }
}

/* Further reading: blog posts that go deeper on the service, as a ruled
   list in the grey band. */
.svc-reading {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-rule-light);
}
.svc-reading li { border-bottom: 1px solid var(--c-rule-light); }

.svc-reading a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  color: var(--c-ink);
  font-size: 1.125rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.svc-reading a::after {
  content: "\2192";
  color: var(--c-ink-dim);
  transition: transform 0.25s ease;
}
.svc-reading a:hover::after { transform: translateX(4px); }
.svc-reading a:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* A sentence under the two-column block in the dark band. */
.svc-note {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 64ch;
  margin: 56px 0 0;
}
.svc-note a { color: var(--text-white); }

@media (prefers-reduced-motion: reduce) {
  .svc-reading a::after { transition: none; }
}