/*=========================================================
MARAMATTA SAFARIS
DESTINATION CARD ART DIRECTION
=========================================================*/

/*
    This stylesheet does NOT replace ms-card.css.

    It only gives destination cards their own visual language.

    Base:
        ms-card.css

    Destination:
        card-destination + ms-card
*/


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

.card-destination .safari-grid{

    display:grid;

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

    gap:var(--space-xl);

}


/*=========================================================
DESTINATION CARD
=========================================================*/

.card-destination .ms-card{

    max-width:none;

    background:var(--ms-surface);

    border:1px solid rgba(39,73,33,.08);

    border-radius:var(--radius-lg);

    box-shadow:
        0 8px 30px rgba(39,73,33,.06);

    overflow:hidden;

    cursor:default;

    transition:
        transform var(--transition-normal) var(--ease-luxury),
        box-shadow var(--transition-normal) var(--ease-luxury);

}


/*=========================================================
DESKTOP HOVER
=========================================================*/

@media (hover:hover){

    .card-destination.ms-card:hover{

        transform:translateY(-5px);

        box-shadow:
            0 18px 45px rgba(39,73,33,.10);

    }

}


/*=========================================================
DESTINATION MEDIA
=========================================================*/

.card-destination .ms-card__media{

    height:clamp(260px,28vw,360px);

    background:var(--ms-surface-soft);

}


/*
    Slightly softer image treatment than the
    Luxury Safari Collection.
*/

.card-destination .ms-card__media::after{

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.02) 55%,
            rgba(39,73,33,.18) 100%
        );

}


/*=========================================================
DESTINATION IMAGE
=========================================================*/
.card-destination.card-destination .ms-card__image{

    object-position:center;

}


/*=========================================================
DESTINATION BADGE
=========================================================*/

.card-destination .ms-card__badge{

    top:var(--space-lg);

    left:var(--space-lg);

    padding:8px 13px;

    border-left:2px solid var(--ms-orange);

    border-radius:2px;

    background:rgba(39,73,33,.72);

    border-top:0;
    border-right:0;
    border-bottom:0;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:none;

    font-size:.68rem;

    letter-spacing:.12em;

}


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

.card-destination .ms-card__content{

    padding:

        clamp(
            var(--space-lg),
            2vw,
            var(--space-xl)
        );

    gap:var(--space-sm);

    background:var(--ms-surface);

}


/*=========================================================
DESTINATION HEADER
=========================================================*/

.card-destination .ms-card__header{

    margin-bottom:4px;

}


/*=========================================================
DESTINATION TITLE
=========================================================*/

.card-destination .ms-card__title{

    font-size:

        clamp(
            1.35rem,
            1.8vw,
            1.7rem
        );

    line-height:1.2;

    letter-spacing:-.025em;

}


/*=========================================================
DESTINATION SUMMARY
=========================================================*/

.card-destination .ms-card__summary{

    max-width:40ch;

    color:rgba(39,73,33,.68);

    font-size:.96rem;

    line-height:1.65;

    -webkit-line-clamp:2;

}


/*=========================================================
DESTINATION META
=========================================================*/

.card-destination .ms-card__meta{

    display:flex;

    flex-wrap:wrap;

    gap:7px 10px;

    margin-top:var(--space-sm);

    color:rgba(39,73,33,.58);

    font-size:.68rem;

    font-weight:600;

    letter-spacing:.08em;

    line-height:1.5;

    text-transform:uppercase;

}


/*
    Tiny editorial separators.

    We don't want traditional pills here.
*/

.card-destination .ms-card__meta span{

    position:relative;

    padding-right:11px;

}


/*
    Separator between destination attributes.
*/

.card-destination .ms-card__meta span:not(:last-child)::after{

    content:"";

    position:absolute;

    right:2px;

    top:50%;

    width:3px;

    height:3px;

    border-radius:50%;

    background:var(--ms-orange);

    transform:translateY(-50%);

}


/*=========================================================
DESTINATION ACTIONS
=========================================================*/

.card-destination .ms-card__actions{

    padding:
        var(--space-md)
        clamp(
            var(--space-lg),
            2vw,
            var(--space-xl)
        );

    border-top:1px solid rgba(39,73,33,.10);

    background:rgba(39,73,33,.025);

}


/*=========================================================
BEST TIME
=========================================================*/
.card-destination .ms-card__season{

    display:flex;

    flex-direction:column;

    gap:3px;

    color:rgba(39,73,33,.48);

    font-size:.66rem;

    font-weight:600;

    letter-spacing:.1em;

    line-height:1.3;

    text-transform:uppercase;

}


.card-destination .ms-card__season strong{

    color:var(--ms-green);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.02em;

    text-transform:none;

}


/*=========================================================
DESTINATION CTA
=========================================================*/

.card-destination .ms-card__button{

    padding:11px 18px;

    border:1px solid rgba(39,73,33,.18);

    border-radius:var(--radius-pill);

    background:transparent;

    color:var(--ms-green);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.02em;

}


/*=========================================================
CTA HOVER
=========================================================*/

@media (hover:hover){

    .card-destination .ms-card__button:hover{

        background:var(--ms-green);

        color:var(--ms-white);

        transform:translateY(-1px);

    }

}


/*=========================================================
TABLET
768px+
=========================================================*/

@media (min-width:768px){

    .card-destination .safari-grid{

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

        gap:28px;

    }

   .card-destination .ms-card__media{

        height:300px;

    }

}


/*=========================================================
DESKTOP
1100px+
=========================================================*/

@media (min-width:1100px){

   .card-destination .safari-grid{

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

        gap:32px;

    }

   .card-destination .ms-card__media{

        height:340px;

    }

}


/*=========================================================
LARGE DESKTOP
1400px+
=========================================================*/

@media (min-width:1400px){

    .card-destination .safari-grid{

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

        gap:36px;

    }

    .card-destination .ms-card__media{

        height:360px;

    }

}


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

@media (max-width:767px){

    .card-destination .safari-grid{

        gap:22px;

    }

    .card-destination .ms-card{

        border-radius:var(--radius-md);

    }

    .card-destination .ms-card__media{

        height:260px;

    }

    .card-destination .ms-card__badge{

        top:14px;

        left:14px;

        padding:7px 11px;

        font-size:.62rem;

    }

    .card-destination .ms-card__content{

        padding:var(--space-lg);

    }

    .card-destination .ms-card__title{

        font-size:1.35rem;

    }

   .card-destination .ms-card__summary{

        max-width:none;

        font-size:.92rem;

    }

    .card-destination .ms-card__actions{

        align-items:center;

        padding:

            16px
            var(--space-lg);

    }

    .card-destination .ms-card__button{

        padding:10px 14px;

        font-size:.72rem;

    }

}


/*=========================================================
SMALL MOBILE
480px-
=========================================================*/

@media (max-width:480px){

    .card-destination .ms-card__media{

        height:230px;

    }

    .card-destination .ms-card__meta{

        font-size:.62rem;

    }

    .card-destination .ms-card__actions{

        gap:12px;

    }

    .card-destination .ms-card__season{

        font-size:.6rem;

    }

    .card-destination .ms-card__season strong{

        font-size:.75rem;

    }

    .card-destination .ms-card__button{

        padding:9px 12px;

    }

}


/*=========================================================
REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce){

    .card-destination .ms-card,
    .card-destination .ms-card__image,
    .card-destination .ms-card__button{

        transition:none;

    }

    .card-destination .ms-card:hover{

        transform:none;

    }

}