/**
 * Website Studio — Services archive / single / home loop.
 * Strict ACSS tokens only — no raw px/rem/em/hex.
 * Mobile column stacking: prefer ACSS grid utilities on the element
 * (e.g. auto-grid) rather than custom breakpoint media queries.
 */

.ws-services,
.ws-services__archive,
.ws-services__single {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-block: var(--section-space-m);
  padding-inline: var(--space-m);
}

.ws-services__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-m);
}

.ws-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap, var(--content-gap));
  width: 100%;
  align-self: stretch;
}

.ws-services__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  align-self: stretch;
  padding: var(--space-m);
  border: var(--border-size) solid color-mix(in srgb, var(--base) 12%, transparent);
  background: var(--white);
}

.ws-services__card a,
.ws-services__link {
  text-decoration: none;
  color: inherit;
}

.ws-services__title {
  margin: 0;
  font-family: var(--mock-font-display, inherit);
  font-size: var(--h5);
}

.ws-services__summary {
  margin: 0;
  color: var(--mock-muted, color-mix(in srgb, var(--base) 62%, var(--white)));
  font-size: var(--text-s);
}

.ws-services__photo img,
.ws-services__media img {
  width: 100%;
  height: auto;
  display: block;
  margin-block-end: var(--space-m);
}

.ws-services__description {
  margin: 0;
}

.ws-services__back {
  display: inline-block;
  margin-block-start: var(--space-l);
}