/* ============================================================
   LRZ Timeline Logos v1.1 — Stylesheet
   ============================================================ */

/* ---------- Wrapper ---------- */
.lrz-tl-wrapper {
    position: relative;
    overflow: visible;
    padding-bottom: 20px;
}

/* ---------- Flat list (hidden — apenas fonte de dados para o JS) ---------- */
.lrz-tl-flat {
    display: none !important;
}

/* ---------- Grid ---------- */
.lrz-tl-grid {
    --lrz-tl-cols: 6;
    --lrz-tl-row-gap: 160px;
    display: flex;
    flex-direction: column;
    gap: 0; /* gap entre rows é controlado pelo JS via altura do item */
}

/* ---------- Row ---------- */
.lrz-tl-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* logos ficam alinhados pela base */
    width: 100%;
}

.lrz-tl-row--rtl {
    flex-direction: row-reverse;
}

/* ---------- Item ---------- */
.lrz-tl-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    /* Altura de cada row vem da custom property --lrz-tl-row-gap
       mas a logo fica no topo e o conector + ano ficam na base */
    min-height: var(--lrz-tl-row-gap, 160px);
    justify-content: space-between;
}

/* ---------- Logo area ---------- */
.lrz-tl-item-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 8px 0 12px;
}

.lrz-tl-item-logo img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Placeholder */
.lrz-tl-logo-placeholder {
    width: 90px;
    height: 52px;
    background: #e9edf3;
    border-radius: 4px;
    border: 1px dashed #b0bcd0;
}

/* ---------- Conector ---------- */
.lrz-tl-item-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Tick tracejado — feito com border-left dashed */
.lrz-tl-tick {
    width: 0;
    /* altura fixa; pode ser sobreposta */
    height: 24px;
    border-left: 2px dashed #1a3a6e;
    display: block;
}

/* Dot */
.lrz-tl-dot {
    width: 12px;
    height: 12px;
    border: 2px solid #1a3a6e;
    border-radius: 50%;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    z-index: 2;
}
.lrz-tl-dot::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #1a3a6e;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* ---------- Ano ---------- */
.lrz-tl-year {
    font-size: 15px;
    font-weight: 700;
    color: #1a3a6e;
    text-align: center;
    margin-top: 8px;
    letter-spacing: 0.02em;
    padding-bottom: 2px;
}

/* ---------- SVG snake (desenhado pelo JS) ---------- */
.lrz-tl-snake-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* ---------- INÍCIO DAS ATIVIDADES ---------- */
.lrz-tl-item--start .lrz-tl-item-logo--start {
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

/* Ícone simples — sem círculo */
.lrz-tl-start-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lrz-tl-start-icon img {
    height: 56px;
    max-height: 56px;
    width: auto;
    object-fit: contain;
}

.lrz-tl-start-icon svg {
    height: 56px;
    width: 56px;
    color: #1a3a6e;
    stroke: #1a3a6e;
}

.lrz-tl-start-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 800;
    font-size: 10px;
    color: #1a3a6e;
    text-align: center;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.lrz-tl-start-text span {
    display: block;
}

/* ============================================================
   Responsividade base (sem JS, fallback)
   ============================================================ */
@media (max-width: 1024px) {
    .lrz-tl-grid { --lrz-tl-cols: 4; --lrz-tl-row-gap: 140px; }
    .lrz-tl-item { min-height: var(--lrz-tl-row-gap, 140px); }
}
@media (max-width: 767px) {
    .lrz-tl-grid { --lrz-tl-cols: 2; --lrz-tl-row-gap: 120px; }
    .lrz-tl-item { min-height: var(--lrz-tl-row-gap, 120px); }
    .lrz-tl-item-logo img { max-height: 40px; }
    .lrz-tl-year { font-size: 12px; }
}