/* =========================================================
   Home Page Styles
   ========================================================= */

.home-main {
  min-height: calc(100vh - 57px - 65px); /* fill space between nav and footer */
  display: flex;
  align-items: center;
  padding-block: 3rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 700px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-card);
}

.service-card--featured {
  cursor: pointer;
}

.service-card--featured:hover {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  transform: translateY(-2px);
}

.service-card--muted {
  opacity: 0.5;
  pointer-events: none;
}

.service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-card-body p {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.service-card-header h3 {
  font-size: 1.1rem;
}

.service-card-arrow {
  color: var(--clr-text-muted);
  transition: color var(--transition), transform var(--transition);
  align-self: flex-end;
}

.service-card--featured:hover .service-card-arrow {
  color: var(--clr-accent-soft);
  transform: translateX(4px);
}