/* ── ff Venue map ───────────────────────────────────────────────────────────
   Styles for the calendar block's `venue-map` variant (ff-venuemap.js).

   Everything here reads the --fnf-* theme contract rather than fixed colours,
   so the map's chrome, popups and list follow the site's theme — including on
   a dark or brand-coloured section band, where Leaflet's own defaults (white
   popups, dark text) would otherwise be the one part of the page that ignores
   the theme.

   Leaflet's own stylesheet is loaded on demand by ff-venuemap.js; the rules
   below only override it, so load order between the two does not matter (the
   `.ff-venuemap` ancestor keeps these selectors more specific).
   ────────────────────────────────────────────────────────────────────────── */

.ff-venuemap {
    width: 100%;
}

.ff-venuemap-canvas {
    width: 100%;
    min-height: 240px;
    border-radius: var(--fnf-radius-md, .5rem);
    /* A map is a big flat rectangle; a hairline keeps it from bleeding into a
       same-coloured section band. */
    border: 1px solid var(--fnf-color-border, #dee2e6);
    /* The tile layer paints over this, but it shows while tiles load — grey
       flash on a dark section reads as broken. */
    background: var(--fnf-color-surface-alt, #f4f6f8);
    /* Leaflet writes its own z-index stack on panes/controls; a local stacking
       context keeps those from climbing over sticky headers or modals. */
    isolation: isolate;
    z-index: 0;
}

.ff-venuemap-empty {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    color: inherit;
    opacity: .7;
}

/* ── Popup ───────────────────────────────────────────────────────────────── */
/* Leaflet's popup chrome is styled on .leaflet-popup-content-wrapper, outside
   our own markup, so these have to reach out of .ff-venuemap-popup and up. */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--fnf-color-bg, #fff);
    color: var(--fnf-color-text, #212529);
}

.leaflet-popup-content {
    margin: 0;
    /* Leaflet sets an inline width on this element from maxWidth; without
       min-width:0 a long unbroken address can still push it wider. */
    min-width: 0;
}

.ff-venuemap-popup {
    padding: .85rem .95rem;
    font-family: var(--fnf-font-body, inherit);
    font-size: .95rem;
    line-height: 1.45;
}

.ff-venuemap-popup__photo {
    display: block;
    width: calc(100% + 1.9rem);
    margin: -.85rem -.95rem .7rem;
    height: 130px;
    object-fit: cover;
    border-radius: var(--fnf-radius-md, .5rem) var(--fnf-radius-md, .5rem) 0 0;
}

.ff-venuemap-popup__name {
    margin: 0 0 .25rem;
    font-family: var(--fnf-font-heading, inherit);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fnf-color-heading, inherit);
}

.ff-venuemap-popup__address {
    margin: 0 0 .5rem;
    font-size: .85rem;
    /* Deliberately not Bootstrap's .text-muted — that is a fixed grey that
       ignores the theme. See the colored-band guard note in CLAUDE.md. */
    color: inherit;
    opacity: .7;
}

.ff-venuemap-popup__story {
    margin: 0 0 .5rem;
}

.ff-venuemap-popup__story > :last-child { margin-bottom: 0; }

.ff-venuemap-popup__directions {
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: inherit;
    opacity: .75;
}

.ff-venuemap-popup__events {
    margin: .6rem 0 .5rem;
    padding: .5rem 0 0;
    list-style: none;
    border-top: 1px solid var(--fnf-color-border, #dee2e6);
    font-size: .85rem;
    /* A venue with a long history would otherwise make the popup taller than
       the map. */
    max-height: 9rem;
    overflow-y: auto;
}

.ff-venuemap-popup__events li { margin-bottom: .2rem; }

.ff-venuemap-popup__event-date {
    color: inherit;
    opacity: .65;
    white-space: nowrap;
}

.ff-venuemap-popup__more {
    color: inherit;
    opacity: .6;
    font-style: italic;
}

.ff-venuemap-popup__links {
    margin: .5rem 0 0;
    display: flex;
    gap: .75rem;
    font-size: .85rem;
}

.ff-venuemap-popup a {
    color: var(--fnf-color-primary, #4f46e5);
}

/* ── The list under the map ──────────────────────────────────────────────── */

.ff-venuemap-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    /* Container query units aren't needed here — the list is plain text that
       reflows; auto-fill keeps one column on a phone and several on a wide
       section without a media query. */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .5rem 1.5rem;
}

.ff-venuemap-list__item {
    display: flex;
    flex-direction: column;
    padding: .4rem 0;
    border-bottom: 1px solid var(--fnf-color-border, #dee2e6);
    /* Grid items default to min-width:auto, which lets a long venue name
       inflate the track. See CLAUDE.md edit-mode rendering rule 7. */
    min-width: 0;
}

.ff-venuemap-list__name {
    /* A real <button> so it is keyboard-reachable and never intercepted by the
       Studio preview's catch-all anchor handler. */
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    font: inherit;
    font-weight: 600;
    color: var(--fnf-color-primary, #4f46e5);
    cursor: pointer;
}

.ff-venuemap-list__name:hover { text-decoration: underline; }

.ff-venuemap-list__address,
.ff-venuemap-list__count {
    font-size: .85rem;
    color: inherit;
    opacity: .7;
}

/* ── Colored bands ───────────────────────────────────────────────────────── */
/* On a dark / primary / accent section the list's link colour is the band's own
   background, so it disappears — the same trap the base stylesheet's
   brand-colored-utility guard handles for Bootstrap's utilities. */

.fnf-section--bg-dark    .ff-venuemap-list__name,
.fnf-section--bg-primary .ff-venuemap-list__name,
.fnf-section--bg-accent  .ff-venuemap-list__name {
    color: inherit;
    text-decoration: underline;
}

.fnf-section--bg-dark    .ff-venuemap-canvas,
.fnf-section--bg-primary .ff-venuemap-canvas,
.fnf-section--bg-accent  .ff-venuemap-canvas {
    border-color: rgba(255, 255, 255, .25);
}