/* =========================================================================
   page-system.css — shared styles for individual system detail pages
   (systems/monticello-transfer-station.html, taylor-montgomery.html, etc.)
   All canonical tokens, .card, .btn, .pill, .container come from
   foundation.css, layout.css, and design-system.css.
   ========================================================================= */

main a { color: var(--hvb-teal); text-decoration: none; }
main a:hover { text-decoration: underline; }

/* ── Asymmetric two-column layout ────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: start;
}

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

/* ── Diagram image container ─────────────────────────────────────────────── */
.imgwrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(14, 59, 46, 0.12);
  background: #fff;
}

.imgcap {
  padding: 10px 12px;
  border-top: 1px solid rgba(14, 59, 46, 0.10);
  color: var(--hvb-slate);
  font-size: 13.5px;
}

/* ── Quick-tags row ──────────────────────────────────────────────────────── */
.kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Amber callout ───────────────────────────────────────────────────────── */
.callout {
  border-left: 4px solid rgba(233, 169, 35, 0.65);
  background: rgba(233, 169, 35, 0.10);
  padding: 12px;
  border-radius: 12px;
  margin-top: 12px;
  color: var(--hvb-slate);
}

/* ── Button group ────────────────────────────────────────────────────────── */
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}