.ce_timeline {
    --ce-timeline-columns: 1;
    --ce-timeline-item-gap: var(--spacing-lg);
    --ce-timeline-column-gap: var(--spacing-md);
    --ce-timeline-row-gap: 84px;
    margin-block: 0;
    padding-block: calc(var(--spacing-section) / 2);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
}
.ce_timeline[data-columns="2"] { --ce-timeline-columns: 2; }
.ce_timeline[data-columns="3"] { --ce-timeline-columns: 3; }
.ce_timeline[data-columns="4"] { --ce-timeline-columns: 4; }
.ce_timeline[data-columns="5"] { --ce-timeline-columns: 5; }
.ce_timeline[data-columns="6"] { --ce-timeline-columns: 6; }
.ce_timeline--images { --ce-timeline-item-gap: var(--spacing-xl); --ce-timeline-column-gap: calc(var(--spacing-md) * 2); }
.ce_timeline > .container { container-type: inline-size; }
.ce_timeline__list { display: grid; gap: var(--ce-timeline-item-gap); isolation: isolate; }
.ce_timeline__row { display: contents; }
.ce_timeline__row::before,
.ce_timeline__row::after { display: none; }
.ce_timeline__item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; min-width: 0; }
.ce_timeline--images .ce_timeline__item { gap: calc(var(--spacing-lg) / 2); }
/* Connect marker edges using each item's actual height, never crossing transparent markers. */
.ce_timeline__item:not(.ce_timeline__item--last)::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 48px;
    bottom: calc(0px - var(--ce-timeline-item-gap));
    left: 23px;
    width: 2px;
    background: var(--color-border-card);
}
.ce_timeline__station { position: relative; z-index: 1; align-self: start; }
.ce_timeline__marker { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-border-card); border-radius: var(--radius-card); background: transparent; color: var(--color-border-card); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); line-height: var(--line-height-label); }
.ce_timeline__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ce_timeline--images .ce_timeline__content { gap: calc(var(--spacing-lg) / 2); }
.ce_timeline__heading-copy { display: grid; gap: 6px; min-width: 0; }
.ce_timeline--images .ce_timeline__heading-copy { gap: 4px; }
.ce_timeline__heading { margin: 0; color: var(--color-text-dark); overflow-wrap: anywhere; }
.ce_timeline__description { color: var(--color-text-ink); font-size: var(--font-size-small); line-height: var(--line-height-list); }
.ce_timeline__media { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; margin: 0; padding: 12px; border-radius: var(--radius-card); background: var(--color-surface-card); }
.ce_timeline__image { display: block; max-width: 100%; width: 100%; height: auto; }

/* Use the existing 1024px boundary against usable content width, not device labels. */
@container (min-width: 1024px) {
    .ce_timeline__list { --ce-timeline-axis: calc(var(--font-size-caption) * var(--line-height-label) + 12px + var(--spacing-2xl) / 2); gap: var(--ce-timeline-row-gap); }
    .ce_timeline__row { position: relative; display: grid; grid-template-columns: repeat(var(--ce-timeline-columns), minmax(0, 1fr)); gap: var(--ce-timeline-column-gap); }
    .ce_timeline__row:nth-child(even) { direction: rtl; }
    .ce_timeline__item,
    .ce_timeline--images .ce_timeline__item { display: flex; flex-direction: column; gap: 20px; direction: ltr; }
    .ce_timeline__item::before { display: none; }
    .ce_timeline__station { display: grid; gap: 12px; width: var(--spacing-2xl); padding-top: calc(var(--font-size-caption) * var(--line-height-label) + 12px); }
    .ce_timeline__marker { width: var(--spacing-2xl); height: var(--spacing-2xl); }
    .ce_timeline__content,
    .ce_timeline--images .ce_timeline__content { gap: 12px; }
    .ce_timeline__media { position: relative; order: -1; flex: none; aspect-ratio: 400 / 288; margin-bottom: var(--spacing-xs); }
    .ce_timeline__image { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); min-height: 0; object-fit: contain; }
    .ce_timeline__row::after { box-sizing: border-box; }
    .ce_timeline__row::before { content: ''; position: absolute; z-index: 0; display: none; left: 0; right: 0; top: calc(var(--ce-timeline-axis) - 1px); height: 2px; background: var(--color-border-card); }
    /* One rounded side rail joins neighbouring rows, with shared 2px endpoints. */
    .ce_timeline__row:not(:last-child)::after { content: ''; display: block; position: absolute; z-index: 0; top: calc(var(--ce-timeline-axis) - 1px); right: calc(0px - var(--spacing-md)); width: var(--spacing-md); height: calc(100% + var(--ce-timeline-row-gap) + 2px); border: 2px solid var(--color-border-card); border-left: 0; border-radius: 0 var(--radius-list) var(--radius-list) 0; }
    .ce_timeline__row:nth-child(even):not(:last-child)::after { right: auto; left: calc(0px - var(--spacing-md)); border-right: 0; border-left: 2px solid var(--color-border-card); border-radius: var(--radius-list) 0 0 var(--radius-list); }
    /* Shared outgoing edge-to-edge segments and incoming right-hand row stub. */
    .ce_timeline__row:nth-child(even)::before { display: block; left: calc(100% - (100% + var(--ce-timeline-column-gap)) / var(--ce-timeline-columns) + var(--ce-timeline-column-gap) + var(--spacing-2xl)); right: 0; }
    .ce_timeline__item:not(.ce_timeline__item--last)::before { display: block; top: calc(var(--ce-timeline-axis) - 1px); bottom: auto; left: var(--spacing-2xl); width: calc(100% + var(--ce-timeline-column-gap) - var(--spacing-2xl)); height: 2px; }
    .ce_timeline__item--row-last:not(.ce_timeline__item--last)::before { width: calc(100% - var(--spacing-2xl)); }
    .ce_timeline__row:nth-child(even) .ce_timeline__item::before { left: calc(var(--spacing-2xl) - 100% - var(--ce-timeline-column-gap)); }
    .ce_timeline__row:nth-child(even) .ce_timeline__item--row-last::before { display: none; }
}