/* Player detail page — player-specific hero pieces. Sticky + compact
   behaviour and the shared entity primitives (entity-logo-wrapper,
   entity-title, entity-subtitle, entity-tabs) live in:
     - components/entity-sticky.css
     - components/entity-hero.css
     - pages/team-detail.css (shared `.entity-hero-expanded__inner`,
       `.entity-tabs-wrapper`, `.entity-tabs`)

   The hero takes the canonical entity sticky shell and adds:
     1. A cross-pattern background — `--team-color-*` along the top
        and `--nation-color-*` along the sides — so the player palette
        reads tied both to the club AND the country.
     2. A faint club crest watermark behind the photo (low opacity,
        absolutely positioned, never blocks pointer events).
     3. A jersey-number watermark via `::after`, anchored top-right.
     4. A larger circular photo (120px) with team-glow ring, replacing
        the 80px logo of the team hero.
     5. Inline meta row (flag + nationality + position) and a CTA pill
        linking to the current team.

   `--team-color-1/2/glow` and `--nation-color-1/2` are inlined on
   `body.player-page` by `pages/player.html.twig`. Fallbacks default to
   the Feeberse green so missing data still looks on-brand. */

@layer pages {
  /* ---------- Hero — cross-pattern background ----------
     Composes 4 radial gradients: team color 1/2 vertical (top + bottom),
     nation color 1/2 horizontal (left + right). Each gradient is an
     ellipse that fades to transparent so the four blobs blend at the
     centre and read as a "spotlight from the four edges" instead of a
     hard quadrant split. */

  .player-hero.entity-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(
        ellipse 70% 45% at 50% 0%,
        var(--team-color-1, rgb(0 255 135 / 8%)) 0%,
        transparent 65%
      ),
      radial-gradient(
        ellipse 40% 80% at 0% 50%,
        var(--nation-color-1, rgb(0 255 135 / 5%)) 0%,
        transparent 65%
      ),
      radial-gradient(
        ellipse 40% 80% at 100% 50%,
        var(--nation-color-2, rgb(0 255 135 / 4%)) 0%,
        transparent 65%
      ),
      radial-gradient(
        ellipse 70% 45% at 50% 100%,
        var(--team-color-2, rgb(0 255 135 / 3%)) 0%,
        transparent 65%
      );
  }

  /* ---------- Jersey-number watermark (right side) ----------
     Mirrors the club crest on the opposite edge. Both watermarks share
     `top: 50%` with translateY so they read as a horizontal pair behind
     the centred photo, like the dual-shield hero of a match page. */

  /* Pair the dorsal box geometry to the crest (150×150 + translate
     50/50) so both watermarks share the exact vertical centre and
     visual weight. Without an explicit box the glyph baseline sits
     ~28px below the visual centre and the rendered "10" looks both
     smaller and lower than the crest. */
  .player-hero[data-shirt-number]::after {
    content: attr(data-shirt-number);
    position: absolute;
    top: 50%;
    right: 24%;
    width: 150px;
    height: 150px;
    transform: translate(50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 150px;
    font-weight: 900;
    line-height: 1;
    color: rgb(255 255 255 / 4%);
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }

  /* ---------- Club crest watermark (left side) ----------
     Pair to the dorsal watermark — sits at left:24% so the two flank
     the centred player photo. `aria-hidden` + `pointer-events: none`
     keep it out of the a11y tree. */
  .player-hero__crest {
    position: absolute;
    top: 50%;
    left: 24%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    object-fit: contain;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }

  /* ---------- Inner wrapper ----------
     Reuses the shared `.entity-hero-expanded__inner` flex column. The
     player variant tightens the gap and bumps the bottom padding so
     the team CTA pill doesn't crowd the tabs nav below. */
  .player-hero__inner {
    position: relative;
    z-index: 1;
    gap: 6px;
    padding-bottom: 28px;
  }

  /* ---------- Photo wrapper + placeholder ----------
     80px circular crop with a soft team-glow drop-shadow so the player
     silhouette lights up over the cross-pattern background. */
  .player-hero__photo-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 4px;
    border-radius: 50%;
  }

  .player-hero__photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: var(--color-surface);
    border: 3px solid rgb(255 255 255 / 10%);
    filter: drop-shadow(0 0 16px var(--team-glow, rgb(0 255 135 / 25%)));
  }

  .player-hero__photo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 3px solid rgb(255 255 255 / 10%);
  }

  /* Injury badge — white pill with a red medical cross (two stacked
     bars). Sits at the bottom-right of the photo with a small overlap
     so it reads as a sticker on top of the silhouette. The bg
     contrasts against the dark hero so the cross is unmistakable
     across all team palettes. */
  .player-hero__injury-badge {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .player-hero__injury-badge svg {
    width: 14px;
    height: 14px;
  }

  /* Cake badge — same corner as the injury badge (mutually exclusive:
     an injured player shows the cross, not the cake). */
  .player-hero__birthday-badge {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    z-index: 2;
  }

  /* ---------- Name + meta row ---------- */
  .player-hero__name {
    /* Inherits .entity-title sizing — bumped slightly up because the
       player name is the focal point of the hero. */
    font-size: 26px;
    line-height: 1.1;
  }

  /* Long-form / full-surnames variant rendered immediately under the
     headline when the composer flags the player as having a richer
     `common_name` than `name`. Muted, single line, capped width so it
     wraps with ellipsis on tight viewports rather than stacking. */
  .player-hero__alt-name {
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-muted);
    letter-spacing: 0.1px;
    text-align: center;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-hero__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
  }

  .player-hero__meta .country-flag-small {
    /* Force the meta flag to a fixed small size to prevent
       layout-shift while it loads. */
    flex-shrink: 0;
  }

  .player-hero__nationality {
    font-weight: 600;
    color: var(--color-text);
  }

  .player-hero__meta-sep {
    color: var(--color-text-muted);
    opacity: 0.6;
  }

  .player-hero__position {
    font-weight: 500;
  }

  /* ---------- Current team CTA ---------- */
  .player-hero__team-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 14px 6px 8px;
    background: rgb(255 255 255 / 8%);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition:
      background 200ms ease,
      transform 200ms ease;

    /* Mobile target: 44px high. Padding + content yield roughly that. */
    min-height: 36px;
    -webkit-tap-highlight-color: transparent;
  }

  .player-hero__team-link:hover,
  .player-hero__team-link:focus-visible {
    background: rgb(255 255 255 / 12%);
  }

  .player-hero__team-link:active {
    transform: scale(0.97);
  }

  .player-hero__team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .player-hero__team-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
  }

  /* Reduced motion: still apply states, just instantly. */
  @media (prefers-reduced-motion: reduce) {
    .player-hero__team-link {
      transition-duration: 1ms;
    }
  }

  /* ---------- Compact state ----------
     When the entity-sticky controller toggles `.compact`, the hero
     collapses to nav + tabs. The watermarks stay visible faintly
     because they're rendered on the wrapper, not the expanded block,
     but the photo + name + meta + team CTA fade out as part of the
     shared `.entity-hero-expanded` collapse. The jersey watermark
     takes a smaller offset so it doesn't peek above the nav line. */
  .entity-sticky.compact .player-hero[data-shirt-number]::after {
    font-size: 96px;
    top: 4px;
    opacity: 0.45;
  }

  .entity-sticky.compact .player-hero__crest {
    opacity: 0.04;
  }

  /* ---------- Page content wrapper ----------
     Mirrors `.team-content` so the same min-height guard applies (see
     team-detail.css for the math behind the dvh + 200 buffer). */
  .player-content {
    min-height: calc(100dvh + 200px);
    padding: 12px;
  }
}