/* ============================================================
   components/callout.css
   One strip: a sentence and one link, on a tinted ground. It is
   what a section says to a reader who has finished reading it,
   which is why every user of it sits at the BOTTOM of a page.

   It is the generic form of .rfi-magcall (components/magazine.css),
   which is the same shape under a magazine-specific name and
   predates it. The two are not merged here: /magazine/ is not in
   this change and a shared rule that only one page is verified
   against is worse than a duplicate. When that strip is next
   touched, it becomes a .rfi-callout and its rules go.
   ============================================================ */

/* Margin-top and no margin-bottom: it always follows content (a grid, a
   pagination row) and is always the last thing in its column. flex-wrap is the
   whole narrow-screen story: the link drops onto its own line under the sentence
   and nothing else moves, so this component needs no media query. */
.rfi-callout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: 28px; padding: 14px 16px;
  background: var(--rfi-navy-tint);
  border: 1px solid var(--rfi-border);
  border-radius: var(--rfi-radius);
  font-size: 14px; line-height: 1.5;
}
.rfi-callout__text { color: var(--rfi-text); }
/* white-space: nowrap keeps the label and its arrow together. */
.rfi-callout__link {
  font-family: var(--rfi-font-ui); font-weight: 600; white-space: nowrap;
  color: var(--rfi-navy); text-decoration: underline; text-underline-offset: 2px;
}
.rfi-callout__link:hover { color: var(--rfi-teal); }