/**
 * Supplemental CSS
 * All Services page grid + How the Whole Process Works (homepage)
 * Ensures consistent grid layout and styling
 */

/* ============================================
   All Services Page - Grid & Layout
   ============================================ */
.ps-all-services-page .ps-all-services-grid-section {
  padding: 0 0 var(--space-3xl);
  background: var(--ps-white);
}

.ps-all-services-page .ps-all-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.ps-all-services-page .ps-all-service-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ps-all-services-page .ps-all-service-desc {
  flex: 1;
}

@media (max-width: 1024px) {
  .ps-all-services-page .ps-all-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .ps-all-services-page .ps-all-services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ============================================
   Homepage - How the Whole Process Works
   ============================================ */
.ps-process {
  background: var(--ps-white);
  padding: var(--space-3xl) 0;
}

.ps-process .ps-section-header {
  margin-bottom: var(--space-2xl);
}

.ps-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.ps-process-card {
  padding: var(--space-2xl);
  background: var(--ps-bg);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all var(--duration-normal) var(--ease-out-expo);
  text-align: left;
}

.ps-process-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.ps-process-icon {
  width: 52px;
  height: 52px;
  background: var(--ps-primary-muted);
  color: var(--ps-primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.ps-process-icon svg {
  width: 26px;
  height: 26px;
}

.ps-process-card h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ps-text);
  margin-bottom: var(--space-sm);
}

.ps-process-card p {
  font-size: 0.9375rem;
  color: var(--ps-text-muted);
  line-height: 1.6;
  margin: 0;
}

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

@media (max-width: 768px) {
  .ps-process-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}