/* ============================================================================
   PRO LEAGUE HUB — SHARED CARD RULES
   ----------------------------------------------------------------------------
   THE BUG THIS FIXES
   Every card grid on the site laid names out as free-flowing text. A one-line
   name and a two-line name therefore produced cards of different internal
   heights, so the eyebrow, the rating and the stat row all sat at different
   places from card to card — the grid looked broken the moment somebody was
   called "Mark Anthony Egera" instead of "IT".

   THE RULE
   A card must be the same shape whatever is inside it. Names get a RESERVED
   two-line box: short names leave the second line empty, long names clamp to
   two and ellipsize. Nothing below a name can move because of a name.

   One file, linked by every page, so this is fixed once and stays fixed.
   ========================================================================== */

/* ---- names in cards: always exactly two lines tall ---- */
.plh-name-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 2 lines at the element's own line-height, reserved whether used or not */
  min-height: calc(2em * var(--plh-lh, 1));
  line-height: var(--plh-lh, 1);
  overflow-wrap: anywhere;      /* a single very long word still breaks */
  word-break: break-word;
}

/* one-line variant: for places where wrapping is never wanted */
.plh-name-1 {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---- the stat row under a card: centred, evenly spread, readable ---- */
/* Cards carry a VARIABLE number of stats, because the golden rule drops any
   category with a zero. Two stats and four stats must both look deliberate,
   so the row centres itself instead of left-aligning into dead space. */
.plh-statrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 10px 8px;
  text-align: center;
}
.plh-statrow > * {
  flex: 1 1 0;
  min-width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.plh-statrow .plh-stat-v {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 22px;              /* was 17px — too small to read at a glance */
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.plh-statrow .plh-stat-k {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #8C8983;
  white-space: nowrap;
}

/* ---- cards in a grid all stretch to the same height ---- */
.plh-card-grid { align-items: stretch; }
.plh-card-grid > * { display: flex; flex-direction: column; height: 100%; }
/* anything marked as the tail of a card gets pushed to the bottom, so the
   footers of neighbouring cards line up even when the bodies differ */
.plh-card-foot { margin-top: auto; }

/* ---- a team crest that falls back to a monogram, never a bare initial ---- */
.plh-crest-img {
  width: 100%; height: 100%;
  object-fit: contain;          /* NEVER cover — a crest is not a face */
  padding: 14%;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .plh-statrow, .plh-name-2 { transition: none !important; }
}