/* =========================================================
   LEARNING MODEL
   ========================================================= */

.learning {
    position: relative;
    overflow: hidden;

    background: var(--color-background);
}

.learning__container {
    width: min(
        calc(100% - (2 * var(--container-padding-mobile))),
        var(--container-max-width)
    );

    margin-inline: auto;

    padding-block:
        var(--section-padding-mobile);
}


/* =========================================================
   INTRO
   ========================================================= */

.learning__intro {
    max-width: 780px;

    margin-bottom: var(--space-20);
}

.learning__eyebrow {
    display: inline-block;

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

    color: var(--color-primary);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.learning__title {
    max-width: 850px;

    color: var(--color-text-primary);

    font-size: var(--font-size-h2);

    letter-spacing: -0.04em;
}

.learning__title span {
    color: var(--color-primary);
}

.learning__description {
    max-width: 680px;

    margin-top: var(--space-6);

    color: var(--color-text-secondary);

    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}


/* =========================================================
   JOURNEY
   ========================================================= */

.learning__journey {
    position: relative;

    min-height: 560px;
}


/* =========================================================
   TRAJECTORY
   ========================================================= */

.learning__trajectory {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.learning__trajectory-svg {
    width: 100%;
    height: 100%;
}

.learning__trajectory-line {
    fill: none;

    stroke: var(--color-line);

    stroke-width: 2;

    stroke-dasharray: 8 10;

    vector-effect: non-scaling-stroke;

    transition:
        stroke var(--transition-normal),
        filter var(--transition-normal);
}


/* =========================================================
   STEPS
   ========================================================= */

.learning__step {
    position: absolute;

    width: min(30%, 320px);

    padding: var(--space-6);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

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

    background: var(--color-surface);

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

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.learning__step:hover {
    transform: translateY(-6px);

    border-color: var(--color-primary);

    box-shadow:
        var(--shadow-lg),
        var(--glow-primary);
}


/* =========================================================
   STEP POSITIONS
   ========================================================= */

.learning__step--imagine {
    top: 40px;
    left: 0;
}

.learning__step--learn {
    top: 300px;
    left: 50%;

    transform: translateX(-50%);
}

.learning__step--create {
    top: 40px;
    right: 0;
}

.learning__step--learn:hover {
    transform: translate(-50%, -6px);
}


/* =========================================================
   NODES
   ========================================================= */

.learning__node {
    position: absolute;

    top: 50%;

    width: 16px;
    height: 16px;

    border:
        2px solid
        var(--color-primary);

    border-radius: var(--radius-full);

    background: var(--color-surface);

    transform: translateY(-50%);

    z-index: var(--z-content);
}

.learning__node span {
    position: absolute;

    inset: 3px;

    border-radius: inherit;

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

.learning__node--primary {
    box-shadow:
        0 0 0 5px
        color-mix(
            in srgb,
            var(--color-primary) 12%,
            transparent
        ),
        var(--glow-primary);
}

.learning__node--yellow {
    border-color: var(--color-yellow);

    box-shadow:
        0 0 0 5px
        color-mix(
            in srgb,
            var(--color-yellow) 12%,
            transparent
        ),
        var(--glow-yellow);
}

.learning__node--yellow span {
    background: var(--color-yellow);
}

.learning__node--green {
    border-color: var(--color-green);

    box-shadow:
        0 0 0 5px
        color-mix(
            in srgb,
            var(--color-green) 12%,
            transparent
        );
}

.learning__node--green span {
    background: var(--color-green);
}


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

.learning__step--imagine .learning__node {
    top: 50%;
    right: -8px;
}

.learning__step--learn .learning__node {
    top: -8px;
    left: 50%;

    transform: translateX(-50%);
}

.learning__step--create .learning__node {
    top: 50%;
    left: -8px;
}


/* =========================================================
   STEP CONTENT
   ========================================================= */

.learning__step-number {
    margin-bottom: var(--space-2);

    color: var(--color-text-muted);

    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.08em;
}

.learning__step-label {
    display: inline-block;

    margin-bottom: var(--space-3);

    color: var(--color-primary);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.learning__step--learn .learning__step-label {
    color: var(--color-yellow);
}

.learning__step--create .learning__step-label {
    color: var(--color-green);
}

.learning__step-title {
    color: var(--color-text-primary);

    font-size: var(--font-size-h4);

    letter-spacing: -0.03em;
}

.learning__step-title span {
    display: block;

    color: var(--color-text-secondary);
}

.learning__step-text {
    margin-top: var(--space-4);

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: var(--line-height-relaxed);
}


/* =========================================================
   FOUNDATION
   ========================================================= */

.learning__foundation {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--space-12);

    margin-top: var(--space-16);

    padding-top: var(--space-12);

    border-top:
        var(--border-width-thin)
        solid
        var(--color-border);
}

.learning__foundation-intro {
    max-width: 560px;
}

.learning__foundation-eyebrow {
    display: block;

    margin-bottom: var(--space-3);

    color: var(--color-text-muted);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.learning__foundation-title {
    color: var(--color-text-primary);

    font-size: var(--font-size-h3);

    letter-spacing: -0.04em;
}

.learning__foundation-text {
    margin-top: var(--space-4);

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);

    line-height: var(--line-height-relaxed);
}


/* =========================================================
   DISCIPLINES
   ========================================================= */

.learning__disciplines {
    display: flex;

    flex-wrap: wrap;

    align-content: center;

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

.learning__discipline {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        var(--space-2)
        var(--space-4);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius: var(--radius-full);

    background: var(--color-surface);

    color: var(--color-text-secondary);

    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    transition:
        color var(--transition-normal),
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        transform var(--transition-normal);
}

.learning__discipline:hover {
    color: var(--color-primary);

    border-color: var(--color-primary);

    background: var(--color-surface-elevated);

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) {

    .learning__container {
        width: min(
            calc(100% - (2 * var(--container-padding-tablet))),
            var(--container-max-width)
        );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .learning__intro {
        margin-bottom: var(--space-12);
    }

    .learning__description {
        font-size: var(--font-size-md);
    }

    .learning__journey {
        display: flex;

        flex-direction: column;

        gap: var(--space-6);

        min-height: auto;
    }

    .learning__trajectory {
        display: none;
    }

    .learning__step,
    .learning__step--imagine,
    .learning__step--learn,
    .learning__step--create {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;

        transform: none;
    }

    .learning__step--learn:hover {
        transform: translateY(-6px);
    }

    .learning__node,
    .learning__step--imagine .learning__node,
    .learning__step--learn .learning__node,
    .learning__step--create .learning__node {
        top: 0;
        left: 50%;

        right: auto;

        transform: translate(-50%, -50%);
    }

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

        gap: var(--space-8);

        margin-top: var(--space-12);
    }

    .learning__disciplines {
        align-content: flex-start;
    }

}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1280px) {

    .learning__journey {
        min-height: 600px;
    }

    .learning__step {
        width: 320px;
    }

    .learning__step--imagine {
        top: 50px;
        left: 2%;
    }

    .learning__step--learn {
        top: 320px;
    }

    .learning__step--create {
        top: 50px;
        right: 2%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .learning__step,
    .learning__discipline {
        transition: none;
    }

}