/*
 * crest.css — Team crest chip styles
 *
 * Linked by (per integration contract §6):
 *   - e/event.html          (SURFACES lane adds <link>)
 *   - events/team.html      (ROLE-VIEW lane adds <link>)
 *   - events/team-detail.html (ROLE-VIEW lane adds <link>)
 *   - events/manage.html    (SURFACES lane adds <link>)
 *   - dashboard.html        (SURFACES lane adds <link>)
 *
 * Shape rules (spikeball-smash brand-system.md):
 *   .crest-chip      → 12px border-radius  (card/content-class asset)
 *   .crest-chip--empty → "?" placeholder, --surface-3 background
 *
 * Size is always set via inline width/height from crestChipHTML({ size }).
 * Size modifier classes are provided as a convenience for static HTML consumers.
 *
 * <!-- FLAG: crest_url lights up after migration 0028 applies -->
 * Until migration 0028 runs in prod, all crests render as .crest-chip--empty
 * placeholders. The chip's styles are fully defined here so the placeholder
 * looks intentional (not broken) at any size.
 */

/* ── Base chip ─────────────────────────────────────────────────────────────── */

.crest-chip {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 12px;         /* card-class per brand-system.md — NOT 0px or 50% */
  object-fit: cover;
  overflow: hidden;
  vertical-align: middle;
  background: var(--surface-3, #1c1c1c); /* visible while image is loading */
}

/* img variant gets border-radius applied directly */
img.crest-chip {
  display: inline-block;
}

/* ── Empty / placeholder chip ───────────────────────────────────────────────── */

.crest-chip--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3, #1c1c1c);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.30);
  vertical-align: middle;
  flex-shrink: 0;
  /* width/height set inline by crestChipHTML */
}

.crest-chip-placeholder-q {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-size: 55%;             /* scales relative to the chip's inline width */
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.30);
  user-select: none;
}

/* ── Convenience size modifiers (use inline width/height from crestChipHTML
      for programmatic sizing; these classes for static HTML consumers) ───── */

/* Bracket chip — 40px */
.crest-chip--sm {
  width: 40px;
  height: 40px;
}

/* Roster / standings row — 28–32px */
.crest-chip--xs {
  width: 28px;
  height: 28px;
  border-radius: 8px; /* scaled down from 12px to stay proportional */
}

/* manage-teams row — 72px */
.crest-chip--md {
  width: 72px;
  height: 72px;
}

/* Team view header — 140px */
.crest-chip--lg {
  width: 140px;
  height: 140px;
}

/* Match popup header — 96px */
.crest-chip--popup {
  width: 96px;
  height: 96px;
}

/* ── Responsive: on very small screens, cap large variants ──────────────────── */

@media (max-width: 374px) {
  .crest-chip--lg {
    width: 100px;
    height: 100px;
  }
  .crest-chip--popup {
    width: 72px;
    height: 72px;
  }
}