/*
 * Services catalog. Loads after the Last Table tokens and components, which bring the hero, sections, table, details and
 * the copy button. This file lays out the offer cards and uses only Last Table variables: flat cards, one line, no glow.
 */

.svc-list { display: grid; gap: var(--lt-space-4); margin-top: var(--lt-space-5); }
.svc-offer {
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  padding: var(--lt-space-5);
}
.svc-offer .lt-label { margin: 0 0 var(--lt-space-2); }
.svc-offer .lt-h3 { margin: 0; }
.svc-pain { margin: var(--lt-space-2) 0 0; color: var(--lt-text-2); max-width: 70ch; }

/* The terms read as label and value on wide screens and stack on a phone. */
.svc-terms {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--lt-space-2) var(--lt-space-4);
  margin: var(--lt-space-4) 0 0;
}
.svc-terms dt { color: var(--lt-text-2); font-weight: 600; }
.svc-terms dd { margin: 0; }
@media (max-width: 560px) {
  .svc-offer { padding: var(--lt-space-4); }
  .svc-message > .lt-code { margin: 0 var(--lt-space-4) var(--lt-space-4); }
  .svc-message summary { padding: var(--lt-space-4); }
  .svc-terms { grid-template-columns: 1fr; gap: 0; }
  .svc-terms dd { margin-bottom: var(--lt-space-2); }
}

.svc-action { margin: var(--lt-space-4) 0; }

/* The details panel pads its children, which would put the padding inside the code box; use a margin instead. */
.svc-message > .lt-code { margin: 0 var(--lt-space-5) var(--lt-space-5); padding: 0; }

/* A first message is prose, so it wraps instead of scrolling sideways like code, and the copy button sits above it. */
.svc-message .lt-code pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--lt-space-7) var(--lt-space-4) var(--lt-space-4);
}

.svc-index { margin-top: var(--lt-space-5); }

/* The index names roles and prices that can be long; let them wrap so the table fits a phone. */
.svc-index .lt-table td { white-space: normal; vertical-align: top; }

.svc-note {
  margin-top: var(--lt-space-5);
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  padding: var(--lt-space-4);
}
.svc-note .lt-label { margin: 0 0 var(--lt-space-2); }
.svc-note p:last-child { margin: 0; }