/* ==========================================================================
   YANO STARS — LISTING PAGES
   Hall of Fame, Leaderboard, Challenges, Dancers directory, Current Challenge.
   ========================================================================== */

.listing-subtitle { font-family: var(--font-heading); font-size: 1.4rem; margin: 2.5rem 0 1.2rem; }

/* ------------------------------ Hall of Fame ------------------------------ */
.hof-featured { position: relative; overflow: hidden; display: grid; gap: 1.8rem; padding: 2.2rem; margin-bottom: 1rem; border-color: var(--border-gold); }
@media (min-width: 760px) { .hof-featured { grid-template-columns: auto 1fr; align-items: center; } }
.hof-featured__glow { position: absolute; top: -140px; right: -80px; width: 380px; height: 380px; background: var(--grad-radial-glow); pointer-events: none; }
.hof-featured__avatar { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.hof-featured__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--y-gold); box-shadow: var(--glow-gold-md); }
.hof-featured__crown { position: absolute; top: -10px; right: 8px; font-size: 2.4rem; }
.hof-featured__name { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; margin: 0.3rem 0; }
.hof-featured__meta { color: var(--y-gold); font-weight: 700; margin-bottom: 1rem; }
.hof-featured__quote { font-style: italic; font-weight: 600; font-size: 1.1rem; margin: 0 0 1.2rem; max-width: 55ch; }
.hof-featured__stats { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hof-featured__stats strong { color: var(--y-gold); font-family: var(--font-display); font-size: 1.4rem; }

.hof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .hof-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .hof-grid { grid-template-columns: repeat(4, 1fr); } }
.hof-legend { text-align: center; padding: 1.5rem 1rem; transition-delay: calc(var(--stagger,0) * 60ms); }
.hof-legend__frame { width: 96px; height: 96px; margin: 0 auto 1rem; border-radius: 50%; border: 3px solid var(--y-gold); padding: 3px; }
.hof-legend__frame img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hof-legend__badge { font-size: 0.72rem; color: var(--y-gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.hof-legend__name { font-family: var(--font-heading); font-size: 1.05rem; }
.hof-legend__name a:hover { color: var(--y-gold); }
.hof-legend__challenge { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
.hof-legend__votes { font-size: 0.8rem; color: var(--y-gold); font-weight: 700; margin-top: 0.5rem; }

/* ------------------------------ Leaderboard ------------------------------ */
.lb-list { display: flex; flex-direction: column; gap: 0.6rem; max-width: 820px; margin: 0 auto; }
.lb-row { display: grid; grid-template-columns: 2rem 3rem 1fr auto; grid-template-areas: "rank avatar info votes" "bar bar bar bar"; align-items: center; gap: 0.4rem 0.9rem; padding: 0.8rem 1.1rem; }
.lb-row--podium { border-color: var(--border-gold); box-shadow: var(--glow-gold-sm); }
.lb-rank { grid-area: rank; font-family: var(--font-display); font-size: 1.4rem; color: var(--text-muted); text-align: center; }
.lb-row--podium .lb-rank { color: var(--y-gold); }
.lb-avatar { grid-area: avatar; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.lb-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.lb-name { font-weight: 700; font-size: 0.95rem; }
.lb-name:hover { color: var(--y-gold); }
.lb-province { font-size: 0.72rem; color: var(--text-muted); }
.lb-bar-wrap { grid-area: bar; height: 6px; background: rgba(255,255,255,0.06); border-radius: var(--r-pill); overflow: hidden; }
.lb-bar { height: 100%; width: 0; background: var(--grad-fire); border-radius: var(--r-pill); transition: width 1s var(--ease-out); }
.lb-row.is-visible .lb-bar { width: var(--pct); }
.lb-votes { grid-area: votes; text-align: right; font-weight: 800; color: var(--y-gold); }
.lb-votes small { display: block; font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
@media (min-width: 640px) {
  .lb-row { grid-template-columns: 2.5rem 3rem 1fr 10rem 5rem; grid-template-areas: "rank avatar info bar votes"; }
}

/* ------------------------------ Challenges ------------------------------ */
.ch-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 640px) { .ch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .ch-grid { grid-template-columns: repeat(3, 1fr); } }
.ch-card { overflow: hidden; transition-delay: calc(var(--stagger,0) * 50ms); display: flex; flex-direction: column; }
.ch-card--live { border-color: var(--border-gold); }
.ch-card__top { position: relative; aspect-ratio: 16/10; background: var(--y-black-raised); }
.ch-card__cover { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.ch-card__status { position: absolute; top: 0.9rem; left: 0.9rem; }
.ch-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.ch-card__title { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 0.4rem; }
.ch-card__prize { font-family: var(--font-heading); font-size: 1rem; margin-bottom: 0.6rem; }
.ch-card__desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.2rem; }
.ch-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.ch-card__count { font-size: 0.78rem; color: var(--text-muted); }

/* ------------------------------ Dancers dir ------------------------------ */
.dir-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; }
.dir-chip { padding: 0.5em 1.1em; border-radius: var(--r-pill); border: 1px solid var(--border-subtle); font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); transition: all var(--dur-fast); }
.dir-chip:hover { border-color: var(--y-gold); color: var(--y-gold); }
.dir-chip.is-active { background: var(--y-gold); color: var(--y-black); border-color: var(--y-gold); }

.dir-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .dir-grid { grid-template-columns: repeat(4, 1fr); } }
.dir-card { text-align: center; padding: 1.5rem 1rem; transition-delay: calc(var(--stagger,0) * 40ms); }
.dir-card__avatar { position: relative; width: 88px; height: 88px; margin: 0 auto 1rem; }
.dir-card__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-gold); }
.dir-card__crown { position: absolute; top: -6px; right: -2px; font-size: 1.4rem; }
.dir-card__name { font-family: var(--font-heading); font-size: 1rem; line-height: 1.1; }
.dir-card__province { font-size: 0.72rem; color: var(--text-muted); margin: 0.2rem 0 0.7rem; }
.dir-card__stats { display: flex; justify-content: center; gap: 1rem; font-size: 0.75rem; color: var(--text-secondary); }
.dir-card__tag { display: inline-block; margin-top: 0.7rem; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--y-gold); background: rgba(255,193,7,0.1); padding: 0.25em 0.7em; border-radius: var(--r-pill); }

/* --------------------------- Current challenge --------------------------- */
.cc-prize { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; margin-bottom: 2rem; border-color: var(--border-gold); }
.cc-section { margin-bottom: 2rem; }
.cc-section__title { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 0.8rem; }
.cc-body { color: var(--text-secondary); line-height: 1.7; }
.cc-cta { text-align: center; padding: 2.5rem 2rem; margin-top: 1rem; }
.cc-cta h2 { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.4rem); margin-bottom: 0.8rem; }
.cc-cta p { max-width: 46ch; margin: 0 auto 1.6rem; }