////
///
/// Timeline Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `timeline` module,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module rather than
/// from this module's index, so at equal specificity the native rules win.
///
/// 14 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.Timeline
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "../../01-core/external" as *;

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- timeline  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline {

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: q(2);
            background: var(--ss-color-border);
        }
    }

    // -- timeline-item  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline-item {
        position: relative;
        padding-bottom: var(--ss-spacing-8);

        &:last-child {
            padding-bottom: 0;
        }
    }

    // -- timeline-marker  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline-marker {
        position: absolute;
        left: calc(-1 * var(--ss-spacing-8) - q(1));
        transform: translateX(-50%);
        font-family: var(--ss-font-family-display);
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-bold);
        color: var(--ss-color-text);
        background: var(--ss-color-background);
        padding: var(--ss-spacing-2) var(--ss-spacing-3);
        border-radius: 0;
        border: q(2) solid var(--ss-color-border);
    }

    // -- timeline-content  (from site-scape_ventures/src/static/scss/sections/_timeline.scss) --
    .ss-c-timeline-content {
        h3 {
            font-size: var(--ss-font-size-xl);
            margin-bottom: var(--ss-spacing-2);
        }

        p {
            font-size: var(--ss-font-size-sm);
        }
    }

    // -- vision-timeline  (from site-lovelacelabs_ai/src/static/scss/app/_philosophy.scss) --
    .ss-c-vision-timeline {
        display: flex;
        justify-content: center;
        gap: q(32);
        flex-wrap: wrap;
        max-width: q(1200);
        margin: q(32) auto 0;
    }

    // -- timeline-section  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-section {
        padding: q(64) q(32);
        position: relative;
    }

    // -- timeline-track  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-track {
        position: relative;
        max-width: q(1000);
        margin: 0 auto;
        padding: q(32) 0;
    }

    // -- timeline-line  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-line {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: q(4);
        background: linear-gradient(
            to bottom,
            var(--ss-color-accent),
            var(--ss-color-info),
            var(--ss-color-accent-tertiary),
            var(--ss-color-success)
        );
        transform: translateX(-50%);
        border-radius: q(2);

        @media (max-width: q(768)) {
            left: q(30);
        }
    }

    // -- timeline-milestone  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-milestone {
        position: relative;
        display: flex;
        align-items: flex-start;
        margin-bottom: q(48);
        width: 50%;
        padding-right: q(48);

        &--left {
            justify-content: flex-end;
            text-align: right;

            .ss-c-timeline-milestone__card {
                margin-right: q(16);
            }
        }

        &--right {
            margin-left: 50%;
            padding-right: 0;
            padding-left: q(48);
            text-align: left;

            .ss-c-timeline-milestone__card {
                margin-left: q(16);
            }
        }

        @media (max-width: q(768)) {
            width: 100%;
            padding-left: q(60);
            padding-right: 0;
            margin-left: 0 !important;
            text-align: left !important;

            &--left .ss-c-timeline-milestone__card,
            &--right .ss-c-timeline-milestone__card {
                margin-left: q(16);
                margin-right: 0;
            }
        }

        &__marker {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: var(--ss-z-10);

            @media (max-width: q(768)) {
                left: q(30);
            }
        }

        &__dot {
            width: q(20);
            height: q(20);
            background: var(--ss-color-white);
            border: q(4) solid var(--ss-color-info);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--ss-duration-300) ease, border-color var(--ss-duration-300) ease;

            &:hover {
                transform: scale(1.2);
            }
        }

        &__icon {
            width: q(8);
            height: q(8);
            background: unset;
            border-radius: 50%;
        }

        &__card {
            flex: 1;
            max-width: q(400);
            padding: q(24);
            border-radius: q(16);
            transition: transform var(--ss-duration-300) ease;

            &:hover {
                transform: translateY(q(-4));
            }
        }

        &__date {
            display: flex;
            align-items: baseline;
            gap: q(8);
            margin-bottom: q(12);

            .ss-c-timeline-milestone--left & {
                justify-content: flex-end;
            }

            @media (max-width: q(768)) {
                justify-content: flex-start !important;
            }
        }

        &__year {
            font-size: q(20);
            font-weight: 700;
            background: linear-gradient(135deg, var(--ss-color-accent), var(--ss-color-info));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        &__quarter {
            font-size: q(12);
            font-weight: 600;
            color: var(--ss-color-text-muted);
        }

        &__title {
            font-size: q(17.6);
            font-weight: 600;
            color: var(--ss-color-text);
            margin-bottom: q(8);
        }

        &__description {
            font-size: q(13.6);
            line-height: 1.6;
            color: var(--ss-color-text-muted);
            margin-bottom: q(12);
        }

        &__category {
            display: inline-block;
            font-size: q(11.2);
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: q(4) q(12);
            border-radius: q(16);
            background: unset;
            color: unset;
        }

        // Category-specific colors
        // (stripped @each block)

    }

    // -- timeline-end  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-end {
        text-align: center;
        padding-top: q(32);
        position: relative;

        &__symbol {
            font-size: q(48);
            background: linear-gradient(135deg, var(--ss-color-accent), var(--ss-color-info));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: infinity-pulse var(--ss-duration-loop-slow) ease-in-out infinite;
        }

        &__text {
            margin-top: q(16);
            font-size: q(14.4);
            font-style: italic;
            color: var(--ss-color-text-muted);
        }
    }

    // -- timeline-stats  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-stats {
        padding: q(32);
    }

    // -- timeline-stat  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-stat {
        text-align: center;
        padding: q(32) q(16);
        border-radius: q(16);

        &__value {
            display: block;
            font-size: q(40);
            font-weight: 700;
            background: linear-gradient(135deg, var(--ss-color-accent), var(--ss-color-info));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        &__label {
            display: block;
            margin-top: q(8);
            font-size: q(12.8);
            color: var(--ss-color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    }

    // -- timeline-legend  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: q(24);
        margin-top: q(16);
    }

    // -- timeline-cta  (from site-lovelacelabs_ai/src/static/scss/app/_timeline.scss) --
    .ss-c-timeline-cta {
        padding: q(64) q(32);
        text-align: center;


        .ss-c-section-subtitle {
            margin-bottom: q(32);
            color: var(--ss-color-text-muted);
        }

        .ss-c-neu-btn {
            display: inline-flex;
            align-items: center;
            gap: q(8);
            padding: q(16) q(32);

            .ss-c-btn-icon {
                transition: transform var(--ss-duration-300) ease;
            }

            &:hover .ss-c-btn-icon {
                transform: translateX(q(4));
            }
        }
    }
}