/* /leaderboard/ pages. Built on the tokens in styles.css and the boxes in episode.css. */

/* One spacing rhythm for every section: 20px from a heading to what follows it,
   24px from an intro to its list, 20px from a list to its button. */
.ep-h2 { margin-bottom: 20px; }
.ep-hero .ep-lede { max-width: 820px; }
/* Page-level type is centred: breadcrumbs, hero, every section heading and the
   text under it. Each block is balanced, so its lines run to the same length and
   no paragraph ends on a short line. */
.crumbs, .ep-hero .kicker, .ep-hero .page-title, .ep-lede, .ep-h2, .lb-prose-intro, .lb-prose { text-align: center; }
.ep-hero .page-title, .ep-lede, .lb-prose { margin-inline: auto; }
.lb-pick span:last-child, .lb-maker, .lb-why, .faq details p { text-wrap: balance; }
/* Intros and the method are set as justified blocks: every line runs edge to edge
   and the copy is written so the last line nearly fills too (check it at 1440 wide
   with scratch lines.mjs when you change it). The hub intro is 15/17 of the lede's
   measure, so the same sentence breaks in the same places on both pages. */
.ep-lede, .lb-prose-intro, .lb-prose p { text-align: justify; text-align-last: center; text-wrap: pretty; hyphens: manual; }

/* Category nav: an even grid of equal chips, so no row is left half full. */
.lb-nav { margin-top: 32px; }
.lb-nav-head { display: flex; justify-content: center; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.lb-all { font-size: 13px; color: var(--gold-500); text-decoration: none; }
.lb-all::after { content: ' \2192'; }
.lb-all:hover { color: var(--white); }
.lb-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lb-cats .chip { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; padding: 8px 12px; font-size: 13px; line-height: 1.25; }

.lb-label {
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-60);
}

/* One button size everywhere on these pages; the border on both keeps gold and ghost the same height. */
.lb-btn { justify-content: center; text-align: center; padding: 13px 24px; font-size: 11px; border: 1px solid transparent; line-height: 1.2; }
.lb-btn.btn-ghost { border-color: var(--white-24); }
/* Buttons in a row share one width, the widest one's. */
.lb-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; width: max-content; max-width: 100%; margin-top: 20px; }
.lb-more { width: 100%; }
.lb-row4 { width: 100%; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin-top: 0; }

.lb-prose, .lb-prose-intro { color: var(--white-80); font-size: 15px; line-height: 1.7; max-width: 724px; }
.lb-prose p + p { margin-top: 12px; }
.lb-prose-intro { max-width: 724px; margin: -8px auto 24px; }

/* Number ones */
.lb-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.lb-pick { display: flex; flex-direction: column; gap: 8px; padding: 22px; min-width: 0; color: inherit; text-decoration: none; transition: border-color 0.2s ease; }
.lb-pick:hover { border-color: var(--white-24); }
.lb-pick strong { font-weight: 800; font-size: 22px; line-height: 1.15; color: var(--gold-500); overflow-wrap: anywhere; text-wrap: balance; }
.lb-pick span:last-child { color: var(--white-80); font-size: 13px; line-height: 1.45; }

/* Top five on the hub */
.lb-mini { list-style: none; display: grid; gap: 10px; }
.lb-mini a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 16px; padding: 16px 24px; color: inherit; text-decoration: none; transition: border-color 0.2s ease; }
.lb-mini a:hover { border-color: var(--white-24); }
.lb-rank { font-family: var(--font-caps); font-weight: 700; font-size: 20px; color: var(--gold-500); }
.lb-mini-name { font-weight: 600; font-size: 15px; line-height: 1.3; min-width: 0; }
.lb-mini-name small { display: block; font-weight: 400; font-size: 12px; color: var(--white-60); margin-top: 3px; }
.lb-mini-price { font-size: 12px; color: var(--white-80); text-align: right; width: 250px; line-height: 1.45; text-wrap: balance; }

/* At a glance table */
.lb-table-wrap { overflow-x: auto; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-table th { font-family: var(--font-caps); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-60); text-align: left; padding: 18px 24px 14px; white-space: nowrap; }
.lb-table td { padding: 16px 24px; border-top: 1px solid var(--white-12); vertical-align: top; line-height: 1.45; color: var(--white-80); }
.lb-table td:first-child { font-family: var(--font-caps); font-weight: 700; color: var(--gold-500); }
.lb-table td:nth-child(2) { color: var(--white); font-weight: 600; white-space: nowrap; }
.lb-table td:nth-child(2) a { color: inherit; text-decoration: none; }
.lb-table td:nth-child(2) a:hover { color: var(--gold-500); }
.lb-table td small { display: block; font-weight: 400; font-size: 12px; color: var(--white-60); }

/* Ranking cards */
.lb-list { display: grid; gap: 14px; }
.lb-card { padding: 24px; scroll-margin-top: 90px; }
.lb-head { display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: start; }
.lb-head .lb-rank { font-size: 26px; line-height: 1.1; }
.lb-title h3 { font-weight: 800; font-size: 22px; line-height: 1.2; }
.lb-maker { color: var(--white-60); font-size: 13px; margin-top: 4px; line-height: 1.45; }
.lb-maker span { color: var(--white-80); }
.lb-tier { font-family: var(--font-caps); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; color: var(--gold-500); border: 1px solid var(--white-24); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.lb-why { color: var(--white-80); font-size: 15px; line-height: 1.7; margin-top: 20px; }
.lb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 20px; }
.lb-facts > div { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--white-12); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.lb-facts dt { font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white-60); }
.lb-facts dd { font-size: 13px; line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; }
.lb-pros { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.lb-pros ul { margin-top: 8px; padding-left: 18px; color: var(--white-80); font-size: 14px; line-height: 1.6; }
.lb-bench { margin-top: 20px; font-size: 13px; line-height: 1.6; color: var(--white-80); }
.lb-bench a { color: var(--white); }
.lb-card .lb-links { margin-top: 24px; }

@media (max-width: 960px) {
  .lb-cats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  /* Too narrow to justify without gaps: centred lines, none left stranded. */
  .ep-lede, .lb-prose-intro, .lb-prose p { text-align: center; text-wrap: balance; }
  .lb-cats { grid-template-columns: 1fr 1fr; }
  .lb-cats .chip { font-size: 12px; padding: 8px 10px; }
  .lb-links, .lb-row4 { width: 100%; grid-auto-flow: row; grid-template-columns: 1fr; }
  .lb-btn { padding: 14px 16px; }
  .lb-table th { padding: 16px 16px 12px; }
  .lb-table td { padding: 14px 16px; }
  .lb-card { padding: 20px 18px; }
  .lb-head { grid-template-columns: 28px 1fr; }
  .lb-tier { grid-column: 2; justify-self: start; }
  .lb-title h3 { font-size: 20px; }
  .lb-pros { grid-template-columns: 1fr; }
  .lb-picks { grid-template-columns: 1fr 1fr; }
  .lb-pick { padding: 16px; }
  .lb-pick strong { font-size: 18px; }
  .lb-mini a { grid-template-columns: 26px 1fr; padding: 16px 18px; }
  .lb-mini-price { grid-column: 2; text-align: left; width: auto; }
}

/* Narrow phones: one pick per row, so names like GPT Image 2.5 stay on one line. */
@media (max-width: 520px) {
  .lb-picks { grid-template-columns: 1fr; }
  .lb-pick { padding: 18px 20px; gap: 6px; }
}