/* ═══════════════════════════════════════════════════════════════════════════
   Prophecy — Recruitment Board + Scrim Finder (Phase 7)
   Loaded on recruitment.php and scrim-finder.php
   (depends on profiles.css + teams.css + search.css shared pieces)
   ═══════════════════════════════════════════════════════════════════════════ */

.rb-page { padding-top: calc(var(--nav-h, 72px) + 40px); }

/* ── Listing / slot cards ─────────────────────────────────────────────── */
.rb-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
}
.rb-card {
	display: flex; flex-direction: column; gap: 10px;
	background: var(--bg2); border: 1px solid var(--border);
	border-radius: 13px; padding: 16px 18px; clip-path: var(--blade-sm);
	transition: border-color .18s, transform .18s;
}
.rb-card:hover { border-color: rgba(255, 243, 0, .3); transform: translateY(-2px); }
.rb-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rb-type {
	font-family: var(--font-h); font-size: .6rem; font-weight: 900;
	letter-spacing: .12em; padding: 3px 9px; border-radius: 6px;
}
.rb-type--lfp { background: rgba(255, 243, 0, .12); color: var(--accent); border: 1px solid rgba(255, 243, 0, .3); }
.rb-type--lft { background: rgba(88, 101, 242, .14); color: #8b96ff; border: 1px solid rgba(88, 101, 242, .35); }
.rb-who {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-ui); font-size: .86rem; font-weight: 700;
	color: var(--text); text-decoration: none; letter-spacing: .02em;
	min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.rb-who:hover { color: var(--accent); }
.rb-who img { border-radius: 6px; }
.rb-when { margin-left: auto; font-family: var(--font-ui); font-size: .64rem; color: var(--text3); white-space: nowrap; }
.rb-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.rb-avail { font-size: .78rem; color: var(--text2); margin: 0; }
.rb-details { font-size: .78rem; line-height: 1.6; color: var(--text3); margin: 0; }
.rb-card-foot { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; }
.rb-apps { padding: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 640px) {
	.rb-grid { grid-template-columns: 1fr; }
}