/* ============================================================================
   team_crest.css — single source of truth for team-crest rendering.
   --------------------------------------------------------------------------
   Edit values here to change how team logos render EVERYWHERE in the app.

   Problem this solves: team logos served by api-sports.io are not all square.
   Valencia is 240x150 (wide), Liverpool is 78x150 and Tottenham is 82x150
   (tall). Per-component CSS that fixes both width and height on the <img>
   forces these crests into a square box via `object-fit: contain`, which
   letterboxes wide crests visibly shorter than square ones. The fix is to
   lock height only and let width grow (or shrink) to preserve the source
   aspect ratio.

   This file is loaded LAST in base.html so its rules win the cascade against
   per-component files (lineup.css, match_center.css, home.css, etc.).

   `!important` is used on the width / max-width / object-fit / aspect-ratio
   declarations because this file is explicitly an OVERRIDE layer — its
   purpose is to defeat the per-component `width: Npx` rules regardless of
   their specificity. Per-component HEIGHT declarations are untouched and
   continue to apply normally, so each context keeps its size (14px on
   performer cards, 80px on match hero, 28px on home rows, etc.).
   ========================================================================= */


/* (A) Future-facing utility class. New templates can drop `.team-crest`
   onto any logo <img> and inherit the unified rendering policy without
   needing a per-component class. Height comes from the parent container. */
.team-crest {
  display: inline-block;
  width: auto;
  height: 100%;
  max-width: 200%;
  object-fit: contain;
  vertical-align: middle;
}


/* (B) Legacy-class normalisation — the single source of truth.
   Selector list (not :where / :is) so cascade order can do its job:
   team_crest.css loads after every per-component CSS file. `!important`
   ensures we win against high-specificity per-component rules
   (.daily-match-row .daily-match-team .team-logo etc.). */
.lu-pitch__team-strip__logo,
.lu-bench__team-logo,
.lu-subs-pitch__logo,
.lu-squad-col__logo,
.mc-team-logo,
.team-logo-header,
.mc-two-leg-switcher__team-logo,
.mc-performer-team-logo,
.mc-qual-team-logo,
.mc-summary-crest,
.pred-team-logo,
.absentee-card__logo,
.home-match-row__logo,
.es-hero-team__logo,
.team-hero__logo,
.fs-team-logo,
.pw2-team__logo,
.pw2-vote-card__logo,
.api-pred-context__logo,
.api-pred-swimlane__logo,
.premium-team-logo > img,
.team-upcoming-card__crest-img,
.daily-match-row .daily-match-team .team-logo,
.coach-current-team__logo,
.coach-timeline__logo,
.player-career-logo,
.tca-header__logo,
.tsac-header__logo,
.tmc-chip__logo,
.tov-form-item__opp-logo,
.power-rankings-team-logo,
.xfer-row__logo,
.venue-team-row__logo {
  /* Uniform 1.6:1 IMG box. Width is height × 1.6 (matches Valencia 240x150).
     For every team the IMG box is the same width — so [logo][gap][name]
     columns line up perfectly across rows regardless of crest source ratio.
     `object-fit: contain` centers each crest's natural content inside its
     uniform box: Valencia fills it; square crests get whitespace each side;
     tall crests (Liverpool/Tottenham) get more whitespace each side. */
  width: auto !important;
  aspect-ratio: var(--crest-aspect, 1.6) / 1 !important;
  max-width: none !important;
  object-fit: contain !important;
  /* Drop any circular/rounded background on the IMG itself — a non-square
     crest inside a circular bg would render as an oval pill. Placeholder
     siblings (--ph / --placeholder) keep their badge styling untouched. */
  border-radius: 0 !important;
  background: transparent !important;
}


/* (C) Wrapper normalisation for img cases.
   When an <img> is actually present:
   1. drop the circle + clip so the full crest renders (placeholder/initials
      cases keep their circle untouched);
   2. resize the wrapper to a uniform aspect ratio so the LOGO COLUMN is the
      same width in every row regardless of crest aspect. Valencia (1.6:1)
      fills the wrapper; square crests center inside with whitespace; tall
      crests (Liverpool/Tottenham) center with whitespace. The team name
      after the wrapper always starts at the same x-position, no shift.

   Per-component HEIGHT is preserved. Width auto-computes from
   `height × var(--crest-aspect, 1.6)`. Any component that prefers a square
   slot can set `--crest-aspect: 1` on its wrapper. */
.premium-team-logo:has(> img),
.lb-header__logo:has(> img),
.lb-card__logo:has(> img),
.lb-final-match__logo:has(> img),
.lb-final-card__hero-logo:has(> img),
.lb-final-card__side-logo:has(> img),
.knockout-bracket-winner-logo:has(> img),
.standings-mc-fixture-popup__crest:has(> img),
.mc-hero-team-logo-wrap:has(> img),
.pw2-team__logo-wrap:has(> img),
.pw2-vote-card__logo-wrap:has(> img),
.home-match-row__logo-wrap:has(> img),
.team-upcoming-card__crest:has(> img) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  aspect-ratio: var(--crest-aspect, 1.6) / 1 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: none !important;
}


/* Hero/feature wrappers — keep a SQUARE slot rather than widening to 1.6:1.
   These are single-instance, layout-sensitive placements (bracket final card,
   knockout winner badge, prediction widget header). Their host layouts depend
   on a square footprint. NOTE: `.mc-hero-team-logo-wrap` is intentionally
   excluded — for the match hero we prioritise showing wide crests (Valencia)
   at full visible height over keeping a square wrapper. */
.lb-header__logo,
.lb-final-card__hero-logo,
.lb-final-card__side-logo,
.knockout-bracket-winner-logo,
.pw2-team__logo-wrap,
.pw2-vote-card__logo-wrap {
  --crest-aspect: 1;
}


/* (D) Companion override for wrapper > img patterns.
   Several components pin the inner <img> to `width: 100%; height: 100%` —
   which forces wide crests back into a square. Override those inner <img>s
   to height-lock with auto width. */
.knockout-bracket-logo > img,
.knockout-bracket-winner-logo > img,
.lb-header__logo > img,
.lb-card__logo > img,
.lb-final-match__logo > img,
.lb-final-card__hero-logo > img,
.lb-final-card__side-logo > img,
.standings-mc-fixture-popup__crest > img,
.es-hero-league__logo > img,
.pw2-team__logo-wrap > img,
.pw2-vote-card__logo-wrap > img {
  width: auto !important;
  height: 100% !important;
  max-width: 200% !important;
  object-fit: contain !important;
}