/* ============================================
   Cards Grid Component
   Requires: cards-shared.css
   ============================================ */

/* Cards-grid specific container layout mirrors destination post card layout */
.cardsGrid__cardsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    width: 100%;
    max-width: 100%;
    gap: 0;
    align-self: stretch;
}

.cardsGrid__chunk {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    @media screen and (min-width:960px) {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--sizing-2xl, 32px);
        row-gap: 64px;
    }
}

.cardsGrid__chunk + .cardsGrid__chunk {
    margin-top: 64px;

    @media screen and (max-width: 959px) {
        margin-top: var(--spacing-x6, 48px);
    }
}

.cardsGrid__two-card-container {
    width: 100%;

    @media screen and (min-width:960px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 64px;
        flex: 1 0 0;
        min-width: 0;
        max-width: calc((100% - 64px) / 3);
    }
}

.cardsGrid__chunk .cardsGrid__two-card-container:first-of-type .cardsGrid__card:first-of-type {
    padding-top: unset;
}

.cardsGrid__card {
    align-items: flex-start;
    width: 100%;

    @media screen and (min-width:960px) {
        width: 100%;
        max-width: 100%;
    }
}

.cardsGrid__card .contentCard-image-wrapper {
    width: 100%;
    align-self: stretch;
}

.cardsGrid__card .cardSection__image {
    display: block;
    object-fit: cover;
    width: 100%;
}

.cardsGrid__card-textContainer {
    text-align: left;
    align-self: stretch;
}

.cardsGrid__card-textContainer p,
.cardsGrid__card-textContainer .cardSection__cardHeader {
    text-align: left;
}

@media screen and (min-width:960px) {
    .cardsGrid__card .contentCard-image-wrapper {
        width: 100%;
        align-self: stretch;
    }
}

/* Position-specific image styles */
.cardsGrid__image-1 {
    height: 188.438px;
    align-self: stretch;
    aspect-ratio: 16/9;
    border-radius: 0 0 80px 0;
    
    @media screen and (min-width:960px) {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        border-radius: 0 0 120px 0;
    }
}

.cardsGrid__image-2 {
    height: 335px;
    align-self: stretch;
    aspect-ratio: 1/1;

    @media screen and (min-width:960px) {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 0 0 0 120px;
    }
}

.cardsGrid__image-3 {
    height: 188.438px;
    align-self: stretch;
    aspect-ratio: 16/9;

    @media screen and (min-width:960px) {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }
}

.cardsGrid__image-4 {
    height: 188.438px;
    align-self: stretch;
    aspect-ratio: 16/9;

    @media screen and (min-width:960px) {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;    
    }
}

.cardsGrid__image-5 {
    height: 335px;
    align-self: stretch;
    aspect-ratio: 1/1;
    border-radius: 0 0 80px 0;
    
    @media screen and (min-width:960px) {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        border-radius: unset;
    }
}

.cardsGrid__image-6 {
    height: 188.438px;
    align-self: stretch;
    aspect-ratio: 16/9;
    
    @media screen and (min-width:960px) {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 120px 0 0 0;
    }
}

/* Repeating edge-corner accents for long card lists */
.cardsGrid__card:nth-child(11n) .contentCard-image-wrapper {
    border-bottom-right-radius: 80px;
}

.cardsGrid__card:nth-child(11n + 6) .contentCard-image-wrapper {
    border-top-right-radius: 80px;
}

.cardsGrid__card:nth-child(11n + 7) .contentCard-image-wrapper {
    border-bottom-left-radius: 80px;
}

@media screen and (min-width:960px) {
    .cardsGrid__card:nth-child(11n) .contentCard-image-wrapper {
        border-bottom-right-radius: 120px;
    }

    .cardsGrid__card:nth-child(11n + 6) .contentCard-image-wrapper {
        border-top-right-radius: 120px;
    }

    .cardsGrid__card:nth-child(11n + 7) .contentCard-image-wrapper {
        border-bottom-left-radius: 120px;
    }
}