/* ============================================================
   components/card.css
   The only content card on the site. Feed, related, homepage,
   topic archive, company profile, search results: this one.
   Sets no outer margin: the grid places it.
   ============================================================ */
.rfi-card {
  display: flex;
  flex-direction: column;
  background: var(--rfi-surface);
  border-radius: var(--rfi-radius);
  box-shadow: var(--rfi-shadow);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease;
}
.rfi-card:hover { box-shadow: var(--rfi-shadow-up); transform: var(--rfi-lift); }
.rfi-card:hover .rfi-card__title { color: var(--rfi-teal); }

/* One ratio for every card, whatever the source image happens to be.
   aspect-ratio alone did NOT hold it: the img inside is sized by its own
   intrinsic ratio, and the box grew to whatever the picture was (measured on the
   feed: 3:2 boxes ranging 191.9px to 216.7px tall on real records, so the image
   bottoms in one row missed each other by up to 21px). The img has to be told to
   fill the box and crop; then the ratio is the box's, not the picture's. */
.rfi-card__image { aspect-ratio: 3 / 2; background: var(--rfi-border-soft); overflow: hidden; }
.rfi-card__image img { width: 100%; height: 100%; object-fit: cover; }
/* ---- the two empty-slot fills -----------------------------
   The slot is never blank. These replace the grey migration substitute, and they
   are the theme's own default for ANY empty featured image, not a migration
   artefact: an editor who forgets a picture gets the brand fill, not a hole. */

/* Our story, no picture: the brand fill. The mark is quietened by a dial rather
   than by a second, paler colour, so it can never disagree with the brand navy. */
.rfi-card__image--brand { background: var(--rfi-brandfill-bg); display: flex; align-items: center; justify-content: center; }
.rfi-card__image--brand .rfi-brandfill__mark { width: 44%; height: auto; color: var(--rfi-brandfill-mark); opacity: var(--rfi-brandfill-ink); }

/* A company with no logo: its initials, in the same box the logo would have used.
   Individual, so a panel of them does not read as one owner. */
.rfi-card__image--monogram { background: var(--rfi-monogram-bg); display: flex; align-items: center; justify-content: center; }
.rfi-card__mono { font-family: var(--rfi-font-ui); font-size: 44px; font-weight: 600; letter-spacing: 1.5px; color: var(--rfi-monogram-text); }

/* A company card's picture is its LOGO, not a photograph, and a cropped logo is a
   damaged trademark. It gets the same fixed box (the row is what we are protecting)
   but is fitted inside it whole, on the card's own surface rather than the photo
   well's grey. */
.rfi-card__image--contain { background: var(--rfi-surface); }
.rfi-card__image--contain img { object-fit: contain; padding: 12px; }

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

.rfi-card__kicker {
  font-family: var(--rfi-font-ui);
  font-size: var(--rfi-label);
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--rfi-text-3);           /* a label never outranks what it labels */
}
/* Two lines for the headline, three for the description: a card's text block is a
   fixed shape, so a long headline costs the row nothing. */
.rfi-card__title {
  font-family: var(--rfi-font-ui); font-size: var(--rfi-card-title); font-weight: 500; line-height: 1.35; transition: color .15s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rfi-card__desc  { font-family: var(--rfi-font-text); font-size: var(--rfi-desc); line-height: 1.55; color: var(--rfi-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rfi-card__meta  { font-size: var(--rfi-meta); color: var(--rfi-text-3); margin-top: auto; padding-top: 8px; }

/* ---- partner variant --------------------------------------
   Reads the partner dials in tokens.css. The card stays white by
   default so it holds the same contrast against the grey ground as
   every editorial card: a paid card must never be less present than
   a free one. Set --rfi-partner-fill to the tint to colour it again.

   The rule is painted, not laid out: as a border it would add its own
   width to the card's height, and the whole point of this variant is
   that it costs ZERO extra pixels, so rows stay aligned. At
   --rfi-partner-rule: 0 the bar has no height and disappears, while
   the kicker still names the speaker: prominence is a dial,
   disclosure is not.                                                */
.rfi-card--partner {
  position: relative;
  background: var(--rfi-partner-fill);
  transform: scale(var(--rfi-partner-scale));
}
.rfi-card--partner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  height: var(--rfi-partner-rule);
  background: var(--rfi-partner-accent);
}
/* Keep the dial when the card lifts: transform is one property, so the hover
   must restate the scale or hovering would silently reset it to 1. */
.rfi-card--partner:hover { transform: var(--rfi-lift) scale(var(--rfi-partner-scale)); }
.rfi-card--partner .rfi-card__kicker { color: var(--rfi-partner-accent); }  /* company · Partner */