/* #region [rooms][component] general layout */

.room-list {
}

.room-card {
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 30px 0;
    /*
    border: 1px solid red;
    */
}

.room-card.--pseudo-background:before {
    z-index: -1;
}

.room-card:nth-child(even){
    flex-direction: row-reverse;
}

/* #endregion */

/* #region [rooms[component] card layout */

.room-card__image-column,
.room-card__text-column
{
    width: 50%;
}

.room-card__image-column {
    padding-top: 60px;
    padding-bottom: 60px;
}

.room-card:nth-child(odd) .room-card__image-column {
    padding-left: 60px;
}

.room-card:nth-child(even) .room-card__image-column {
    padding-right: 60px;
}

.room-card__text-column {
}

.room-card__text-container {
    max-width: 400px;
    margin: auto;
}



/* #endregion */

/* #region [rooms[component] card colors by page ID */

.page-id-8 .room-card .--pseudo-background:before {
    background: var(--chasse-residency-30);
    border-color: var(--chasse-residency-70);
    /*
    background: linear-gradient(140deg, var(--chasse-residency-20) 0%, var(--chasse-residency-50) 40%);
    */
}

/* colors */
.page-id-6 .room-card .--pseudo-background:before {
    background: var(--chasse-hotel-30);
    border-color: var(--chasse-hotel-70);
    /*
    background: linear-gradient(225deg, var(--chasse-hotel-20) 0%, var(--chasse-hotel-50) 40%);
    */
}

/* #endregion */

/* #region [rooms[component] card attributes by position */

.room-card.--pseudo-background:before {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.25;
 }

.room-card:nth-child(even) .--pseudo-background:before {
    transform: translate(40px, -40px);
}

.room-card:nth-child(odd) .--pseudo-background:before {
    transform: translate(-40px, -40px);
}

/* 1, 5, 9 */
.room-card:nth-child(4n + 1) .--pseudo-background:before {
    background-color: var(--chasse-neutral-120);
}

/* 2, 6, 10 */
.room-card:nth-child(4n + 2).--pseudo-background:before {
    background-color: var(--chasse-neutral-100);
 }

.room-card:nth-child(4n + 2) .--pseudo-background:before {
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
}

/* 3, 7, 11 */
.room-card:nth-child(4n + 3) .--pseudo-background:before {

}

/* 4, 8, 12 */
.room-card:nth-child(4n + 4) .--pseudo-background:before {
    border-width: 2px;
    border-style: solid;
    background-color: transparent;
}

.page-id-6 .room-card:nth-child(4n + 4).--pseudo-background:before {
    background-color: var(--chasse-hotel-30);
 }

.page-id-8 .room-card:nth-child(4n + 4).--pseudo-background:before {
background-color: var(--chasse-residency-40);
}
 

/* 4, 8 */


/* #endregion */

/* #region [rooms[component] slick dots */

.room-card:nth-child(odd) .slick-dots {
    justify-content: flex-end;
}

/* colors */
.page-id-8 .slick-dots button {
    background: var(--chasse-residency-40);
}

.page-id-6 .slick-dots button {
    background: var(--chasse-hotel-40);
}

.page-id-8 li.slick-active button {
    background: var(--chasse-residency-90);
}

.page-id-6 li.slick-active button {
    background: var(--chasse-hotel-90);
}

/* hide dots if there is only dot */

button[aria-label="1 of 1"] {
    display: none;
}

/* #endregion */

/* #region media queries */

@media(max-width: 1024px){

    .room-list {
        padding-top: 40px;
    }

    .room-card__text-container {
        max-width: 260px;
    }

}

@media(max-width: 767px) {

    .room-card {
        flex-direction: column!important;
    }

    .room-card__text-column,
    .room-card__image-column
    {
        width: 100%;
    }

    .room-card__image-column {
        padding: 20px;
    }

    .room-card:nth-child(odd) .room-card__image-column {
        margin-left: -20px;
    }

    .room-card:nth-child(even) .--pseudo-background:before {
        transform: translate(20px, -20px);
    }

    .room-card:nth-child(odd) .--pseudo-background:before {
        transform: translate(-20px, -20px);
    }
    
    .room-card__text-column {
        padding: 0 20px;
    }

    .room-card__text-container {
        max-width: fit-content;
    } 

    .room-card ._button a {
        width: 100%;
    }


}

/* #endregion */