/* ============================================================
   components/company-row.css
   A company row in the directory listing. Rows, not cards: a
   reader comparing companies wants the names in ONE column.
   No outer margin on the root; the list owns the gaps.

   PORTED FROM THE DONOR unchanged except for the two comments
   that named files this project does not have. Every token it
   uses is declared in tokens.css: checked value by value, all
   15 of them, rather than assumed from the shared naming.
   ============================================================ */
.rfi-crow {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow);
  padding: 18px 20px; transition: box-shadow .16s, transform .16s;
}
.rfi-crow:hover { box-shadow: var(--rfi-shadow-up); transform: var(--rfi-lift); }
.rfi-crow:hover .rfi-crow__name { color: var(--rfi-teal); }

/* No border around the logo: the mark sits in the slot on the card's own surface,
   not in a boxed frame (owner decision, desktop and mobile). */
.rfi-crow__logo {
  flex: none; border-radius: var(--rfi-radius-sm);
  display: flex; align-items: center; justify-content: center; background: var(--rfi-surface);
  overflow: hidden;
}
.rfi-crow__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.rfi-crow__body { flex: 1; min-width: 0; }
.rfi-crow__top { display: flex; align-items: flex-start; gap: 12px; }
.rfi-crow__head { min-width: 0; }
.rfi-crow__name { display: block; font-family: var(--rfi-font-ui); font-size: 18px; font-weight: 600; line-height: 1.2; }
.rfi-crow__spec { display: block; font-size: 12.5px; color: var(--rfi-text-3); margin-top: 5px; }

/* The row's tier badge is `.rfi-tierbadge--row` in components/tier-badge.css, the
   shared component. `.rfi-crow__tier`, the navy-on-tint chip that was identical for
   every tier, was deleted 2026-08-22 with the tier-badge feature flag; nothing
   emitted it once the flag went. What the row still contributes is placement, and
   that moved into the component as the `--row` modifier: `margin-left: auto` to push
   the badge to the end of `.rfi-crow__top`. */

.rfi-crow__desc {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--rfi-desc); line-height: 1.55; color: var(--rfi-text-2); margin-top: 9px;
}

/* Prominence. A rich row is what a partner is paying for: a bigger logo and a third
   line of description. The donor reads the threshold from config/tier-weights.php
   (directory_row_rich, default silver); there is no such config file here, so the
   threshold is the donor's default named once in holod_company_row_args() and never
   in this stylesheet. The min-height keeps a rich row the same height whether or not
   its description actually fills three lines, so a partner block does not look ragged
   next to the free rows. */
.rfi-crow--rich .rfi-crow__logo { width: 150px; height: 94px; }
.rfi-crow--rich .rfi-crow__desc { -webkit-line-clamp: 3; min-height: calc(1.55em * 3); }
.rfi-crow--plain .rfi-crow__logo { width: 120px; height: 76px; }
.rfi-crow--plain .rfi-crow__desc { -webkit-line-clamp: 2; }

/* Compact: the same row inside a panel rather than in the directory (Featured
   partners on a free profile). It is the same component because it is the same thing,
   a company in a list; only the scale changes with the context. */
.rfi-crow--compact { gap: 16px; padding: 16px 18px; }
.rfi-crow--compact:hover { transform: translateY(-1px); }
.rfi-crow--compact .rfi-crow__logo { width: 120px; height: 76px; }
.rfi-crow--compact .rfi-crow__name { font-size: 16px; }
.rfi-crow--compact .rfi-crow__spec { font-size: 12px; margin-top: 4px; }
.rfi-crow--compact .rfi-crow__desc { font-size: 12.5px; line-height: 1.5; margin-top: 8px; -webkit-line-clamp: 2; }
/* THE COMPACT ROW NO LONGER STEPS THE BADGE DOWN, and the rule that did was deleted
   2026-08-22. It set `font-size: 9px; padding: 3px 8px`, which was a sensible local tune
   while the badge was uppercase, letter-spaced and 10px. After the badge was quietened to
   11px mixed case with 3px 9px padding, this was one of four places that set its type, and
   a component with four sizes is one that cannot be changed in one move. The badge is now
   the same size in the directory, in a panel, on the profile and in the account list. */

.rfi-colist { display: flex; flex-direction: column; gap: 12px; }