/* ==========================================================================
   AutoCrafterAI — Changelog + Release notes (timeline)
   Article typography is inherited from blog.css (.article-body); this file
   only styles the timeline chrome.
   ========================================================================== */

.cl-timeline { position: relative; }

.cl-entry { display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding-bottom: 44px; }
.cl-entry:last-child { padding-bottom: 0; }

/* Date column, with a connecting line + dot on the left of the content */
.cl-meta { padding-top: 2px; }
.cl-date { font-size: 14px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }

.cl-content { position: relative; padding-left: 28px; padding-bottom: 4px; }
.cl-content::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 11px; height: 11px; border-radius: 50%;
    background-color: var(--brand-bright); box-shadow: 0 0 0 4px var(--brand-tint);
}
.cl-content::after {
    content: ""; position: absolute; left: 5px; top: 20px; bottom: -44px;
    width: 2px; background-color: var(--border);
}
.cl-entry:last-child .cl-content::after { display: none; }

.cl-title { font-family: var(--font-heading); font-size: 22px; font-weight: 800; line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.01em; }
.cl-title a { color: var(--text-primary); }
.cl-title a:hover { color: var(--brand); }

/* Slightly tighter body inside a timeline entry */
.cl-body { font-size: 16px; }
.cl-body > *:last-child { margin-bottom: 0; }

@media (max-width: 680px) {
    .cl-entry { grid-template-columns: 1fr; gap: 6px; }
    .cl-meta { padding-left: 28px; }
    .cl-content::after { top: 4px; }
    .cl-content::before { top: -18px; }
}