/* Mobile List/Map toggle: hide the inactive pane below `lg`.
   On `lg+` we render a two-column grid and both panes stay visible. */
@media (max-width: 1023.98px) {
    [data-dive-sites-layout][data-active-view="list"]
        [data-dive-sites-map-pane] {
        display: none;
    }
    [data-dive-sites-layout][data-active-view="map"]
        [data-dive-sites-list-pane] {
        display: none;
    }
}

/* Fullscreen map: pin the host below the fixed main nav (z-[1100] in
   _navbar.html). z-index below nav/mobile panel but above list cards and the
   sticky filter strip (z-30). Host is outside lg:sticky so position:fixed spans
   the viewport, not only the map column. */
.dive-sites-map-fullscreen {
    position: fixed;
    top: calc(5rem + env(safe-area-inset-top, 0px));
    right: env(safe-area-inset-right, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
    left: env(safe-area-inset-left, 0px);
    z-index: 1040;
    background: rgb(15 23 42); /* slate-900 */
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.dive-sites-map-fullscreen [data-dive-sites-map-sticky-slot] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dive-sites-map-fullscreen #dive-sites-map {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    border-radius: 0.75rem;
}

.dive-sites-map-fullscreen > [data-dive-sites-map-fullscreen] {
    top: 1.25rem;
    right: 1.25rem;
}

/* Show "Fullscreen" label until the wrapper enters fullscreen, then swap
   to the "Close" label. Icons are toggled imperatively in JS. */
[data-dive-sites-map-fullscreen-label-exit] {
    display: none;
}
.dive-sites-map-fullscreen [data-dive-sites-map-fullscreen-label-enter] {
    display: none;
}
.dive-sites-map-fullscreen [data-dive-sites-map-fullscreen-label-exit] {
    display: inline;
}