/* =========================================================================
   Homepage v2 (Phase 4, Oct 2026). Loads after tokens/base/components and
   pdp-v2.css (footer, chips). Page layout only; classes prefixed hm2-.
   ========================================================================= */

.hm2 { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--space-12); }
.hm2-sec { margin-top: var(--space-12); }
.hm2-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.hm2-sec__head h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.hm2-sec__head p { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted-fg); }
.hm2-more { font-size: var(--text-sm); font-weight: 500; color: var(--primary-ink); white-space: nowrap; }

/* Hero */
.hm2-hero { padding: var(--space-12) 0 var(--space-2); text-align: center; }
.hm2-hero h1 { font-size: var(--text-5xl); line-height: 1.04; letter-spacing: -0.04em; max-width: 18ch; margin: 0 auto; text-wrap: balance; }
.hm2-hero h1 span { color: var(--primary); }
.hm2-hero > p { margin: var(--space-4) auto 0; max-width: 58ch; font-size: var(--text-lg); color: var(--muted-fg); line-height: var(--leading-snug); }
.hm2-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); min-height: 36px; }
.hm2-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3) 0 6px; font-size: var(--text-sm); font-weight: 500; color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-full); transition: border-color var(--duration) var(--ease); }
.hm2-chip:hover { border-color: var(--border-strong); text-decoration: none; }
.hm2-chip b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; font: 600 11px var(--font-mono); color: var(--muted-fg); background: var(--muted); border-radius: var(--radius-full); }
.hm2-chip em { font-style: normal; font: 600 var(--text-xs) var(--font-mono); color: var(--sold); }
.hm2-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hm2-cta .ui-btn { height: 44px; padding: 0 var(--space-5); font-weight: 600; }
.hm2-cta svg { width: 16px; height: 16px; }

.hm2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-10); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.hm2-stat { padding: var(--space-4) var(--space-5); }
.hm2-stat + .hm2-stat { border-left: 1px solid var(--border); }
.hm2-stat dt { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted-fg); }
.hm2-stat dt .ui-basis { margin-left: 0; }
.hm2-stat dd { margin-top: 4px; font: 600 var(--text-2xl)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.hm2-stat small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--muted-fg); }


/* Most Wanted rail */
.hm2-sec__actions { display: flex; align-items: center; gap: var(--space-4); }
.hm2-arrows { display: flex; gap: var(--space-2); }
.hm2-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--background); color: var(--foreground); cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), opacity var(--duration) var(--ease); }
.hm2-arrow svg { width: 18px; height: 18px; }
.hm2-arrow:hover:not(:disabled) { border-color: var(--foreground); }
.hm2-arrow:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hm2-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.hm2-rail-wrap { position: relative; }
/* A soft fade on the edge that has more cards, so it reads as "keeps going". */
.hm2-rail-wrap::before, .hm2-rail-wrap::after { content: ''; position: absolute; top: 0; bottom: var(--space-3); width: 48px; pointer-events: none; opacity: 0; transition: opacity var(--duration) var(--ease); z-index: 1; }
.hm2-rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--background), transparent); }
.hm2-rail-wrap::after { right: 0; background: linear-gradient(270deg, var(--background), transparent); }
.hm2-rail-wrap.has-prev::before, .hm2-rail-wrap.has-next::after { opacity: 1; }
.hm2-rail { scroll-behavior: smooth; }
.hm2-rail .pdp2-tile:hover, .hm2-rail .pdp2-tile:hover * { text-decoration: none; }
.hm2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, calc((100% - 4 * var(--space-4)) / 5)); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-3); scrollbar-width: thin; }
.hm2-rail .pdp2-tile { scroll-snap-align: start; }
.hm2-rank { position: absolute; top: var(--space-2); left: var(--space-2); height: 24px; min-width: 28px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font: 600 11px var(--font-mono); color: var(--foreground); background: rgba(255, 255, 255, .92); border: 1px solid var(--border); }
.hm2-who { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.hm2-who b { font: 600 11px var(--font-mono); color: var(--primary-ink); }
.hm2-sold { font-size: var(--text-xs); color: var(--muted-fg); }
.hm2-sold b { color: var(--sold); font-family: var(--font-mono); }
.hm2-sold .ui-basis { margin-left: 4px; vertical-align: 1px; }

/* Rankings + side column */
.hm2-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.hm2-card { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hm2-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.hm2-card__head h3 { font-size: var(--text-base); font-weight: 600; }
.hm2-card__head p { font-size: var(--text-xs); color: var(--muted-fg); margin-top: 2px; }
.hm2-card + .hm2-card { margin-top: var(--space-6); }
.hm2-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm2-split--even .hm2-card + .hm2-card { margin-top: 0; }
.hm2-card__h { font-size: var(--text-base); font-weight: 600; }
.hm2-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.hm2-table th { padding: 10px var(--space-4); text-align: left; font-size: var(--text-xs); font-weight: 500; color: var(--muted-fg); background: var(--surface); border-bottom: 1px solid var(--border); white-space: nowrap; }
.hm2-table td { padding: 12px var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.hm2-table tr:last-child td { border-bottom: 0; }
.hm2-table tbody tr:hover td { background: var(--surface); }
.hm2-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm2-table .rk { width: 44px; font: 600 var(--text-sm) var(--font-mono); color: var(--primary-ink); }
.hm2-table a { color: var(--foreground); font-weight: 500; }
.hm2-table small { display: block; font-size: var(--text-xs); color: var(--muted-fg); }
.hm2-table .sold { color: var(--sold); font-weight: 600; }
.hm2-up { color: var(--up); }
.hm2-down { color: var(--down); }
.hm2-dash { color: var(--subtle-fg); }

.hm2-list { list-style: none; margin: 0; padding: 0; }
.hm2-list li + li { border-top: 1px solid var(--border); }
.hm2-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); color: inherit; }
.hm2-row:hover { background: var(--surface); text-decoration: none; }
.hm2-row img { width: 44px; height: 55px; object-fit: contain; background: var(--surface); border-radius: var(--radius-sm); }
.hm2-row__t { min-width: 0; }
.hm2-row__t b { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.hm2-row__t span { display: block; font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm2-row__v { text-align: right; font: 600 var(--text-sm) var(--font-mono); font-variant-numeric: tabular-nums; }
.hm2-row__v small { display: block; font: 500 var(--text-xs) var(--font-sans); color: var(--sold); }
.hm2-row--mover { grid-template-columns: 40px minmax(0, 1fr) auto; }
.hm2-row .hm2-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; border-radius: 0; }
.hm2-empty { padding: var(--space-6) var(--space-5); font-size: var(--text-sm); color: var(--muted-fg); }

/* News */
.hm2-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.hm2-story { display: flex; flex-direction: column; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: inherit; transition: border-color var(--duration) var(--ease); }
.hm2-story:hover { border-color: var(--border-strong); text-decoration: none; }
.hm2-story:hover b { color: var(--primary-ink); }
.hm2-story__img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--muted); overflow: hidden; }
.hm2-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm2-story__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--surface); }
.hm2-story .hm2-story__ph b { font: 700 var(--text-2xl) var(--font-sans); letter-spacing: .02em; color: inherit; -webkit-line-clamp: unset; display: block; }
.hm2-story__ph small { font: 500 var(--text-xs) var(--font-mono); color: var(--muted-fg); }
.hm2-story__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.hm2-story__meta { font: 500 var(--text-xs) var(--font-mono); color: var(--muted-fg); }
.hm2-story b { font-size: var(--text-base); font-weight: 600; line-height: var(--leading-snug); color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Media directory */
.hm2-media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
.hm2-media a { padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--foreground); border-bottom: 1px solid var(--border); }
.hm2-media a:hover { color: var(--primary-ink); text-decoration: none; }


/* Top 10 rows: headshot, bio line, season line, sparkline */
.hm2-table .rk small { display: block; margin-top: 2px; font: 600 10px var(--font-mono); }
.hm2-table td.num small { display: block; font: 500 11px var(--font-sans); color: var(--muted-fg); margin-top: 1px; }
.hm2-player { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.hm2-player:hover { text-decoration: none; }
.hm2-player:hover b { color: var(--primary-ink); }
.hm2-av { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--muted); border: 1px solid var(--border); font: 600 12px var(--font-sans); color: var(--muted-fg); }
.hm2-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; background: var(--muted); }
.hm2-player__t { min-width: 0; }
.hm2-player__t b { display: block; font-weight: 600; color: var(--foreground); }
.hm2-player__t b, .hm2-player__t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm2-player__line { font-family: var(--font-mono) !important; color: var(--subtle-fg) !important; }
.hm2-table .ask { color: var(--asking); font-weight: 600; }
.hm2-trend { white-space: nowrap; }
.hm2-spark-slot { display: inline-block; width: 72px; height: 24px; margin-right: var(--space-2); vertical-align: middle; }
.hm2-spark { display: block; overflow: visible; }
.hm2-spark path { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.hm2-spark.is-up path { stroke: var(--chart-sold); }
.hm2-spark.is-down path { stroke: var(--down); }
@media (max-width: 899px) {
  .hm2-table .hide-md { display: none; }
}

@media (max-width: 1099px) {
  .hm2-split, .hm2-split--even { grid-template-columns: 1fr; }
  .hm2-split--even .hm2-card + .hm2-card { margin-top: var(--space-6); }
  .hm2-rail { grid-auto-columns: minmax(200px, 30%); }
  .hm2-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm2-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hm2-hero { padding-top: var(--space-8); }
  .hm2-hero h1 { font-size: 2.25rem; }
  .hm2-hero > p { font-size: var(--text-base); }
  .hm2-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: var(--space-5) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 2px; scrollbar-width: none; }
  .hm2-chips::-webkit-scrollbar { display: none; }
  .hm2-chip { flex: none; }
  .hm2-cta .ui-btn { flex: 1 1 100%; }
  .hm2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-8); }
  .hm2-stat:nth-child(3) { border-left: 0; }
  .hm2-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .hm2-stat dd { font-size: var(--text-xl); }
  .hm2-sec { margin-top: var(--space-10); }
  .hm2-arrows { display: none; }
  .hm2-rail-wrap::before, .hm2-rail-wrap::after { display: none; }
  .hm2-sec__head h2 { font-size: var(--text-xl); }
  .hm2-rail { grid-auto-columns: 62%; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-3); scroll-padding: 0 var(--gutter); }
  .hm2-table .hide-sm { display: none; }
  .hm2-spark-slot { display: none; }
  .hm2-av { width: 34px; height: 34px; }
  .hm2-player { gap: var(--space-2); }
  .hm2-player__t { max-width: 112px; }
  .hm2-table td, .hm2-table th { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .hm2-table td.num small { font-size: 10px; }
  .hm2-player__line { display: none !important; }
  .hm2-table .rk { width: 30px; }
  .hm2-table td, .hm2-table th { padding-left: var(--space-3); padding-right: var(--space-3); }
  .hm2-news { grid-template-columns: 1fr; gap: var(--space-3); }
  .hm2-story { flex-direction: row; align-items: stretch; }
  .hm2-story__img { flex: none; width: 112px; aspect-ratio: auto; }
  .hm2-story .hm2-story__ph b { font-size: var(--text-lg); }
  .hm2-story__ph small { display: none; }
  .hm2-story__body { padding: var(--space-3) var(--space-4); }
  .hm2-story b { font-size: var(--text-sm); }
  .hm2-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Footer SEO link rows kept from the old homepage (popular prospects,
   trending searches). Crawlable links from the highest-authority page. */
.pdp2-footer .site-footer-prospects { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.pdp2-footer .site-footer-prospects + .site-footer-prospects { border-top: 0; padding-top: 0; }
.pdp2-footer .site-footer-prospects-label { flex: none; width: 140px; font-size: var(--text-xs); color: var(--muted-fg); }
.pdp2-footer .site-footer-prospects-nav { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.pdp2-footer .site-footer-prospects-nav a { font-size: var(--text-xs); color: var(--muted-fg); }
.pdp2-footer .site-footer-prospects-nav a:hover { color: var(--foreground); }
.pdp2-footer .site-footer-prospects-more { color: var(--primary-ink) !important; font-weight: 500; }
@media (max-width: 767px) { .pdp2-footer .site-footer-prospects-label { width: 100%; } }