/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.map-slider {
    container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.map-slider {
    padding: 60px 0;
}

.map-slider__header {
    margin-bottom: 32px;
    text-align: center;
}

.map-slider__header h2 {
    align-items: center;
}

.map-slider__buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.map-slider__layout {
    display: grid;
    /* Cards / map split ~42% / 58% of the block width (comp: 514 / 706).
       fr units share the space left after the gap, so it never overflows.
       Left column floors at 465px so the cards never get too narrow — the right
       column absorbs the shrink; the 42/58 ratio resumes once 42% of the width
       clears 465px (~1123px container). Below 900px the @container rule takes over. */
    grid-template-columns: minmax(465px, 42fr) minmax(0, 58fr);
    /* Grow past 500px when a narrow cards column wraps the card taller,
       so the image splide never gets squeezed to 0 height. */
    grid-template-rows: minmax(500px, auto);
    gap: 16px;
}

.map-slider__column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

.map-slider__map {
    min-width: 0;
    position: relative;
}

.map-slider__map .shortcode-map {
    /* Fill the grid cell exactly so the map always ends level with the left
       column. Out of flow, the left column drives the row's auto height and the
       map matches it — instead of the map keeping its own height and spilling
       past the card. (The base .shortcode-map rule sets a fixed height: 500px.) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* Image splide (fade) — fills remaining height after the cards splide */
.map-slider__images {
    border-radius: 10px;
    overflow: hidden;
    background: var(--gray);
    flex: 1;
    min-height: 200px;
}

.map-slider__images .splide__track,
.map-slider__images .splide__list,
.map-slider__images .splide__slide {
    height: 100%;
}

.map-slider__images .splide__slide {
    display: flex;
}

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

/* Cards splide */
.map-slider__cards {
    position: relative;
}

.map-slider__cards .splide__slide {
    height: auto;
}

/* Arrows — top-right of card */
.map-slider__cards .splide__arrows {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.map-slider__cards .splide__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.map-slider__cards .splide__arrow:hover {
    background: var(--blue-lt);
}

.map-slider__cards .splide__arrow svg {
    width: 14px;
    height: auto;
    color: var(--blue-dk);
}

.map-slider__cards .splide__arrow--prev svg {
    transform: rotate(180deg);
}

/* Cards splide is content-sized; image splide flexes around it */
.map-slider__cards {
    flex: none;
}

/* Location card (info only — image is now its own splide) */
.location-card {
    background: var(--blue-dk);
    border-radius: 10px;
    padding: 28px 32px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    /* Fill the slide so every card is the same height as the tallest (titles wrap
       to 2 lines on some, button rows wrap on others) and ends level with the map.
       Resolves where the slide has a definite height (the tablet grid cell);
       harmlessly falls back to content height where it doesn't (desktop/stacked). */
    height: 100%;
}

.location-card__title {
    color: var(--white);
    margin: 0 0 4px;
    padding-right: 110px;
    min-height: 48px;
}

.location-card__address {
    margin: 0;
    color: var(--white);
    line-height: 1.4;
    white-space: pre-line;
}

.location-card__phone {
    margin: 0;
}

.location-card__phone a {
    color: var(--white);
    text-decoration: none;
}

.location-card__phone a:hover {
    text-decoration: underline;
}

.location-card__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

@container (max-width: 900px) {
    .map-slider__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* Row 1 is sized by the cards column (the map fills its cell out of flow),
           so the card's content sets the height instead of a fixed 500px box. */
        grid-template-rows: auto auto;
        gap: 16px;
    }

    .map-slider__column {
        display: contents;
    }

    .map-slider__cards {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .map-slider__cards .splide__track,
    .map-slider__cards .splide__list,
    .map-slider__cards .splide__slide,
    .map-slider__cards .location-card {
        height: 100%;
    }

    .map-slider__map {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .map-slider__images {
        grid-column: 1 / -1;
        grid-row: 2;
        aspect-ratio: 16 / 5;
        flex: none;
        min-width: 0;
    }

    /* Arrows above the title, still inside the card */
    .map-slider__cards .splide__arrows {
        top: 24px;
        left: 24px;
        right: 24px;
        justify-content: flex-start;
    }

    .location-card {
        padding-top: 80px;
    }

    .location-card__title {
        padding-right: 0;
        min-height: 0;
    }
}

@container (max-width: 768px) {
    .map-slider__layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .map-slider__column {
        display: contents;
    }

    .map-slider__map {
        order: 1;
    }

    .map-slider__cards {
        order: 2;
        flex: none;
    }

    .map-slider__images {
        order: 3;
        flex: none;
        aspect-ratio: 16 / 10;
    }

    .map-slider__map .shortcode-map {
        /* Stacked: back to normal flow at a fixed height (not a cell-fill). */
        position: relative;
        height: 400px;
    }
}

@container (max-width: 576px) {
    .location-card {
        padding: 80px 20px 20px;
    }
}