/* RXM Popularity - public-facing styles for the /top/ pages and the profile badge pills.
 * Self-contained on purpose (own rxmpop- namespace, no dependency on another plugin's CSS
 * classes) so this stays a purely additive layer that can never break existing page styling -
 * same "separate plugin, isolated blast radius" reasoning behind this being its own plugin.
 * Uses generic, theme-agnostic values rather than guessing the site's exact palette; anything
 * here is safe to override from the theme if a closer visual match is wanted later. */

.rxmpop-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.rxmpop-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.rxmpop-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.65;
    margin-bottom: 0.5rem;
}

.rxmpop-hero h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    line-height: 1.2;
}

.rxmpop-hero p {
    margin: 0;
    opacity: 0.8;
}

.rxmpop-section {
    margin-bottom: 2.5rem;
}

.rxmpop-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
    padding-bottom: 0.5rem;
}

.rxmpop-section-heading h2 {
    margin: 0;
    font-size: 1.25rem;
}

.rxmpop-section-heading p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.7;
}

.rxmpop-period-toggle {
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rxmpop-period-toggle a {
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 127, 127, 0.3);
    opacity: 0.7;
}

.rxmpop-period-toggle a.is-active {
    opacity: 1;
    background: rgba(127, 127, 127, 0.15);
}

.rxmpop-see-all {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.rxmpop-see-all:hover {
    text-decoration: underline;
}

/* 0.6.3: wraps the "Trending" + "See full ranking" pair in each hub section heading (see
 * render_section_links()) so they sit together as one cluster on the heading's right side. */
.rxmpop-section-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.rxmpop-empty {
    opacity: 0.7;
    font-style: italic;
}

.rxmpop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rxmpop-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(127, 127, 127, 0.2);
    border-radius: 0.5rem;
}

.rxmpop-rank {
    font-weight: 700;
    opacity: 0.5;
    min-width: 2.5rem;
}

.rxmpop-name {
    flex: 1 1 auto;
    font-weight: 600;
    text-decoration: none;
}

.rxmpop-name:hover {
    text-decoration: underline;
}

.rxmpop-stars {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #f59e0b;
    white-space: nowrap;
}

.rxmpop-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.rxmpop-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    color: #fff;
    background: #6b7280;
    white-space: nowrap;
    text-decoration: none;
}

.rxmpop-badge:hover {
    opacity: 0.85;
    text-decoration: none;
}

.rxmpop-badge--mega_hit { background: #dc2626; }
.rxmpop-badge--popular { background: #ea580c; }
.rxmpop-badge--trending { background: #16a34a; }

.rxmpop-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

.rxmpop-pager a {
    font-weight: 600;
    text-decoration: none;
}

.rxmpop-pager a:hover {
    text-decoration: underline;
}

.rxmpop-profile-badges {
    margin: 0.75rem 0;
}

/* 0.6.0: badges relocated next to an entity/scene's own name via popularity.js (see that file's
 * header comment - no hook exists at either injection point, so this is a progressive-
 * enhancement DOM move, never a requirement for the badges to exist). Small enough to sit inline
 * with a heading without dwarfing it, with a little breathing room from the text before it. */
.rxmpop-inline-badges {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.625rem;
    gap: 0.375rem;
}

/* 0.6.0: the scene-page badge markup starts hidden (rendered into a footer template - see
 * render_scene_badges_footer()) until popularity.js moves it into the article title and removes
 * this class. A visitor with JS disabled simply never sees it - no broken/stray markup either
 * way, same "additive layer, never a requirement" reasoning as the rest of this stylesheet. */
.rxmpop-scene-badges-template {
    display: none;
}

/* 0.6.0 (Илия's screenshots: a long title pushes rank/points/badge around unpredictably on
 * narrow viewports - first just the points dropping to an awkward mid-row line, then, once
 * scene badges shipped, the rank itself ending up stranded alone above the title too). Applies
 * to every ranking type - performers, studios and scenes all share this same .rxmpop-row markup
 * (render_entity_row()/render_scene_row()), so one fix here covers all of them, per Илия's
 * confirmation ("това важи за всички видове класации, включително перформъри и студиа").
 *
 * Switches the row to a small grid instead of the wrapping flex row: rank and points sit in
 * their own fixed columns (never wrap, never move to a new line) and are vertically centered
 * against the title's own row, however many lines that title itself wraps to; the badge sits in
 * its own row directly under the title, in the title's column. Only the title (and the badge
 * below it) ever reflow - rank and points stay anchored exactly where a reader expects them. */
@media (max-width: 480px) {
    .rxmpop-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: 0.75rem;
        row-gap: 0.375rem;
    }

    .rxmpop-rank {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .rxmpop-name {
        grid-column: 2;
        grid-row: 1;
    }

    .rxmpop-stars {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
    }

    .rxmpop-badges {
        grid-column: 2;
        grid-row: 2;
    }
}

/* 0.6.0: the plain-language methodology note at the bottom of every /top/ page. */
.rxmpop-methodology {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
    font-size: 0.8125rem;
    opacity: 0.75;
}

.rxmpop-methodology p {
    margin: 0;
}

/* 1.1.0: scene balloons - injected into scene content via inject_scene_balloons(), theme-agnostic
 * like the rest of this file. Deliberately styled to look distinct from ordinary paragraph text
 * (bordered card, not blended prose) so it reads as a genuine callout rather than more body copy -
 * matches the intent behind Илия's "so they stand out more" instruction for the thumbnail. */
.rxmpop-balloon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 0.75rem;
    background: rgba(127, 127, 127, 0.06);
}

.rxmpop-balloon__thumb {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 0.5rem;
    line-height: 0;
}

.rxmpop-balloon__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1.2.0: wraps the main text + the "more scenes" line so a thumbnail-carrying balloon lays out
 * as photo + text COLUMN, rather than photo + single text line - needed once a balloon can carry
 * a second line (Илия's own note, 2026-09-29: a single-performer balloon "looks thin" on
 * desktop, wanted 2-3 more scene links to fill the width out). */
.rxmpop-balloon__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rxmpop-balloon__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.rxmpop-balloon__text a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.rxmpop-balloon__text a:hover {
    text-decoration: underline;
}

/* The "More: ..." line of 2-3 random other scenes from the same performer - smaller and muted
 * so it reads as a secondary detail, never competing with the main fact sentence above it. */
.rxmpop-balloon__more {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    opacity: 0.75;
}

.rxmpop-balloon__more a {
    color: inherit;
    text-decoration: none;
}

.rxmpop-balloon__more a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .rxmpop-balloon {
        gap: 0.625rem;
        padding: 0.625rem 0.75rem;
    }

    .rxmpop-balloon__thumb {
        width: 44px;
        height: 44px;
    }

    .rxmpop-balloon__text {
        font-size: 0.875rem;
    }

    .rxmpop-balloon__more {
        font-size: 0.75rem;
    }
}