/* Statistics & Trends — pages/publications/statistics.php */

.stats-page__intro {
  max-width: 68em;
  color: #444;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stats-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e2e2);
  border-top: 4px solid var(--wine, #7a1442);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.stats-card strong {
  font-size: 2rem;
  line-height: 1;
  color: var(--wine, #7a1442);
  font-variant-numeric: tabular-nums;
}

.stats-card span {
  font-size: .8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stats-panel {
  padding-top: 1.5rem;
}

.stats-block {
  margin-bottom: 2rem;
}

.stats-block__note {
  font-size: .82rem;
  color: #777;
  line-height: 1.6;
  margin: .6rem 0 0;
  max-width: 70ch;
}

.stats-block__note a {
  color: var(--wine, #7a1442);
}

.stats-block__heading {
  font-size: 1.05rem;
  color: var(--wine-dark, #59102f);
  border-bottom: 2px solid var(--line-wine, #e3c3d3);
  padding-bottom: .5rem;
  margin: 0 0 1rem;
}

.stats-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.stats-chart-wrap {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 8px;
  padding: 1.25rem;
  height: 320px;
  position: relative;
}

.stats-chart-wrap--tall {
  height: 380px;
}

.stats-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.stats-chart-wrap.is-empty::after {
  content: attr(data-note);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: .85rem;
  text-align: center;
  padding: 1rem;
}
.stats-chart-wrap.is-empty:not([data-note])::after {
  content: "Not enough data yet";
}

/* When a chart falls back to a table, the box must grow to the data rather
   than clipping it to the chart's fixed height. */
.stats-chart-wrap.is-table {
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}
.stats-chart-wrap.is-table .dtable-wrap { margin: 0; }

.stats-page__note {
  max-width: 68em;
  font-size: .82rem;
  color: #777;
  line-height: 1.6;
  border-top: 1px solid var(--line, #e2e2e2);
  padding-top: 1.25rem;
  margin-top: 1rem;
}

@media (max-width: 860px) {
  .stats-grid-2 { grid-template-columns: 1fr; }
}