/* =====================================================
   ZKR REAL ESTATE
   DESTINATIONS ARCHIVE
===================================================== */


.zkr-destinations-page {
    --zkr-bg: #f4f2ed;
    --zkr-bg-alt: #e5e2da;
    --zkr-black: #0a0a0a;

    background: var(--zkr-bg);

    color: var(--zkr-black);

    overflow: hidden;
}


.zkr-destinations-container {
    width:
        min(
            calc(100% - 110px),
            1500px
        );

    margin:
        0 auto;
}


/* =====================================================
   INTRO
===================================================== */

.zkr-destinations-intro {
    padding:
        clamp(155px, 15vw, 230px)
        0
        105px;
}


.zkr-destinations-intro__label {
    display: flex;

    align-items: center;

    gap: 22px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}


.zkr-destinations-intro__label span:first-child {
    opacity: .42;
}


.zkr-destinations-intro__grid {
    margin-top:
        clamp(75px, 8vw, 125px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, .55fr);

    gap:
        clamp(80px, 10vw, 170px);

    align-items: start;
}


.zkr-destinations-intro__heading h1 {
    padding: 0;
    margin: 0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(75px, 8.8vw, 145px);

    line-height: .82;

    letter-spacing:
        clamp(-8px, -.5vw, -4px);

    font-weight: 400;
}


.zkr-destinations-intro__heading em {
    font-weight: 400;

    font-style: italic;
}


.zkr-destinations-intro__text {
    padding-top: 10px;
}


.zkr-destinations-intro__text p {
    margin:
        0 0
        27px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height: 1.75;

    color:
        rgba(10,10,10,.63);
}


.zkr-destinations-intro__text p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   LIST HEADER
===================================================== */

.zkr-destination-list {
    padding-bottom:
        clamp(110px, 11vw, 180px);
}


.zkr-destination-list__top {
    min-height: 58px;

    padding:
        0 3px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid rgba(10,10,10,.18);

    border-bottom:
        1px solid rgba(10,10,10,.18);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: 2px;
}


.zkr-destination-list__top span:last-child {
    opacity: .55;
}


/* =====================================================
   GRID
===================================================== */

.zkr-destination-grid {
    padding-top: 45px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.zkr-destination-card {
    min-width: 0;
}


.zkr-destination-card__link {
    display: block;

    color: inherit;

    text-decoration: none;
}


.zkr-destination-card__image {
    position: relative;

    height:
        clamp(560px, 61vw, 890px);

    overflow: hidden;

    border-radius: 8px;

    background:
        #d6d2ca
        center / cover
        no-repeat;

    color: #f7f5ef;
}


/* subtle animated overlay */

.zkr-destination-card__image::after {
    content: "";

    pointer-events: none;

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04) 25%,
            rgba(0,0,0,.52) 100%
        );

    transition:
        background 500ms ease;
}


.zkr-destination-card:not(.is-coming-soon)
.zkr-destination-card__image {
    transition:
        transform 750ms
        cubic-bezier(.2,.7,.2,1);
}


.zkr-destination-card:not(.is-coming-soon)
.zkr-destination-card__link:hover
.zkr-destination-card__image {
    transform:
        translateY(-5px);
}


/* =====================================================
   CARD TOP
===================================================== */

.zkr-destination-card__top {
    position: absolute;

    top: 25px;
    left: 27px;
    right: 27px;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    gap: 25px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 7px;

    letter-spacing: 2px;
}


.zkr-destination-card__top span:first-child {
    opacity: .72;
}


.zkr-destination-card__top span:last-child {
    text-align: right;

    text-transform: uppercase;
}


/* =====================================================
   CONTENT
===================================================== */

.zkr-destination-card__content {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 30px;

    z-index: 2;
}


.zkr-destination-card__country {
    margin-bottom: 12px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 7px;

    letter-spacing: 2.2px;

    opacity: .8;
}


.zkr-destination-card__content h2 {
    margin: 0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(55px, 5.5vw, 92px);

    line-height: .9;

    letter-spacing: -3.5px;

    font-weight: 400;
}


.zkr-destination-card__content p {
    width:
        min(470px, 85%);

    margin:
        18px 0 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1.55;

    color:
        rgba(255,255,255,.84);
}


/* =====================================================
   BUTTON
===================================================== */

.zkr-destination-card__action {
    width: fit-content;

    min-width: 145px;

    min-height: 52px;

    margin-top: 25px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    border-radius: 999px;

    background: #f4f2ed;

    color: #0a0a0a;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    letter-spacing: 1.5px;

    transition:
        background 250ms ease,
        color 250ms ease;
}


.zkr-destination-card:not(.is-coming-soon)
.zkr-destination-card__link:hover
.zkr-destination-card__action {
    background: #0a0a0a;

    color: #f4f2ed;
}


/* COMING SOON */

.zkr-destination-card.is-coming-soon
.zkr-destination-card__action {
    background:
        rgba(244,242,237,.94);

    color: #0a0a0a;

    cursor: default;
}


.zkr-destination-card.is-coming-soon
.zkr-destination-card__image::before {
    content: "";

    pointer-events: none;

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        rgba(15,15,15,.07);
}


/* =====================================================
   EMPTY
===================================================== */

.zkr-destination-empty {
    padding:
        100px 0;

    font-family:
        Didot,
        Georgia,
        serif;

    font-size: 35px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

    .zkr-destinations-container {
        width:
            calc(100% - 70px);
    }


    .zkr-destinations-intro {
        padding:
            135px 0
            90px;
    }


    .zkr-destinations-intro__grid {
        grid-template-columns:
            1fr
            .55fr;

        gap: 60px;
    }


    .zkr-destination-card__image {
        height: 620px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .zkr-destinations-container {
        width:
            calc(100% - 42px);
    }


    .zkr-destinations-intro {
        padding:
            115px 0
            70px;
    }


    .zkr-destinations-intro__label {
        gap: 13px;

        font-size: 7px;

        letter-spacing: 1.7px;
    }


    .zkr-destinations-intro__grid {
        margin-top: 55px;

        display: block;
    }


    .zkr-destinations-intro__heading h1 {
        font-size:
            clamp(58px, 17vw, 80px);

        line-height: .85;

        letter-spacing: -4px;
    }


    .zkr-destinations-intro__text {
        margin-top: 45px;

        padding: 0;

        max-width: 92%;
    }


    .zkr-destinations-intro__text p {
        font-size: 13px;

        line-height: 1.7;
    }


    .zkr-destination-list__top {
        min-height: 52px;

        font-size: 6px;

        letter-spacing: 1.5px;
    }


    .zkr-destination-grid {
        padding-top: 25px;

        grid-template-columns: 1fr;

        gap: 13px;
    }


    .zkr-destination-card__image {
        height:
            min(128vw, 610px);

        border-radius: 6px;
    }


    .zkr-destination-card__top {
        top: 18px;
        left: 18px;
        right: 18px;

        font-size: 6px;
    }


    .zkr-destination-card__content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }


    .zkr-destination-card__country {
        margin-bottom: 8px;

        font-size: 6px;
    }


    .zkr-destination-card__content h2 {
        font-size:
            clamp(52px, 15vw, 70px);

        letter-spacing: -3px;
    }


    .zkr-destination-card__content p {
        width: 92%;

        margin-top: 13px;

        font-size: 11px;
    }


    .zkr-destination-card__action {
        min-height: 48px;

        margin-top: 20px;

        font-size: 7px;
    }


    .zkr-destination-list {
        padding-bottom: 90px;
    }

}