/* ===== MARMEL MEDIA — onas.css ===== */

/* Timeline - o-nas */
.timeline {
    margin: 3rem 0;
}
.timeline__heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: .05em;
    margin-bottom: 3rem;
    color: var(--color-primary, #fff);
    text-align: center;
}

/* pionowa linia */
.timeline {
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border, rgba(255,255,255,0.07));
}
.tl__item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
}

/* kropka na osi */
.tl__dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 2px solid #0d0d14;
    z-index: 1;
    flex-shrink: 0;
}

/* karta */
.tl__card {
    width: calc(50% - 2rem);
    background: var(--card-bg, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.tl__item--left .tl__card  { margin-right: auto; text-align: right; }
.tl__item--right .tl__card { margin-left: auto;  text-align: left; }

.tl__year {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: .06em;
    color: #f0f0f0;
    margin-bottom: .25rem;
}
.tl__body {
    color: var(--color-text-muted, #aaa);
    line-height: 1.65;
    font-size: .95rem;
}

.tl__img {
    width: 75%;
    border-radius: 6px;
    margin: .75rem 0 .5rem;
    display: block;
}
.tl__item--left .tl__img  { margin-left: auto; }
.tl__item--right .tl__img { margin-right: auto; }
.tl__img--logo { background: #fff; padding: .5rem; border-radius: 4px; }

/* mobile - wszystko w lewo */
@media (max-width: 640px) {
    .tl__item::before { left: 10px; transform: none; }
    .tl__dot          { left: 10px; transform: translateX(-50%); }
    .tl__card         { width: calc(100% - 2.5rem); margin-left: 2.5rem !important; text-align: left !important; }
}