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

/* Section Layout - Destination-specific */
.destinationCards {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-iceland-100, #FBF9F6);
}

/* No-heading modifier: reduce top padding on cards area */
.destinationCards--noHeading .destinationCards__cards-and-cta-container {
    padding-top: var(--section-padding-lg, 64px);

    @media screen and (min-width:960px) {
        padding-top: 80px;
    }
}

.destinationCards__top-section {
    display: flex;
    width: 375px;
    padding: var(--section-padding-lg, 64px) var(--page-padding, 20px);
    flex-direction: column;
    align-items: center;
    gap: var(--section-padding-md);

    @media screen and (min-width:960px) {
        width: 100%;
        padding: 80px var(--page-padding, 64px) var(--page-padding, 64px) var(--page-padding, 64px);
    }
}

.destinationCards__heading-container {
    display: flex;
    max-width: 768px;
    flex-direction: column;
    align-items: center;
    gap: var(--sizing-s);

    @media screen and (min-width:960px) {
        gap: var(--sizing-xl);
    }
}

.destinationCards__preHeading {
    font: var(--font-overline-lg);
    color: var(--color-iceland-1200, #030303);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0px !important;
}

.destinationCards__heading {
    font: var(--font-title-lg);
    color: var(--color-iceland-1200, #030303);
    text-align: center;
    margin-bottom: 0px !important;
}

.destinationCards__cards-and-cta-container {
    display: flex;
    width: 375px;
    padding: var(--sizing-3xl, 40px) var(--page-padding, 20px) var(--section-padding-lg, 64px) var(--page-padding, 20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-x6);

    @media screen and (min-width:960px) {
        max-width: 1440px;
        padding: 64px var(--page-padding, 64px) var(--section-padding-lg, 112px) var(--page-padding, 64px);
        gap: var(--spacing-x10);
        width: 100%;
    }
}

.destinationCards__cards-and-cta-container a {
    width: 100%;
    font-weight: 600;

    @media screen and (min-width:960px) {
        width: unset;
    }
}

.destinationCards__cards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    width: 100%;
    max-width: 100%;
    gap: 0;
    /* Span full width of parent despite .destinationCards__cards-and-cta-container using align-items: center */
    align-self: stretch;
}

/* One 3×2 masonry module; stacks vertically so “View all” grids sit below, not beside */
.destinationCards__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;
    }
}

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

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

/* View all button */
.destinationCards__view-all {
    display: inline-flex;
    padding: var(--sizing-s, 12px) var(--sizing-xl, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--sizing-xs, 8px);
    border-radius: 100px;
    border: 1px solid var(--color-iceland-1200, #030303);
    background: transparent;
    color: var(--color-iceland-1200, #030303);
    font: var(--font-body-sm);
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--spacing-x6, 48px);
    transition: background-color 0.2s ease, color 0.2s ease;

    @media screen and (min-width:960px) {
        align-self: center;
    }
}

.destinationCards__view-all:hover {
    background: var(--color-iceland-1200, #030303);
    color: var(--color-iceland-100, #FBF9F6);
}

.destinationCards__view-all:focus-visible {
    outline: 2px solid var(--color-iceland-1200, #030303);
    outline-offset: 2px;
}

.destinationCards__view-all[hidden] {
    display: none;
}

/* Hidden area: stack additional 3×2 chunks below the first grid */
.destinationCards__more {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.destinationCards__more:not([hidden]) {
    margin-top: var(--spacing-x6, 48px);

    @media screen and (min-width:960px) {
        margin-top: 64px;
    }
}

.destinationCards__more[hidden] {
    display: none;
}

/* Two-Card Container - Destination-specific layout */
.destinationCards__two-card-container {
    @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);
    }
}

/* Fewer than 3 columns: fill row and balance width (e.g. 4 items = 2 columns ~50% each) */
@media screen and (min-width:960px) {
    .destinationCards__chunk:has(> .destinationCards__two-card-container:nth-child(2):last-child) {
        justify-content: center;
    }

    .destinationCards__chunk:has(> .destinationCards__two-card-container:nth-child(2):last-child)
        .destinationCards__two-card-container {
        flex: 1 1 0;
        max-width: calc((75% - var(--sizing-2xl, 32px)) / 2);
    }

    .destinationCards__chunk:has(> .destinationCards__two-card-container:only-child) {
        justify-content: center;
    }

    .destinationCards__chunk:has(> .destinationCards__two-card-container:only-child)
        .destinationCards__two-card-container {
        flex: 1 1 auto;
        max-width: 100%;
    }

    /* Exactly 2 items: single column wrapper with 2 cards — row layout so they sit side by side */
    .destinationCards__chunk:has(> .destinationCards__two-card-container:only-child)
        .destinationCards__two-card-container:has(> .destinationCards__card:nth-child(2):last-child) {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: var(--sizing-2xl, 32px);
        width: 100%;
        max-width: 100%;
    }

    .destinationCards__chunk:has(> .destinationCards__two-card-container:only-child)
        .destinationCards__two-card-container:has(> .destinationCards__card:nth-child(2):last-child)
        .destinationCards__card {
        flex: 1 1 0;
        min-width: 0;
        max-width: calc((75% - var(--sizing-2xl, 32px)) / 2);
        padding-top: unset;
    }
}

.destinationCards__chunk .destinationCards__two-card-container:first-of-type .destinationCards__card:first-of-type {
    padding-top: unset;
}

/* Card Component */
.destinationCards__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--sizing-xl, 24px);
    gap: var(--sizing-s, 12px);
    align-self: stretch;

    @media screen and (min-width:960px) {
        gap: var(--spacing-x3, 24px);
        padding-top: unset;
        width: 100%;
        max-width: 100%;
    }
}

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

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

.destinationCards__card-text-container {
    text-align: left;
    align-self: stretch;
}

.destinationCards__card-text-container p {
    font: var(--font-body-sm);
    color: var(--color-iceland-800);
    margin-bottom: 0 !important;
    overflow: hidden;
    font-feature-settings: 'dlig' on;
    text-overflow: ellipsis;
    text-align: left;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    align-self: stretch;
}

.destinationCards__card-header {
    font: var(--font-title-xs);
    color: var(--color-iceland-1000);
    margin-bottom: 0 !important;
    text-align: left;
}

/* Position-Specific Image Styles */
.destinationCards__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;
    }
}

.destinationCards__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;
    }
}

.destinationCards__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;
    }
}

.destinationCards__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;    
    }
}

.destinationCards__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;
    }
}

.destinationCards__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;
    }
}

/* Shape Variants */
.destinationCards__image-rectangle {
    height: 188.438px;
    aspect-ratio: 16/9;
    @media screen and (min-width:960px) {
        height: 416px;
    }
}

.destinationCards__image-rectangle:first-of-type {
    border-radius: 0 0 80px 0;
    @media screen and (min-width:960px) {
        border-radius: 0 0 120px 0;
    }
}

.destinationCards__image-rectangle:last-of-type {
    border-radius: 0 0 80px 0;
    aspect-ratio: 1/1;
    @media screen and (min-width:960px) {
        border-radius: unset;
        aspect-ratio: 16/9;
    }
}

.destinationCards__image-square {
    height: 335px;
    aspect-ratio: 1/1;
    @media screen and (min-width:960px) {
        height: 416px;
    }
}

.destinationCards__image-square:first-of-type {
    @media screen and (min-width:960px) {
        border-radius: 0 0 0 120px;
    }
}

.destinationCards__image-square:last-of-type {
    aspect-ratio: 1/1;
    border-radius: unset;
    @media screen and (min-width:960px) {
        border-radius: 120px 0 0 0;
    }
}

/* nth-child Border Radius Rules (masonry chunks) */
.destinationCards__card:nth-child(11n) .contentCard-image-wrapper {
    border-bottom-right-radius: 80px;
}

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

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

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

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

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

/* Listing page border-radius via explicit classes */
.listingPage__card.listingPage__radius-br .contentCard-image-wrapper {
    border-bottom-right-radius: 80px;

    @media screen and (min-width:960px) {
        border-bottom-right-radius: 120px;
    }
}

.listingPage__card.listingPage__radius-tl .contentCard-image-wrapper {
    border-top-left-radius: 80px;

    @media screen and (min-width:960px) {
        border-top-left-radius: 120px;
    }
}

.listingPage__card.listingPage__radius-bl .contentCard-image-wrapper {
    border-bottom-left-radius: 80px;

    @media screen and (min-width:960px) {
        border-bottom-left-radius: 120px;
    }
}

/* Listing page images: preserve shape variants without generic pseudo-class side-effects */
.listingPage__card-container .destinationCards__image-rectangle {
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 0;
}

.listingPage__card-container .destinationCards__image-square {
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 0;
}