/* ============================================================
   Spoilery — assets/css/pages/profile.css
   Cartella: /assets/css/pages/
   Profilo utente: intestazione, numeri, badge, serie seguite.
   ============================================================ */

.st-profile .container { max-width: 760px; }

/* ---------- Intestazione ---------- */
.st-profile-cover {
    height: 110px;
    background:
        radial-gradient(120% 140% at 85% 0%, rgba(218, 9, 21, .45), transparent 60%),
        radial-gradient(90% 120% at 0% 100%, rgba(120, 6, 14, .35), transparent 60%),
        var(--st-raised);
}
@media (min-width: 768px) { .st-profile-cover { height: 160px; } }

.st-profile-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: -48px; }
.st-profile-avatar { width: 96px; height: 96px; border: 4px solid var(--st-ink); }
@media (min-width: 768px) { .st-profile-avatar { width: 120px; height: 120px; } .st-profile-top { margin-top: -60px; } }
.st-profile-actions { display: flex; align-items: center; gap: .35rem; padding-bottom: .3rem; }
.st-profile-actions .btn { white-space: nowrap; }
/* "Modifica profilo": pulsante piccolo, non deve prendere la scena */
.st-profile-actions .st-profile-edit { --bs-btn-padding-y: .22rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .8rem; gap: .3rem; }
.st-profile-actions .st-profile-edit .bi { font-size: .8rem; }
.st-profile-follow { min-width: 108px; min-height: 38px; }

.st-profile-info { padding-top: .75rem; }
.st-profile-name { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.st-profile-username { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .1rem 0 .6rem; color: var(--st-muted); }
.st-profile-flag { padding: .05rem .5rem; border-radius: 999px; background: rgba(248, 113, 113, .15); color: #FCA5A5; font-size: .75rem; font-weight: 700; }
.st-profile-bio { margin-bottom: .5rem; line-height: 1.5; overflow-wrap: anywhere; }
.st-profile-joined { margin-bottom: .9rem; color: var(--st-muted); font-size: .85rem; }

.st-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 1rem;
    padding: .7rem 0;
    list-style: none;
    border-top: 1px solid var(--st-line);
    border-bottom: 1px solid var(--st-line);
    text-align: center;
}
.st-profile-stats li > *, .st-profile-stats a { display: flex; flex-direction: column; align-items: center; color: var(--st-text); text-decoration: none; }
.st-profile-stats strong { font-family: var(--st-font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.st-profile-stats span { color: var(--st-muted); font-size: .72rem; line-height: 1.2; }
.st-profile-stats a:hover span { color: var(--st-text); }

.st-profile-badges { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .5rem; text-decoration: none; }
.st-profile-badges-more { color: var(--st-muted); font-size: .85rem; font-weight: 700; margin-left: .2rem; }

.st-profile-body { padding-bottom: 2rem; }

/* ---------- Serie seguite ---------- */
.st-pseries { margin: 0; padding: 0; list-style: none; }
.st-pseries-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(44, 44, 48, .7);
    color: var(--st-text);
    text-decoration: none;
}
.st-pseries-item:hover { color: #fff; }
.st-pseries-poster { width: 52px; height: auto; flex-shrink: 0; border-radius: 6px; }
.st-pseries-info { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; min-width: 0; }
.st-pseries-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pseries-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; color: var(--st-muted); font-size: .8rem; }
.st-pseries-meta .st-ep-code { font-size: .7rem; }
.st-pseries-done { color: #4ADE80; font-weight: 600; }
.st-pseries-item .st-rating-badge { flex-shrink: 0; background: var(--st-raised); }

/* ---------- Badge ---------- */
.st-badges-title { margin: .5rem 0 .75rem; font-size: 1rem; }
.st-badges { display: grid; gap: .6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
@media (min-width: 576px) { .st-badges { grid-template-columns: 1fr 1fr; } }
.st-badge {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem .85rem;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-surface);
}
.st-badge > span:last-child { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.st-badge strong { font-size: .95rem; }
.st-badge small { color: var(--st-muted); font-size: .8rem; line-height: 1.35; }
.st-badge-date { margin-top: .15rem; }
.st-badge.is-locked .st-badge-icon { filter: grayscale(1); opacity: .45; }
.st-badge-progress { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.st-badge-progress .st-bar { flex: 1 1 auto; height: 5px; }