/**
 * rank-rows.css — one uniform list row for every ranking page.
 *
 * The four ranking pages each grew their own bespoke row markup
 * (.singer-card, .celeb-item, .rd-row, .artist-card), so nothing lined up
 * between them — different heights, ranks, avatars, and stat placement.
 * This file normalises all four onto a single grid WITHOUT touching markup:
 *
 *     [ rank ] [ avatar ]  name                     [ primary stat ]
 *                          secondary line
 *
 * Loaded AFTER each page's own <style>, so it wins on source order.
 * Additive only — no PHP or HTML was changed to make this work.
 */

/* ── The row ───────────────────────────────────────────────────────────── */
.singer-card,
.celeb-item,
.rd-row,
.artist-card {
    display: flex;
    align-items: center;          /* singers used flex-start, so its rows ran tall */
    gap: 12px;
    padding: 11px 13px;
    border-radius: 8px;
    text-align: left;             /* miniAll.css body{text-align:center} leaks in here */
    min-height: 68px;
}

/* Every descendant inherits the centre leak too, so reset at the row. */
.singer-card *,
.celeb-item *,
.rd-row *,
.artist-card * { text-align: inherit; }

/* Lift the hover transform — a translateY on a long list makes rows feel loose
   and shifts neighbours. A border/background change reads calmer. */
.singer-card:hover,
.celeb-item:hover,
.rd-row:hover,
.artist-card:hover { transform: none; }

/* ── Rank ──────────────────────────────────────────────────────────────── */
.singer-rank,
.celeb-item .rank,
.rd-rank,
.artist-rank {
    flex: 0 0 30px;
    width: 30px;
    min-width: 0;
    padding-top: 0;               /* singers had padding-top:5px, pushing it off-centre */
    font-size: .95rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── Avatar ────────────────────────────────────────────────────────────── */
.singer-avatar,
.celeb-item .avatar,
.artist-avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.singer-avatar-inner,
.celeb-item .avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.singer-card img,
.celeb-item img,
.artist-card img.artist-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ── Name + secondary line ─────────────────────────────────────────────── */
.singer-info,
.celeb-info,
.artist-details,
.rd-name {
    flex: 1 1 auto;
    min-width: 0;                 /* without this the ellipsis never engages */
    text-align: left;
}
.singer-name,
.celeb-name,
.artist-name,
.rd-name {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.singer-username,
.celeb-username {
    display: block;
    font-size: .76rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Primary stat, right-aligned so the numbers form a clean column ────── */
.singer-followers,
.celeb-followers,
.rd-followers {
    margin-left: auto;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.2;
    display: block;
    margin-bottom: 0;
}
/* the word "followers" under the number — keep it, but quiet and small */
.singer-followers span,
.celeb-followers span,
.rd-followers small {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
}

/* ── Secondary stats (artists page) ────────────────────────────────────── */
.artist-stats-row {
    display: flex;
    gap: 10px;
    font-size: .74rem;
    margin-bottom: 0;
    flex-wrap: nowrap;            /* wrapping gave every row a different height */
    overflow: hidden;
}
.artist-stat { white-space: nowrap; flex: 0 0 auto; }

/* ── Redundant in-row CTA ──────────────────────────────────────────────── */
/* The whole row is already an <a>. A second "View Profile" button inside it
   added ~45px of height per row and was the one element that lined up with
   nothing. The row itself remains fully clickable. */
.view-profile-btn { display: none !important; }

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .singer-card,
    .celeb-item,
    .rd-row,
    .artist-card {
        gap: 10px;
        padding: 9px 10px;
        min-height: 62px;
        border-radius: 6px;
    }
    .singer-rank,
    .celeb-item .rank,
    .rd-rank,
    .artist-rank { flex-basis: 26px; width: 26px; font-size: .88rem; }

    .singer-avatar,
    .celeb-item .avatar,
    .artist-avatar { flex-basis: 42px; width: 42px; height: 42px; }

    .singer-name,
    .celeb-name,
    .artist-name,
    .rd-name { font-size: .89rem; }

    .singer-followers,
    .celeb-followers,
    .rd-followers { font-size: .88rem; }

    /* tertiary detail lines are the first thing to go when width is scarce */
    .singer-yt-stats,
    .artist-stat.rating { display: none; }
}


/* ── Info column as a grid ─────────────────────────────────────────────────
   The follower count lives INSIDE the info column in the markup, so
   `margin-left:auto` could only right-align it within the text flow — it ended
   up floating on its own line mid-row. A 2-column grid lets it sit as a proper
   right-hand stat, vertically centred against the name + handle, with the
   tertiary song/view line spanning underneath. No markup change required. */
.singer-info,
.celeb-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
}
.singer-name,
.celeb-name     { grid-column: 1; grid-row: 1; }
.singer-username,
.celeb-username { grid-column: 1; grid-row: 2; }

/* stat spans both text rows so it centres against them */
.singer-followers,
.celeb-followers {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-left: 0;
}

/* tertiary detail spans the full width beneath */
.singer-yt-stats {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    gap: 12px;
    font-size: .74rem;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
}

/* A row with no handle would leave row 2 empty and misalign the stat; when the
   username is absent the stat simply occupies row 1. */
.singer-info  > .singer-followers:nth-child(2),
.celeb-info   > .celeb-followers:nth-child(2) { grid-row: 1; }


/* ── Name width on phones ──────────────────────────────────────────────────
   .profession-tag is nested INSIDE .celeb-name, so it competed with the name
   for the same 114px and every single name was truncating ("Narendra Mod…").
   The profession is already conveyed by the filter chips above the list and on
   the profile itself, so it is the right thing to drop at narrow widths. */
@media (max-width: 560px) {
    .celeb-name .profession-tag { display: none; }
    .celeb-name .verified { margin-left: 3px; }
    /* reclaim a little more by tightening the stat label */
    .celeb-followers span,
    .singer-followers span { letter-spacing: .02em; }
}