/* ==========================================================================
   PATH: /css/process.css
   TYPE: stylesheet
   STATUS: shared
   USES: shared process section (Design Process page + reused bands)

   PURPOSE
   Owns the reusable "Our process" band:
   - section intro text specific to process
   - 3-column step grid
   - individual step styling and icon treatment
   - responsive behavior for this module

   KEEP IN THIS FILE
   - .process-steps grid and spacing
   - .step, .step-icon, .step strong, and supporting copy
   - any process-specific intro layout when it is clearly tied to this module

   DO NOT PUT IN THIS FILE
   - generic band shells (e.g. .process-grid outer layout) — those live in bands.css
   - global typography rules
   - CTA, FAQ, services, or portfolio cards
   - page-only overrides for a single process page

   OWNERSHIP NOTES
   - If it styles the repeated 3-step process cards, it belongs here.
   - If it controls the left/right intro column shell (.process-grid), it belongs
     with the band layout system instead.
   ========================================================================== */

/* PROCESS STEPS GRID
   Shared 3-column step layout used in the process band.
   -------------------------------------------------------------------------- */

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem 1.25rem;
  padding: 0.5rem 0 0;
  align-content: start;
}

/* INDIVIDUAL STEP
   Single step with icon, label, and supporting text.
   -------------------------------------------------------------------------- */

.step {
  text-align: left;
  color: var(--muted-light);
  font-size: 0.82rem;
  max-width: 220px;
}

.step-icon {
  width: 52px;
  height: 52px;
  margin: 0 0 0.9rem;
  border-radius: 50%;
  border: 1px solid var(--gold-line-strong);
  background: rgba(255, 255, 255, 0.045);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 0.98rem;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.step:hover .step-icon,
.step:focus-within .step-icon {
  border-color: rgba(247, 243, 238, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

/* LIGHT-BAND PROCESS ICON TREATMENT
   Matches the hover behavior used by About page "Our Story" service cards.
   -------------------------------------------------------------------------- */

.band-light .process-steps .step-icon {
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.42);
}

.band-light .process-steps .step:hover .step-icon,
.band-light .process-steps .step:focus-within .step-icon {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(34, 30, 25, 0.18);
}

.step strong {
  display: block;
  color: var(--text-light);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

/* RESPONSIVE
   Collapse steps grid on tablet and below.
   -------------------------------------------------------------------------- */

@media (max-width: 979px) {
  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}