/* COMPONENT - VARIABLES */
.tt_address_list {
    --addr-card-gap-row: 50px;
    --addr-card-gap-column: 20px;
    --addr-card-min-width: min(280px, 100%);
    --addr-card-padding: 1rem;
}

/* COMPONENT - STYLING */
.tt_address_list {
    & .article-container {
        height: 100%;
        padding: 0;
    }

    & .ce-image {
        padding-bottom: var(--addr-card-padding);
    }

    & .ce-bodytext {
        word-break: break-word;
    }

    & .article-container .ce-image img {
        width: auto;
        object-fit: cover;
        object-position: center center;
    }

    & .position {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 0;
    }

    & .name {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1000px) {
    .tt_address_list {
        & .article-container {
            display: grid;
            grid-template-columns: 50% 1fr;
            align-items: flex-end;
            gap: 20px;

            &[data-has-media="false"] {
                & .ce-bodytext {
                    grid-column-start: 1;
                    grid-column-end: 3;
                }
            }
        }

        & .ce-image {
            padding-bottom: 0;
        }

        & .ce-bodytext {
        }
    }
}

/* THEME SLIDER */
.tt_address_list-slider {
    --color-button-bg-hover: transparent;
    --color-button-text: #87979e;
    --color-button-text-hover: #222222;

    position: relative;

    & .tns-outer {
        position: relative;
    }

    & .slider-button {
        background: transparent;
        box-shadow: none;
        height: auto;
        margin: 30px 0 0 0;
        max-width: 44px;
        padding: 0;
        width: auto;
    }

    & .slider-button-prev,
    & .slider-button-next {
        position: relative;
    }

    & .tns-nav {
        justify-content: start;
        margin-top: 38px;

        & button {
            background-color: rgba(213, 211, 204, 0.5);
            border: none;
            border-radius: 0;
            height: 10px;
            margin: 0;
            width: clamp(2.5rem, 1.125rem + 6.875vw, 9.375rem);
        }

        & .tns-nav-active {
            background-color: #87979e;
        }
    }
}

/* THEME DEFAULT */
.tt_address_list-default {
    & .tt_address_list-container {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: var(--addr-card-gap-column);
        row-gap: var(--addr-card-gap-row);
    }

    &[data-columns="2"] .tt_address_list-container {
        grid-template-columns: repeat(
                auto-fill,
                minmax(
                    max(
                        100% /
                        2 -
                        var(--addr-card-gap-column),
                        var(--addr-card-min-width)
                    ),
                    2fr
                )
            );
    }

    &[data-columns="3"] .tt_address_list-container {
        grid-template-columns: repeat(
                auto-fill,
                minmax(
                    max(
                        100% /
                        3 -
                        var(--addr-card-gap-column),
                        var(--addr-card-min-width)
                    ),
                    3fr
                )
            );
    }

    &[data-columns="4"] .tt_address_list-container {
        grid-template-columns: repeat(
                auto-fill,
                minmax(
                    max(
                        100% /
                        4 -
                        var(--addr-card-gap-column),
                        var(--addr-card-min-width)
                    ),
                    4fr
                )
            );
    }
}

.tt_address_list {
    & article.layout-big {
        container-type: inline-size;
        container-name: address-big;

        & .addressImage {
            border-radius: 24px;
            overflow: hidden;

            & a {
                display: block;
            }

            & img {
                aspect-ratio: 3 / 4;
            }
        }

        & .name {
            font-family: "Gilda Display", sans-serif;
            font-size: 36px;

            &:not(:last-child) {
                margin-bottom: 42px;
            }
        }

        & .additional-images {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            align-items: center;

            & .ce-image {
                max-width: calc(50% - 20px);
            }
        }

        & .article-container {
            align-items: center;
            column-gap: clamp(1.25rem, 0.175rem + 5.375vw, 6.625rem);
            row-gap: 20px;
        }
    }
}

.bg-text + .tt_address_list {
    z-index: 10;
}

.frame-full-width {
    --address-padding-top: clamp(6.25rem, 4.55rem + 8.5vw, 14.75rem);
    --address-padding-horizontally: clamp(1.25rem, 0.5rem + 3.75vw, 5rem);

    position: relative;

    & > .bg-text {
        color: rgba(135, 151, 158, 0.08);
        font-family: "Gilda Display", sans-serif;
        font-size: 100px;
        left: calc(var(--address-padding-horizontally) / 2);
        line-height: 1;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        top: 0;
        width: calc(100% - var(--address-padding-horizontally));
        z-index: 1;
    }

    &:has(.bg-text) {
        padding-top: 64px;
    }

    & > .tt_address_list {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--frame-max-width);
        padding-left: var(--frame-padding);
        padding-right: var(--frame-padding);
    }
}

@container address-big (width > 800px) {
    .tt_address_list {
        & article.layout-big {
            & .additional-images {
                .ce-image {
                    max-width: calc(25% - 20px);
                }
            }

            & .article-container {
                grid-template-columns: clamp(17.5rem, 16rem + 7.5vw, 25rem) 1fr;
            }
        }
    }
}