/* css/services.css */

/* Page hero subtitle */
.page-hero__sub {
  max-width: 560px;
  margin-top: var(--space-24);
  font-size: var(--text-base);
}

/* Service card grid */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  border: 1px solid var(--color-border);
}

/* Individual service card */
.service-card-full {
  padding: var(--space-48) var(--space-32);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  background: var(--color-white);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.service-card-full::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.service-card-full:hover::before {
  transform: scaleX(1);
}

.service-card-full:hover {
  background: var(--color-off-white);
}

.service-card-full h3 {
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.service-card-full p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.75;
  flex: 1;
}

.service-card-full .link-arrow {
  margin-top: var(--space-8);
  align-self: flex-start;
}

/* Section alt override to keep cards white */
.section--alt .service-card-full {
  background: var(--color-white);
}
.section--alt .service-card-full:hover {
  background: #efefed;
}

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

@media (max-width: 640px) {
  .service-cards {
    grid-template-columns: 1fr;
    border: 0;
    gap: var(--space-16);
  }
  .service-card-full {
    padding: var(--space-32) var(--space-24);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(13, 43, 85, 0.08);
  }
  .page-hero__sub { font-size: var(--text-sm); }
}