/**
 * Styling specific to the Timeline Block.
 */

section.timeline {
    margin: var(--spacing-12) auto;
}

section.timeline > .text-pane {
    grid-column: 2 / -2;
    text-align: center;
}

section.timeline > .text-pane .blurb:not(:empty) {
    margin-top: var(--spacing-7);
    color: var(--color-copy-secondary);
}

section.timeline .timeline-buttons {
    --gap: var(--spacing-11);
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-9);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: var(--gap);
    overflow-x: scroll;
    box-shadow: inset 0 -4px 0 0 var(--color-grey-150);
}

section.timeline .timeline-button {
    --width: 72px;
    all: unset;
    flex: 1 0 var(--width);
    padding-bottom: var(--spacing-3);
    scroll-margin-left: calc(var(--width) + var(--gap)); /* enough to reveal the next button */
    scroll-margin-right: calc(var(--width) + var(--gap));
    font: var(--font-copy-lg);
    color: var(--color-copy-secondary);
    border-bottom: 4px solid transparent;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
section.timeline .timeline-button.active {
    font: var(--font-h6);
    color: var(--color-copy-primary);
    border-color: var(--color-primary-red-500);
}

section.timeline .carousel .carousel-content {
    display: flex;
    gap: var(--spacing-7);
    scroll-snap-type: x mandatory;
}

section.timeline .carousel .post-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

section.timeline .carousel .carousel-controls {
    margin-top: var(--spacing-10);
}

/* Breakpoint M */
@media screen and (min-width: 768px) and (max-width: 1080px) {
    section.timeline .timeline-button {
        --width: 64px;
    }
}

/* Breakpoints M and S */
@media screen and (min-width: 0px) and (max-width: 1080px) {
    section.timeline .timeline-buttons {
        --gap: var(--spacing-7);
    }
}

/* Breakpoint S */
@media screen and (min-width: 0) and (max-width: 768px) {
    section.timeline {
        padding-left: 0;
        padding-right: 0;
    }

    section.timeline > *:not(.carousel) {
        margin-left: var(--default-padding);
        margin-right: var(--default-padding);
    }

    section.timeline > .text-pane {
        grid-column: 1 / -1;
    }

    section.timeline .timeline-button {
        --width: 50px;
    }

    section.timeline .carousel .carousel-content {
        padding-left: var(--default-padding);
        padding-right: var(--default-padding);
    }

    section.timeline .carousel .post-card {
        flex-basis: 90%;
    }
}