/* css/components/News/Timeline.css */
.news-timeline-section {
    padding: 4rem 0;
    background-color: var(--koeleman-gold-light);
}

.news-timeline-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.news-timeline-section .section-title {
    color: var(--koeleman-blue);
    font-size: 2.25rem;
}

.news-timeline-section .section-subtitle {
    font-size: 1.125rem;
    max-width: 60ch;
    margin: 1rem auto 0;
    color: var(--text-primary);
}

.timeline-wrapper {
    overflow-x: auto;
    padding-bottom: 1.5rem; /* Ruimte voor de scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--koeleman-gold) #e0d9cf;
}

.timeline {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: max-content; /* Zorgt dat de container breed genoeg is voor alle kaarten */
    padding: 0.5rem;
}

.event-card {
    background-color: var(--koeleman-white);
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 350px; /* Vaste breedte voor elke kaart */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

.event-title {
    font-size: 1.25rem;
    color: var(--koeleman-blue);
    margin: 0 0 0.75rem 0;
}

.event-description {
    flex-grow: 1;
    margin-bottom: 1rem;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.button-container {
    margin-top: auto; /* Duwt de knoppen naar de bodem */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.teams-button {
    display: inline-block;
    text-align: center;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    background-color: #0078d4; /* Microsoft Teams blauw */
    color: var(--koeleman-white);
}

.teams-button:hover {
    background-color: #005a9e;
}

.calendar-button-wrapper {
    position: relative;
}

.calendar-button {
    width: 100%;
    cursor: pointer;
    background-color: var(--koeleman-gold);
    color: var(--koeleman-white);
    border: none;
    font-family: inherit;
    font-size: inherit;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.calendar-button:hover {
    background-color: #8a7651; /* Donkerder goud */
}

.calendar-dropdown {
    position: absolute;
    bottom: calc(100% + 0.5rem); /* Boven de knop */
    left: 0;
    right: 0;
    background-color: var(--koeleman-white);
    border-radius: 0.5rem;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1); /* Schaduw naar boven */
    overflow: hidden;
    z-index: 10;
    /* Standaard verborgen */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.calendar-button-wrapper.is-active .calendar-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.calendar-dropdown a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.calendar-dropdown a:hover {
    background-color: var(--koeleman-background);
}