/**
 * Regions tabbed carousel layout fix - 2026-09-23, updated 2026-09-23.
 * LIVE for all visitors.
 *
 * Root causes fixed here:
 * 1. The region tab bar (ul.tabs) has Flickity (the carousel library)
 *    instantiated directly on it in components.js's carouselTabs()
 *    method, unconditionally at every screen width - its sibling
 *    method for the other tabbed-carousel variant (leftCarouselTabs())
 *    correctly guards this to mobile-only ("if width > 960 return"),
 *    but that guard is missing here. Flickity turns the plain tab row
 *    into an absolutely-positioned slider (one tab visible at a time,
 *    others hidden behind it), which is why tabs look squashed/empty
 *    and a tab's label can run off the edge mid-transition. This CSS
 *    overrides Flickity's inline styles back to a normal flex row
 *    with horizontal scroll on narrow widths - it does not stop
 *    Flickity from initialising (that's a JS fix for later), it just
 *    neutralises the broken positioning it applies.
 * 2. The huge destination heading ("Abu Dhabi" / "Mauritius" / etc.)
 *    is NOT part of this section - it belongs to the PRECEDING
 *    .section.hero's own independent 6-slide Flickity slideshow, each
 *    slide pinned via `article{position:absolute;bottom:0}` inside a
 *    `height:100vh` slide. The two sections were never in sync (the
 *    heading rotates on its own timer, unrelated to whichever region
 *    tab is active). The first fix here used a fixed pixel push
 *    calibrated against one heading in one emulator height, which
 *    didn't hold on a real phone with a different heading ("Mauritius")
 *    and a different real viewport height - mobile Safari's `100vh`
 *    doesn't reliably match the true visible viewport (the address bar
 *    show/hide keeps the larger, wrong value). Fixed properly now,
 *    mobile-only (viewport height differences don't apply above the
 *    960px breakpoint where the hero and this section sit side by
 *    side, not stacked):
 *      a) the hero slide height uses `100dvh` (falls back to 100vh on
 *         browsers without dvh support) so it tracks the real visible
 *         viewport instead of the ambiguous 100vh value;
 *      b) the overlap is removed entirely - the heading gets the hero
 *         image fully to itself, and this section's white box starts
 *         in normal document flow below it. This is a stronger
 *         guarantee than any fixed offset: there is no negative pull
 *         left to mistune, so it can't cut off a heading regardless of
 *         its length or the device's real viewport height.
 *    Desktop (960px+) keeps the original overlap design, where the
 *    hero and this section are laid out side by side and the overlap
 *    was never the source of the cutoff.
 * 3. aside.controls (prev/next arrows) is given breathing room so it
 *    reads as "below the card", not floating near the heading.
 * 4. Extra bottom spacing on mobile so the fixed WhatsApp/phone
 *    buttons clear the card's CTA button instead of sitting on it.
 * 5. The destination-card carousel (the actual region/country cards,
 *    not the tab bar) is given a matching background colour and
 *    clipping on its Flickity viewport/slider/cells, to prevent the
 *    page's white background flashing through at a card's corner
 *    during a touchscreen swipe transition.
 */

/* Desktop keeps the original overlap design (never the source of the
   cutoff - the hero and this section sit side by side there, not
   stacked with a shared 100vh height). */
#section-tabbed-carousels div.overlap-content {
    top: 24px;
}

/* --- Fix 2b: no overlap on mobile - heading gets the hero to itself --- */
@media (max-width: 960px) {
    #section-tabbed-carousels.section-base--1 {
        margin-top: 0 !important;
    }

    #section-tabbed-carousels.section-base--1::before {
        content: none !important;
    }

    #section-tabbed-carousels .container {
        top: 0 !important;
        position: static !important;
    }

    #section-tabbed-carousels h2.primary {
        top: 0 !important;
        position: static !important;
        padding-top: 24px !important;
    }

    #section-tabbed-carousels div.overlap-content {
        top: 0 !important;
        position: static !important;
        margin-top: 12px !important;
    }
}

/* --- Fix 2a: real mobile viewport height for the hero --- */
@media (max-width: 960px) {
    .section.hero section {
        height: 100vh;
        height: 100dvh;
    }
}

/* --- Fix 1: neutralise Flickity's absolute-positioned slider --- */
#section-tabbed-carousels .tabs-content ul.tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    position: static !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    gap: 8px;
}

#section-tabbed-carousels .tabs-content ul.tabs .flickity-viewport {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    display: flex !important;
    overflow: visible !important;
}

#section-tabbed-carousels .tabs-content ul.tabs .flickity-slider {
    position: static !important;
    display: flex !important;
    transform: none !important;
    width: auto !important;
}

#section-tabbed-carousels .tabs-content ul.tabs li.tab {
    position: static !important;
    display: block !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 160px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    white-space: nowrap;
    scroll-snap-align: start;
}

/* Visible "more tabs" hint: fade the right edge when the row scrolls */
#section-tabbed-carousels .tabs-content {
    position: relative;
}

#section-tabbed-carousels .tabs-content::after {
    content: '';
    position: absolute;
    top: 24px;
    right: 0;
    width: 36px;
    height: 76px;
    background: linear-gradient(to right, transparent, #ffffff 85%);
    pointer-events: none;
}

@media (max-width: 960px) {
    #section-tabbed-carousels .tabs-content ul.tabs li.tab {
        min-width: 140px;
        padding: 20px 16px !important;
    }
}

/* --- Fix 3: controls sit clearly below the card, not near the heading --- */
#section-tabbed-carousels aside.controls {
    position: relative;
    z-index: 0;
    margin-top: 10px;
}

/* --- Fix 4: clear the floating WhatsApp/phone buttons on mobile --- */
@media (max-width: 767px) {
    #section-tabbed-carousels .main {
        padding-bottom: 90px !important;
    }
}

/* --- Fix 5: destination-card carousel edge artifact --- */
#section-tabbed-carousels .tab-content .slider,
#section-tabbed-carousels .tab-content .carousel,
#section-tabbed-carousels .tab-content .flickity-viewport,
#section-tabbed-carousels .tab-content .flickity-slider {
    background-color: #031A36;
}

#section-tabbed-carousels .tab-content .carousel {
    overflow: hidden;
    border-radius: 8px;
}

#section-tabbed-carousels .tab-content .section.fade-in,
#section-tabbed-carousels .tab-content article.card,
#section-tabbed-carousels .tab-content article.card .media {
    border-radius: 8px;
    overflow: hidden;
}