/*
 * our-services.css
 * Homepage — S2: Our Services
 * Scoped under .page-homepage .our-services
 */

/* ─── Section Header ─────────────────────────────────── */
.page-homepage .our-services .services__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.page-homepage .our-services .services__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-height);
  letter-spacing: var(--text-h2-spacing);
  color: var(--color-text-heading);
  margin-bottom: var(--space-md);
}

.page-homepage .our-services .services__desc {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  color: var(--color-text-muted);
  max-width: 850px;
  margin: 0 auto;
}

/* ─── Grid ───────────────────────────────────────────── */
.page-homepage .our-services .services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

/* ─── Card Overrides ─────────────────────────────────── */
.page-homepage .our-services .services__card {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

/* ─── Icon ───────────────────────────────────────────── */
.page-homepage .our-services .services__icon {
  font-size: var(--step-icon-size); /* 56px */
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

/* ─── Card Heading ───────────────────────────────────── */
.page-homepage .our-services .services__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-height);
  color: var(--color-text-heading);
  margin-bottom: var(--space-md);
}

/* ─── Card Body ──────────────────────────────────────── */
.page-homepage .our-services .services__card-body {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 992px) {
  .page-homepage .our-services .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .page-homepage .our-services .services__grid {
    grid-template-columns: 1fr;
  }

  .page-homepage .our-services .services__title {
    font-size: 24px;
  }

  .page-homepage .our-services .services__desc {
    font-size: 16px;
  }
}