@layer components {
  .ws-service-header {
    margin-bottom: var(--spacing-md);
  }

  .ws-service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacing-sm);
  }

  .ws-service-row--book {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ws-service-guidance {
    margin-top: var(--spacing-xs);
  }

  .ws-service-title {
    color: var(--text-primary);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .ws-service-note {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .ws-service-field-error {
    color: var(--text-primary);
    font-size: var(--text-sm);
    margin-top: var(--spacing-xs);
  }

  .ws-service-credit {
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  @media (max-width: 860px) {
    .ws-service-row,
    .ws-service-row--book {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}