/* --- Sekce Harmonogram --- */
.wedding-timeline-section {
    background-color: var(--c-bg-soft); /* Krémové pozadí, oddělení od bílé */
}

.timeline-title {
    text-align: center;
    margin-bottom: 50px;
    color: var(--c-primary-dark);
    font-size: 2.5em;
}

.timeline-wrapper {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

/* Vytvoření vertikální linky */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25%;
    width: 2px;
    background: var(--c-primary); /* Zelená linka */
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Vizuální bod na lince (marker) */
.timeline-marker {
    position: absolute;
    left: 25%;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-accent); /* Tlumená červená */
    transform: translateX(-50%);
    z-index: 10;
    border: 3px solid var(--c-bg-soft); /* Aby se "vynořil" z krémového pozadí */
}

/* Obsah a čas */
.timeline-time {
    width: 20%;
    text-align: right;
    font-weight: 700;
    font-size: 1.2em;
    padding-right: 20px;
    color: var(--c-text-main);
    padding-top: 5px;
}

.timeline-time.accent-time {
    color: var(--c-accent); /* Zvýraznění klíčových časů (obřad) */
}

.timeline-content {
    width: 70%;
    padding-left: 20px;
}

.timeline-heading {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.3em;
    color: var(--c-primary-dark);
}

/* --- Responzivita pro mobilní telefony (Změna na levou linku) --- */
@media (max-width: 768px) {
    .timeline-wrapper::before {
        left: 30px; /* Linka se přesune více doleva */
    }

    .timeline-item {
        display: block;
        padding-left: 60px;
    }

    .timeline-time {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 5px;
    }

    .timeline-marker {
        left: 30px; /* Marker se posune k lince */
    }

    .timeline-content {
        width: 100%;
        padding-left: 0;
    }
}