@layer components {

    .events {
        position: relative;
        z-index: 30;
    }

    .events.hidden {
        display: none;
    }

    .events__inner {
        margin-block-start: var(--space-20);
        padding: clamp(var(--space-10), 1vw, var(--space-16));
        border: var(--border-width-hairline) solid color-mix(in oklch, var(--color-border) 74%, transparent);
        border-radius: var(--radius-corner);
        background: color-mix(in oklch, var(--color-bg-surface) 72%, var(--color-bg));
        box-shadow: 0 .5rem 1.25rem color-mix(in oklch, var(--color-black) 6%, transparent);
    }

    .events__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
        margin-block-end: var(--space-8);
    }

    .events.is-ready:not(.is-at-start) .events__header {
        padding-inline-start: calc(var(--space-40) + var(--space-12));
    }

    .events__title {
        color: var(--color-text-strong);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        text-transform: uppercase;
    }

    .events__title-link {
        color: inherit;
        text-decoration: none;
        text-underline-offset: 0.18em;
        transition: color .18s ease;
    }

    .events__title-link:hover,
    .events__title-link:focus-visible {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

    .events__actions {
        display: flex;
        align-items: center;
        gap: var(--space-6);
    }

    .events__control,
    .events__nav {
        display: inline-grid;
        place-items: center;
        width: var(--space-40);
        height: var(--space-40);
        border: 1px solid var(--color-border-subtle);
        border-radius: 50%;
        background: var(--color-bg-surface);
        color: var(--color-text-strong);
        box-shadow: 0 var(--space-2) var(--space-6) color-mix(in oklch, var(--color-black) 8%, transparent);
        cursor: pointer;
        transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
    }

    .events__control {
        width: var(--space-32);
        height: var(--space-32);
        border-color: color-mix(in oklch, var(--color-border-subtle) 42%, transparent);
        background: color-mix(in oklch, var(--color-bg-surface) 38%, transparent);
        color: var(--color-text-muted);
        box-shadow: none;
        opacity: .78;
    }

    .events__control:hover,
    .events__control:focus-visible,
    .events__nav:hover,
    .events__nav:focus-visible {
        border-color: var(--color-brand-primary);
        background: var(--color-control-hover-bg);
        color: var(--color-text-strong);
    }

    .events__control:hover,
    .events__control:focus-visible {
        border-color: color-mix(in oklch, var(--color-border) 84%, transparent);
        background: color-mix(in oklch, var(--color-bg-surface) 68%, transparent);
        opacity: 1;
    }

    .events__control:disabled,
    .events__nav:disabled {
        opacity: .35;
        cursor: default;
    }

    .events__icon,
    .events__nav-icon {
        width: var(--space-20);
        height: var(--space-20);
        fill: currentColor;
    }

    .events__icon {
        width: var(--space-14);
        height: var(--space-14);
    }

    .events__nav-label {
        display: none;
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }

    .events__content {
        display: grid;
        grid-template-columns: var(--space-40) minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-12);
    }

    .events.is-at-start .events__content {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .events.is-at-start .events__nav--prev {
        display: none;
    }

    .events__viewport {
        min-width: 0;
        overflow: hidden;
    }

    .events__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-12);
        list-style: none;
    }

    .event-bar-card {
        min-width: 0;
    }

    .event-bar-card[hidden] {
        display: none;
    }

    .events:not(.is-ready) .event-bar-card:nth-child(n+4) {
        display: none;
    }

    .event-bar-card__link {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        align-items: center;
        gap: var(--space-10);
        min-height: 4.5rem;
        padding: var(--space-4);
        border-radius: var(--radius-corner);
        color: var(--color-text-strong);
        text-decoration: none;
        transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .event-bar-card__link:hover,
    .event-bar-card__link:focus-visible {
        background: var(--color-bg-surface-soft);
        color: inherit;
        outline: none;
        transform: translateY(-2px);
    }

    .event-bar-card__link:focus-visible {
        box-shadow: 0 0 0 0.125rem var(--color-focus-gold), 0 0.75rem 1.5rem var(--color-shadow-soft);
    }

    .event-bar-card__media {
        overflow: hidden;
        border-radius: var(--radius-corner-m);
        background: var(--color-bg-surface-alt);
        aspect-ratio: 1 / 1;
    }

    .event-bar-card__media--fallback,
    .event-bar-card__media.image-fallback-surface {
        background: var(--color-link);
    }

    .event-bar-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: box-shadow .2s ease;
    }

    .event-bar-card__image--fallback,
    .event-bar-card__image.image-fallback-applied {
        object-fit: contain;
        background-color: var(--color-link);
    }

    .event-bar-card__body {
        min-width: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .event-bar-card__meta {
        display: flex;
        align-items: center;
        margin-block-end: var(--space-4);
        font-size: var(--font-size-meta);
        font-weight: var(--font-weight-semibold);
        line-height: 1.2;
    }

    .event-bar-card__label {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        max-width: 100%;
        min-height: 1.25rem;
        padding: .1875rem var(--space-8);
        border-radius: var(--radius-corner);
        background: var(--color-content-news);
        color: var(--color-white);
        font-size: .6875rem;
        line-height: 1;
        text-transform: uppercase;
    }

    .event-bar-card--nieuws .event-bar-card__label {
        background: var(--color-content-news);
    }

    .event-bar-card--liveblog .event-bar-card__label,
    .event-bar-card[data-liveblog="1"] .event-bar-card__label {
        background: var(--color-content-liveblog);
    }

    .event-bar-card--artikel .event-bar-card__label {
        background: var(--color-content-article);
    }

    .event-bar-card--video .event-bar-card__label {
        background: var(--color-content-video);
    }

    .event-bar-card--breaking .event-bar-card__label {
        background: var(--color-content-breaking);
        color: var(--color-white);
    }

    .event-bar-card__date {
        display: block;
        margin-block-start: auto;
        padding-block-start: var(--space-4);
        color: var(--color-text-muted);
        font-size: var(--font-size-meta);
        font-weight: var(--font-weight-semibold);
        line-height: 1.2;
        white-space: nowrap;
    }

    .event-bar-card__title {
        display: -webkit-box;
        overflow: hidden;
        color: var(--color-text-strong);
        font-size: .9375rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.18;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .event-bar-card__link:hover .event-bar-card__image,
    .event-bar-card__link:focus-visible .event-bar-card__image {
        box-shadow: 0 0.25rem 0.75rem var(--color-shadow-medium);
    }

    :root[data-theme="dark"] .event-bar-card__link:hover,
    :root[data-theme="dark"] .event-bar-card__link:focus-visible {
        background: var(--color-bg-on-dark-subtle);
        box-shadow: 0 0.75rem 1.5rem color-mix(in oklch, var(--color-black) 20%, transparent);
    }

    :root[data-theme="dark"] .event-bar-card__link:focus-visible {
        box-shadow: 0 0 0 0.125rem color-mix(in oklch, var(--color-brand-primary) 34%, transparent), 0 0.75rem 1.5rem color-mix(in oklch, var(--color-black) 20%, transparent);
    }

    .events__nav--next.is-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-10);
        width: auto;
        min-width: 7.25rem;
        min-height: var(--space-48);
        border-color: var(--color-brand-primary);
        color: var(--color-text-strong);
        border-radius: var(--radius-corner);
        padding-inline: var(--space-20);
    }

    .events__nav--next.is-more .events__nav-label {
        display: inline;
    }

    .events__nav--next.is-more .events__nav-icon {
        flex: 0 0 auto;
        width: 0.9em;
        height: 0.9em;
    }

    .events~main .sidebar.positie-2 {
        top: calc(var(--space-40) + var(--space-32));
    }

    @media (max-width: 72rem) {
        .events__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .event-bar-card__link {
            grid-template-columns: 4.25rem minmax(0, 1fr);
        }
    }

    @media (max-width: 44rem) {
        .events__inner {
            margin-block-start: var(--space-16);
            padding: var(--space-8);
        }

        .events__header {
            align-items: center;
            margin-block-end: var(--space-10);
            padding-inline-start: 0;
        }

        .events__title {
            font-size: var(--text-sm);
        }

        .events__content {
            grid-template-columns: var(--space-36) minmax(0, 1fr) auto;
            gap: var(--space-8);
        }

        .events.is-at-start .events__content {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .events__control,
        .events__nav {
            width: var(--space-36);
            height: var(--space-36);
        }

        .events__control {
            width: var(--space-28);
            height: var(--space-28);
        }

        .events__icon,
        .events__nav-icon {
            width: var(--space-14);
            height: var(--space-14);
        }

        .events__list {
            grid-template-columns: minmax(0, 1fr);
        }

        .event-bar-card__link {
            grid-template-columns: 3rem minmax(0, 1fr);
            min-height: 3rem;
            gap: var(--space-8);
            padding: var(--space-4);
        }

        .event-bar-card__meta {
            flex-wrap: wrap;
            gap: var(--space-6);
            margin-block-end: var(--space-4);
        }

        .event-bar-card__label {
            min-height: 1.125rem;
            padding: .1875rem var(--space-6);
            font-size: .6875rem;
        }

        .event-bar-card__title {
            font-size: .8125rem;
            line-height: 1.12;
            -webkit-line-clamp: 2;
        }

        .event-bar-card__date {
            padding-block-start: var(--space-2);
            font-size: .6875rem;
        }

        .events__nav--next.is-more {
            min-width: var(--space-56);
            padding-inline: var(--space-14);
        }
    }

    .events .events__nav--next.is-more {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-10);
        width: auto;
        height: auto;
    }

    .events .events__nav--next.is-more .events__nav-label,
    .events .events__nav--next.is-more .events__nav-icon {
        position: static;
        grid-area: auto;
    }
}