/* ─── TOP DESTINATIONS ────────────────────────────────────────────────────────
 * Desktop 1440px: padding 140px, 3-column cards grid
 * Tablet  768–1439px: padding 120px, 2-column cards grid
 * Mobile  ≤767px: padding 100px, 1-column, scrollable tabs
 * ─────────────────────────────────────────────────────────────────────────── */

.top-destinations {
    /* background-color: var(--color-soft-cream); */
    /* calc(5.147rem + 4.902vw): 100px at 360, 120px at 768, capped at 140px */
    margin: clamp(6.25rem, calc(5.147rem + 4.902vw), 8.75rem) 0;
}

/* ─── SECTION HEADER ──────────────────────────────────────────────────────── */

.top-destinations__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-bottom: 45px;
}

/* ─── TABS ────────────────────────────────────────────────────────────────── */

.top-destinations__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border-ui);
    margin-bottom: clamp(2em, 2.778vw, 2.8rem); /* 30px → 40px */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.top-destinations__tabs::-webkit-scrollbar {
    display: none;
}

/* Invisible padding so last tab has breathing room when scrolled to end */
.top-destinations__tabs::after {
    content: '';
    flex-shrink: 0;
    width: 1px;
    padding-right: clamp(1.25rem, 2.778vw, 2.5rem);
}

.top-destinations__tab {
    position: relative;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: clamp(0.625rem, 0.694vw, 0.75rem) clamp(1rem, 1.667vw, 1.5rem);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-2);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-2);
    color: var(--color-grey);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.top-destinations__tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-solar-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.top-destinations__tab:hover {
    color: var(--color-text-primary);
}

.top-destinations__tab--active {
    color: var(--color-text-primary);
    font-weight: var(--fw-semibold);
}

.top-destinations__tab--active::after {
    transform: scaleX(1);
}

/* ─── PANELS ──────────────────────────────────────────────────────────────── */

.top-destinations__panel {
    display: none;
}

.top-destinations__panel--active {
    display: block;
    animation: tdFadeIn 0.3s ease both;
}

@keyframes tdFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── CARDS GRID ──────────────────────────────────────────────────────────── */

.top-destinations__cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: clamp(0.9375rem, 1.389vw, 1.25rem); /* 15px → 20px */

    width: 100vw;
    margin-left: calc(50% - 50vw);

    overflow-x: auto;
    scrollbar-width: none;
    padding: 0
        clamp(1.25rem, calc((100vw - 1440px) / 2 + 2.5rem), calc((100vw - 1440px) / 2 + 2.5rem));
}

.top-destinations__cards .card {
    flex: 0 0 27.5rem; /* 440px */
    /* scroll-snap-align: start; */
}

body,
html {
    overflow-x: clip;
}

/* ─── DESTINATION CARD EXTRAS ─────────────────────────────────────────────── */

/* Badge row in destination cards: type badges left, flag emoji right */
.top-destinations__cards .card__badges {
    justify-content: space-between;
    align-items: center;
}

.top-destinations__cards .card__badges-group {
    display: flex;
    gap: var(--gap-sm);
}

.card__flag {
    width: 3.1875rem; /* 20px */
    height: 1.8125rem;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.card__meta-sep {
    color: var(--color-border-ui);
    flex-shrink: 0;
}

.top-destinations__btn {
    position: absolute;
    right: 0;
    top: 7.5px;
}

/* ─── TABLET ──────────────────────────────────────────────────────────────── */

@media (max-width: 1439px) {
    body,
    html {
        overflow-x: auto;
    }

    /* section padding handled by single clamp above */
    .top-destinations__tabs {
        width: 100vw;
        margin-left: calc(50% - 50vw);

        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 clamp(1.25rem, 5.556vw, 2.5rem);
    }

    /* Figma 252:473: horizontal scroll, 3 cards × 440px, gap 20px in 688px container */
    .top-destinations__cards {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1.25rem; /* 20px */
        margin-bottom: 45px;
        width: 100vw;
        margin-left: calc(50% - 50vw);

        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 clamp(1.25rem, 5.556vw, 2.5rem); /* 20px at 360 → 40px at 720+ */
    }

    .top-destinations__cards::-webkit-scrollbar {
        display: none;
    }

    .top-destinations__btn {
        position: unset;
        right: unset;
        top: 0;
    }
}

/* ─── MOBILE ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* section padding handled by single clamp above */

    .top-destinations__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        margin-bottom: 1.875rem;
    }

    .top-destinations__header .btn {
        display: none;
    }

    .top-destinations__tab {
        padding: 0.75rem 1rem;
        font-size: var(--fs-body-3);
    }

    /* Figma 252:270: horizontal scroll, cards 320px, gap 10px */
    .top-destinations__cards {
        gap: 2.8vw; /* 10px */
    }

    .top-destinations__cards::-webkit-scrollbar {
        display: none;
    }

    .top-destinations__cards .card {
        flex: 0 0 88.8vw;
    }
}