.list-clone-item,
.list-clone-items {
    width: fit-content;
}

/* Hero slider */

/* Hero slider fix width issue  */
.hero__slider .list-clone-item,
.list-clone-items {
    width: 100%;
}


.hero__slider .item-content-wrapper a {
    display: grid;
    position: relative;
    place-items: center;
}

/* START CHANGES LIST with overflow wrapper */

.listjs-list-wrapper {
    margin-bottom: 2rem;
}

.list__item.fullwidth {
    padding: 0;
}

.list__highlight__slider .list-clone-item.list-item--visible {
    padding-top: 0.5rem;
}

.list-js-container {
    padding-bottom: 3rem;
    /* padding-top: 1em; */
    padding-top: 2.5em;
    /* margin-top: -1em; */
    margin-top: -1.5em;
    scrollbar-width: none;
    -moz-scrollbars-none: none;
    -ms-overflow-style: none;
}
/* .list__festival__container .list-js-container, .detail__list__festival .list-js-container {
    padding-bottom: 2rem;
} */

.list-js-container::-webkit-scrollbar {
    display: none;
}

/* .season__selector .list-js-container {
    padding-bottom: 0;
} */

.list__item--quotes .list-js-container {
    padding-bottom: 1rem;
    margin-top: 1rem;
}

.listing .list-js-container {
    padding-top: 3.5em;
    padding-top: 0.5em;
}

/* END CHANGES LIST with overflow wrapper */
.list__highlight .slide {
    border: 3px solid transparent;
    transition: border 0.2s ease-in-out;
}


.list__highlight.list-item--visible .slide {
    border: 3px solid transparent;
}

.list__highlight .list-item--focused .slide {
    border: 3px solid #fff;
    background-color: #fff;
    border-radius: 8px;
}


.list__highlight .list-item--focused .slide::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff;
    border-top: 12px solid transparent;
}


/* pagination dots */
button.list-pagination__dot {
    width: 8px;
    height: 8px;
    border-radius: 25%;
    background-color: var(--color__gray--translucent);
    padding: 0;
    margin: 3px;
    opacity: 0.7;
    transition: transform 200ms linear;
}

button.list-pagination__dot.active {
    transform: scale(1.4);
    background-color: var(--color__gray);
}

button.list-pagination__dot.active:hover {
    opacity: 1;
}

button.list-pagination__dot:hover {
    opacity: 0.9;
}

.block-object .list-controls.pagination {
    position: absolute;
    top: 16px;
    /* top: 32px; */
    right: 0;
    left: auto;
    bottom: auto;
    padding-right: 6rem;
}

@media (max-width: 768px) {
    .block-object .list-controls.pagination {
        top: 2.6rem;
        padding: 0 1rem;
    }
}

@media (max-width: 400px) {
    .block-object .list-controls.pagination {
        top: 3rem;
        padding: 0 1rem;
        left: 0;
        right: auto;
    }
}

/* list arrows previous and next */
.list__arrows {
    display: flex;
    align-items: center;
    border: 0;
    cursor: pointer;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 100%;
}

/* TEMPORARY FIX FOR FESTIVALS AND COMPANIES: */
.list__festival__container .list__arrows {
    top: 60%;
}

.list__companies__container .list__arrows {
    top: 60%;
}

.list__arrow {
    position: absolute;
    background: none;
    padding: 0;
}

.list__arrow,
.list__arrow:disabled {
    position: absolute;
    border-radius: unset;
    height: 100%;
    transition: 0.2s;
}

.list__arrow:disabled {
    opacity: 0;
}

@media (pointer: coarse) {
    .list__arrow {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .list__arrow {
        display: none
    }
}

.list__arrow:hover {
    transition: color 200ms ease-in-out;
}


.list__arrow svg {
    fill: var(--text-color__primary);
    width: 2.5rem;
    height: 2.5rem;
    display: block;
}

.list__arrow:hover {
    transition: color 200ms ease-in-out;
}

.list__arrow:hover svg {
    fill: var(--color__secondary);
}

.list__arrow:disabled svg {
    transition: color .2s ease-in-out;
    fill: var(--transparent);
}

.list__arrow--next {
    right: 0;
}

@media (max-width: 1024px) {
    .list__arrow--next {
        right: 0;
    }
}

.list__arrow--prev {
    left: 1rem;
}

.list_item_others{
    display: none;
}

/* Detail cards: the grid engine writes a fixed-height slot, but the card's
   light-DOM wrapper grows to its natural content height and spills over the next
   row. Pin it to the slot so the component's overflow:hidden clips the overrun
   (matches live — the synopsis cuts off cleanly at the card's bottom edge). */
#listing__item__container .item-content-wrapper:has(item-detailview) {
    height: 100%;
}

/* Playlist hero: reuse the details page's gradient treatment (fades to the page
   background toward the bottom and the left), matching .hero__details .hero_gradient. */
.hero--subtle .hero_gradient {
    background: linear-gradient(to bottom, #222b3200, #222b32), linear-gradient(to left, #222b3200 50%, #222b32 95%);
}

@media (max-width: 820px) {
    .hero--subtle .hero_gradient {
        background: linear-gradient(to left, #222b3200, #222b32), linear-gradient(to bottom, #222b3200, #222b32);
    }
}

/* Bigger background for playlists, without pushing the items down:
   the hero grows and the listing slides up to cover its lower edge. */
.hero__listing.hero--subtle {
    --height: 90vh;
    max-height: 90vh;
    height: 90vh;
}

.hero--subtle + #listing,
.hero--subtle + .listing {
    margin-top: -30vh;
    position: relative;
    z-index: 3;
}

/* Center the title/description in the band between the top nav bar and the
   overlapping list items (items overlap the bottom 30vh of the 90vh hero). */
.hero__listing.hero--subtle .hero__sub__details {
    position: absolute;
    top: 6rem;
    bottom: 30vh;
    height: auto;
    justify-content: center;
}

/* Mobile: the 90vh hero + -30vh overlap are desktop-sized and make the list render
   over the hero. Shrink the hero and the overlap, and keep the title band's bottom
   aligned to the (smaller) overlap so the centered title stays clear of the items. */
@media (max-width: 768px) {
    .hero__listing.hero--subtle {
        --height: 55vh;
        max-height: 55vh;
    }

    .hero--subtle + #listing,
    .hero--subtle + .listing {
        margin-top: -8vh;
    }

    .hero__listing.hero--subtle .hero__sub__details {
        top: 5rem;
        bottom: 8vh;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Playlist hero: background video + title logo (from playlist metadata) */
.hero_video {
    grid-area: 1/1;
    grid-column: 1/-1;
    grid-row: 1/-1;
    width: 100%;
    height: 100%;
    min-height: 50vh;
    max-height: var(--height);
    object-fit: cover;
    object-position: top center;
    z-index: 1;
}

.hero__listing .hero_video {
    min-height: unset;
    height: calc(100% - 1px);
}

/* Title logo takes the place of the <h1> title */
.hero__sub__details__logo,
.hero__sub__details .list-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 7em;
    margin: 0 auto 1.5rem;
    object-fit: contain;
    filter: drop-shadow(1px 1px 2px var(--color__black));
}

@media screen and (max-width: 768px) {
    .hero__sub__details__logo,
    .hero__sub__details .list-logo {
        max-height: 5em;
    }
}