/* ============================================================
   templates/topic-hub.css
   The hub layer over an activated topic page: the header here,
   the cases and insights blocks as they arrive. Composition
   only; it reads components and owns none.

   It sits ABOVE the grid, like .rfi-listing__head it replaces,
   so the grid's first item is still the filter panel and the
   rail still aligns with it. Nothing here reaches inside the
   feed: the filter JS rewrites #rfi-news-list and never touches
   this block, which is why the layer survives filtering with no
   work on our side.
   ============================================================ */

/* The header. Name and counts on the left, the partner slot pushed to the right, both
   baseline-aligned with the H1 the way the listing head aligns its count line. */
.rfi-hub {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 16px;
}

.rfi-hub__lead { min-width: 0; }

.rfi-hub__lead .rfi-t-h1 { margin: 0; }

/* The counts read as one quiet line under the name, not as three badges. They are a fact
   about the page, and a reader glances at them once; competing with the H1 would be the
   same mistake the listing H1 comment warns about in the other direction. */
.rfi-hub__counts {
  margin: 6px 0 0;
  font-family: var(--rfi-font-ui);
  font-size: 13.5px;
  color: var(--rfi-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

/* The separator is drawn rather than typed, so no template concatenates a punctuation mark
   and no translation has to carry one. A count that is absent (zero is never printed) takes
   its separator with it, because the rule keys on the element before it. */
.rfi-hub__count + .rfi-hub__count::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 9px;
  border-radius: 50%;
  background: var(--rfi-text-3);
  vertical-align: middle;
}

/* --- topic partner ---------------------------------------------------------------- */
/* Nothing renders here until a partner exists; these rules wait for it. The plate matches
   the site's surface treatment so the slot cannot read as an advertisement pasted on top. */
.rfi-hub__partner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex: 0 0 auto;
}

.rfi-hub__partner-label { display: block; }

.rfi-hub__partner-body {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  background: var(--rfi-surface);
  border: 1px solid var(--rfi-border);
  border-radius: var(--rfi-radius-sm);
  text-decoration: none;
  color: var(--rfi-text);
  transition: transform .15s ease, box-shadow .15s ease;
}

a.rfi-hub__partner-body:hover {
  transform: var(--rfi-lift);
  box-shadow: var(--rfi-shadow);
}

.rfi-hub__partner-logo {
  display: block;
  max-height: 34px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

.rfi-hub__partner-name {
  font-family: var(--rfi-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

/* Narrow screens: the partner slot drops under the name rather than squeezing it. The
   mobile layer (mobile.css) owns the <=768px pass for the site; this is the layout's own
   reflow at the width the two columns stop fitting, which is narrower than that. */
@media (max-width: 620px) {
  .rfi-hub { align-items: flex-start; }
  .rfi-hub__partner { width: 100%; }
}

/* --- cases on this topic ----------------------------------------------------------- */
/* Its own card, not components/card.php, because that one carries no figure slot and
   adding one would reach every surface on the site to serve this block. The SURFACE
   treatment is copied from it on purpose (same white, same radius, same shadow, same
   lift on hover), so the two read as one family; what differs is the figure, which is
   the whole reason this block exists. */
.rfi-casecard {
  display: flex;
  flex-direction: column;
  background: var(--rfi-surface);
  border-radius: var(--rfi-radius);
  box-shadow: var(--rfi-shadow);
  overflow: hidden;
  text-decoration: none;
  color: var(--rfi-text);
  transition: box-shadow .16s ease, transform .16s ease;
}

.rfi-casecard:hover { box-shadow: var(--rfi-shadow-up); transform: var(--rfi-lift); }
.rfi-casecard:hover .rfi-casecard__title { color: var(--rfi-teal); }

/* The row. NOT .rfi-grid3: three fixed columns left an empty third when the topic had two
   cases, and would leave two empty when it has one. Flex with growing items instead, the
   same mechanism the case page uses for its figure row, so the width is divided by however
   many cards there are rather than by a number decided in advance. The basis is what makes
   a narrow screen wrap without a media query: below roughly two bases plus a gap, the last
   card drops to its own line. */
.rfi-hub-cases__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;   /* the default, stated: it is what makes the cards one height */
  gap: var(--rfi-gap);
}

.rfi-hub-cases__row > .rfi-casecard { flex: 1 1 280px; min-width: 0; }

/* The PICTURE uses .rfi-card__image, the content card's own class, so its ratio and crop come
   from components/card.css. There is no copy of those values here on purpose: "the same shape
   as the news cards below" has to stay true after somebody changes that file, and two sets of
   numbers that agree today are not the same thing as one set read twice. */

.rfi-casecard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 14px var(--rfi-pad-card) var(--rfi-pad-card);
}

/* The figure leads, so it needs air under it and none above: it is the first thing in
   the body. .rfi-metrics__item brings the column layout and the type from
   components/case.css; nothing about its SIZE is restated here, deliberately, so a
   figure on a card and the same figure on the case page cannot drift apart. */
.rfi-casecard__figure { margin-bottom: 2px; }

.rfi-casecard__title {
  font-family: var(--rfi-font-ui);
  font-size: var(--rfi-card-title);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  transition: color .15s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* The company sits at the foot of the card, pushed there so a short title and a long one
   still put the attribution on the same line across a row. */
.rfi-casecard__company {
  font-size: var(--rfi-meta);
  color: var(--rfi-text-3);
  margin-top: auto;
  padding-top: 8px;
}