/* ============================================================
   components/case.css
   The case page: the metrics block and its attribution line, the
   fact row, the paid-work disclosure, the issue link.
   Composition only; every colour and size is a token.
   ============================================================ */

/* --- metrics ------------------------------------------------------------------- */
.rfi-metrics { display: grid; gap: var(--rfi-gap); margin: 24px 0 0; }

/* One or two figures take a full-measure card each: a lone card sitting in a third of
   the row reads as a leftover from a grid that lost its other two. */
.rfi-metrics--wide { grid-template-columns: 1fr; }
.rfi-metrics--grid { grid-template-columns: repeat(3, 1fr); }

.rfi-metrics__item {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 18px 20px;
  background: var(--rfi-surface);
  border: 1px solid var(--rfi-border);
  border-radius: var(--rfi-radius);
}

.rfi-metrics__label {
  font-family: var(--rfi-font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; color: var(--rfi-text-3);
}

.rfi-metrics__value {
  font-family: var(--rfi-font-ui); font-size: 30px; font-weight: 700;
  line-height: 1.1; color: var(--rfi-text); overflow-wrap: anywhere;
}

.rfi-metrics__unit { margin-left: 6px; font-size: 16px; font-weight: 600; color: var(--rfi-text-2); }

/* The attribution line qualifies the figures above it, so it is quiet and sits close to
   them. Quiet is not optional-looking: when it prints, it prints in full. */
.rfi-metrics__attrib {
  margin: 12px 0 0;
  font-family: var(--rfi-font-ui); font-size: 12.5px; line-height: 1.5;
  color: var(--rfi-text-2);
}

/* --- fact row ------------------------------------------------------------------ */
.rfi-factrow {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin: 20px 0 0; padding: 14px 0;
  border-top: 1px solid var(--rfi-border);
  border-bottom: 1px solid var(--rfi-border);
}

.rfi-factrow__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.rfi-factrow__label {
  font-family: var(--rfi-font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; color: var(--rfi-text-3);
}

.rfi-factrow__value {
  font-family: var(--rfi-font-ui); font-size: 14.5px; font-weight: 600;
  color: var(--rfi-text); overflow-wrap: anywhere;
}

/* --- disclosure ---------------------------------------------------------------- */
/* The template prints this on every case, so it is styled to be read: the body's own
   measure, a rule above it, and not so faint that it reads as boilerplate. */
.rfi-article__disclosure {
  max-width: var(--rfi-measure); margin: 24px auto 0; padding-top: 14px;
  border-top: 1px solid var(--rfi-border);
  font-family: var(--rfi-font-ui); font-size: 12.5px; line-height: 1.5;
  color: var(--rfi-text-2);
}

/* --- the issue link ------------------------------------------------------------ */
.rfi-caseissue { margin: 0; font-family: var(--rfi-font-ui); font-size: 14.5px; }
.rfi-caseissue a { color: var(--rfi-navy); }
.rfi-caseissue a:hover { color: var(--rfi-teal); }

@media (max-width: 768px) {
  .rfi-metrics--grid { grid-template-columns: 1fr; }
  .rfi-metrics__value { font-size: 26px; }
}