/* Stiluri Globale și Antet pentru Secțiunea "Origine" */

.header-content-origine {
    max-width: 800px;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid #2a2a2a; /* Linia adăugată */
    border-top: 1px solid #2a2a2a;
    padding-top: 35px; /* Ajustează valoarea (ex: 100px) dacă este necesar */
}

.title-container-origine {
    display: flex;
    align-items: center; /* Aliniază vertical icon-ul și blocul de text */
    justify-content: center; /* Centrează acest rând în containerul său */
    gap: 15px;
    margin-bottom: 10px; /* Spațiu până la subtitlu */
}


    .title-container-origine svg {
        width: 40px;
        height: auto;
        fill: #ffffff;
        flex-shrink: 0;
    }

.title-text-stack-origine {
    text-align: left; /* Aliniază textul la stânga, relativ la pictogramă */
}

.hero-title-origine {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    line-height: 0.7; /* Micșorează spațiul alocat rândului de text */
}

.group-title-origine {
    margin: 0;
}

.highlight-red-origine {
    color: #e50914;
    font-size: 1.2rem;
    font-weight: 700;
}

.group-subtitle-origine {
    color: #bbbbbb;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    padding: 0 10px;
    text-align: center;
}

/* Resetari si stiluri de baza */
body-origine {
    font-family: 'Inter', sans-serif;
    background-color: #1a1a1a;
    color: #ffffff;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container principal */
.main-container-origine {
    max-width: 1152px; /* Similar cu max-w-6xl */
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1rem; /* Padding redus pe mobil */
}

/* Antetul sectiunii */
.section-header-origine {
    text-align: center;
    margin-bottom: 3rem; /* Spațiu redus pe mobil */
}

    .section-header-origine h2 {
        font-size: 1.8rem; /* Font mai mic pe mobil */
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -0.025em;
        margin-bottom: 1rem;
        color: #ffffff;
    }

    .section-header-origine p {
        font-size: 1rem; /* Font mai mic pe mobil */
        color: #d1d5db;
        max-width: 42rem;
        margin: 0 auto;
    }

.highlight-origine {
    color: #dc2626;
}


/* MODIFICĂRI PENTRU CRONOLOGIE - MOBILE FIRST */
.timeline-container-origine {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding-left: 30px; /* Spațiu în stânga pentru linia cronologică */
}

    /* Linia de fundal a cronologiei, acum în stânga */
    .timeline-container-origine::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15px; /* Poziționare în stânga, la jumătatea padding-ului */
        transform: translateX(-50%);
        width: 4px;
        height: 100%;
        background-color: #333333;
        z-index: 0;
    }

/* Bara de progres, acum tot în stânga */
#timeline-progress-origine {
    position: absolute;
    top: 0;
    left: 15px; /* Aliniată cu linia de fundal */
    transform: translateX(-50%);
    width: 4px;
    height: 0;
    background-color: #dc2626;
    z-index: 1;
    transition: height 0.05s linear;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* Etapele individuale */
.timeline-step-origine {
    position: relative;
    padding-left: 35px; /* Spațiu suplimentar pentru a nu se suprapune conținutul peste linie */
    margin-bottom: 2.5rem;
}

    .timeline-step-origine:last-child {
        margin-bottom: 0;
    }

/* Punctele de pe cronologie - repoziționate în stânga */
.timeline-point-origine {
    position: absolute;
    top: 0px; /* Aliniat cu începutul cardului */
    left: -31px; /* Poziționat peste linia din stânga */
    transform: none; /* Resetăm transformarea anterioară */
    width: 32px;
    height: 32px;
    background-color: #333333;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 4px solid #1a1a1a;
    z-index: 2;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

    .timeline-point-origine.is-active {
        background-color: #dc2626;
        transform: scale(1.2); /* Păstrăm efectul de mărire */
        box-shadow: 0 0 15px rgba(220, 38, 38, 0.7);
        color: #ffffff;
    }

/* Conținutul unei etape - acum un singur bloc, mereu la fel */
.step-content-origine {
    display: flex;
    flex-direction: column; /* Imaginea deasupra textului pe mobil */
    align-items: flex-start; /* Aliniere la stânga */
    width: 100%;
    gap: 1rem;
}

/* Resetăm clasa reversed pentru mobil, nu mai este necesară */
.step-content--reversed-origine {
    flex-direction: column;
}

.step-image-origine, .step-text-origine {
    width: 100%; /* Ocupă toată lățimea disponibilă */
}

    .step-image-origine img {
        width: 100%;
        border-radius: 0.5rem;
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
    }

    .step-text-origine h3 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #dc2626;
        margin-bottom: 0.5rem;
    }

    .step-text-origine p {
        color: #d1d5db;
        font-size: 0.95rem;
    }

/* Sectiunea Call to Action */
.cta-section-origine {
    text-align: center;
    margin-top: 4rem;
}

    .cta-section-origine h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 1rem;
    }

    .cta-section-origine p {
        color: #9ca3af;
        margin-bottom: 2rem;
        max-width: 36rem;
        margin: 0 auto 2rem auto;
    }

.cta-button-origine {
    display: inline-block;
    background-color: #dc2626;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.2), 0 4px 6px -4px rgba(220, 38, 38, 0.2);
}

    .cta-button-origine:hover {
        background-color: #b91c1c;
        box-shadow: 0 10px 15px -3px rgba(185, 28, 28, 0.4), 0 4px 6px -4px rgba(185, 28, 28, 0.4);
    }


/* Clase pentru animatii JS */
.slide-in-from-left-origine, .slide-in-from-right-origine {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.is-visible-origine {
    opacity: 1;
    transform: translateY(0);
}

.content-card-origine:hover {
    transform: scale(1.02); /* Efect de hover mai subtil pe mobil */
}


/* --- STILURI PENTRU DESKTOP --- */
/* Aici restaurăm layout-ul original pentru ecrane mai mari */
@media (min-width: 768px) {
    .main-container-origine {
        padding: 6rem 1.5rem;
    }

    .section-header-origine {
        margin-bottom: 6rem;
    }

        .section-header-origine h2 {
            font-size: 3.75rem;
        }

        .section-header-origine p {
            font-size: 1.25rem;
        }

    /* Readucem linia cronologică pe centru */
    .timeline-container-origine {
        padding-left: 0; /* Resetăm padding-ul de pe mobil */
    }

        .timeline-container-origine::before,
        #timeline-progress-origine {
            left: 50%; /* Centrare */
            transform: translateX(-50%);
        }

    .timeline-step-origine {
        padding-left: 0; /* Resetăm padding-ul */
        margin-bottom: 8rem;
        /* Adăugăm un display: grid pentru a controla alinierea stânga-dreapta */
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* coloană stânga, punct, coloană dreapta */
        align-items: center;
        width: 100%;
    }

    .timeline-point-origine {
        /* Punctul este acum pe coloana din mijloc */
        grid-column: 2;
        position: static; /* Nu mai are nevoie de position: absolute */
        transform: translate(0, 0); /* Resetăm transform */
    }

        .timeline-point-origine.is-active {
            transform: scale(1.2);
        }


    .step-content-origine {
        grid-column: 3; /* Conținutul implicit în coloana din dreapta */
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        padding-left: 50px; /* Spațiu între conținut și linie */
    }

    /* Pentru pașii impari, conținutul rămâne în dreapta (implicit) */
    /* Pentru pașii pari, mutăm conținutul în coloana din stânga */
    .timeline-step-origine:nth-child(even) .step-content-origine {
        grid-column: 1;
        padding-left: 0;
        padding-right: 50px;
    }

    /* Readucem layout-ul imagine-text alternant */
    .step-content--reversed-origine {
        flex-direction: row-reverse;
    }

    .step-image-origine, .step-text-origine {
        width: 50%;
    }
}