/**
 * widget-timeline.css v3
 *
 * Horizontal: overflow-x:clip + margin-right para colunas iguais.
 * Vertical:   barra à esquerda, ponto no gap, sem restrição de largura.
 */

/* ==========================================
   VARIÁVEIS PADRÃO
   ========================================== */

.elementor-widget-timeline {
    --bullet-sm:             10px;
    --bullet-scale:          1.8;
    --bullet-color-inactive: #aaaaaa;
    --bullet-color-active:   #1a1a1a;
    --bullet-trans:          280ms;
    --bullet-offset:         0px;
    --bullet-zone:           32px;
    --tl-ips:                4;
    --tl-v-lc:               48px;
    --v-line-thickness:      2px;
    --h-gap:                 28px;
    --h-content-gap:         24px;
    --v-gap:                 48px;
}

/* ==========================================
   WRAPPER EXTERNO
   ========================================== */

.tl-widget-wrapper {
    width: 100%;
}

/* ==========================================
   MODO HORIZONTAL
   ========================================== */

.tl-h-scene {
    position:    relative;
    padding-top: var(--bullet-zone, 32px);
    overflow-x:  clip;
    overflow-y:  visible;
    display:     block;
}

.tl-h-line {
    position:     absolute;
    top:          var(--bullet-zone, 32px);
    left:         0;
    right:        0;
    height:       0;
    border-top:   var(--v-line-thickness, 2px) solid #1a1a1a;
    border-style: solid;
    pointer-events: none;
}

/* Modo sem loop: item no limite (não pode avançar/recuar) */
.tl-h-item.tl--no-nav {
    cursor: default;
}

/* Track: largura natural de todos os itens + margin-right.
   O JS usa outerWidth(true) para calcular o offset, então margin-right
   é incluído automaticamente no cálculo do translateX. */
.tl-h-track {
    display:    flex;
    will-change: transform;
    /* transition-duration definido dinamicamente pelo JS via data-transition */
    transition: transform 400ms ease;
}

/* Cada item: largura calculada para que n itens + (n-1) gaps = 100%.
   margin-right cria o gap entre itens (inclusive no último — o excesso
   é clipado por overflow-x:clip na scene). */
.tl-h-item {
    flex:          0 0 calc((100% - var(--h-gap, 28px) * (var(--tl-ips, 4) - 1)) / var(--tl-ips, 4));
    min-width:     0;
    margin-right:  var(--h-gap, 28px);
    position:      relative;
    padding-top:   var(--h-content-gap, 24px);
    cursor:        pointer;
}

/* Bullet horizontal: bottom na linha, offset opcional para afastar */
.tl-h-item .tl-bullet {
    position:        absolute;
    top:             0;
    left:            0;
    width:           var(--bullet-sm, 10px);
    height:          var(--bullet-sm, 10px);
    border-radius:   50%;
    background:      var(--bullet-color-inactive, #aaaaaa);
    transform:       translateY(calc(-100% - var(--bullet-offset, 0px)));
    transition:      transform var(--bullet-trans, 280ms) ease,
                     background var(--bullet-trans, 280ms) ease;
    /* transform-origin: left bottom para que o scale expanda para direita/cima,
       evitando que o bullet do primeiro item seja cortado pelo overflow-x:clip. */
    transform-origin: left bottom;
}

.tl-h-item.is-active .tl-bullet,
.tl-h-item:hover .tl-bullet {
    background:    var(--bullet-color-active, #1a1a1a);
    transform:     translateY(calc(-100% - var(--bullet-offset, 0px)))
                   scale(var(--bullet-scale, 1.8));
}

/* Último item: origem à direita para não extrapolar no lado direito */
.tl-h-item:last-child .tl-bullet,
.tl-h-item:last-child.is-active .tl-bullet,
.tl-h-item:last-child:hover .tl-bullet {
    transform-origin: right bottom;
}

/* ==========================================
   MODO VERTICAL
   Oculto por padrão; render_mode_css() injeta display:flex quando ativo.
   ========================================== */

.tl-v-scene {
    display:        none;
    flex-direction: row;
    align-items:    stretch;
    width:          100%;
}

/* Coluna da barra: ocupa toda a altura da cena */
.tl-v-line-col {
    width:       var(--tl-v-lc, 48px);
    flex-shrink: 0;
    position:    relative;
}

/* Barra encostada à esquerda */
.tl-v-line {
    position:     absolute;
    left:         0;
    top:          0;
    bottom:       0;
    border-left:  var(--v-line-thickness, 2px) solid #1a1a1a;
    border-style: solid;
}

/* Track vertical: ocupa todo o espaço restante sem restrição de largura */
.tl-v-track {
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            var(--v-gap, 48px);
}

.tl-v-item {
    position:  relative;
    min-width: 0;
    cursor:    pointer;
}

/*
  Bullet vertical: no centro do gap entre a barra e o conteúdo.
  left = -(--tl-v-lc / 2) recua da borda esquerda do track até o meio da coluna.
  translateX(-50%) centraliza o bullet nesse ponto.
*/
/* Bullet vertical: transição desativada — ativação por scroll é instantânea */
.tl-v-item .tl-bullet {
    position:        absolute;
    left:            calc(var(--tl-v-lc, 48px) / -2);
    top:             0.2em;
    transform:       translateX(-50%);
    width:           var(--bullet-sm, 10px);
    height:          var(--bullet-sm, 10px);
    border-radius:   50%;
    background:      var(--bullet-color-inactive, #aaaaaa);
    transform-origin: center center;
    transition:      none;
}

.tl-v-item.is-active .tl-bullet,
.tl-v-item:hover .tl-bullet {
    background: var(--bullet-color-active, #1a1a1a);
    transform:  translateX(-50%) scale(var(--bullet-scale, 1.8));
}

/* ==========================================
   TIPOGRAFIA COMPARTILHADA
   ========================================== */

.timeline-item__title {
    font-family:         'DM Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight:         500;
    margin:              0 0 14px;
    line-height:         1.2;
}

.timeline-item__desc {
    font-family:         'DM Sans', sans-serif;
    font-optical-sizing: auto;
    margin:              0;
    font-size:           15px;
    line-height:         1.55;
}