/* Experience (portfolio) page */

.timeline-projects .project-date {
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
}

.timeline-projects li + li { padding-top: 4px; }

/* Older certifications without an image */
.cert-list { gap: 0 48px; margin-top: 16px; }

.cert-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    color: var(--ink);
    font-weight: 500;
}

.cert-list small {
    display: block;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--muted);
}

.cert-year {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--muted);
}

/* Collaborations: logos differ a lot in shape, give them a bit more height */
#samenwerkingen .logo-strip img { height: 56px; }

@media (max-width: 640px) {
    .cert-list .plain-list:first-child li:last-child { border-bottom: 1px solid var(--line); }
    #samenwerkingen .logo-strip img { height: 44px; }
}

/* Partnership certificates: wider, they are landscape */
.partner-grid { max-width: 880px; }
.partner-grid .cert img { aspect-ratio: 16 / 9; }

/* Twelve certificates: four per row on desktop */
#certificeringen .cert-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Collaborations: logo with name underneath */
.collab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
}

.collab:hover { color: var(--ink); }

@media (max-width: 640px) {
    #certificeringen .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #certificeringen .cert { padding: 12px; }
}

/* MaatInICT projects grouped per year */
.project-year { margin-top: 32px; }

.project-year-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--blue-dark);
}

.project-year-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.project-year .timeline-projects { margin-top: 0; }

.timeline-projects h5 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.timeline-body > .tags + .project-year .project-year-label { color: var(--blue-dark); }
.timeline-body > .tags + .project-year + .project-year .project-year-label { color: var(--purple); }
.timeline-body > .tags + .project-year + .project-year + .project-year .project-year-label { color: var(--orange-text); }