/*
 * Duration tabs for a tour list.
 *
 * One tab per tour length above a single grid. The grid itself is untouched:
 * the tabs only ask Isotope to filter it, so there is one query and one layout
 * engine on the page instead of one of each per duration.
 *
 * Colours are the card's own band, so the strip reads as part of the same
 * family as the cards under it.
 */

.etg-duration-tabs {
    --etg-tab-ink: #21395a;
    --etg-tab-surface: #ffffff;
    --etg-tab-line: #e2e8f0;
    --etg-tab-active: linear-gradient(135deg, #ffb375 0%, #ff9750 100%);
    --etg-tab-active-ink: #53270a;

    position: relative;
    margin: 0 0 32px;
}

/* Wide enough to read them all at once: every tab is on screen, wrapping onto
   a second row rather than hiding past an edge the reader cannot see. There is
   no pointer-driven horizontal scroll on a desktop, so a tab that is off the
   edge there is a tab nobody reaches. Below 768px this becomes a one row
   scroller with arrows, because a phone wraps this many tabs into a block
   taller than the first card. */
.etg-duration-tabs-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    padding: 4px 2px 6px;
    margin: -4px -2px -6px;
}

.etg-duration-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    /* Every tab is as wide as the widest one, so the rows line up in columns
       instead of ending ragged. The width is measured and set by the script,
       because "4 Days 4" and "16 Days 12" are not the same width and a
       hard coded value would either clip the long one or leave the short one
       swimming. Not applied to the mobile scroller, where compact tabs mean
       fewer swipes. */
    min-width: var(--etg-duration-tab-width, auto);
    scroll-snap-align: center;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--etg-tab-line);
    border-radius: 999px;
    background: var(--etg-tab-surface);
    color: var(--etg-tab-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 1px 2px rgba(23, 32, 51, 0.05);
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.etg-duration-tab:hover,
.etg-duration-tab:focus-visible {
    border-color: #ffb375;
    color: #b35b13;
    box-shadow: 0 3px 8px rgba(23, 32, 51, 0.08);
    outline: none;
}

.etg-duration-tab-active,
.etg-duration-tab-active:hover,
.etg-duration-tab-active:focus-visible {
    border-color: transparent;
    background: var(--etg-tab-active);
    color: var(--etg-tab-active-ink);
    box-shadow: 0 6px 14px rgba(244, 146, 54, 0.28);
}

.etg-duration-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(23, 32, 51, 0.06);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.85;
}

.etg-duration-tab-active .etg-duration-tab-count {
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

/* Fades tell the reader there are more tabs off the edge. JS adds the classes
   only when the strip actually overflows in that direction, so a strip that
   fits has no fade at all. */
.etg-duration-tabs::before,
.etg-duration-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
    z-index: 2;
}

.etg-duration-tabs::before {
    left: -2px;
    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0));
}

.etg-duration-tabs::after {
    right: -2px;
    background: linear-gradient(to left, #ffffff 10%, rgba(255, 255, 255, 0));
}

.etg-duration-tabs.etg-duration-overflow-start::before,
.etg-duration-tabs.etg-duration-overflow-end::after {
    opacity: 1;
}

/* Nothing is ever off the edge once the strip wraps, so neither fade applies. */
@media only screen and (min-width: 769px) {
    .etg-duration-tabs::before,
    .etg-duration-tabs::after {
        content: none;
    }
}

/* Hold the grid back until the first tab has been applied, otherwise every
   tour flashes on screen before the filter narrows it to one length. The
   skeleton already covers this gap, so nothing collapses in its place.
   Both are released on a timer as well, so a JS failure shows the tours
   rather than an empty page. */
.etg-duration-tabs-holder .qodef-tours-list-holder-inner {
    visibility: hidden;
    animation: etg-duration-tabs-reveal 0s linear 5s forwards;
}

.etg-duration-tabs-holder.etg-duration-tabs-ready .qodef-tours-list-holder-inner {
    visibility: visible;
    animation: none;
}

@keyframes etg-duration-tabs-reveal {
    to {
        visibility: visible;
    }
}

.etg-duration-tabs-holder:not(.etg-duration-tabs-ready) .etg-tour-skeleton {
    display: grid !important;
    opacity: 1 !important;
    animation: etg-tour-skeleton-safety-hide 0s linear 5s forwards !important;
}

.etg-duration-tabs-holder:not(.etg-duration-tabs-ready) .etg-tour-skeleton::after {
    display: block !important;
}

/* Arrows belong to the scroller only, and only on the side that actually has
   more tabs to reach. They are built by the script, so a reader with no JS
   never gets a control that cannot work. */
.etg-duration-tab-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--etg-tab-line);
    border-radius: 50%;
    background: #ffffff;
    color: #21395a;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 2px 8px rgba(23, 32, 51, 0.14);
    z-index: 3;
}

.etg-duration-tab-arrow-prev {
    left: 0;
}

.etg-duration-tab-arrow-next {
    right: 0;
}

@media only screen and (max-width: 768px) {
    .etg-duration-tabs {
        margin-bottom: 24px;
    }

    .etg-duration-tabs-track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .etg-duration-tabs-track::-webkit-scrollbar {
        display: none;
    }

    .etg-duration-tabs.etg-duration-overflow-start .etg-duration-tab-arrow-prev,
    .etg-duration-tabs.etg-duration-overflow-end .etg-duration-tab-arrow-next {
        display: flex;
    }

    .etg-duration-tab {
        padding: 9px 14px;
        font-size: 14px;
        gap: 6px;
    }

    .etg-duration-tab-count {
        min-width: 20px;
        height: 18px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .etg-duration-tab {
        transition: none;
    }
}

/* Scrolling mode. Nothing is filtered, so the grid is never held back, and
   the strip follows the reader down the page - a tab you cannot reach once
   you have scrolled past it is not a control. It needs its own background
   for that: it is passing over the cards. */
.etg-duration-tabs-holder.etg-duration-tabs-scroll .qodef-tours-list-holder-inner {
    visibility: visible;
    animation: none;
}

/* The strip is NOT sticky, and cannot be: the theme wraps the whole page in
   .qodef-wrapper-inner with overflow:hidden, and a sticky element inside an
   overflow:hidden ancestor sticks to a box that never scrolls, so it just
   scrolls away. Faking it with position:fixed would mean fighting the theme's
   own fixed header for the same strip of screen. The strip stays at the top of
   the list, where a reader returns by scrolling up. */

/* Only used when Isotope never initialises: with no layout engine the cards
   are in normal flow, so hiding the ones that do not match is enough. */
.etg-duration-hidden {
    display: none !important;
}

/* Group heading, scrolling mode only. It is a grid item so that Isotope's
   fitRows breaks the row on it; everything here is about making a 100% wide
   item behave, since the column classes size every item to a fraction. */
.etg-duration-heading {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    filter: none !important;
    background: none !important;
    box-shadow: none !important;
}

.etg-duration-heading-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 14px;
    padding: 0;
    color: #172033;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    scroll-margin-top: 140px;
}

.etg-duration-heading-title::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: #e8eef5;
}

.qodef-tours-list-holder-inner > .etg-duration-heading:first-child .etg-duration-heading-title,
.etg-duration-heading:nth-child(2) .etg-duration-heading-title {
    margin-top: 0;
}

@media only screen and (max-width: 768px) {
    .etg-duration-heading-title {
        margin: 20px 0 12px;
        font-size: 19px;
    }
}