/* =============================================================================
   map.css — the interactive map section (the centerpiece)
   -----------------------------------------------------------------------------
   Layout: a filter panel on the left, the Leaflet map on the right. Stacks
   vertically on narrow screens. The map base layer is kept muted so the colored
   incident markers carry the meaning (per the "simplified / Swiss" map guidance).
   ============================================================================ */

/* The map section spans full width and is tall enough to feel like a workspace. */
#map-section { padding-left: 0; padding-right: 0; }
#map-section .section__inner {
  max-width: var(--content-max);
  padding: 0 var(--space-4); /* consistent horizontal gutter (section padding is stripped above) */
}

.map-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr); /* filters | map                  */
  gap: var(--space-4);
  align-items: stretch;
  height: clamp(520px, calc(100vh - var(--top-chrome-height) - 5rem), 820px);
  margin-top: var(--space-4);
}
@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: 1fr;  /* stack on mobile                */
    height: auto;
  }
}

/* Right column: flex column so the map grows to fill available height and the
   legend always sits below it without overflowing the grid cell. */
.map-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- The Leaflet map container -------------------------------------------- */
#map {
  width: 100%;
  flex: 1 1 auto;     /* grows to fill the column; legend stays pinned below  */
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-muted);
  z-index: 1;
}
@media (max-width: 900px) { #map { min-height: 420px; } }

/* Tone the OSM tiles down to a quiet grayscale so markers pop (Swiss-map look).
   Keep the effect light: heavy filters are expensive while panning/zooming on
   lower-end devices, and the CARTO Positron base layer is already muted. */
.leaflet-tile-pane { filter: grayscale(0.35) brightness(1.02); }

/* --- Incident markers (circle motif) -------------------------------------- */
/* Colors come from JS (per weapon category). Here we just shape them. */
.leaflet-interactive { cursor: pointer; }

/* --- Marker popup styling (brand type) ------------------------------------ */
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
.leaflet-popup-content {
  width: min(600px, calc(100vw - 72px)) !important;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.45;
  margin: var(--space-3);
}
.incident-popup__title {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm);
  color: var(--phr-red); margin-bottom: var(--space-1);
}
.incident-popup__meta { color: var(--color-text-muted); font-size: var(--fs-xs);
  font-family: var(--font-sans); margin-bottom: var(--space-2); }
.incident-popup dl { display: grid; grid-template-columns: auto 1fr;
  gap: 2px var(--space-2); margin: var(--space-2) 0; }
.incident-popup dt { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs); }
.incident-popup dd { margin: 0; font-size: var(--fs-xs); }
/* Scrollable disclosures inside a multi-incident place popup. */
.incident-popup__list {
  display: grid;
  gap: var(--space-1);
  max-height: min(520px, 62vh);
  overflow-y: auto;
  margin: var(--space-2) 0 0;
  padding: 0;
  max-width: none;
}
.incident-popup__case {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--white);
}
.incident-popup__case summary {
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}
.incident-popup__case[open] summary {
  color: var(--phr-red);
  border-bottom: 1px solid var(--color-border);
}
.incident-popup__case p,
.incident-popup__case dl {
  margin: var(--space-2);
}
.incident-popup__case p {
  font-size: var(--fs-sm);
}
.incident-popup__case dl {
  grid-template-columns: 140px minmax(0, 1fr);
}

/* --- Inline media embeds (YouTube / TikTok / IG / X / direct video / images) --
   The popup grows to accommodate video while keeping a readable max-height.
   Iframes keep a 16:9 ratio; images keep their natural aspect ratio.
   Instagram and X posts are tall, so we give them a fixed height that scrolls
   internally inside the iframe (or clips gracefully).                                 */
.incident-popup {
  max-height: min(760px, 82vh);
  overflow-y: auto;
  padding-right: 2px; /* reserve space for the scrollbar so text doesn't jump  */
}

.incident-popup__media-block {
  margin: var(--space-2) 0 var(--space-3);
}

.incident-popup__media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-muted);
}

.incident-popup__media--iframe,
.incident-popup__media--video {
  aspect-ratio: 16 / 9;
}

/* Instagram and X posts are not 16:9; they need a taller, fixed-height box.
   Pointer events stay enabled so users can play/expand embeds; instead the
   popup closes on map drag to keep scroll gestures on the map surface. */
.incident-popup__media--instagram {
  aspect-ratio: auto;
  height: clamp(380px, 50vh, 580px);
}
.incident-popup__media--instagram iframe {
  pointer-events: auto;
}

.incident-popup__media--x {
  aspect-ratio: auto;
  height: clamp(340px, 46vh, 520px);
}
.incident-popup__media--x iframe {
  pointer-events: auto;
}

.media-embed__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.media-embed__image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Additional media links (e.g. a second video or an article) */
.incident-popup__extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.incident-popup__extra {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--phr-red);
  padding: 3px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
}

.incident-popup__extra:hover {
  background: var(--color-bg-muted);
}

/* =============================================================================
   FILTER PANEL
   ============================================================================ */
.filter-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--white);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-sans);
}

/* The panel is a column: header (count) · scrolling body · sticky footer. */
.filter-panel { display: flex; flex-direction: column; padding: 0; }

/* Panel header: live result count. */
.filter-panel__head {
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.filter-count { font-size: var(--fs-sm); color: var(--color-text-muted); }
.filter-count strong { color: var(--phr-red); font-size: var(--fs-lg); }

/* The scrolling list of filter groups. */
.filter-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-3);
}

/* Sticky footer with the two actions (Reset · Export). */
.filter-panel__foot {
  display: flex; gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--white);
}
.filter-panel__foot .btn { flex: 1 1 0; justify-content: center; }

/* --- One collapsible filter group ----------------------------------------
   Built with <details>/<summary> so it works without JS and is keyboard- and
   screen-reader friendly out of the box. */
.filter-group { border-bottom: 1px solid var(--color-border); }
.filter-group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-text);
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after {                 /* rotating chevron             */
  content: "›"; transform: rotate(90deg);
  transition: transform 0.2s var(--ease); color: var(--color-text-muted);
}
.filter-group[open] > summary::after { transform: rotate(-90deg); }
.filter-group__body { padding: 0 0 var(--space-3); }

.filter-group--disabled > summary { color: var(--color-text-muted); cursor: default; }
.filter-group__note { font-size: var(--fs-xs); color: var(--color-text-muted);
  font-style: italic; padding-bottom: var(--space-3); }

/* --- Tree rows (collapsible hierarchy) -----------------------------------
   A row = [chevron] [checkbox + optional swatch + label + count]. Indentation
   is applied inline per depth (no nested borders), keeping deep trees calm. */
.filter-tree { list-style: none; padding: 0; margin: 0; }
.filter-tree li { margin: 0; padding: 0; }
.filter-tree li::before { content: none; }      /* override global bullets       */

.filter-row {
  display: flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius);
}
.filter-row:hover { background: var(--color-bg-muted); }

/* Chevron indicator for a native <details> branch (▸ rotating to ▾). */
.filter-chevron {
  flex: 0 0 auto; width: 18px; height: 28px;
  background: none; border: none; padding: 0;
  color: var(--color-text-muted); font-size: 0;
}
.filter-chevron::before {
  content: "›"; font-size: 14px; display: inline-block;
  transition: transform 0.15s var(--ease);
}
.filter-branch[open] > .filter-summary .filter-chevron::before { transform: rotate(90deg); }
.filter-chevron--leaf { cursor: default; }       /* spacer for leaf rows          */

/* Native disclosure for tree branches. The whole summary row is clickable, but
   the checkbox label stops propagation so it only toggles the checkbox. */
.filter-branch { margin: 0; }
.filter-summary {
  list-style: none;
  cursor: pointer;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary .filter-option { cursor: pointer; }

.filter-option {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 1 1 auto; min-width: 0;
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  font-size: var(--fs-sm); cursor: pointer;
}
.filter-option input { accent-color: var(--phr-red); flex: 0 0 auto; }
.filter-option__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-option .count { margin-left: auto; padding-left: var(--space-2);
  color: var(--color-text-muted); font-size: var(--fs-xs); flex: 0 0 auto; }

/* A small colored dot before weapon options, matching the map marker color. */
.filter-option .swatch {
  width: 0.7em; height: 0.7em; border-radius: 50%; flex: 0 0 auto;
}

/* --- Date range inputs ---------------------------------------------------- */
.filter-daterange { display: grid; gap: var(--space-2); }
.filter-daterange label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.filter-daterange input {
  font-family: var(--font-sans); font-size: var(--fs-sm);
  padding: var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius); width: 100%;
}

/* --- Map legend: weapon colors + size key --------------------------------
   Sits below the map (not in the filter panel) so expanding a filter group
   never has to compete with it for vertical space. Wraps to as many rows as
   it needs on narrow screens. */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-1) 0;
  font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.map-legend .legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.map-legend .swatch { width: 0.8em; height: 0.8em; border-radius: 50%; }

/* "○ size = number of cases" hint, using nested circles. */
.legend-size { display: inline-flex; align-items: center; gap: var(--space-1); }
.legend-size .dot { display: inline-block; border-radius: 50%;
  border: 1px solid var(--color-text-muted); }
.legend-size .dot--sm { width: 7px; height: 7px; }
.legend-size .dot--lg { width: 15px; height: 15px; }

/* The methodological caveat sits below the grid, full width. */
#map-section .note { margin-top: var(--space-3); max-width: none; }

/* Allow the intro paragraph to span the full content width so it balances
   visually with the wide map layout below (overrides the global 68ch measure). */
#map-section .reveal p { max-width: none; }
#map-section .reveal p:not(.kicker) {
  font-size: var(--fs-sm);
}

/* --- Loading / error states ----------------------------------------------- */
.map-status {
  padding: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.map-status--error { color: var(--phr-red); }