/* ---------------------------------------------------------------------
   NXTbets Athletes — template integration overrides
   Small tweaks that adapt the design system to live inside Savoy chrome
   and to handle real-world rendering details the design didn't cover.
   Kept in a separate file so styles-v2.css stays untouched.
   ------------------------------------------------------------------- */

/* The v2-shell was a 1440px-wide fixed canvas in the prototype. Inside
   Savoy's content area we let it flow to whatever width Savoy provides. */
.v2-shell {
  width: auto;
  max-width: 1280px;
  background: transparent;
}

/* Photo slot — fill it with the athlete's real image when one is available. */
/* Layering: gradient (div bg) < logo < photo < number. The photo overlays
   the logo when it loads; onerror removes it, revealing the logo. */
.v2-hero__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 55%;
  max-height: 40%;
  width: auto;
  height: auto;
  object-fit: contain;
  z-index: 0;
}
.v2-hero__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.v2-hero__photo .v2-hero__number {
  z-index: 2;
}

/* Subtle badge used on every section that's awaiting a real data source.
   Visible to editors during dev; remove once data is wired. */
.nxt-stub {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff2eb;
  color: #ff631a;
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Socials overflow fix (all widths)
   The grid used `repeat(4, 1fr)`; 1fr tracks have an implicit min-width of
   their content, so a long handle (nowrap) forced the track wider than its
   share and the grid spilled past the container. minmax(0, 1fr) lets the
   tracks shrink, and min-width:0 on the card lets the ellipsis actually clip.
   ------------------------------------------------------------------- */
.v2-socials {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.v2-social {
  min-width: 0;
}

/* Empty-state row for stat tables when Pressbox has no data for the athlete. */
.v2-table__row--empty .v2-table__k {
  color: var(--ink-muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   ATHLETE ARCHIVE — directory grid + sport filter pills.
   (The v2 design didn't include an archive; this is a first pass to be
   redesigned later.)
   ------------------------------------------------------------------- */
.v2-eyebrow {
  font: var(--t-tag);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange-deep);
}

.v2-arch-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.v2-arch-title {
  font: var(--t-h1);
  color: var(--brand-navy);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.v2-arch-count {
  font: var(--t-tag);
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 999px;
  padding: 4px 12px;
}

.v2-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v2-filter__pill {
  font: var(--t-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-navy);
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.v2-filter__pill:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.v2-filter__pill.is-active {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}

.v2-athlete-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.v2-athlete-card {
  display: flex;
  flex-direction: column;
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.v2-athlete-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 20, 45, 0.1);
  border-color: var(--blue-300);
}
.v2-athlete-card__photo {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #dde7f5 0%, #c5d6ee 100%);
  position: relative;
}
.v2-athlete-card__num {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  font: var(--t-h2);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 20, 45, 0.5);
}
/* League-logo fallback (athletes with no/broken photo): centered, behind the
   photo. The photo overlays it when it loads; onerror removes the photo. */
.v2-athlete-card__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 62%;
  max-height: 46%;
  width: auto;
  height: auto;
  object-fit: contain;
  z-index: 0;
}
.v2-athlete-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.v2-athlete-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-athlete-card__name {
  font: var(--t-card);
  font-size: 17px;
  color: var(--brand-navy);
  line-height: 1.2;
}
.v2-athlete-card__meta {
  font: var(--t-tag);
  font-size: 12px;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 1em;
}
.v2-arch-empty {
  font: var(--t-body);
  color: var(--ink-muted);
}

/* =====================================================================
   RESPONSIVE — the design ships desktop-only (fixed 1440px canvas).
   The "mobile version" begins at the tablet breakpoint (<= 1024px):
   gutters tighten, multi-column grids collapse, the hero stacks.
   A second tier (<= 600px) drops the remaining 2-up grids to a single
   column for phones.
   ===================================================================== */

/* ---- Tablet and down: the mobile layout starts here ---- */
@media (max-width: 1024px) {
  .v2-main {
    padding: 24px 24px 56px;
  }

  /* Hero: stack the photo above the info card. */
  .v2-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .v2-hero__photo {
    min-height: 300px;
  }
  .v2-hero__name {
    font-size: 44px;
  }
  .v2-hero__facts {
    flex-direction: column;
    gap: 16px 40px;
  }

  /* KPI strip: 4 → 2. */
  .v2-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Stats + offers two-column → single column (stats first, offers below). */
  .v2-two-col,
  .v2-two-col--even {
    grid-template-columns: 1fr;
  }

  /* Side-by-side stat tables, if present, stack. */
  .v2-stats-row {
    grid-template-columns: 1fr;
  }

  /* Socials 4 → 2. */
  .v2-socials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Featured video + rail → stacked single column. */
  .v2-videos {
    grid-template-columns: 1fr;
  }

  /* News 3 → 2. */
  .v2-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Athlete archive grid 4 → 3. */
  .v2-athlete-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Phones: drop the remaining 2-up grids to one column ---- */
@media (max-width: 600px) {
  .v2-main {
    padding: 16px 16px 40px;
  }

  .v2-hero__name {
    font-size: 36px;
  }

  .v2-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .v2-kpi {
    padding: 16px;
    &:before {
      display: none;
    }
  }
  .v2-kpi__value {
    font-size: 36px;
  }
  .v2-kpi__sub {
    display: none;
  }

  .v2-socials,
  .v2-news__grid {
    grid-template-columns: 1fr;
  }

  /* Athlete archive grid → 2-up on phones. */
  .v2-athlete-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Crumbs: let the three items wrap instead of squeezing on one line. */
  .v2-crumbs {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}