/* DOM class inventory for drkn_timeline
   .drkn--timeline
   .drkn--timeline__list
   .drkn--timeline__item
   .drkn--timeline__marker
   .drkn--timeline__circle
   .drkn--timeline__number
   .drkn--timeline__line
   .drkn--timeline__content
   .drkn--timeline__title
   .drkn--timeline__description
*/

.drkn--timeline {
    /* CSS variables populated inline by template */
    --drkn-tl-circle-size: 50px;
    --drkn-tl-circle-color: #ff7a00;
    --drkn-tl-line-color: #ff7a00;
    --drkn-tl-line-width: 2px;
    --drkn-tl-title-size: 18px;

    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.drkn--timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drkn--timeline__item {
    display: grid;
    grid-template-columns: calc(var(--drkn-tl-circle-size) + 16px) 1fr;
    column-gap: 18px;
    position: relative;
}

/* Spacing between items */
.drkn--timeline__item + .drkn--timeline__item {
    margin-top: calc(var(--drkn-tl-circle-size) * 0.35 + 8px);
}

.drkn--timeline__marker {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: var(--drkn-tl-circle-size);
}

.drkn--timeline__circle {
    width: var(--drkn-tl-circle-size);
    height: var(--drkn-tl-circle-size);
    border-radius: 999px;
    background-color: var(--drkn-tl-circle-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 2;
}

.drkn--timeline__number {
    font-size: calc(var(--drkn-tl-circle-size) * 0.38);
    letter-spacing: 0.02em;
}

/* Vertical line connecting steps */
.drkn--timeline__line {
    position: absolute;
    left: calc((var(--drkn-tl-circle-size) / 2) - (var(--drkn-tl-line-width) / 2) - calc(var(--drkn-tl-line-width) / 2) + 9px);
    top: calc(var(--drkn-tl-circle-size) + 9px);
    bottom: -12px; /* extend a bit for spacing */
    width: var(--drkn-tl-line-width);
    background-color: var(--drkn-tl-line-color);
    opacity: 0.6;
    z-index: 1;
}

/* Don’t show line after the last item */
.drkn--timeline__item:last-child .drkn--timeline__line {
    display: none;
}

.drkn--timeline__content {
}

.drkn--timeline__title {
    font-size: var(--drkn-tl-title-size);
    font-weight: 700;
    margin: 0 0 6px 0;
}

.drkn--timeline__description {
    margin: 0;
}

/* Responsive tweaks */
@media (max-width: 600px) {
    .drkn--timeline__item {
        column-gap: 14px;
    }
    .drkn--timeline__number {
        font-size: calc(var(--drkn-tl-circle-size) * 0.36);
    }
}