/* ==========================================================================
   COMPONENT: step-list
   --------------------------------------------------------------------------
   Numbered "how it works" steps. Used by ComoFunciona, ListsSteps,
   ApolloHowItWorks, McpHowItWorks, InboundHowItWorks, etc.

   Two layout modes:
     .e-step-list                — vertical stack with one step per row
     .e-step-list--horizontal    — horizontal row (each step inline)
     .e-step-list--cards         — each step rendered as a card

   Markup contract:
     <ol class="e-step-list">
         <li class="e-step">
             <span class="e-step__number">1</span>
             <div class="e-step__content">
                 <h3 class="e-step__title">Title</h3>
                 <p  class="e-step__description">Description</p>
             </div>
         </li>
     </ol>
   ========================================================================== */

.e-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-space-md);
}


/* STEP — base */

.e-step {
    display: flex;
    align-items: flex-start;
    gap: var(--e-space-sm);
}

.e-step__number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--e-color-primary) 0%, var(--e-color-secondary) 100%);
    color: var(--e-text-on-dark);
    border-radius: 50%;
    font-size: var(--e-font-size-lg);
    font-weight: var(--e-font-weight-bold);
    line-height: 1;
}

.e-step__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--e-space-xs);
}

.e-step__title {
    font-size: var(--e-font-size-lg);
    font-weight: var(--e-font-weight-bold);
    color: var(--e-color-ink);
    line-height: var(--e-leading-tight);
    margin: 0;
}

.e-step__description {
    font-size: var(--e-font-size-sm);
    line-height: var(--e-leading-relaxed);
    color: var(--e-color-muted);
    margin: 0;
}


/* DARK SURFACE INHERITANCE */

.e-section--dark .e-step__title       { color: var(--e-text-on-dark); }
.e-section--dark .e-step__description { color: var(--e-text-on-dark-muted); }


/* HORIZONTAL VARIANT — each step inline. */

.e-step-list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.e-step-list--horizontal .e-step {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 200px;
}

.e-step-list--horizontal .e-step__content {
    align-items: center;
    text-align: center;
}


/* CARD VARIANT — each step rendered as a card. */

.e-step-list--cards .e-step {
    background: var(--e-color-surface);
    border: var(--e-border-light);
    border-radius: var(--e-radius-xl);
    padding: var(--e-space-md);
    box-shadow: var(--e-shadow-soft);
    transition: transform var(--e-transition-base), box-shadow var(--e-transition-base);
}

.e-step-list--cards .e-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--e-shadow-lift);
}

.e-section--dark.e-step-list--cards .e-step,
.e-section--dark .e-step-list--cards .e-step {
    background: var(--e-color-ink-soft);
    border-color: rgba(28, 145, 228, 0.15);
    box-shadow: none;
}


/* RESPONSIVE — horizontal collapses on mobile. */

@media (max-width: 767px) {

    .e-step-list--horizontal {
        flex-direction: column;
    }

    .e-step-list--horizontal .e-step {
        flex-direction: row;
        text-align: left;
    }

    .e-step-list--horizontal .e-step__content {
        align-items: flex-start;
        text-align: left;
    }

}