.linha-tempo-capa {
    aspect-ratio: 320/340;
}

.card-video {
    aspect-ratio: 9/16;
    width: 100%;
    height: auto;
}

    .card-video .icon-play {
        transition: all 200ms ease;
    }

    .card-video:hover .icon-play {
        transform: scale(1.1);
    }

.navigation-arrow {
    --swiper-navigation-color: rgb(var(--color-white-rgb));
}

.nav-timeline {
    --bs-nav-link-font-weight: 300;
    --bs-nav-link-color: rgba(var(--bs-light-rgb), .5);
    --bs-nav-link-hover-color: var(--bs-light);
    --bs-nav-link-active-color: var(--bs-light);
    --bs-nav-underline-link-active-color: var(--bs-light);
    --bs-nav-link-font-size: 2rem;
    --bs-nav-underline-gap: 2rem;
    overflow-x: scroll;
    scrollbar-width: none;
}

    .nav-timeline .nav-link {
        border: none;
    }
    .nav-timeline .nav-link.active {
        --bs-nav-link-font-weight: 700;
    }

    .nav-timeline .nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 0;
        height: 3px;
        border-radius: 4px;
        background: currentColor; /* usa a mesma cor do texto */
        transform: translateX(-50%);
        transition: width 0.2s ease;
        bottom: -2px;
    }

    /* Hover = underline expandindo */
    .nav-timeline .nav-link:hover::after {
        width: 30px;
    }

    /* Active = underline permanente */
    .nav-timeline .nav-link.active::after {
        width: 100%;
    }

.timeline-img {
    max-width: 360px;
    max-height: 368px;
}

.timeline-list {
    position: relative;
}

/* Item */
.timeline-item {
    position: relative;
    padding-left: 5rem;
}

    /* Bullet */
    .timeline-item::after {
        content: "";
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 27px;
        height: 27px;
        background: rgb(var(--certel-verde));
        border-radius: 50%;
        z-index: 2;
    }

    /* Linha conectando ao próximo bullet */
    .timeline-item::before {
        content: "";
        position: absolute;
        left: 33px;
        /* centro do bullet atual */
        top: 50%;
        width: 1px;
        /* 100% do item + pb-5 (3rem) - metade do bullet */
        height: calc(100% + 3rem - 13.5px);
        border-left: 1px solid rgb(var(--bs-light-rgb));
        z-index: 1;
    }

    /* Remove a linha do último item */
    .timeline-item:last-child::before {
        display: none;
    }

.ano-overlay {
    font-size: clamp(10rem, 15vw, 15rem) !important;
    line-height: 1;
    top: -60px;
    opacity: 0.25 !important;
}

.chamada-jornal .jornal-certel-img {
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
}


.swiper-nav {
    padding-right: 130px;
}

.swiper-nav .banner-tools {
    transform: translate(0,-50%);
    left: unset
}


@media screen and (min-width: 576px) {
    .linha-tempo-capa {
        aspect-ratio: 4/3;
    }
}

@media screen and (min-width: 768px) {
    .linha-tempo-capa {
        aspect-ratio: 1920/750;
    }

    .ano-overlay {
        left: 80%;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media screen and (min-width: 992px) {
    .secao-videos .banner-tools {
        left: unset;
        right: calc(100% + 1rem);
        transform: translateX(0) translateY(-4rem);
        justify-content: flex-start
    }

    .chamada-jornal .jornal-certel-img {
        max-height: 275px;
    }
}

@media screen and (min-width: 1200px) {
    .linha-tempo-capa {
        aspect-ratio: 1920/508;
    }
}
