/* --- F11 Crest ----------------------------------------------------------
 * A club's mark (D185, D170). CONTENT PLATES ONLY (D32): the club's colours
 * are read from custom properties set on the crest's own style attribute, and
 * only the ring and its core read them. Unset, each falls back to Troph-e's
 * gold, as the artwork does. A logo sits on a neutral wash, never the club's
 * colours, so a dark logo and a light one both read.
 * --------------------------------------------------------------------- */
.ui-crest {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--crest-size);
  height: var(--crest-size);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.ui-crest--sm { --crest-size: var(--crest-size-sm); --crest-ring-width: var(--crest-ring-width-sm); }
.ui-crest--md { --crest-size: var(--club-preview-crest-size); --crest-ring-width: var(--club-preview-ring-width); }

.ui-crest--plate { background: var(--plate-crest); }

/* Primary filling the crest, ringed in secondary, with a tertiary centre. */
.ui-crest__ring {
  display: grid;
  place-items: center;
  width: 80%;
  height: 80%;
  border-radius: var(--radius-pill);
  background: var(--crest-primary, var(--gold-100));
  border: var(--crest-ring-width) solid var(--crest-secondary, var(--gold-700));
}

.ui-crest__core {
  width: 40%;
  height: 40%;
  border-radius: var(--radius-pill);
  background: var(--crest-tertiary, var(--gold-300));
}

.ui-crest--logo {
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border-default);
  padding: var(--space-1);
}

.ui-crest__logo {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}