/* ═══════════════════════════════════════════════════════════════════
   Casino Gurus · Blacklisted Casinos Page (page-blacklisted-casinos.php)  ·  v1.0
   Scoping: .crb-page
   Depends on: homepage-v2.css (CSS custom properties + shared .hpv2-*
   components: hero, section headers, why-cards, content typography,
   FAQ accordion) and casino-ranking.css (FAQ accordion dark-theme
   overrides, disclosure block — reused as-is, not redeclared here).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Blacklisted-casino entry card — new component (logo, name,
   reason badge). Doesn't reuse .hpv2-bonus-card because the data shape
   is different (no value/desc/claims/CTA) — but matches its visual
   language: same border-radius/blur/border/hover-lift recipe. ────── */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(30,42,58,.55) 0%, rgba(22,32,48,.5) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--cg-radius-lg);
  transition: transform var(--cg-trans), box-shadow var(--cg-trans), border-color var(--cg-trans);
}
.bl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.16);
}
.bl-card__logo {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  border-radius: var(--cg-radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.bl-card__body { min-width: 0; }
.bl-card__name {
  margin: 0 0 6px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cg-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 2. Reason badge — color-coded by keyword-matched reason category
   (see bmy_blacklist_reason_badge_class() in the template), using only
   the existing accent tokens already defined in homepage-v2.css. ──── */
.bl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bl-badge i { font-size: .68rem; }
.bl-badge--red    { background: rgba(255,51,51,.13);  color: var(--cg-red);        border: 1px solid rgba(255,51,51,.3); }
.bl-badge--purple { background: rgba(123,47,255,.15); color: #cbb0ff;              border: 1px solid rgba(123,47,255,.35); }
.bl-badge--gold   { background: rgba(212,175,55,.13); color: var(--cg-gold-light); border: 1px solid rgba(212,175,55,.3); }
.bl-badge--neon   { background: rgba(0,212,255,.13);  color: #9fe8ff;              border: 1px solid rgba(0,212,255,.3); }

/* ── 3. "Reasons to Blacklist" cards reuse .hpv2-why-card as-is; this
   just tints the icon slot to the existing danger red, matching the
   old Bootstrap cards' text-danger icons. ───────────────────────────── */
.bl-icon--danger i { color: var(--cg-red); }

/* ── 4. Red-flags educational section — style pass only, copy
   unchanged. Reuses .hpv2-content__inner typography as the base. ──── */
.bl-redflags h3 {
  color: var(--cg-gold-light);
  font-size: 1.05rem;
  margin: 28px 0 8px;
}
.bl-redflags p { margin: 0 0 12px; }
.bl-redflags__note { color: var(--cg-text-dim); font-size: .9rem; }

/* ── 5. Responsive ────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .bl-grid { grid-template-columns: 1fr; }
}