/**
 * Consulmar — Prémios e Reconhecimento
 * Timeline com o asset real de corda.
 */

#awards-tl .tl-track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Corda contínua: o SVG repete-se entre todas as bolas. */
#awards-tl .tl-track::before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url('/wp-content/uploads/2026/08/corda.svg') !important;
    background-position: left center !important;
    background-repeat: repeat-x !important;
    background-size: auto 10px !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

#awards-tl .tl-track::after {
    content: none !important;
    display: none !important;
}

/* O antigo preenchimento azul deixa de ser necessário. */
#awards-tl .tl-track .tl-fill {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}

/* Uma bola por ano, sempre por cima da corda. */
#awards-tl .tl-track .tl-dot {
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #dfe6ed !important;
    box-shadow: 0 0 0 2px #fff !important;
    transform: translate(-50%, -50%) !important;
    transition: background-color 180ms ease, transform 180ms ease !important;
}

/* Pequena margem de corda antes da primeira bola e depois da última. */
#awards-tl .tl-track .tl-dot[data-index="0"] { left: 2.5% !important; }
#awards-tl .tl-track .tl-dot[data-index="1"] { left: 26.25% !important; }
#awards-tl .tl-track .tl-dot[data-index="2"] { left: 50% !important; }
#awards-tl .tl-track .tl-dot[data-index="3"] { left: 73.75% !important; }
#awards-tl .tl-track .tl-dot[data-index="4"] { left: 97.5% !important; }

#awards-tl .tl-track .tl-dot.is-passed,
#awards-tl .tl-track .tl-dot.is-active {
    background: #00436b !important;
}

#awards-tl .tl-track .tl-dot.is-active {
    transform: translate(-50%, -50%) scale(1.12) !important;
}

/* Mantém os anos alinhados com as cinco bolas. */
#awards-tl .tl-years-viewport {
    width: 100% !important;
    overflow: visible !important;
}

#awards-tl .tl-years {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    transform: none !important;
}

#awards-tl .tl-year {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

#awards-tl .tl-year:first-child {
    text-align: left !important;
}

#awards-tl .tl-year:last-child {
    text-align: right !important;
}

@media (max-width: 767px) {
    #awards-tl .tl-track {
        height: 24px !important;
        min-height: 24px !important;
    }

    #awards-tl .tl-track::before {
        height: 8px !important;
        background-size: auto 8px !important;
    }

    #awards-tl .tl-track .tl-dot {
        width: 14px !important;
        height: 14px !important;
        box-shadow: 0 0 0 1.5px #fff !important;
    }

    #awards-tl .tl-year {
        font-size: clamp(18px, 6vw, 28px) !important;
        line-height: 1.1 !important;
    }
}