.events-list {
    --clr-primary: var(--e-global-color-primary, #e61e40);
    --clr-primary-hover: var(--e-global-color-97d3003, #fff);
    --clr-text-muted: #777;
    --clr-border: #e6e6e6;
    --clr-background: #fff;
    --clr-text: #222;
    --divide-y: 12px;

    background: var(--clr-background);
    color: var(--clr-text);
}
.events-container {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* Each event row */
.events-item {
    display: grid;
    grid-template-columns: 160px 160px 1fr 150px;
    gap: 18px;
    align-items: center;
    min-height: 160px;
    padding: var(--divide-y) 8px;
}

.events-item + .events-item {
    border-top: 2px solid var(--clr-border);
}

/* --- Date Column --- */
.events-date {
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.2;
    text-align: center;
}

.events-year {
    display: block;
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    margin-top: 6px;
}

/* --- Image --- */
.events-image {
    width: 100%;
    max-height: 320px;
    aspect-ratio: 1 / 1; /* ensures square */
    border-radius: 6px;
    overflow: hidden;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
}

.events-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-image::before {
    content: attr(data-placeholder);
    color: var(--clr-text-muted);
    font-size: 0.9rem;
    font-style: italic;
    position: absolute;
    z-index: -1;
}

/* --- Info --- */
.events-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.events-city {
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    margin-top: 6px;
}

/* --- Link --- */
.events-link a {
    display: inline-block;
    background: var(--clr-primary);
    color: var(--clr-primary-hover);
    border: 2px solid var(--clr-primary);

    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background .18s;
}

.events-link a:hover {
    background: var(--clr-primary-hover);
    color:  var(--clr-primary);
}

/* --- Mobile / narrow screens --- */
@media (max-width: 800px) {
    .events-list {
        --divide-y: 2rem;
    }
    .events-item {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
        min-height: auto;
    }

    .events-image {
        order: -1;
    }

    .events-date,
    .events-image,
    .events-info,
    .events-link {
        justify-self: center;
    }

    .events-link a {
        width: auto;
    }
}

/* Variant container */
.events-list.compact {
    height: 100%;

    --clr-background: #222;
    --clr-text:  #fff;
    --clr-border: var(--clr-text-muted);
    --divide-y: 0;
    --header-hight: 80px;
}

.events-list.compact .events-container {
    display: block;
    height: 100%;
    overflow-y: auto;
    padding: 0;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
}
.events-list.compact:has(.events-header) .events-container {
    height: calc(100% - var(--header-hight) - 2px);
}

/* Additional "title" header */
.events-list.compact .events-header {
    height: 80px;
    padding: 0 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--clr-border);
}

/* Single-column item layout */
.events-list.compact .events-item {
    display: grid;
    grid-template-areas:
      "image title"
      "image city"
      "image date"
      "image link";
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0;
    align-items: start;
    place-content: center;
    padding: var(--divide-y) 40px;
    min-height: 240px;
}

/* --- Assign grid areas --- */
.events-list.compact .events-title { grid-area: title; }
.events-list.compact .events-image { grid-area: image; }
.events-list.compact .events-city  { grid-area: city; }
.events-list.compact .events-date  { grid-area: date; }
.events-list.compact .events-link  { grid-area: link; }

.events-list.compact .events-image {
    width: 120px;
    overflow: hidden;
}

.events-list.compact .events-image img {
    height: 100%;
}

/* Title + city/date row */
.events-list.compact .events-info {
    display: contents;
}

.events-list.compact .events-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.events-list.compact .events-city {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--clr-text-muted);
}

/* Date */
.events-list.compact .events-date {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    text-align: left;
}
.events-list.compact .events-year {
    margin-top: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    display: inline;
}
.events-list.compact .events-year::before {
    content: '/ ';
}

.events-list.compact .events-link {
    margin-top: 1.5rem;
}

/* Link styling */
.events-list.compact .events-link a {
    display: inline-block;
    color: var(--clr-primary);
    border-width: 0 0 2px 0;
    border-color: inherit;
    border-radius: 0;
    background: none;
    padding: 6px 0;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s, border-color 0.2s;
}
.events-list.compact .events-link a::before {
    content: '▶';
    font-size: 0.8em;
    margin-right: 8px;
}

.events-list.compact .events-link a:hover {
    color: var(--clr-text);
    background: transparent;
}

/* Mobile / narrow screens */
@media (max-width: 800px) {
    .events-list.compact .events-item {
        min-height: 200px;
        text-align: left;
        padding: var(--divide-y) 20px;
    }

    .events-list.compact .events-image {
        width: 100px;
    }

    .events-list.compact .events-title {
        font-size: 1.2rem;
        font-weight: 700;
    }

    .events-list.compact .events-date {
        justify-self: start;
    }

    .events-list.compact .events-link {
        justify-self: start;
        margin-top: 1.2rem;
    }
}


@supports (scrollbar-gutter: stable) {
    .events-list.compact .events-container {
        overflow-y: auto;
        scrollbar-gutter: stable;
        scrollbar-width: 0;
        position: relative;
    }

    .events-list.compact .events-container::scroll-button(*) {
        display: block;
        text-align: center;
        font-size: 1rem;
        line-height: 1rem;
        color: var(--clr-text);
        background: var(--clr-background);
        border: none;
        cursor: pointer;
        user-select: none;
        pointer-events: auto;
        position: absolute;
        z-index: 1;
        width: 100%;
        left: 0;
    }

    .events-list.compact .events-container::scroll-button(up) {
        content: "▲";
        top: 0;
        border-bottom: 2px solid var(--clr-border);
    }

    .events-list.compact:has(.events-header) .events-container::scroll-button(up) {
        top: var(--header-hight, 0);
    }

    .events-list.compact .events-container::scroll-button(down) {
        content: "▼";
        bottom: 0;
        border-top: 2px solid var(--clr-border);
    }

    .events-list.compact .events-container::scroll-button(*):hover{
        color: var(--clr-primary);
        background-color: var(--clr-primary-hover);
    }

    .events-list.compact .events-container::scroll-button(*):active {
        color: var(--clr-text-muted);
    }

    .events-list.compact .events-container::scroll-button(*):disabled {
        opacity: 0;
        pointer-events: none;
    }
}

.elementor-widget.events-widget {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}
.elementor-widget.events-widget .elementor-shortcode {
    height: 100%;
}
.elementor-widget.events-widget .events-container {
    max-width: 500px;
}
@media (max-width: 768px) {
    .elementor-widget.events-widget {
        position: static;
    }

    .elementor-widget.events-widget .events-container {
        max-height: 400px;
        max-width: 100%;
    }
}