/* ============================================================
   WORKFLOW SECTION
   ============================================================ */

.workflow-section {
    position: relative;

    padding:
        var(--ds-space-24)
        var(--ds-space-6);

    background: var(--ds-background);

    overflow: hidden;
}


.workflow-section__inner {
    max-width: var(--ds-content-max-width);

    margin-inline: auto;
}


/* ============================================================
   HEADING
   ============================================================ */

.workflow-section__heading {
    max-width: 720px;

    margin-inline: auto;

    text-align: center;

    margin-bottom: var(--ds-space-16);
}


.workflow-section__eyebrow {
    display: inline-block;

    margin-bottom: var(--ds-space-4);

    color: var(--ds-primary);

    font-size: 0.75rem;

    font-weight: 650;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.workflow-section__title {
    margin: 0 0 var(--ds-space-5);

    color: var(--ds-foreground);

    font-family: var(--ds-font-heading);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.1;

    letter-spacing: -0.025em;

    font-weight: 700;
}


.workflow-section__subtitle {
    max-width: 60ch;

    margin: 0 auto;

    color: var(--ds-muted-foreground);

    font-size: 1.05rem;

    line-height: 1.65;
}


/* ============================================================
   WORKFLOW
   ============================================================ */

.workflow {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: var(--ds-space-5);
}


/* ============================================================
   NODE
   ============================================================ */

.workflow__node {
    position: relative;

    min-width: 0;

    padding:
        var(--ds-space-6);

    border:
        1px solid
        var(--ds-border);

    border-radius:
        var(--ds-radius-xl);

    background:
        var(--ds-card);

    box-shadow:
        var(--ds-shadow-sm);
}


.workflow__step {
    position: absolute;

    top: -8px;
    right: 12px;

    color:
        color-mix(
            in oklch,
            var(--ds-primary) 8%,
            transparent
        );

    font-family: var(--ds-font-heading);

    font-size: 4.75rem;

    font-weight: 750;

    line-height: 1;

    letter-spacing: -0.07em;

    pointer-events: none;

    user-select: none;
}


.workflow__icon {
    position: relative;

    z-index: 1;

    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    margin-bottom:
        var(--ds-space-5);

    border:
        1px solid
        color-mix(
            in oklch,
            var(--ds-primary) 20%,
            var(--ds-border)
        );

    border-radius:
        var(--ds-radius-lg);

    background:
        color-mix(
            in oklch,
            var(--ds-primary) 10%,
            var(--ds-card)
        );

    color:
        var(--ds-primary);
}


.workflow__icon svg {
    width: 21px;
    height: 21px;

    stroke-width: 1.8;
}


.workflow__title {
    position: relative;

    z-index: 1;

    margin: 0 0 var(--ds-space-2);

    color:
        var(--ds-foreground);

    font-family:
        var(--ds-font-heading);

    font-size: 1.1rem;

    font-weight: 650;
}


.workflow__text {
    position: relative;

    z-index: 1;

    margin: 0;

    color:
        var(--ds-muted-foreground);

    font-size: 0.9rem;

    line-height: 1.55;
}


/* ============================================================
   CONNECTORS
   ============================================================ */

.workflow__line {
    width: 42px;

    height: 1px;

    background:
        var(--ds-border);
}


/* ============================================================
   OUTPUTS
   ============================================================ */

.workflow__outputs {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: var(--ds-space-4);

    max-width: 760px;

    margin:
        var(--ds-space-10)
        auto 0;
}


.workflow__output {
    display: flex;

    align-items: center;

    gap: var(--ds-space-4);

    padding:
        var(--ds-space-5);

    border:
        1px solid
        var(--ds-border);

    border-radius:
        var(--ds-radius-lg);

    background:
        var(--ds-card);
    box-shadow: var(--ds-shadow-sm);

    transition:
        transform var(--ds-duration-normal) var(--ds-ease-standard),
        border-color var(--ds-duration-normal) var(--ds-ease-standard),
        box-shadow var(--ds-duration-normal) var(--ds-ease-standard);
}

.workflow__output:hover {
    transform: translateY(-3px);

    border-color:
        color-mix(
            in oklch,
            var(--ds-primary) 30%,
            var(--ds-border)
        );

    box-shadow: var(--ds-shadow-md);
}


.workflow__output-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    display: grid;

    place-items: center;

    border-radius:
        var(--ds-radius-md);

    background:
        color-mix(
            in oklch,
            var(--ds-primary) 9%,
            var(--ds-background)
        );

    border:
        1px solid
        color-mix(
            in oklch,
            var(--ds-primary) 22%,
            var(--ds-border)
        );

    color: var(--ds-primary);
}


.workflow__output-icon svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.8;
}


.workflow__output strong {
    display: block;

    margin-bottom: 2px;

    color:
        var(--ds-foreground);

    font-size: 0.95rem;
}


.workflow__output span {
    display: block;

    color:
        var(--ds-muted-foreground);

    font-size: 0.85rem;

    line-height: 1.4;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .workflow {
        grid-template-columns:
            1fr;

        gap: var(--ds-space-3);
    }


    .workflow__line {
        width: 1px;
        height: 32px;

        margin-inline: auto;
    }
}


@media (max-width: 640px) {

    .workflow-section {
        padding:
            var(--ds-space-16)
            var(--ds-space-4);
    }


    .workflow-section__heading {
        margin-bottom: var(--ds-space-10);
    }


    .workflow-section__subtitle {
        font-size: 1rem;
    }


    .workflow__node {
        padding:
            var(--ds-space-5);
    }


    .workflow__step {
        font-size: 4rem;
    }


    .workflow__outputs {
        grid-template-columns:
            1fr;

        margin-top:
            var(--ds-space-8);
    }
}