/* ===========================================================================
 * top-models.css — styles for the /top-models/ leaderboard (templates/top-models.php)
 *
 * Loaded via $pageCss = ['top-models.css'] in renderTopModels() (routes/grid.php),
 * so it only downloads on this page. Everything is scoped to .lb-* so it can't
 * leak into the grid or performer page. Colours reference the site.css custom
 * properties (--pink, --card, …) with hard fallbacks, and this sheet loads AFTER
 * site.css, so the variables are always defined.
 * ======================================================================== */

.lb-wrap{max-width:1120px;margin:0 auto}
.lb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lb-sub{color:var(--muted,#8b90a3);font-size:14px;margin:2px 0 18px}
.lb-sub b{color:var(--accent2)}

.lb-become{display:inline-flex;align-items:center;gap:8px;background:var(--card,#171826);border:1px solid var(--line,#242637);color:var(--txt,#eef0f6);text-decoration:none;font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 15px;white-space:nowrap;transition:border-color .15s,color .15s}
.lb-become:hover{border-color:var(--pink,var(--accent));color:var(--accent2)}
.lb-become svg{width:17px;height:17px;fill:currentColor;flex:none}

.lb-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line,#242637);margin-bottom:16px;flex-wrap:wrap}
.lb-tabs a{color:var(--muted,#8b90a3);text-decoration:none;font-weight:600;font-size:15px;padding:8px 2px;position:relative}
.lb-tabs a.on{color:var(--txt,#eef0f6)}
.lb-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pink,var(--accent));border-radius:2px}

.lb-regions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.lb-chip{background:var(--card,#171826);border:1px solid var(--line,#242637);color:var(--muted,#8b90a3);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.lb-chip.on{color:var(--txt,#eef0f6);border-color:var(--pink,var(--accent));background:linear-gradient(180deg,rgba(233,30,99,.18),rgba(233,30,99,.06))}

.lb-div{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 20px}
.lb-div span{font-weight:800;letter-spacing:2px;font-size:12.5px;color:var(--gold,#f5c542)}
.lb-div span.s{color:#b9c0d6}
.lb-div .r{height:1px;flex:1;max-width:220px;background:linear-gradient(90deg,transparent,var(--line,#242637))}
.lb-div .r.r2{background:linear-gradient(270deg,transparent,var(--line,#242637))}

/* card base ---------------------------------------------------------------- */
.lb-card{display:block;background:var(--card,#171826);border:1px solid var(--line,#242637);border-radius:13px;overflow:hidden;text-decoration:none;color:var(--txt,#eef0f6);transition:border-color .15s}
.lb-card:hover{border-color:var(--pink,var(--accent))}
.lb-top{display:flex;align-items:center;justify-content:space-between;padding:9px 12px}
.lb-rank{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px}
.lb-crown{width:20px;height:20px}
.lb-foll{color:var(--muted,#8b90a3);font-size:12.5px;font-weight:700}
.lb-thumb{position:relative;background:#222;aspect-ratio:4/3;overflow:hidden}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-live{position:absolute;top:8px;left:8px;background:var(--live);color:#fff;font-size:10px;font-weight:800;letter-spacing:.5px;border-radius:5px;padding:2px 6px;display:inline-flex;align-items:center;gap:4px;z-index:3}
.lb-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:lbpulse 1.4s infinite}
@keyframes lbpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 5px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.lb-views{position:absolute;bottom:8px;left:8px;color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.8);z-index:3}
.lb-flag{position:absolute;bottom:8px;right:8px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.5);z-index:3}
.lb-meta{padding:9px 12px 12px}
.lb-name{font-weight:700;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-foll2{color:var(--accent2);font-size:12.5px;font-weight:700}

/* podium — 4:3 thumbs (Chaturbate's native aspect) so the small source image is
   shown near 1:1 instead of stretched into a tall crop; #1 stands out via the
   gold border, the raise and the wider centre column. */
.lb-podwrap{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:16px;align-items:end;margin-bottom:40px}
.lb-podium .lb-thumb{aspect-ratio:4/3}
.lb-podium.lb-p1{border-color:rgba(245,197,66,.55);box-shadow:0 16px 40px rgba(245,197,66,.12),0 12px 30px rgba(0,0,0,.4);transform:translateY(-14px)}
.lb-podium.lb-p1 .lb-rank,.lb-podium.lb-p1 .lb-crown{color:var(--gold,#f5c542)}
.lb-podium.lb-p2 .lb-rank,.lb-podium.lb-p2 .lb-crown{color:#cdd3dd}
.lb-podium.lb-p3 .lb-rank,.lb-podium.lb-p3 .lb-crown{color:#d08a4e}

/* grid --------------------------------------------------------------------- */
.lb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lb-grid .lb-crown{display:none}
.lb-grid .lb-rank{width:24px;height:24px;justify-content:center;background:rgba(10,11,18,.6);border-radius:50%;font-size:13px}
.lb-empty{color:var(--muted,#8b90a3);padding:30px 0}

/* mobile ------------------------------------------------------------------- */
@media(max-width:820px){
  .lb-grid{grid-template-columns:repeat(2,1fr)}
  /* Tighten the header on mobile: the "become a model" button wraps below the
     intro there, and the subtitle margin + flex gap stacked into a big empty
     band. Smaller gap + smaller subtitle margin closes it. */
  .lb-head{gap:8px;margin-bottom:8px}
  .lb-sub{margin-bottom:0}
  /* Podium on mobile: #1 as a full-width hero on top, #2 and #3 side by side
     beneath. The DOM order is 2,1,3 (for desktop centring), so order:-1 pulls #1
     up to the top instead of leaving it stranded in the middle. */
  .lb-podwrap{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-bottom:32px}
  .lb-podium{transform:none}
  .lb-podium.lb-p1{order:-1;flex:1 1 100%}
  .lb-podium.lb-p2,.lb-podium.lb-p3{flex:1 1 calc(50% - 6px)}
  .lb-podium.lb-p1 .lb-thumb{aspect-ratio:16/10}   /* wider hero reads better full-width */
  /* Region chips scroll in one row instead of wrapping to three. */
  .lb-regions{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .lb-chip{flex:none}
  .lb-become{font-size:12.5px;padding:8px 12px}
}

/* Foldables / large portrait tablets (iPad ~834px, Galaxy Fold ~884px). Light
   consistency bump to match site.css — this page was already built at larger
   sizes than the older pages, so only a small step up on the text/controls:
   subtitle, tabs, region chips, section dividers, ranks, names and counts.
   (The layout itself is unchanged; the max-width:820px block above still governs
   the 2-up mobile grid / stacked podium below 820.) Phones and desktop untouched. */
@media(min-width:700px) and (max-width:900px){
  .lb-sub{font-size:15px}
  .lb-become{font-size:14px}
  .lb-tabs a{font-size:16px}
  .lb-chip{font-size:14.5px;padding:9px 16px}
  .lb-div span{font-size:13.5px}
  .lb-rank{font-size:16px}
  .lb-foll{font-size:13.5px}
  .lb-name{font-size:15px}
  .lb-foll2{font-size:13.5px}
  .lb-views{font-size:13px}
}