/* ==========================================
   TIMELINE — Block-specific responsive
   Supplements Timeline.css base styles
   ========================================== */

/* ── Tablet portrait (≤ 1023px) ───────────────── */
/* Complements the existing 1023px breakpoint
   in Timeline.css — only add what's missing. */
@media (max-width: 1023px) {
    .tl__canvas {
        padding: 0 1.5rem 4rem;
    }
    .tl__event-color {
        background: none!important;
    }
    .tl__event-year{
        margin-top: 20px;
    }
    .tl__event-year,
    .tl__event-title,
    .tl__event-text{
        padding-left: 1.5rem !important;
        max-width: 100%!important;
    }

    .tl__event--right::before {
        left: auto;
        right: 0;
    }

    .tl__event--right .tl__event-year,
    .tl__event--right .tl__event-title,
    .tl__event--right .tl__event-text {
        margin-left: auto;
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
        text-align: right;
    }
}