/*
 * Engineering Edge — homepage metrics banner (frontpage.html, #ee-metrics-banner).
 *
 * WCAG 2.2 AA part 2 (7 Nov 2026): the tiles were a fixed 100px-tall flex row
 * of inline styles that could not wrap — 679px wide at a 320px viewport on the
 * live homepage (1.4.10 Reflow) and clipped with text spacing applied (1.4.12).
 * Now: min-height instead of height, the row wraps and centres, and the tiles
 * are a list. The desktop look is unchanged: #64748b band, #566071 tiles with a
 * 3px brand-colour top border (set inline from the metric data), white Inter
 * text (number 18px/700 — 6.35:1 on the tile, caption 12px). The white focus
 * ring for the tiles is the site-wide one (site.overrides, #ee-metrics-banner).
 */
.ee-metrics {
  box-sizing: border-box;
  width: 100%;
  min-height: 100px;
  background-color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-family: "Inter", sans-serif;
  color: #ffffff;
}
.ee-metrics-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ee-metrics-row > li {
  display: flex;
  margin: 0;
  padding: 0;
}
.ee-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background-color: #566071;
  border-top: 3px solid currentColor; /* colour per metric, inline */
  border-radius: 8px;
  padding: 6px 12px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}
.ee-metric:hover,
.ee-metric:focus-visible {
  background-color: #485060;
  color: #ffffff;
  text-decoration: none;
}
.ee-metric-n {
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
}
.ee-metric-l {
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
}
.ee-metrics-msg {
  font-size: 12px;
  color: #ffffff;
}