/* THE biff promo card + its strip — shared by the Directory's Featured strip and the
   home page's Top Performing Biffs (biffs/_featured_card.html.erb). One card design
   everywhere (user decision 2026-09-08) — style it HERE, never in a caller's <style>.

   All card styling is CLASSES (.dfc-*), never inline — inline styles are unreachable
   by these media queries (CLAUDE.md's inline-style trap). The strip's column count is
   the --strip-cols custom property, set inline by each caller (a custom property is
   NOT the trap: the ≤820px rule overrides grid-template-columns itself, and wins). */

.dir-featured-strip { display: grid; grid-template-columns: repeat(var(--strip-cols, 3), minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .dir-featured-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dir-featured-card {
  position: relative; /* anchors the .dfc-rank corner badge */
  min-width: 0;
  display: block;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
}
/* Rank corner badge — only when a caller passes ranked: true (home Top Biffs).
   Gold/silver/bronze, carried over from the old hero cards. */
.dir-featured-card.is-ranked .dfc-head { padding-right: 56px; } /* the name's ellipsis stops short of the badge */
.dfc-rank {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #000000;
}
.dfc-rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3); }
.dfc-rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.dfc-rank-3 { background: linear-gradient(135deg, #cd7c3a, #b45309); }

.dfc-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; }
.dfc-avatar {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px;
  background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(139,92,246,0.25));
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.dfc-id { min-width: 0; }
.dfc-name {
  font-size: 16px; font-weight: 800; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dfc-since { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
/* The window these figures cover, stated rather than implied. An eyebrow, not a badge: caps and
   open tracking put it in the same voice as the card's other labels without competing with them. */
.dfc-window {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); text-align: center; padding: 9px 12px 0;
}
.dfc-stats { display: flex; border-top: 1px solid var(--bg-tertiary); }
/* Biff Score cell — the shared ring (leaderboard.css owns its anatomy), sized for this card. */
.dfc-score { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.dir-featured-card .lb-ring { width: 40px; height: 40px; margin-top: 1px; }
.dir-featured-card .lb-ring-num { font-size: 12px; }
.dfc-score-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 4px;
}
.dfc-stat { flex: 1; text-align: center; padding: 13px 6px; }
.dfc-stat + .dfc-stat { border-left: 1px solid var(--bg-tertiary); }
.dfc-stat-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  color: var(--text-secondary); text-transform: uppercase; margin-bottom: 4px;
}
.dfc-stat-num { font-size: 22px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* "No data in this window" — recessive, so an empty period reads as absence, not as a result. */
.dfc-stat-none { color: var(--text-muted); }
.dfc-profit { text-align: center; padding: 13px 6px; border-top: 1px solid var(--bg-tertiary); background: rgba(255,255,255,0.02); }
.dfc-unit { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.dfc-cta { padding: 14px; border-top: 1px solid var(--bg-tertiary); }
.dfc-cta-btn {
  background: var(--accent-primary); color: var(--bg-primary);
  font-weight: 800; font-size: 15px; text-align: center;
  padding: 12px 0; border-radius: 10px;
}
.dfc-fineprint {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-align: center; margin-top: 9px; line-height: 1.4;
}

/* Compact two-up card ≤767px: same anatomy at half the height. */
@media (max-width: 767px) {
  .dfc-window { font-size: 8.5px; letter-spacing: 0.06em; padding: 7px 8px 0; }
  .dir-featured-card .lb-ring { width: 32px; height: 32px; }
  .dir-featured-card .lb-ring-num { font-size: 10px; }
  .dfc-score-sub { font-size: 8px; margin-top: 3px; }
  .dir-featured-strip { gap: 10px; }
  .dir-featured-card.is-ranked .dfc-head { padding-right: 38px; }
  .dfc-rank { top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 6px; font-size: 10.5px; }
  .dfc-head { gap: 9px; padding: 11px 12px 9px; }
  .dfc-avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 20px; }
  .dfc-name { font-size: 13.5px; }
  .dfc-since { font-size: 10px; margin-top: 1px; }
  .dfc-stat { padding: 8px 4px; }
  .dfc-stat-label { font-size: 8.5px; margin-bottom: 2px; letter-spacing: 0.04em; }
  .dfc-stat-num { font-size: 15px; }
  .dfc-profit { padding: 8px 4px; }
  .dfc-unit { font-size: 11px; }
  .dfc-cta { padding: 9px 10px 11px; }
  .dfc-cta-btn { font-size: 12.5px; padding: 8px 0; border-radius: 8px; }
  .dfc-fineprint { display: none; } /* the card sells; the small print lives on the profile */
}