/* ============================================================================
   STEPS COMPONENT

   Numbered steps in a horizontal grid, for onboarding or how-it-works flows.

   Purpose: Display a sequence of steps with number badges, icons,
   titles, and descriptions in a clean 3-column layout.

   Required HTML Structure:

   <section class="steps">
     <div class="container">
       <h2>Section Title</h2>
       <div class="steps__grid">
         <div class="step">
           <span class="step__number">1</span>
           <div class="step__icon">
             <i class="fas fa-icon" aria-hidden="true"></i>
           </div>
           <h3 class="step__title">Step Title</h3>
           <p class="step__text">Step description text.</p>
         </div>
         <!-- Repeat for each step -->
       </div>
     </div>
   </section>

   Modifiers:
   - (none currently)

   Accessibility:
   - Semantic headings for step titles
   - Icons are decorative (aria-hidden="true")
   - Number badges provide visual ordering
   ============================================================================ */

.steps {
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 900px;
  margin: var(--spacing-lg) auto 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy-light);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.step__icon {
  font-size: 2rem;
  color: var(--sky-blue);
  line-height: 1;
}

.step__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.step__text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 260px;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .steps {
    padding: var(--spacing-lg) 0;
  }

  .steps__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    max-width: 320px;
  }

  .step__number {
    display: none;
  }
}