/*
 * Grid and map, as node 1:3060 lays them out: two columns of cards in 818 and
 * a 558 map beside them, inside the 1376 container.
 *
 * Mobile is one column with the map stacked out of the way until the switch
 * asks for it - `is-map-view` - where it takes the viewport. There is no
 * desktop switch: every 1440 frame draws both panes at once.
 */
/*
 * The frame's container is 1376 inside 1440. Above that the listing stops
 * growing and centres instead - a 3200 display was giving 900-wide cards beside
 * a map that had scrolled past being square, which is the same complaint #28
 * makes about the menu going full width.
 */
.destinations-section > * {
    max-width: 1376px;
    margin-inline: auto;
}

.destinations-outer {
    display: grid;
    gap: 24px;
}

.destinations-wrapper {
    display: grid;
    gap: 24px;
}

.listing-count {
    /* `auto` inline, not 0: the shared cap above centres the section's children
       and a margin shorthand here would undo it. */
    margin: 0 auto 24px;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
}

/* Nothing found is the empty state's line to deliver, so the count stays out. */
.listing-count:empty {
    display: none;
}

/*
 * Load more. The listing draws the same control the blog archive does
 * (`.blog-load-more`, node `1:4273`): `.btn-main`'s Off-White box inside a 1px
 * Shark hairline. `.btn-main` borders itself in its own fill, so on its own the
 * button had no outline at all and read as bare text on the page.
 */
.load-more-btn {
    border: 1px solid var(--color-shark);
    cursor: pointer;
}

/*
 * The mobile list/map switch - nodes 1:2404 and 1:2407 draw it as a pill
 * floating over the listing at the bottom of the screen.
 *
 * Fixed rather than sticky: sticky held it inside its own box at the end of the
 * page, so it scrolled away with the last card instead of staying to hand. The
 * z-index is what keeps it off the cards, which open stacking contexts of their
 * own and were painting over it.
 */
.listing-view-switch {
    position: fixed;
    inset: auto 0 24px;
    z-index: 40;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* Button CTA Mobile - Geologica Regular 14/24 - on Shark, node 1:2540. */
.listing-view-btn {
    padding: 12px 32px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-offwhite);
    pointer-events: auto;
    background: var(--color-shark);
    border: 0;
    box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
}

/* One state, one button: whichever view is on offer is the one that shows. */
.destinations-outer:not(.is-map-view) ~ .listing-view-switch [data-view-toggle="list"],
.destinations-outer.is-map-view ~ .listing-view-switch [data-view-toggle="map"] {
    display: none;
}

/*
 * And only while the pane it offers to leave is on screen - destinations.js
 * marks the container once it is watching, so without JavaScript the state
 * rules above stand on their own.
 */
.listing-view-switch.is-observed .listing-view-btn:not(.is-onscreen) {
    display: none;
}

@media (max-width: 991px) {
    .destinations-outer.is-map-view .destinations-wrapper,
    .destinations-outer.is-map-view ~ .load-more-wrapper,
    .is-map-open .listing-count {
        display: none;
    }

    .destinations-outer:not(.is-map-view) .map-wrapper {
        display: none;
    }

    /*
     * Node 1:2407 is the map alone, edge to edge under the header, and nothing
     * else on the screen.
     *
     * Fixed to the viewport rather than a `100dvh` block: sizing the map alone
     * left the hero, the search bar and the count with all of their height
     * above it, so map view opened on a page you still had to scroll to reach
     * the map - and could keep scrolling past it. The page behind is held
     * still by `is-map-open` below.
     */
    /*
     * Node 1:2407 draws the map alone on a 375 frame - no site header over it
     * either, so this clears the sticky header rather than starting below it.
     * The header sits at 1001, which is what the numbers here are about.
     */
    .destinations-outer.is-map-view .map-wrapper {
        position: fixed;
        inset: 0;
        z-index: 1002;
        height: auto;
        margin-inline: 0;
    }

    .is-map-open {
        overflow: hidden;
    }

    /*
     * The search bar comes with it, drawn over the map rather than left up the
     * page with the listing it filters. `.filter-wrapper` carries the hero
     * overlap (-182px) that it needs in list view and nothing else - the card
     * and its shadow are the search bar's own.
     */
    .is-map-open .filter-wrapper,
    /*
     * stay-search.css drops the wrapper to 1002 while a panel is open, to clear
     * the sticky header. Over the map that is the map's own layer, and the map
     * is later in the document - so an open panel was painted behind it. The
     * tap that looked like it was landing on the panel landed on the map, and
     * the search bar's outside-click closed the panel again.
     *
     * Matched here with its own `:has()` so this wins on specificity rather
     * than on order.
     */
    .is-map-open .filter-wrapper:has(.stay-search.is-panel-open) {
        position: fixed;
        inset: 32px 0 auto;
        z-index: 1003;
        margin-top: 0;
    }

    /* Above the map, and above the card, whichever state it is in. */
    .is-map-open .listing-view-switch {
        z-index: 1004;
    }

    /*
     * Collapsed - node 1:2541. Two fields, where and what, showing what is
     * chosen and nothing else. The card map view opens in; a tap anywhere on
     * it hands back the full card, which is the same one the listing shows.
     */
    .is-search-collapsed .stay-search-bar {
        display: flex;
        gap: 32px;
        max-width: 343px;
        margin-inline: auto;
        padding: 12px 16px;
        cursor: pointer;
        border-radius: 8px;
        box-shadow: 0 8px 12px rgb(0 0 0 / 8%);
    }

    .is-search-collapsed .stay-search-field {
        flex: 1 0 0;
        min-width: 0;
    }

    /* The labels, the last two fields and Search belong to the open card. */
    .is-search-collapsed .stay-search-label,
    .is-search-collapsed .stay-search-submit,
    .is-search-collapsed .stay-search-field:nth-child(n + 3) {
        display: none;
    }

    /*
     * The collapsed card is one tap target that opens the full bar, so the
     * fields' X buttons wait for that - a small control inside a big one is a
     * mis-tap waiting to happen.
     */
    .is-search-collapsed .stay-search-clear:not([hidden]) {
        display: none;
    }

    .is-search-collapsed .stay-search-control .stay-search-value {
        padding-left: 0;
    }

    .is-search-collapsed .stay-search-value {
        width: 100%;
        padding-bottom: 9px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom-color: var(--Medium-Grey);
    }

    /*
     * The viewport toggle sits under the card instead of behind it. It is the
     * one control the frame does not draw on this screen, but a checkbox that
     * silently stops working is worse than one that has moved.
     */
    .destinations-outer.is-map-view .map-viewport-controls {
        top: auto;
        bottom: 96px;
    }

    .destinations-outer:not(.is-map-view) .map-wrapper {
        height: 0;
    }
}

@media (min-width: 992px) {
    .destinations-outer {
        grid-template-columns: minmax(0, 818fr) minmax(0, 558fr);
        align-items: start;
        gap: 32px;
    }

    .destinations-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * The map holds its place while the columns scroll past it, which is what
     * makes a 558 square opposite eight cards read as one listing rather than
     * a panel that scrolls away after the second row.
     */
    .map-wrapper.map-wrapper {
        position: sticky;
        top: calc(var(--header-height) + 24px);
        /*
         * The frame draws a 558 square (node 1:3071). It is a fixed height
         * rather than an aspect ratio because a pin's card is 335 x 480 and the
         * popup is a custom overlay - it does not pan the map to bring itself
         * into view the way an InfoWindow would - so the panel has to hold a
         * card plus its marker at any column width. `aspect-ratio` with a
         * `min-height` grew the width to match and pushed the grid out.
         */
        height: 600px;
    }

    .listing-view-switch {
        display: none;
    }
}

/*------------------------------------------------------------

#VIEWPORT FILTER

--------------------------------------------------------------*/

/*
 * Moving the map narrows the grid to what is in frame. The switch that turns
 * that off is drawn over the map, where the map is - not up in the filter bar,
 * which describes the query rather than the view.
 *
 * `hidden` until destinations.js has a map on the page: without JavaScript, or
 * with a refused API key, the listing is still the filtered listing and a
 * checkbox that moves nothing would be a lie.
 */
.map-wrapper {
    position: relative;
}

.map-viewport-controls {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.map-viewport-controls[hidden] {
    display: none;
}

.map-viewport-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-offwhite);
    border-radius: 3.429px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.16);
    padding: 10px 14px;
    font-family: var(--font-secondary);
    font-size: 14px;
    line-height: 18px;
    color: var(--color-shark);
    cursor: pointer;
    white-space: nowrap;
}

.map-viewport-toggle input {
    accent-color: var(--color-shark);
    margin: 0;
    cursor: pointer;
}

.destinations-empty {
    font-family: var(--font-secondary);
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-shark);
    margin: 0;
}

/*
 * The grid fades rather than emptying while a viewport request is in flight -
 * a pan should not flash a blank column between two full ones.
 */
.destinations-wrapper[aria-busy="true"] {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    .map-viewport-toggle {
        font-size: 13px;
        padding: 8px 12px;
    }
}