/* override-process.css
   Centralized overrides for the process section
   - hides legacy connector pseudo-elements
   - enforces a simple 4-column grid (2 rows when 8 items)
   - neutralizes any nth-child grid placements coming from legacy styles
*/

.process-section .process-step::before,
.process-section .process-step::after {
  display: none !important;
  content: none !important;
}

/* Simple grid: 4 columns (will render two rows when 8 items present) */
.process-section .process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: stretch; /* allow equal-height rows */
  grid-auto-rows: 1fr; /* make rows distribute height equally */
  /* Center the grid within the container and limit its width */
  max-width: 1200px;
  margin: 0 auto;
}

/* Responsive fallback */
@media (max-width: 900px) {
  .process-section .process-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Neutralize any previously set explicit placements */
.process-section .process-step:nth-child(n) {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Remove inline-like transition delays and rely on CSS animations if desired */
.process-section .process-step { transition-delay: 0ms !important; }

/* Center content and ensure all tiles have equal height */
.process-section .process-step {
  position: relative;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
}

/* Visual spacing for step-number and title */
.process-section .process-step .step-number {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.process-section .process-step h3 {
  margin: 0;
}

/* Make the step number more prominent and descriptions smaller */
.process-section .process-step .step-number {
  font-size: 2.4rem;
  line-height: 1;
  color: #00b4c9; /* accent color */
}

.process-section .process-step .process-description {
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.9;
  margin-top: 0.75rem;
  max-width: 90%;
}