/*
 * ECAR "How It Works" — the homepage's four-step service sequence,
 * namespaced under .ecar-how.
 *
 * Sits on the denser --ecar-bg-secondary band so it reads as its own moment
 * between the reasons-to-choose cards above it and the services list below.
 *
 * Built from parts the page already owns rather than a new pattern: the
 * orange icon plate from .ecar-trust__icon / .ecar-why__icon, and a ghost
 * numeral in --ecar-numeral like the About page's process register. The
 * numeral is the connective tissue — it is what makes four cards read as a
 * sequence instead of four unrelated features — so it is large, quiet, and
 * pinned to the top-right of each cell where the eye lands after the icon.
 */

.ecar-how {
  background-color: var(--ecar-bg-secondary);
  border-top: 1px solid var(--ecar-border);
  padding-block: var(--sp-section);
}

/* --- Head --- */
.ecar-how__head {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}

.ecar-how__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ecar-gold);
}

.ecar-how__title {
  margin: 0 0 14px;
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
}

.ecar-how__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ecar-text-secondary);
}

/* --- Steps ---
   A four-track grid with a hairline card per step. The connecting rule
   between the cards is drawn on the list, not on each item, so it stops at
   the ends of the row instead of hanging off the last card. */
.ecar-how__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  counter-reset: none;
}

.ecar-how__step {
  position: relative;
  padding: 24px 22px 22px;
  background-color: var(--ecar-surface);
  border: 1px solid var(--ecar-hairline);
  border-radius: 12px;
  transition: border-color var(--transition), background-color var(--transition);
}

.ecar-how__step:hover {
  border-color: var(--ecar-gold-line);
  background-color: var(--ecar-surface-2);
}

.ecar-how__step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* Same plate as the hero trust strip and the Why Choose Us cards, so the
   iconography across the homepage reads as one set. */
.ecar-how__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--ecar-gold);
  background-color: var(--ecar-gold-quiet);
  border: 1px solid var(--ecar-gold-line);
  border-radius: 11px;
  transition: color var(--transition), border-color var(--transition);
}

.ecar-how__icon svg,
.ecar-how__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Overrides the 1.6 declared on the inline SVGs — a thin stroke inside the
   plate is unreadable on a phone. Matches .ecar-trust__icon svg. */
.ecar-how__icon svg {
  stroke-width: 1.85;
}

.ecar-how__step:hover .ecar-how__icon {
  color: var(--ecar-gold-strong);
  border-color: var(--ecar-gold);
}

.ecar-how__index {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ecar-numeral);
}

.ecar-how__step-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ecar-text-primary);
}

.ecar-how__step-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ecar-text-secondary);
}

.ecar-how__actions {
  display: flex;
  justify-content: center;
}

/* Two columns before one: at 1023px a four-track row gives each step ~200px,
   which breaks every title onto three lines. */
@media (max-width: 1023px) {
  .ecar-how__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .ecar-how__head {
    margin-bottom: 30px;
    text-align: left;
  }

  .ecar-how__steps {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }

  .ecar-how__step {
    padding: 20px 18px;
  }

  .ecar-how__step-top {
    margin-bottom: 14px;
  }

  .ecar-how__icon {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 10px;
  }

  .ecar-how__actions .ecar-btn {
    width: 100%;
  }
}