/* ============================================================
   NextUp Cinematic Hero System v1 (2026-10-20)
   The design is the sports-magazine cover: oversized name layered
   over the portrait, white first name, gold-outlined surname.
   This sheet adds the layout INTELLIGENCE behind it — one system
   for every profile, driven by metadata, never per-player CSS:
   - .hero carries data-maxlen (longest name line) and --fx (the
     portrait's focal x, from face detection on the player's own
     photo). Name scale steps down in bounded increments as names
     grow, so no surname clips or covers the face.
   - .hero-inner is a grid: eyebrow / name / credentials / club /
     verification / socials, one alignment rule, token spacing.
   - The Coach View pill (#cv-pill) is NOT part of this system:
     it is a fixed viewport floater by design (Jerry, 2026-10-20)
     and must never be moved into the hero flow.
   Loaded last on profile pages so its rules govern the hero.
   ============================================================ */

/* --- composition: media layers below, content grid above --- */
.hero { display: grid; grid-template-areas: "stack"; }
.hero-inner {
  grid-area: stack;
  align-self: end;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  row-gap: 12px;
  padding-bottom: 44px;
}
.hero-inner .eyebrow { margin-bottom: 0; }
.hero-inner .pills { margin: 0; }
.hero-inner .club { margin: 0; }

/* --- intelligent name scaling --------------------------------
   Base size is the approved clamp; --nfs steps it down as the
   longest line grows. Both lines stay on one line each; the
   surname keeps its gold outline treatment. */
body:has(.hero) .hero h1 {
  font-size: calc(clamp(44px, 12vw, 76px) * var(--nfs, 1));
}
@media (min-width: 1024px) {
  /* the desktop premium scale, stepped by the same name factor */
  body:has(.hero) .hero h1 {
    font-size: calc(clamp(56px, 6vw, 84px) * var(--nfs, 1));
  }
  body:has(.hero) .hero-inner .pills { margin-top: 0; }
}
.hero[data-maxlen="7"]  { --nfs: .97; }
.hero[data-maxlen="8"]  { --nfs: .94; }
.hero[data-maxlen="9"]  { --nfs: .90; }
.hero[data-maxlen="10"] { --nfs: .86; }
.hero[data-maxlen="11"] { --nfs: .82; }
.hero[data-maxlen="12"] { --nfs: .78; }
.hero[data-maxlen="13"] { --nfs: .75; }
.hero[data-maxlen="14"] { --nfs: .72; }

/* --- focal-aware portrait placement ---------------------------
   The approved composition pins the photo to the top on phones;
   horizontally the letterbox slack is distributed around the
   face (--fx = face center x of the player's portrait). */
.hero img.bg { object-position: var(--fx, 50%) 50%; }
@media (max-width: 900px) {
  .hero img.bg { object-position: var(--fx, 50%) 0%; }
}

/* --- credentials: aligned, wrapping, consistent spacing ------ */
.hero-inner .pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }