/* ==========================================================================
   ebmnt1-steps.css  -  خطوات العمل (تصميم سيكشن "Transforming your business" + numbered smart UI)
   ========================================================================== */

:root {
    /* colors */
    --ebmnt1-steps-title-text-color: var(--ebmnt1-color-neutral-ink);
    --ebmnt1-steps-title-accent-text-color: var(--ebmnt1-color-helper-purple-deep);
    --ebmnt1-steps-text-color: var(--ebmnt1-color-helper-grey);
    --ebmnt1-steps-line-track-color: var(--ebmnt1-color-helper-grey-border);
    --ebmnt1-steps-line-fill-color: var(--ebmnt1-color-primary-dark);
    --ebmnt1-steps-card-bg-color: var(--ebmnt1-color-helper-sand);
    --ebmnt1-steps-card-active-bg-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-steps-card-border-color: var(--ebmnt1-color-helper-grey-border);
    --ebmnt1-steps-card-active-border-color: var(--ebmnt1-color-primary-dark);
    --ebmnt1-steps-card-shadow-color: var(--ebmnt1-color-black-alpha-10);
    --ebmnt1-steps-badge-bg-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-steps-badge-border-color: var(--ebmnt1-color-helper-grey-border);
    --ebmnt1-steps-badge-text-color: var(--ebmnt1-color-helper-grey-dark);
    --ebmnt1-steps-badge-active-bg-color: var(--ebmnt1-color-primary);
    --ebmnt1-steps-badge-active-text-color: var(--ebmnt1-color-secondary);
    --ebmnt1-steps-badge-done-bg-color: var(--ebmnt1-color-neutral-black);
    --ebmnt1-steps-badge-done-text-color: var(--ebmnt1-color-primary);
    --ebmnt1-steps-watermark-text-color: var(--ebmnt1-color-black-alpha-06);
    --ebmnt1-steps-icon-bg-color: var(--ebmnt1-color-helper-cyan);
    --ebmnt1-steps-icon-color: var(--ebmnt1-color-secondary);
    --ebmnt1-steps-card-title-text-color: var(--ebmnt1-color-neutral-ink);
    --ebmnt1-steps-card-text-color: var(--ebmnt1-color-helper-grey);
    --ebmnt1-steps-image-bg-color: var(--ebmnt1-color-helper-grey-light);

    /* font sizes */
    --ebmnt1-steps-title-font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4rem);
    --ebmnt1-steps-text-font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.12rem);
    --ebmnt1-steps-badge-font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
    --ebmnt1-steps-watermark-font-size: clamp(3rem, 2.5rem + 2vw, 4.5rem);
    --ebmnt1-steps-card-title-font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.4rem);
    --ebmnt1-steps-card-text-font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
    --ebmnt1-steps-icon-font-size: 1.05rem;

    /* sizes */
    --ebmnt1-steps-badge-size: 3.1rem;
    --ebmnt1-steps-icon-size: 2.6rem;
    --ebmnt1-steps-card-radius: 1.4rem;
    --ebmnt1-steps-image-height: clamp(16rem, 70vw, 24rem);
    --ebmnt1-steps-image-radius: 1.25rem;
    --ebmnt1-steps-progress: 0;
}

.ebmnt1-steps__inner {
    align-items: stretch;
    gap: 2.5em;
    text-align: start;
}

.ebmnt1-steps__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
}

.ebmnt1-steps__title {
    font-size: var(--ebmnt1-steps-title-font-size);
    line-height: 1.25;
    color: var(--ebmnt1-steps-title-text-color);
}

.ebmnt1-steps__title-accent {
    color: var(--ebmnt1-steps-title-accent-text-color);
}

.ebmnt1-steps__text {
    max-width: 46rem;
    font-size: var(--ebmnt1-steps-text-font-size);
    color: var(--ebmnt1-steps-text-color);
}

.ebmnt1-steps__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2em;
}

.ebmnt1-steps__media {
    position: relative;
    width: 100%;
    height: var(--ebmnt1-steps-image-height);
    overflow: hidden;
    border-radius: var(--ebmnt1-steps-image-radius);
    background-color: var(--ebmnt1-steps-image-bg-color);
}

.ebmnt1-steps__image {
    width: 100%;
    height: calc(100% + 3rem);
    object-fit: cover;
    translate: 0 var(--ebmnt1-parallax-y, 0px);
}

/* ---------- القائمة المرقمة + خط التقدم ---------- */
.ebmnt1-steps__list {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}

.ebmnt1-steps__list::before,
.ebmnt1-steps__list::after {
    content: "";
    position: absolute;
    top: calc(var(--ebmnt1-steps-badge-size) / 2);
    inset-inline-start: calc(var(--ebmnt1-steps-badge-size) / 2 - 1px);
    width: 2px;
    border-radius: 2px;
}

.ebmnt1-steps__list::before {
    bottom: calc(var(--ebmnt1-steps-badge-size) / 2);
    background-color: var(--ebmnt1-steps-line-track-color);
}

.ebmnt1-steps__list::after {
    height: calc((100% - var(--ebmnt1-steps-badge-size)) * var(--ebmnt1-steps-progress));
    background-color: var(--ebmnt1-steps-line-fill-color);
    transition: height 0.2s linear;
}

.ebmnt1-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1em;
}

.ebmnt1-step__badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: var(--ebmnt1-steps-badge-size);
    height: var(--ebmnt1-steps-badge-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--ebmnt1-steps-badge-border-color);
    background-color: var(--ebmnt1-steps-badge-bg-color);
    color: var(--ebmnt1-steps-badge-text-color);
    font-size: var(--ebmnt1-steps-badge-font-size);
    font-weight: 700;
    transition: background-color var(--ebmnt1-transition-medium), color var(--ebmnt1-transition-medium), border-color var(--ebmnt1-transition-medium), transform var(--ebmnt1-transition-medium);
}

.ebmnt1-step__badge-check {
    display: none;
}

.ebmnt1-step.is-done .ebmnt1-step__badge {
    background-color: var(--ebmnt1-steps-badge-done-bg-color);
    border-color: var(--ebmnt1-steps-badge-done-bg-color);
    color: var(--ebmnt1-steps-badge-done-text-color);
}

.ebmnt1-step.is-done .ebmnt1-step__badge-number {
    display: none;
}

.ebmnt1-step.is-done .ebmnt1-step__badge-check {
    display: inline;
}

.ebmnt1-step.is-active .ebmnt1-step__badge {
    background-color: var(--ebmnt1-steps-badge-active-bg-color);
    border-color: var(--ebmnt1-steps-badge-active-bg-color);
    color: var(--ebmnt1-steps-badge-active-text-color);
    transform: scale(1.12);
}

.ebmnt1-step__card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 1.1em 1.25em;
    overflow: hidden;
    border-radius: var(--ebmnt1-steps-card-radius);
    border: 1px solid var(--ebmnt1-steps-card-border-color);
    background-color: var(--ebmnt1-steps-card-bg-color);
    transition: transform var(--ebmnt1-transition-medium), box-shadow var(--ebmnt1-transition-medium), border-color var(--ebmnt1-transition-medium), background-color var(--ebmnt1-transition-medium);
}

.ebmnt1-step.is-active .ebmnt1-step__card,
.ebmnt1-step__card:hover {
    transform: translateX(-0.4rem);
    border-color: var(--ebmnt1-steps-card-active-border-color);
    background-color: var(--ebmnt1-steps-card-active-bg-color);
    box-shadow: 0 1rem 2.2rem var(--ebmnt1-steps-card-shadow-color);
}

.ebmnt1-step__watermark {
    position: absolute;
    top: 0.1em;
    inset-inline-end: 0.35em;
    font-size: var(--ebmnt1-steps-watermark-font-size);
    font-weight: 800;
    line-height: 1;
    color: var(--ebmnt1-steps-watermark-text-color);
    pointer-events: none;
}

.ebmnt1-step__head {
    display: flex;
    align-items: center;
    gap: 0.7em;
}

.ebmnt1-step__icon {
    flex: 0 0 auto;
    width: var(--ebmnt1-steps-icon-size);
    height: var(--ebmnt1-steps-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    background-color: var(--ebmnt1-steps-icon-bg-color);
    color: var(--ebmnt1-steps-icon-color);
    font-size: var(--ebmnt1-steps-icon-font-size);
}

.ebmnt1-step__title {
    font-size: var(--ebmnt1-steps-card-title-font-size);
    color: var(--ebmnt1-steps-card-title-text-color);
}

.ebmnt1-step__text {
    font-size: var(--ebmnt1-steps-card-text-font-size);
    color: var(--ebmnt1-steps-card-text-color);
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-steps-image-height: clamp(20rem, 48vw, 28rem);
        --ebmnt1-steps-badge-size: 3.4rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-steps-image-height: 100%;
    }

    .ebmnt1-steps__body {
        flex-direction: row;
        align-items: stretch;
        gap: 3em;
    }

    .ebmnt1-steps__media {
        flex: 0 0 38%;
        width: 38%;
        min-height: 30rem;
        position: sticky;
        top: calc(var(--ebmnt1-header-height) + 1.5rem);
        align-self: flex-start;
        height: 34rem;
    }

    .ebmnt1-steps__list {
        gap: 1.5em;
    }
}