/* ==========================================================
   POPULAR DESTINATIONS
========================================================== */

.ua-destination-section {
    margin-top: 0;
    padding: 55px 0;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fafc 100%);

    overflow: hidden;

}

/* ==========================================================
   SECTION HEADER
========================================================== */

.ua-section-heading {

    max-width: 760px;

    margin: 0 auto 70px;

}

.ua-section-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 18px;

    margin-bottom: 18px;

    border-radius: 999px;

    background: rgba(244, 180, 0, .12);

    color: var(--primary);

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}

.ua-section-title {

    margin-bottom: 18px;

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

    line-height: 1.2;

    color: #111827;

}

.ua-section-description {

    margin: 0;

    color: #6B7280;

    font-size: 1.05rem;

    line-height: 1.8;

}

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

.ua-destination-grid {

    display: grid;

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

    aspect-ratio: 16/8;

    gap: 24px;

}

.ua-card-large {

    grid-column: span 2;

    grid-row: span 2;

}

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

.ua-destination-card {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 28px;

    text-decoration: none;

    background: #000;

    box-shadow:

        0 20px 45px rgba(15, 23, 42, .10);

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.ua-destination-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform .8s ease;

}

/* ==========================================================
   OVERLAY
========================================================== */

.ua-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(to top,

            rgba(0, 0, 0, .78),

            rgba(0, 0, 0, .18),

            transparent);

}

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

.ua-card-content {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 28px;

    z-index: 2;

    color: #fff;

}

.ua-card-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

    margin-bottom: 16px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(12px);

    font-size: .78rem;

    font-weight: 700;

}

.ua-card-content h3 {

    margin-bottom: 10px;

    font-size: clamp(1.5rem, 2vw, 2.4rem);

    font-weight: 800;

    color: #fff;

}

.ua-card-content p {

    margin-bottom: 22px;

    color: rgba(255, 255, 255, .88);

    font-size: .95rem;

    line-height: 1.7;

}

.ua-card-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: .92rem;

    font-weight: 700;

}

.ua-card-link i {

    transition: transform .3s ease;

}

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

.ua-destination-card:hover {

    transform: translateY(-8px);

    box-shadow:

        0 35px 70px rgba(15, 23, 42, .18);

}

.ua-destination-card:hover img {

    transform: scale(1.08);

}

.ua-destination-card:hover .ua-card-link i {

    transform: translateX(6px);

}

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

@media (max-width:991.98px) {

    .ua-destination-grid {

        grid-template-columns: 1fr;

    }

    .ua-card-large {

        grid-column: span 2;

    }

}

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

@media (max-width:575.98px) {

    .ua-destination-section {

        padding: 34px 0;

    }

    .ua-section-heading {

        margin-bottom: 40px;

    }

    .ua-destination-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 260px;

    }

    .ua-card-large {

        grid-column: auto;

        grid-row: auto;

    }

    .ua-card-content {

        left: 22px;

        right: 22px;

        bottom: 22px;

    }

    .ua-card-content h3 {

        font-size: 1.6rem;

    }

}