/* Docked map card (category + stay popups).
 *
 * A pin popup anchored above its pin gets clipped by the header / banner when
 * the pin sits near the top of the map. Docked popups ignore the pin position
 * and sit as a wide, short card inside the bottom of the map, just above the
 * category rail (--ll-dock-bottom is measured by dockPopup() in
 * category-map-markers.js). The Mapbox popup stays the owner of open/close and
 * button wiring; only its placement and layout change. */

.mapboxgl-popup.ll-card-docked {
    position: absolute;
    top: auto !important;
    left: 50% !important;
    bottom: var(--ll-dock-bottom, 12px);
    transform: translateX(-50%) !important;
    width: min(680px, calc(100% - 24px));
    max-width: none !important;
    z-index: 60; /* above every map pin (markers.css puts pins at 50) */
    animation: ll-card-dock-in 180ms ease-out;
}

@keyframes ll-card-dock-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mapboxgl-popup.ll-card-docked { animation: none; }
}

.mapboxgl-popup:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .mapboxgl-popup-tip {
    display: none;
}

.mapboxgl-popup:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .mapboxgl-popup-content {
    max-width: none !important;
    width: 100%;
    max-height: calc(var(--ll-dock-max-height, 60vh));
    overflow: auto;
}

/* Wide, short layout: image | text | actions. */
:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(150px, 200px);
    grid-template-areas:
        "thumb header  actions"
        "thumb body    actions";
    column-gap: 14px;
    row-gap: 4px;
    padding: 12px 14px;
    align-items: start;
}

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-header { grid-area: header; }

/* Flatten the body so the thumb can take the first column. */
:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-body { display: contents; }
:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-text { grid-area: body; min-width: 0; }

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-thumb {
    grid-area: thumb;
    grid-row: 1 / span 2;
    order: -1;
    width: 88px;
    height: 88px;
}

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-actions {
    grid-area: actions;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: center;
}

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-action { display: flex; flex-direction: column; gap: 8px; }
:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-btn { margin-top: 0; min-height: 44px; }

/* Less writing: one-line title, two-line summary, no repeated address
 * (the header already shows the area), stats on one line. */
:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-title {
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-excerpt {
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-address { display: none; }

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-stats {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 4px;
}

:is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .mapboxgl-popup-close-button {
    top: 6px;
    right: 8px;
    width: 32px;
    height: 32px;
}

/* Phone: image + text on top, the two actions side by side underneath. */
@media (max-width: 560px) {
    :is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "thumb header"
            "thumb body"
            "actions actions";
    }

    :is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-thumb {
        width: 72px;
        height: 72px;
    }

    :is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-actions {
        grid-row: auto;
        flex-direction: row;
    }

    :is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-actions > * { flex: 1 1 0; min-width: 0; }
    :is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-action { flex-direction: row; }
    :is(.mapboxgl-popup.ll-card-docked, #map-news-panel.ll-card-docked-panel) .category-compact-action > * { flex: 1 1 0; }
}

/* Marker card panel (#map-news-panel, category mode) — the card a pin tap opens.
 * Same docked placement; !important beats the floating top-left rules in index.html. */
#map-news-panel.map-news-panel--category.ll-card-docked-panel {
    top: auto !important;
    left: 50% !important;
    bottom: var(--ll-dock-bottom, 12px) !important;
    width: min(680px, calc(100% - 24px)) !important;
    transform: translate(-50%, 0.65rem);
    transform-origin: bottom center;
}

#map-news-panel.map-news-panel--category.ll-card-docked-panel.is-open {
    transform: translateX(-50%);
    max-height: var(--ll-dock-max-height, 60vh);
    overflow-y: auto;
}

#map-news-panel.ll-card-docked-panel .map-news-panel__topbar {
    padding: 10px 10px 0 14px;
}

#map-news-panel.ll-card-docked-panel .category-compact-card {
    padding: 6px 14px 12px;
}

/* The panel hoists the category header into its top bar, so the card is one row. */
#map-news-panel.ll-card-docked-panel .category-compact-card {
    grid-template-areas: "thumb body actions";
}

#map-news-panel.ll-card-docked-panel .category-compact-thumb,
#map-news-panel.ll-card-docked-panel .category-compact-actions {
    grid-row: auto;
}

@media (max-width: 560px) {
    #map-news-panel.ll-card-docked-panel .category-compact-card {
        grid-template-areas:
            "thumb body"
            "actions actions";
    }
}