/*  ********************************************************************************  **

    The top-level locations carousel.

    One row of locations, scrolled horizontally by Slick. The slide counts are
    set in the block's JavaScript; the widths below are only the fallback for
    before Slick initialises, and they use the same breakpoints as default.css
    so the row does not change shape when it takes over.

**  ********************************************************************************  */

.eat-location-carousel {
    margin: 0 0 var(--eat-spacing-base);
}

/*  Before Slick runs, lay the items out as a single row so the block does not
    flash as a tall stack.  */
.eat-location-carousel:not(.slick-initialized) {
    display: flex;
    gap: var(--eat-spacing-base);
    overflow: hidden;
}
.eat-location-carousel:not(.slick-initialized) .eat-location-carousel-item {
    flex: 0 0 calc((100% - var(--eat-spacing-base)) / 2);
}

/*  Slick puts each slide in its own wrapper, so the gap goes on the item.  */
.eat-location-carousel.slick-initialized .eat-location-carousel-item {
    padding: 0 10px;
    box-sizing: border-box;
}
.eat-location-carousel .slick-list {
    margin: 0 calc(var(--eat-spacing-base) / -2);
}

/*  Keep every slide the same height rather than matching the tallest image.  */
.eat-location-carousel .slick-track {
    display: flex;
    align-items: stretch;
}
.eat-location-carousel .slick-slide {
    height: auto;
}

.eat-location-carousel-link {
    display: block;
    text-decoration: none;
    color: var(--eat-colour-text);
}
.eat-location-carousel-link:hover .eat-location-carousel-title,
.eat-location-carousel-link:focus .eat-location-carousel-title {
    color: var(--eat-colour-primary);
}

.eat-location-carousel-item img,
.eat-location-carousel-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2.5;
    object-fit: cover;
}
.eat-location-carousel-placeholder {
    background: var(--eat-colour-light-grey);
}

.eat-location-carousel-title {
    display: block;
    margin: 10px 0 0;
    font-weight: 600;
}

/*  Small tablet and up.  */
@media screen and (min-width: 768px) {
    .eat-location-carousel:not(.slick-initialized) .eat-location-carousel-item {
        flex-basis: calc((100% - (var(--eat-spacing-base) * 2)) / 3);
    }
}

/*  Large tablet and up.  */
@media screen and (min-width: 992px) {
    .eat-location-carousel:not(.slick-initialized) .eat-location-carousel-item {
        flex-basis: calc((100% - (var(--eat-spacing-base) * 3)) / 4);
    }
}

/*  Desktop and up.  */
@media screen and (min-width: 1200px) {
    .eat-location-carousel:not(.slick-initialized) .eat-location-carousel-item {
        flex-basis: calc((100% - (var(--eat-spacing-base) * 5)) / 6);
    }
}