.so-branches-wrapper {
    position: relative;
}

/* Shared card chrome */
.so-branches .so-branche {
    height: 544px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex !important;
    align-items: flex-end;

    img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(211, 211, 211, 0.01) 0%,
            rgba(211, 211, 211, 0.10) 74.51%,
            rgba(211, 211, 211, 0.35) 100%
        );
    }

    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28%;
        z-index: 1;
        pointer-events: none;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        mask-image: linear-gradient(180deg, transparent 0, #000 120px);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px);
        transition: height 0.4s ease-in-out;
    }

    .branche-content {
        position: relative;
        z-index: 2;
        padding: 0 24px;
        color: var(--color-white);
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-height: 60px;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        max-width: 330px;
        pointer-events: none;

        h3 {
            margin: 0;
        }

        p {
            margin: 0 0 96px 0 !important;
            font-size: 16px;
            line-height: 24px;
        }
    }

    .branche-button {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: block;
        text-decoration: none;
        color: inherit;

        .branche-button-pill {
            background-color: var(--color-primary);
            padding: 16px 20px;
            border-radius: 24px;
            height: 48px;
            width: 60px;
            transition:
                width 0.4s ease,
                padding 0.4s ease,
                left 0.4s ease,
                transform 0.4s ease,
                margin-left 0.4s ease,
                background-color 0.4s ease,
                background-image 0.4s ease,
                background-position 0.4s ease,
                background-size 0.4s ease;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6667 6.66667H6.66667V11.6667H5V6.66667H0V5H5V0H6.66667V5H11.6667V6.66667Z' fill='black'/%3E%3C/svg%3E%0A");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 12px;
            font-size: 12px;
            font-weight: bold;
            line-height: 1;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--color-text-on-light);
            box-sizing: border-box;
            position: absolute;
            left: 100%;
            transform: translateX(-100%);
            bottom: 20px;
            display: flex;
            align-items: center;
            margin-left: -24px;
            pointer-events: none;

            .branche-button-text {
                overflow: hidden;
                white-space: nowrap;
                max-width: 0;
                width: fit-content;
                display: inline-block;
                transition: max-width 0.4s ease, opacity 0.45s ease;
                opacity: 0;
            }
        }
        
        @media (pointer: fine) {
            &:hover .branche-button-pill {
                background-color: var(--color-primary-hover);
            }
        }
    }
}

/* Expanded card (grid always, or slider .active) */
.so-branches--grid .so-branche::after,
.so-branches.is-style-slider .so-branche.active::after {
    height: 50%;
}

.so-branches--grid .so-branche .branche-content,
.so-branches.is-style-slider .so-branche.active .branche-content {
    max-height: 500px;
}

.so-branches--grid .so-branche .branche-button .branche-button-pill,
.so-branches.is-style-slider .so-branche.active .branche-button .branche-button-pill {
    width: fit-content;
    padding-right: 48px;
    background-position: right 20px center;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.83333 5L0 1.16667L1.16667 0L6.16667 5L1.16667 10L0 8.83333L3.83333 5Z' fill='%230D0D0D'/%3E%3C/svg%3E%0A");
    background-size: 8px;
    margin-left: 0;
    transform: translateX(0);
    left: 24px;
}

.so-branches--grid .so-branche .branche-button .branche-button-pill .branche-button-text,
.so-branches.is-style-slider .so-branche.active .branche-button .branche-button-pill .branche-button-text {
    max-width: 300px;
    opacity: 1;
}

/* Default: 2-column grid, all cards open */
.so-branches.so-branches--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--block-gap, 32px);
    height: auto;
}

.so-branches.so-branches--grid .so-branche {
    width: 100%;
    min-width: 0;
}

@media (max-width: 819px) {
    .so-branches.so-branches--grid {
        gap: calc(var(--block-gap, 32px) / 2);
    }

    .so-branches.so-branches--grid .so-branche .branche-button .branche-button-pill {
        left: 16px !important;
    }

    .so-branches.so-branches--grid .so-branche .branche-content {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .so-branches.so-branches--grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Slider style */
.so-branches.is-style-slider {
    display: flex;
    height: 544px;

    .so-branche {
        height: 100%;

        &.active::after,
        &:hover::after {
            height: 50%;
        }
    }

    :is(.slick-list, .slick-track, .slick-slide > div) {
        height: 100%;
    }

    .slick-slide {
        margin: 0 calc(var(--block-gap) / 2);
        max-width: 304px;
        width: 100%;
        transition: max-width 0.4s ease-in-out;

        &:has(.so-branche.active) {
            max-width: 640px;
        }
    }

    .slick-list {
        overflow: visible;
    }
}

@media (hover: none), (pointer: coarse) {
    .so-branches.is-style-slider .slick-slide {
        .so-branche::after {
            height: 50%;
        }

        .branche-content {
            max-height: 500px;
        }

        .branche-button .branche-button-pill {
            width: fit-content;
            padding-right: 48px;
            background-position: right 20px center;
            background-image: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.83333 5L0 1.16667L1.16667 0L6.16667 5L1.16667 10L0 8.83333L3.83333 5Z' fill='%230D0D0D'/%3E%3C/svg%3E%0A");
            background-size: 8px;
            margin-left: 0;
            transform: translateX(0);
            left: 24px;

            .branche-button-text {
                max-width: 300px;
                opacity: 1;
            }
        }
    }

    .so-branches.is-style-slider .slick-list {
        margin-left: calc(-1 * var(--body-spacing, 16px));
        padding-left: var(--body-spacing, 16px);
        padding-right: var(--body-spacing, 16px);
    }

    .so-branches.is-style-slider + .so-branches-arrows,
    .so-branches-wrapper:has(.so-branches.is-style-slider) .so-branches-arrows {
        right: calc(2 * var(--body-spacing, 16px)) !important;
    }
}

@media (max-width: 819px) {
    .so-branches-wrapper:has(.so-branches.is-style-slider) {
        width: calc(100% + (2 * var(--body-spacing, 16px)));
        max-width: 100vw;
        margin-left: calc(-1 * var(--body-spacing, 16px));
        margin-right: calc(-1 * var(--body-spacing, 16px));
    }

    .so-branches.is-style-slider .slick-list {
        overflow: hidden;
    }

    .so-branches.is-style-slider .slick-slide {
        max-width: none;
        margin: 0;
        margin-right: 16px;

        .so-branche::after {
            height: 50%;
        }

        .branche-content {
            max-height: 500px;
            padding: 0 16px;
        }

        .branche-button .branche-button-pill {
            width: fit-content;
            padding-right: 48px;
            background-position: right 20px center;
            background-image: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.83333 5L0 1.16667L1.16667 0L6.16667 5L1.16667 10L0 8.83333L3.83333 5Z' fill='%230D0D0D'/%3E%3C/svg%3E%0A");
            background-size: 8px;
            margin-left: 0;
            transform: translateX(0);
            left: 16px !important;

            .branche-button-text {
                max-width: 300px;
                opacity: 1;
            }
        }
    }

    .so-branches.is-style-slider .slick-slide:last-child {
        margin-right: 0;
    }
}

.so-branches-arrows {
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--block-gap));
    transform: translateY(100%);
}