/* Tax Value per Acre — page-specific visualization hierarchy and responsive sizing. */

.per-acre-map-intro { max-width: 860px; }
body { overflow-x: hidden; }

#map, #charts {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}


#map .map-wrapper iframe { height: 640px; }

.map-links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  margin-top: .7rem;
  font-size: .84rem;
}

.charts-grid.charts-stack,
.chart-card,
.chart-head,
.echart {
  min-width: 0;
  max-width: 100%;
}

.chart-card { overflow: hidden; }

.chart-head h2 {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chart-head {
  padding: 1.15rem 1.25rem .35rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
}

.chart-kicker {
  margin: 0 0 .2rem;
  color: #8a5a00;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chart-head h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.15;
}

.chart-head p:last-child {
  max-width: 760px;
  margin: .45rem 0 .35rem;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.5;
}

#c-spotlight { height: 420px; }
#c-lotsize { height: 460px; }
#c-landuse { height: 455px; }
#c-landuse-front { height: 455px; }

/* Spotlight lives in its own section, not a chart-card, so give it a light frame. */
.chart-embed {
  margin-top: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  padding: .6rem .6rem .25rem;
  overflow: hidden;
}
.chart-note {
  margin: .1rem .65rem .55rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* Standalone chart-cards (one per section) need their own top spacing. */
section > .chart-card { margin-top: 1.25rem; }

.chart-card figcaption { line-height: 1.55; }
.chart-card figcaption strong {
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}


@media (max-width: 680px) {
  .charts-grid.charts-stack { display: block; width: 100%; }
  .chart-card + .chart-card { margin-top: 1.25rem; }
  #map .map-wrapper iframe { height: 510px; }
  .map-tips { font-size: .78rem; }
  .chart-head { padding: 1rem .95rem .25rem; }
  .chart-head h2 { font-size: 1.15rem; }
  .chart-head p:last-child { font-size: .84rem; }
  .chart-card .echart { padding: .35rem; }
  #c-spotlight { height: 500px; }
  #c-lotsize { height: 520px; }
  #c-landuse { height: 480px; }
  #c-landuse-front { height: 480px; }
}