/**
 * AH – Timeline
 * Widget: dc-ah-timeline
 *
 * Instelbare waarden komen binnen als custom properties via de Elementor
 * control-selectors; er staat niets inline in de PHP.
 */

.dc-ah-timeline {
    --tl-accent: #b8845c;
    --tl-bg: #1c1815;

    /* Donker schema is de standaard; .dc-ah-timeline--light zet de tegenhanger. */
    --tl-text: rgba(255, 255, 255, .94);
    --tl-muted: rgba(255, 255, 255, .52);
    --tl-border: rgba(255, 255, 255, .12);
    --tl-card: rgba(255, 255, 255, .04);

    display: block; background: var(--tl-bg);
    padding: 104px 24px;
}
.dc-ah-timeline .ah-tl__inner { max-width: 1100px; margin: 0 auto; }

.dc-ah-timeline .ah-tl__head { max-width: 720px; margin: 0 0 58px; }
.dc-ah-timeline .ah-tl__eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--tl-accent); margin-bottom: 15px;
}
.dc-ah-timeline .ah-tl__eyebrow-line {
    width: 28px; height: 1px; flex-shrink: 0;
    background: linear-gradient(90deg, var(--tl-accent), transparent);
}
.dc-ah-timeline .ah-tl__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(26px, 2.9vw, 42px); font-weight: 400;
    line-height: 1.14; color: var(--tl-text); margin: 0 0 16px;
}
.dc-ah-timeline .ah-tl__hl { font-style: italic; color: var(--tl-accent); }
.dc-ah-timeline .ah-tl__sub {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 15.5px; line-height: 1.72; color: var(--tl-muted); margin: 0;
}

/* Track */
.dc-ah-timeline .ah-tl__track { position: relative; padding-left: 42px; }
.dc-ah-timeline .ah-tl__track::before {
    content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px;
    background: linear-gradient(180deg, var(--tl-accent), var(--tl-border) 55%, transparent);
}

.dc-ah-timeline .ah-tl__item {
    position: relative; padding-bottom: 40px;
    display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 26px; align-items: start;
}
.dc-ah-timeline .ah-tl__item:last-child { padding-bottom: 0; }

.dc-ah-timeline .ah-tl__dot {
    position: absolute; left: -42px; top: 4px;
    width: 23px; height: 23px; border-radius: 50%;
    border: 1px solid var(--tl-border);
    background: var(--tl-bg);
    display: flex; align-items: center; justify-content: center;
}
.dc-ah-timeline .ah-tl__dot::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--tl-accent);
    transition: transform .35s ease, box-shadow .35s ease;
}
.dc-ah-timeline .ah-tl__item:hover .ah-tl__dot::after {
    transform: scale(1.5); box-shadow: 0 0 0 5px rgba(184,132,92,.18);
}

.dc-ah-timeline .ah-tl__year {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28px; line-height: 1; color: var(--tl-accent);
    padding-top: 2px;
}

.dc-ah-timeline .ah-tl__body {
    border-bottom: 1px solid var(--tl-border);
    padding-bottom: 26px;
    display: grid; grid-template-columns: minmax(0,1fr); gap: 18px;
}
.dc-ah-timeline .ah-tl__body--media { grid-template-columns: minmax(0,1fr) 190px; }
.dc-ah-timeline .ah-tl__item:last-child .ah-tl__body { border-bottom: 0; padding-bottom: 0; }

.dc-ah-timeline .ah-tl__item-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 21px; font-weight: 400; line-height: 1.3;
    color: var(--tl-text); margin: 0 0 9px;
}
.dc-ah-timeline .ah-tl__item-text {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14.5px; line-height: 1.76; color: var(--tl-muted); margin: 0;
}

.dc-ah-timeline .ah-tl__img {
    display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: 12px; border: 1px solid var(--tl-border);
    transition: transform .5s ease;
}
.dc-ah-timeline .ah-tl__item:hover .ah-tl__img { transform: scale(1.03); }

@media (max-width: 900px) {
    .dc-ah-timeline { padding: 72px 22px; }
    .dc-ah-timeline .ah-tl__item { grid-template-columns: 84px minmax(0,1fr); gap: 18px; }
    .dc-ah-timeline .ah-tl__year { font-size: 23px; }
    .dc-ah-timeline .ah-tl__body--media { grid-template-columns: minmax(0,1fr); }
    .dc-ah-timeline .ah-tl__img { max-width: 260px; }
}
@media (max-width: 640px) {
    .dc-ah-timeline { padding: 56px 18px; }
    .dc-ah-timeline .ah-tl__track { padding-left: 30px; }
    .dc-ah-timeline .ah-tl__track::before { left: 8px; }
    .dc-ah-timeline .ah-tl__dot { left: -30px; width: 17px; height: 17px; }
    .dc-ah-timeline .ah-tl__item { grid-template-columns: minmax(0,1fr); gap: 6px; }
    .dc-ah-timeline .ah-tl__year { font-size: 20px; }
    .dc-ah-timeline .ah-tl__img { max-width: 100%; }
}

/* Licht kleurschema */
.dc-ah-timeline--light {
    --tl-text: #2c2420;
    --tl-muted: #7d6f64;
    --tl-border: rgba(44, 36, 32, .1);
    --tl-card: #fff;
}

/* Reset voor de <ol> die de tijdlijn draagt. */
.dc-ah-timeline .ah-tl__track { list-style: none; margin: 0; }