/* Styles for the two generated "authority" pages: /press and
   /sa-driver-fuel-data.

   Split from seo.css on purpose. These pages are generated from
   data/entity.json and data/driver-data-study.current.json, and they are the
   two pages other people are expected to link to. Keeping their styles in their
   own file means an edit to the calculator pages can never reflow the page a
   journalist has quoted.

   Classes follow the tokens in seo.css (--text, --muted, --line, --green-dark)
   so the two files read as one site. */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
  margin: 1.6rem 0 2rem;
}

.stat {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-dark);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: #fff;
}

.stat strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--green-dark);
}

.stat span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.6rem;
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--muted);
  padding-bottom: 0.4rem;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-size: 0.95rem;
}

.data-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.data-table .num {
  text-align: right;
}

.fact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.fact-table th,
.fact-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.fact-table th {
  width: 34%;
  color: var(--muted);
  font-weight: 600;
}

.press-block,
.press-founder {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin: 1.4rem 0;
  background: #fff;
}

.press-block h2,
.press-founder h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.press-founder-empty {
  border-style: dashed;
  background: transparent;
}

.press-founder-role {
  color: var(--muted);
  font-weight: 600;
  margin-top: -0.2rem;
}

.press-back {
  margin-top: 2rem;
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .stat-row {
    grid-template-columns: 1fr;
  }

  .fact-table th {
    width: 45%;
  }
}