/*
  MDC Website v2.0
  File: 23-interactive-map.css
  Purpose: Interactive footprint map, location filters, and map cards.
  Version: Refinement - Footprint Map
*/

.footprint-hero {
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(circle at top left, rgba(26, 95, 122, .22), transparent 34rem),
    linear-gradient(135deg, var(--color-primary, #082c4a) 0%, #0f3f63 52%, #0c5f66 100%);
  color: #fff;
  overflow: hidden;
}
.footprint-hero .page-kicker,
.footprint-hero .eyebrow { color: rgba(255,255,255,.78); }
.footprint-hero h1 { max-width: 940px; color: #fff; }
.footprint-hero .lead { max-width: 820px; color: rgba(255,255,255,.84); }
.footprint-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.footprint-quick-stats .stat-tile {
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  border-radius: 1.25rem;
  backdrop-filter: blur(14px);
}
.footprint-quick-stats strong { display:block; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; }
.footprint-quick-stats span { color: rgba(255,255,255,.74); font-size: .92rem; }

.footprint-shell {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: #f7fafc;
}
.footprint-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.footprint-panel,
.map-panel,
.location-detail-panel {
  border: 1px solid rgba(8, 44, 74, .10);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 18px 50px rgba(8, 44, 74, .08);
}
.footprint-panel { padding: 1.25rem; position: sticky; top: 6rem; }
.footprint-panel h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.footprint-panel p { color: #5b6672; margin-bottom: 1.25rem; }
.filter-stack { display: grid; gap: .95rem; }
.filter-group label { display: block; font-weight: 700; color: #12334c; margin-bottom: .35rem; }
.filter-group select,
.filter-group input {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid rgba(8, 44, 74, .24);
  border-radius: .85rem;
  padding: .75rem .9rem;
  font: inherit;
  background: #fff;
  color: #102a43;
}
.filter-group select:focus,
.filter-group input:focus {
  outline: 3px solid rgba(15, 118, 110, .22);
  border-color: #0f766e;
}
.filter-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.2rem; }
.map-panel { overflow: hidden; }
.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(8, 44, 74, .09);
}
.map-toolbar strong { color: #082c4a; }
.map-legend { display:flex; gap:.8rem; flex-wrap:wrap; font-size:.86rem; color:#5b6672; }
.map-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.map-dot { width:.75rem; height:.75rem; border-radius:50%; display:inline-block; }
.map-dot.active { background:#0f766e; }
.map-dot.completed { background:#c59b2d; }
.map-dot.partner { background:#1a5f7a; }
#mdc-footprint-map {
  min-height: 560px;
  width: 100%;
  background: linear-gradient(135deg, #eaf4f6, #f7fbfd);
}
.map-fallback {
  display:none;
  padding:1.25rem;
  border-top:1px solid rgba(8,44,74,.08);
  color:#4b5b68;
}
.map-fallback.is-visible { display:block; }
.location-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.location-card {
  border: 1px solid rgba(8, 44, 74, .10);
  border-radius: 1.15rem;
  padding: 1.1rem;
  background: #fff;
  box-shadow: 0 12px 34px rgba(8,44,74,.06);
}
.location-card .badge-row { display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:.7rem; }
.location-card h3 { font-size: 1.05rem; margin: 0 0 .4rem; color:#082c4a; }
.location-card p { color:#5b6672; margin-bottom:.7rem; }
.location-meta { display:grid; gap:.35rem; font-size:.9rem; color:#35495b; margin:.75rem 0; }
.location-meta strong { color:#102a43; }
.badge-soft {
  display:inline-flex;
  padding:.28rem .55rem;
  border-radius:999px;
  font-size:.76rem;
  font-weight:700;
  background:#e8f5f1;
  color:#0f766e;
}
.location-detail-panel { margin-top:1.5rem; padding:1.25rem; }
.location-detail-panel h2 { margin-bottom:.4rem; }
.detail-empty { color:#667785; }
.detail-list { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.detail-item { padding:.9rem; border-radius:.9rem; background:#f7fafc; border:1px solid rgba(8,44,74,.08); }
.detail-item strong { display:block; color:#082c4a; margin-bottom:.25rem; }
.leaflet-popup-content-wrapper { border-radius: 1rem; }
.mdc-map-popup h3 { margin: 0 0 .3rem; color:#082c4a; font-size:1rem; }
.mdc-map-popup p { margin:.25rem 0 .65rem; color:#4b5b68; }
.mdc-map-popup a { font-weight:700; color:#0f766e; }
@media (max-width: 980px) {
  .footprint-layout { grid-template-columns: 1fr; }
  .footprint-panel { position: static; }
  .footprint-quick-stats, .location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mdc-footprint-map { min-height: 460px; }
}
@media (max-width: 640px) {
  .footprint-quick-stats, .location-grid, .detail-list { grid-template-columns: 1fr; }
  .map-toolbar { align-items:flex-start; flex-direction:column; }
  #mdc-footprint-map { min-height: 380px; }
}