/* Style frontendowe wtyczki Timeline */

.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.timeline {
    display: grid;
    place-self: center;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin-top: -1px;
    background: 
        var(--marker), 
        linear-gradient(var(--highlight) 0 0) 50%/ 2px;
    background-repeat: no-repeat;
    padding-bottom: 1em;
    position: relative;
}

.timeline-item:first-child {
    --marker: 
        linear-gradient(var(--highlight) 0 0) 
            50% 0/ var(--size) calc(.5*var(--size));
}

.timeline-item:nth-child(odd) .timeline-image {
    grid-area: 1/ 1;
    justify-self: end;
}

.timeline-content {
    padding: 1em;
    background: rgba(255 255 255/ .07);
    border-radius: var(--size);
}

.timeline-content h2 {
    margin: 0 0 var(--size);
    color: #1a3b22;
    font: italic 1.375em/1 rosario, sans-serif;
    text-transform: capitalize;
}

.timeline-content time {
    font: 700 2.5em/ 1.25 roboto mono, monospace;
    display: block;
}

.timeline-content hr {
    opacity: .3;
}

.timeline-content p {
    margin: 0;
    padding-top: .5em;
    font: 1em proza libre, sans-serif;
}

.timeline-image {
    box-sizing: border-box;
    border: solid 2px;
    width: min(100%, 13em);
    aspect-ratio: 1.3;
    object-fit: cover;
    border-radius: var(--size);
}

/* Zmienne CSS */
.timeline {
    --size: .625em;
    --highlight: #1a3b22;
    --marker: 
        radial-gradient(circle closest-side, 
                var(--highlight) calc(100% - 1px), transparent) 
            0 0/ 100% var(--size);
}

/* Responsywność */
@media (max-width: 768px) {
    .timeline-item {
        grid-template-columns: 1fr;
        gap: 1em;
    }
    
    .timeline-item:nth-child(odd) .timeline-image {
        grid-area: auto;
        justify-self: start;
    }
    
    .timeline-image {
        width: 100%;
        max-width: 300px;
    }
}

/* Ukrywanie pustych elementów */
.timeline-item:empty {
    display: none;
}

/* Animacje */
.timeline-item {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}