/* =============================================================================
 * Locations map — styles for templates/home/_map.html.twig and assets/map.js
 *
 * The default state of this block is "no JavaScript": the address list is
 * visible and the map element is display:none. assets/map.js flips it by
 * putting .is-map-ready on the wrapper, and only after Leaflet has drawn
 * successfully. Written this way round because the failure mode of the
 * opposite arrangement — map visible by default — is an empty grey rectangle
 * where the addresses should be.
 *
 * Namespaced `locmap__` rather than `locations__`: home.css already owns
 * .locations__map, the framed wrapper this block is rendered inside. Two files
 * sharing a class name is how a `display: none` in one of them silently blanks
 * a section owned by the other.
 * ========================================================================== */

.locmap {
    display: block;
}

/* ---- The map itself ----------------------------------------------------- */
.locmap__canvas {
    display: none;
}

.locmap.is-map-ready .locmap__canvas {
    display: block;

    /* A map needs an explicit height or it collapses to nothing. aspect-ratio
     * gives it one that follows the column width; min-height keeps it usable
     * on a narrow phone. */
    aspect-ratio: 4 / 3;
    min-height: 20rem;

    /* Leaflet gives its panes and controls z-index values up to 1000. Without
     * a stacking context of its own, a zoom button would paint over the sticky
     * site header (z-index 50) as the page scrolls past. */
    isolation: isolate;
}

@media (min-width: 48rem) {
    .locmap.is-map-ready .locmap__canvas {
        aspect-ratio: 16 / 9;
    }
}

/* Only worth saying once the click-to-zoom behaviour actually exists. */
.locmap__hint {
    display: none;
}

.locmap.is-map-ready .locmap__hint {
    display: block;
    padding: 0.75rem 1rem;
    border-block-start: 1px solid var(--border-app);
    margin: 0;
}

/* ---- Address list ------------------------------------------------------- */
/* Always in the HTML — for crawlers, for reader modes, and for anyone whose
 * script never arrived. Hidden only once the map is genuinely on screen.
 * Rows rather than cards: this list is rendered inside an already-framed box. */
.locmap__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.locmap.is-map-ready .locmap__list {
    display: none;
}

.locmap__item {
    padding: 1rem 1.25rem;
}

.locmap__item + .locmap__item {
    border-block-start: 1px solid var(--border-app);
}

.locmap__name {
    font-size: var(--text-subtitle);
    margin-block-end: 0.25rem;
}

.locmap__address {
    color: var(--muted);
    font-size: var(--text-micro);
    max-width: none;
    margin: 0;
}

/* ---- Leaflet, brought into the site's typography ------------------------ */
/* Leaflet's own stylesheet loads after this one (map.js imports it at runtime),
 * so these two selectors carry an extra class purely to outrank it. Its colours
 * are left alone on purpose: the controls and the attribution bar sit on light
 * tiles in both schemes, and re-theming them for dark mode is how you end up
 * with amber-on-white attribution nobody can read. */
.locmap .leaflet-container {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    background: var(--surface-container);
}

/* Required by ODbL, and never collapsed behind a toggle. */
.locmap .leaflet-control-attribution {
    font-size: 0.6875rem;
}

/* ---- Marker ------------------------------------------------------------- */
/* An inline SVG pin instead of Leaflet's default PNG marker: one less request,
 * it carries the brand amber, and it sidesteps the marker image paths, which
 * are resolved relative to the stylesheet and break as soon as that stylesheet
 * is served from a digested asset URL. */
.map-pin {
    background: none;
    border: 0;
}

/* Explicit dimensions because app.css sets `svg { height: auto }` globally. */
.map-pin svg {
    display: block;
    width: 32px;
    height: 42px;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 27, 0.35));
}

/* ---- Popup -------------------------------------------------------------- */
.map-popup {
    display: grid;
    gap: 0.125rem;
}

.map-popup__name {
    font-size: var(--text-body);
    font-weight: 700;
}

.map-popup__city {
    opacity: 0.75;
}