/* ---------- Interactive map on phones ----------
   Heading, then the map (with the floating Filters pill), then the venues as a
   swipeable strip of cards: photo on top, name underneath. Desktop is unchanged. */
.dmp-map-card-media {
    display: none;
}

@media (max-width: 767px) {
    .dmp-map-widget:not(.is-compact):not(.is-fullscreen) {
        position: relative;
        flex-direction: column;
        height: auto;
    }
    /* Let the heading, list and detail sit around the map in one column */
    .dmp-map-widget:not(.is-compact):not(.is-fullscreen) .dmp-map-panel {
        display: contents;
    }
    .dmp-map-widget:not(.is-compact):not(.is-fullscreen) .dmp-map-panel-head {
        order: 0;
        padding: 20px 16px 14px;
        border-bottom: none;
        background: #ffffff;
    }
    .dmp-map-widget:not(.is-compact):not(.is-fullscreen) .dmp-map-heading {
        margin-bottom: 0;
        font-size: 22px;
    }
    .dmp-map-widget:not(.is-compact):not(.is-fullscreen) .dmp-map-stage {
        order: 1;
        flex: 0 0 auto;
        height: min(62vh, 460px);
        min-height: 320px;
    }
    .dmp-map-widget:not(.is-compact):not(.is-fullscreen) .dmp-map-detail {
        order: 2;
        flex: none;
        max-height: none;
        overflow: visible;
        background: #ffffff;
        border-top: 1px solid #e5e9ec;
    }

    /* The card strip (also used in the full-screen map's bottom panel) */
    .dmp-map-widget .dmp-map-list {
        order: 2;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        max-height: none;
        padding: 14px 16px 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        border-top: 1px solid #e5e9ec;
    }
    .dmp-map-widget.is-fullscreen .dmp-map-list {
        flex: 0 0 auto;
        border-top: none;
    }
    .dmp-map-widget .dmp-map-list .dmp-map-empty {
        flex: 1 0 100%;
        margin: 0;
    }
    .dmp-map-widget .dmp-map-list .dmp-map-card {
        flex: 0 0 156px;
        width: 156px;
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
        border-radius: 14px;
        scroll-snap-align: start;
    }
    .dmp-map-widget .dmp-map-list .dmp-map-card-media {
        display: block;
        flex: 0 0 auto;
        width: 100%;
        height: 104px;
        background-color: #eef1f3;
        background-size: cover;
        background-position: center;
    }
    .dmp-map-widget .dmp-map-list .dmp-map-card-media.is-empty {
        background-image: linear-gradient(135deg, #e6f7f5 0%, #eef1f3 100%);
    }
    .dmp-map-widget .dmp-map-list .dmp-map-card-cat {
        margin: 10px 10px 4px;
        font-size: 9px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dmp-map-widget .dmp-map-list .dmp-map-card h4 {
        margin: 0 10px 3px;
        font-size: 11px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dmp-map-widget .dmp-map-list .dmp-map-card p {
        margin: 0 10px 10px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Full-screen map on phones: shorter bottom panel now the cards run sideways */
    .dmp-map-widget.is-fullscreen .dmp-map-panel {
        max-height: none;
    }
    .dmp-map-widget.is-fullscreen .dmp-map-sheet-toggle {
        display: none !important;
    }
    .dmp-map-widget.is-fullscreen .dmp-map-heading {
        margin-bottom: 0;
    }
    .dmp-map-widget.is-fullscreen .dmp-map-detail {
        max-height: 55vh;
    }

    /* Compact venue map opened full screen: lift its buttons above the Filters pill */
    .dmp-map-widget.is-compact.is-fullscreen .dmp-map-actions {
        bottom: 72px;
    }
}