/* "Where we work" analytics-map block — faithful to mapcn's Analytics Map
   (shadcn card system), themed monochrome for BeEthical.
   Rounded card surfaces, translucent glowing markers, light land. */

.am {
  --am-bg:      #000000;   /* bg-background (outer)   */
  --am-card:    #0e0e10;   /* bg-card / stage         */
  --am-card-2:  #141416;   /* elevated panels         */
  --am-border:  #26262a;   /* hairline borders        */
  --am-fg:      #f6f6f7;   /* primary text            */
  --am-mut:     #8b8c90;   /* muted text              */
  --am-marker:  201, 202, 206;  /* chart-2 (rgb) for markers + bars */
  --am-radius:  0.75rem;   /* rounded-xl              */
  color: var(--am-fg);
  font-family: var(--font-body, 'Roboto', Arial, sans-serif);
  background: var(--am-bg);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  overflow: hidden;
}

/* ---- Map stage ---- */
.am-stage {
  position: relative;
  height: clamp(20rem, 28vw, 27rem);
  background: radial-gradient(130% 100% at 30% -10%, #131315 0%, var(--am-card) 60%, #060607 100%);
  overflow: hidden;
}
/* #am-map (id) keeps precedence over maplibre-gl.css's `.maplibregl-map{position:relative}`
   regardless of stylesheet load order (the map is lazy-loaded, so its CSS lands last). */
#am-map.am-map { position: absolute; inset: 0; }
.am-map canvas { outline: none; }

.am-fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 10rem;
  background: linear-gradient(to bottom, transparent, rgba(6,6,7,.35) 45%, #060607);
  pointer-events: none; z-index: 2;
}

/* MapLibre chrome we don't want */
.am-map .maplibregl-ctrl-attrib,
.am-map .maplibregl-ctrl-logo { display: none !important; }
.am-map .maplibregl-canvas { cursor: grab; }
.am-map .maplibregl-canvas:active { cursor: grabbing; }

/* ---- Markers: uniform translucent glow, size set inline by JS ---- */
.am-marker {
  border-radius: 9999px;
  background: rgba(var(--am-marker), 0.78);
  box-shadow: 0 0 10px 2px rgba(var(--am-marker), 0.18);
  /* NB: never transition `transform` — MapLibre updates it every frame to
     position the marker, so a transition makes the dots lag behind the map. */
  transition: background-color .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.am-marker--t1 { background: rgba(var(--am-marker), 0.82); }
.am-marker:hover { background: rgba(var(--am-marker), 0.98); box-shadow: 0 0 16px 4px rgba(var(--am-marker), 0.4); }

/* Infinite "radar" pulse — on a pseudo-element so it never touches MapLibre's
   positioning transform on the marker itself. */
.am-marker::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: rgba(var(--am-marker), 0.45);
  pointer-events: none;
  animation: am-pulse 2.8s ease-out infinite;
  animation-delay: var(--am-d, 0s);
}
@keyframes am-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .am-marker::after { animation: none; display: none; } }

/* ---- Tooltip ---- */
.am-tip {
  position: absolute; z-index: 6; pointer-events: none;
  transform: translate(-50%, -100%);
  background: #050506; border: 1px solid var(--am-border); border-radius: 0.5rem;
  padding: .45rem .65rem; min-width: 8rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.am-tip__city { font-weight: 600; font-size: .85rem; color: #fff; }
.am-tip__meta { font-size: .72rem; color: var(--am-mut); margin-top: .15rem; }

/* ---- Overview card ---- */
.am-overview {
  position: absolute; bottom: 1rem; top: auto; left: 1rem; z-index: 5; width: 12.5rem;
  background: color-mix(in srgb, var(--am-card) 80%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: .75rem .8rem .85rem;
}
.am-eyebrow {
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--am-mut); margin: 0 0 .4rem;
}
.am-bignum {
  font-family: var(--font-display, 'Helvetica Now', Helvetica, Arial, sans-serif);
  font-weight: 600; font-size: 1.55rem; line-height: 1; margin: 0; color: #fff;
  letter-spacing: -0.01em;
}
.am-spark { display: block; width: 100%; height: 2rem; margin-top: .45rem; }
.am-trend { display: flex; align-items: center; gap: .35rem; font-size: .75rem; margin-top: .5rem; }
.am-trend__ico { color: #fff; }
.am-trend__hi { color: #fff; font-weight: 500; }
.am-trend__mut { color: var(--am-mut); }

.am-overview__split { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid color-mix(in srgb, var(--am-border) 60%, transparent); }
.am-donut { display: block; width: 5rem; height: 5rem; margin: .4rem auto 0; }
.am-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.am-legend__item { text-align: center; }
.am-legend__k {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  font-size: .625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--am-mut); margin: 0;
}
.am-legend__sw { width: .5rem; height: .5rem; border-radius: 9999px; display: inline-block; }
.am-legend__v { font-weight: 500; font-variant-numeric: tabular-nums; margin: .2rem 0 0; color: #fff; }

/* ---- Zoom controls ---- */
.am-ctrl {
  position: absolute; right: 1rem; bottom: 1.25rem; z-index: 5;
  display: flex; flex-direction: column;
  border: 1px solid var(--am-border); border-radius: 0.5rem;
  background: color-mix(in srgb, var(--am-card) 85%, transparent);
  backdrop-filter: blur(6px); overflow: hidden;
}
.am-ctrl__btn {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: none; border: 0; color: var(--am-fg);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.am-ctrl__btn:first-child { border-bottom: 1px solid var(--am-border); }
.am-ctrl__btn:hover { background: #1b1b1e; color: #fff; }

/* ---- Breakdown grid ---- */
.am-grid {
  display: grid; gap: .85rem; padding: .85rem;
  grid-template-columns: repeat(4, 1fr);
}
.am-card {
  background: var(--am-card); border: 1px solid var(--am-border);
  border-radius: var(--am-radius); padding: .85rem;
}
.am-card__title { font-size: .8rem; font-weight: 500; margin: 0 0 .6rem; color: #fff; letter-spacing: 0; text-transform: none; }
.am-card__cols {
  display: flex; justify-content: space-between;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--am-mut); margin-bottom: .5rem;
}
.am-rows { display: flex; flex-direction: column; gap: .1rem; }
.am-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: .16rem .45rem; font-size: .72rem; line-height: 1.2; overflow: hidden; border-radius: 0.375rem;
}
.am-row__bar { position: absolute; inset-block: 0; left: 0; background: rgba(var(--am-marker), 0.2); border-radius: 0.375rem; z-index: 0; }
.am-row__label { position: relative; z-index: 1; color: rgba(246,246,247,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .5rem; }
.am-row__val { position: relative; z-index: 1; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; }
.am-row--list { gap: .55rem; justify-content: flex-start; }
.am-row__dot { width: .45rem; height: .45rem; border-radius: 9999px; flex: none; background: rgba(var(--am-marker), 0.85); }
.am-row__dot--t1 { background: #fff; }
.am-row__dot--t2 { background: rgba(var(--am-marker), 0.7); }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .am-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .am-overview { width: 12.5rem; padding: .8rem; }
  .am-bignum { font-size: 1.6rem; }
  .am-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .am-overview { position: static; width: auto; margin: .75rem; }
  .am-stage { height: 62vw; min-height: 20rem; }
}

/* ---- "Where we work" section: full-width, text left + map right ---- */
.ww-inner { width: 100%; max-width: var(--w-hero); margin-inline: auto; padding-inline: var(--gutter); }
.ww-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  margin-top: 1rem;
}
.ww-text .eyebrow { display: block; margin-bottom: 0.8rem; }
.ww-text h2 { margin: 0 0 1.1rem; }
.ww-text p { max-width: 46ch; }
.ww-text p + p { margin-top: 1rem; }
.ww-map { min-width: 0; }
@media (max-width: 1000px) {
  .ww-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ww-text p { max-width: 65ch; }
}