/* ============================================================
   VLIG Timeline — naizmenicni blokovi oko centralne linije
   ============================================================ */

.vtl {
    position: relative;
    font-family: var(--vtl-font, inherit);
}

/* === Centralna linija ========================================== */
.vtl .vtl-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--vtl-line-w, 8px);
    background-color: var(--vtl-line-color, #004062);
    pointer-events: none;
}

/* Bledjenje na krajevima */
.vtl.vtl--fade .vtl-line {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 90px,
        #000 calc(100% - 140px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 90px,
        #000 calc(100% - 140px),
        transparent 100%
    );
}

/* === Mreza ===================================================== */
.vtl .vtl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--vtl-col-gap, 120px);
    row-gap: var(--vtl-row-gap, 40px);
    align-items: start;
}

/* === Red (levi + desni blok) =================================== */
/* Na desktopu je providan — grid i dalje raspoređuje same blokove. */
.vtl .vtl-row {
    display: contents;
}

/* === Blok ====================================================== */
.vtl .vtl-block {
    position: relative;
    min-width: 0; /* da dugacke reci ne razvuku kolonu */
}

.vtl .vtl-block--left  { grid-column: 1; }
.vtl .vtl-block--right { grid-column: 2; }

/* Desna kolona krece nize — stepenasti raspored kao na dizajnu */
.vtl .vtl-block--right { margin-top: var(--vtl-offset, 120px); }

/* === Spojnica ka liniji ======================================== */
/* Nosi je omotac slike, pa uvek stoji na sredini slike —
   naslov i duzina teksta je ne pomeraju. */
.vtl .vtl-media {
    position: relative;
}
.vtl .vtl-block--connected .vtl-media::before {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(var(--vtl-col-gap, 120px) / 2);
    height: var(--vtl-line-w, 8px);
    margin-top: calc(var(--vtl-line-w, 8px) / -2);
    background-color: var(--vtl-line-color, #004062);
    pointer-events: none;
}
.vtl .vtl-block--left.vtl-block--connected .vtl-media::before {
    right: calc(var(--vtl-col-gap, 120px) / -2);
}
.vtl .vtl-block--right.vtl-block--connected .vtl-media::before {
    left: calc(var(--vtl-col-gap, 120px) / -2);
}

/* === Naslov ==================================================== */
.vtl .vtl-heading {
    margin: 0 0 28px;
    color: var(--vtl-h-color, #0078BA);
    font-size: var(--vtl-h-size, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* === Slika ===================================================== */
.vtl .vtl-figure {
    margin: 0;
    border: var(--vtl-border-w, 3px) solid var(--vtl-border-color, #004062);
    border-radius: var(--vtl-radius, 18px);
    overflow: hidden;
    line-height: 0;
}
.vtl .vtl-figure .vtl-img {
    display: block;
    width: 100%;
    height: auto;
}

/* === Opis ispod slike ========================================== */
.vtl .vtl-caption {
    margin-top: 18px;
    color: var(--vtl-c-color, #0078BA);
    font-size: var(--vtl-c-size, 1rem);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

/* === Tekst ===================================================== */
.vtl .vtl-text {
    margin-top: 22px;
    color: var(--vtl-t-color, #020307);
    font-size: var(--vtl-t-size, 1rem);
    line-height: 1.6;
}
.vtl .vtl-text > *:first-child { margin-top: 0; }
.vtl .vtl-text > *:last-child  { margin-bottom: 0; }
.vtl .vtl-text p  { margin: 0 0 1em; }
.vtl .vtl-text ul,
.vtl .vtl-text ol { margin: 0 0 1em; padding-left: 1.3em; }
.vtl .vtl-text li { margin-bottom: 0.5em; }

/* Blok bez slike: tekst ide odmah, bez dodatnog razmaka */
.vtl .vtl-block > .vtl-text:first-child { margin-top: 0; }

/* Tekst poravnat ka liniji (levi desno, desni levo) */
.vtl.vtl--align-line .vtl-block--left  .vtl-text { text-align: right; }
.vtl.vtl--align-line .vtl-block--right .vtl-text { text-align: left; }
/* Liste ostaju citljive — uvek levo poravnate */
.vtl.vtl--align-line .vtl-block--left .vtl-text ul,
.vtl.vtl--align-line .vtl-block--left .vtl-text ol { text-align: left; }

/* === Tablet ==================================================== */
@media (max-width: 1024px) {
    .vtl {
        --vtl-col-gap: 60px;
        --vtl-offset: 60px;
    }
    .vtl .vtl-heading { font-size: calc(var(--vtl-h-size, 2.1rem) * 0.8); }
}

/* === Mobilni: sve u jednu kolonu ================================ */
@media (max-width: 767px) {
    .vtl.vtl--stack-mobile .vtl-grid {
        grid-template-columns: 1fr;
        row-gap: 48px;
        padding-left: 34px;
    }
    /* Red postaje jedna celina, a blokovi se "rastvaraju" u njega,
       pa se naslov, slika, opis i tekst mogu poređati bez obzira
       na to iz koje su kolone došli. */
    .vtl.vtl--stack-mobile .vtl-row {
        display: flex;
        flex-direction: column;
        grid-column: 1;
    }
    .vtl.vtl--stack-mobile .vtl-block,
    .vtl.vtl--stack-mobile .vtl-block--left,
    .vtl.vtl--stack-mobile .vtl-block--right {
        display: contents;
    }

    /* Uvek: naslov -> slika -> opis -> tekst */
    .vtl.vtl--stack-mobile .vtl-heading { order: 1; margin-bottom: 18px; }
    .vtl.vtl--stack-mobile .vtl-media   { order: 2; }
    .vtl.vtl--stack-mobile .vtl-caption { order: 3; margin-top: 14px; }
    .vtl.vtl--stack-mobile .vtl-text    { order: 4; margin-top: 18px; }
    /* Linija se pomera uz levu ivicu */
    .vtl.vtl--stack-mobile .vtl-line {
        left: 0;
        transform: none;
    }
    /* Spojnica i dalje na sredini slike, samo ide ka levoj ivici */
    .vtl.vtl--stack-mobile .vtl-block--connected .vtl-media::before {
        left: -34px;
        right: auto;
        width: 34px;
        top: 50%;
    }
    /* Na uskom ekranu sve ide levo */
    .vtl.vtl--stack-mobile.vtl--align-line .vtl-block--left .vtl-text,
    .vtl.vtl--stack-mobile.vtl--align-line .vtl-block--right .vtl-text {
        text-align: left;
    }
    .vtl.vtl--stack-mobile .vtl-heading,
    .vtl.vtl--stack-mobile .vtl-caption {
        text-align: left;
    }
}


/* === Okvir slike sa fiksnim odnosom stranica ==================== */
/* Ukljucuje se opcijom "Odnos stranica okvira" (sve slike isti oblik). */
.vtl.vtl--img-framed .vtl-figure {
    aspect-ratio: var(--vtl-img-ratio, 3/2);
}
.vtl.vtl--img-framed .vtl-figure .vtl-img {
    height: 100%;
    object-fit: var(--vtl-img-fit, cover);
    object-position: center;
}