/* =====================================================================
   Category landing — "Kontinent & Land": one panel for one decision.

   Replaces the standalone world map and the country tiles that used to sit
   under it: the map on the left picks a continent, the column on the right
   answers with the countries in it and the number of tours in each. Both
   halves are rendered server-side, one pane per continent, so every country
   link is in the HTML whether or not the pane is the open one.

   Palette: #EDE3D5 milk ground, #111214 type, #FF6A00 orange for the one
   thing that is selected. The photographs carry their own dark gradient, so
   the section itself never needs a dark ground.
   ===================================================================== */

.cat-dest {
    background: #EDE3D5;
    padding: 88px 24px;
    color: #111214;
}

.cat-dest__inner {
    max-width: 1240px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.cat-dest__header {
    max-width: 720px;
    margin-bottom: 40px;
}

.cat-dest__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF6A00;
    margin-bottom: 12px;
}

.cat-dest__h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #111214;
    margin: 0 0 14px;
}

.cat-dest__lede {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(17, 18, 20, 0.62);
    margin: 0;
}

/* ── Panel ──────────────────────────────────────────────────────────── */

.cat-dest__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* ── Left: the map, and the same continents as real buttons ─────────── */

.cat-dest__map {
    position: relative;
    margin: 0 0 24px;
    /* Reserved before the file lands, so the panel does not jump (CLS). */
    aspect-ratio: 1009.7 / 566;
}

.cat-dest__map svg {
    display: block;
    width: 100%;
    height: auto;
}

.cat-dest__map-skeleton {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(17, 18, 20, 0.07);
    background:
        radial-gradient(ellipse at 30% 40%, rgba(17, 18, 20, 0.05), transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(17, 18, 20, 0.04), transparent 60%);
}

.cat-dest__map.is-loaded .cat-dest__map-skeleton { display: none; }

.cat-dest__terra {
    fill: #2E2C29;
    stroke: #EDE3D5;
    stroke-width: 0.5;
    cursor: pointer;
    transition: fill .22s ease;
}

.cat-dest__terra:hover { fill: #575148; }

.cat-dest__terra.is-active { fill: #FF6A00; }

/* Drawn, but this category sells nothing there: no pointer, no hover. */
.cat-dest__terra--off {
    fill: #CDC0AD;
    cursor: default;
    pointer-events: none;
}

/* The tab strip. On a wide screen it is the caption under the map; on a
   phone it is the whole selector, the map being no use at that width. */
.cat-dest__tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-dest__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid rgba(17, 18, 20, 0.18);
    color: #111214;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .18s, background .18s, color .18s;
}

.cat-dest__tab:hover {
    border-color: rgba(17, 18, 20, 0.45);
    background: rgba(17, 18, 20, 0.04);
}

.cat-dest__tab[aria-selected="true"] {
    border-color: #111214;
    background: #111214;
    color: #EDE3D5;
}

.cat-dest__tab:focus-visible {
    outline: 2px solid #FF6A00;
    outline-offset: 2px;
}

.cat-dest__tab-n {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(17, 18, 20, 0.66);
}

.cat-dest__tab[aria-selected="true"] .cat-dest__tab-n { color: rgba(237, 227, 213, 0.7); }

/* ── Right: the countries of the open continent ─────────────────────── */

.cat-dest__panes {
    min-width: 0;
}

.cat-dest__pane-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(17, 18, 20, 0.14);
}

.cat-dest__pane-h3 {
    margin: 0;
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #111214;
}

.cat-dest__pane-meta {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(17, 18, 20, 0.66);
}

.cat-dest__pane-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 13px;
    font-weight: 700;
    color: #111214;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: #FF6A00;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.cat-dest__pane-link:hover { color: #111214; text-decoration-color: #111214; }
.cat-dest__pane-link svg { color: #FF6A00; }
.cat-dest__pane-link:focus-visible { outline: 2px solid #FF6A00; outline-offset: 3px; }
.cat-dest__pane-link svg { transition: transform .22s ease; }
.cat-dest__pane-link:hover svg { transform: translateX(3px); }

/* The eight biggest destinations, as photographs */
.cat-dest__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}

.cat-dest__card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: #111214;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.cat-dest__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(17, 18, 20, 0.22);
}

.cat-dest__card:focus-visible {
    outline: 2px solid #FF6A00;
    outline-offset: 3px;
}

.cat-dest__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-dest__photo--empty {
    background: linear-gradient(140deg, #23252a 0%, #111214 100%);
}

.cat-dest__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(17, 18, 20, 0.90) 0%,
        rgba(17, 18, 20, 0.45) 50%,
        rgba(17, 18, 20, 0.05) 100%);
}

.cat-dest__card-name {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 30px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    color: #EDE3D5;
}

.cat-dest__card-n {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(237, 227, 213, 0.72);
}

.cat-dest__card-n svg {
    color: #FF6A00;
    flex: none;
    transition: transform .22s ease;
}

.cat-dest__card:hover .cat-dest__card-n svg { transform: translateX(4px); }

/* Everything past the eighth, as a name and a number */
.cat-dest__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.cat-dest__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(17, 18, 20, 0.18);
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    color: #111214;
    text-decoration: none;
    touch-action: manipulation;
    transition: border-color .18s, background .18s, color .18s;
}

.cat-dest__chip:hover {
    border-color: #FF6A00;
    background: rgba(255, 106, 0, 0.10);
    color: #111214;
    text-decoration: none;
}

.cat-dest__chip:focus-visible {
    outline: 2px solid #FF6A00;
    outline-offset: 2px;
}

.cat-dest__chip-n {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(17, 18, 20, 0.66);
}

.cat-dest__chip:hover .cat-dest__chip-n { color: rgba(17, 18, 20, 0.75); }

/* ── Foot ───────────────────────────────────────────────────────────── */

.cat-dest__foot {
    margin-top: 36px;
}

.cat-dest__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border: 1px solid rgba(17, 18, 20, 0.25);
    background: transparent;
    color: #111214;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .18s, background .18s, color .18s;
}

.cat-dest__btn:hover {
    background: #111214;
    border-color: #111214;
    color: #EDE3D5;
}

.cat-dest__btn:focus-visible {
    outline: 2px solid #FF6A00;
    outline-offset: 3px;
}

/* ── Wide screens: map beside the countries ─────────────────────────── */

@media (min-width: 1100px) {
    .cat-dest__panel {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
        gap: 44px;
    }

    /* One height for every continent, so switching does not move the page.
       Africa's 34 countries scroll; Oceania's one does not fill it. The pane
       itself is the scroll box, so the region a keyboard scrolls is the one
       the tab describes. */
    .cat-dest__pane {
        max-height: 620px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 8px;
        scrollbar-width: thin;
        scrollbar-color: rgba(17, 18, 20, 0.25) transparent;
    }

    .cat-dest__pane:focus-visible {
        outline: 2px solid #FF6A00;
        outline-offset: 4px;
    }

    .cat-dest__pane::-webkit-scrollbar { width: 6px; }
    .cat-dest__pane::-webkit-scrollbar-track { background: transparent; }
    .cat-dest__pane::-webkit-scrollbar-thumb {
        background: rgba(17, 18, 20, 0.22);
        border-radius: 3px;
    }

    .cat-dest__pane-head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #EDE3D5;
        margin-top: -2px;
        padding-top: 2px;
    }
}

/* ── Tablet: map on top, at a size worth looking at ─────────────────── */

@media (max-width: 1099px) {
    .cat-dest__map {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Phone: the map is not a tap target at this width ───────────────── */

@media (max-width: 767px) {
    .cat-dest { padding: 64px 20px; }

    .cat-dest__map { display: none; }

    /* A rail instead of a grid: six continents, one thumb. */
    .cat-dest__tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        gap: 8px;
        margin: 0 -20px;
        padding: 2px 20px 10px;
        scrollbar-width: none;
    }

    .cat-dest__tabs::-webkit-scrollbar { display: none; }

    .cat-dest__tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        border-radius: 24px;
    }

    .cat-dest__cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

    .cat-dest__pane-link { margin-left: 0; }

    .cat-dest__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-dest__card,
    .cat-dest__card-n svg,
    .cat-dest__pane-link svg,
    .cat-dest__terra { transition: none; }
    .cat-dest__card:hover { transform: none; }
}