/**
 * service-card.css
 * Service cards: home teaser grid (4 cards) and any service card pattern.
 * Hover: background swap, icon stroke thickens, arrow slides right.
 * Depends on: tokens.css, base.css
 */

/* --------------------------------------------------------------------------
 * Service cards section
 * -------------------------------------------------------------------------- */

.service-cards-section {
  padding-block: var(--section-py);
  background-color: var(--color-bg);
}

.service-cards-section__heading {
  margin-bottom: var(--space-12);
}

/* --------------------------------------------------------------------------
 * Service card grid
 * 4 cols desktop / 2 cols tablet / 1 col mobile
 * -------------------------------------------------------------------------- */

.service-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0; /* Borders create visual separation, no gap */
}

@media (min-width: 768px) {
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .service-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
 * Individual service card
 * -------------------------------------------------------------------------- */

.service-card {
  background-color: var(--color-surface);
  padding: var(--space-8);
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  transition: background-color var(--dur-base) var(--ease-out);
}

/* Mobile: hairline bottom only */
@media (max-width: 767px) {
  .service-card {
    border-top: none;
    border-bottom: var(--border-hairline);
  }

  .service-card:last-child {
    border-bottom: none;
  }
}

/* Tablet: top borders on all, remove double left/right */
@media (min-width: 768px) {
  .service-card {
    border-top: var(--border-hairline);
  }
}

.service-card:hover {
  background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
 * Card icon (48px)
 * -------------------------------------------------------------------------- */

.service-card__icon {
  color: var(--color-brand-green);
  margin-bottom: var(--space-8);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card__icon .icon {
  width: 48px;
  height: 48px;
  transition: stroke-width var(--dur-fast) var(--ease-out);
}

.service-card:hover .service-card__icon .icon {
  stroke-width: 2.5;
}

/* --------------------------------------------------------------------------
 * Card heading
 * -------------------------------------------------------------------------- */

.service-card__title {
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  color: var(--color-ink-900);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
 * Card body copy
 * -------------------------------------------------------------------------- */

.service-card__body {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ink-500);
  flex: 1;
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
 * Card link ("Learn more →")
 * -------------------------------------------------------------------------- */

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-900);
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  transition: color var(--dur-fast) var(--ease-out);
}

.service-card__link .icon {
  color: var(--color-brand-green);
  transition:
    transform var(--dur-base) var(--ease-out),
    stroke-width var(--dur-fast) var(--ease-out);
}

.service-card:hover .service-card__link {
  color: var(--color-brand-green);
}

.service-card:hover .service-card__link .icon {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
 * Numbered service list (used on services.php sections)
 * -------------------------------------------------------------------------- */

.service-numbered-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.service-numbered-list__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-4);
  align-items: start;
}

.service-numbered-list__number {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  color: var(--color-brand-green);
  line-height: 1.25;
  margin-top: 2px;
}

.service-numbered-list__content h4 {
  margin-bottom: var(--space-2);
}

.service-numbered-list__content p {
  font-size: var(--text-body-sm);
  color: var(--color-ink-500);
  line-height: var(--lh-body-sm);
}