/*
 * Il profilo sul social (2026-10-22): la scheda nella colonna laterale di
 * /social (_scheda_profilo.html.twig) e la testata di /social/profilo/{username}.
 * Stesso linguaggio della testata di /settings (settings.css, classi st-):
 * copertina o sfumatura blu, foto tonda che sporge, ruolo e responsabile.
 * Classi sp-. Gli sfondi li da' .card, che il tema scuro gia' ricolora.
 */

/* --- Scheda nella colonna laterale ------------------------------------- */
.sp-scheda { border: 1px solid #e6e9ef; border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
.sp-scheda-copertina,
.sp-copertina {
    background-color: #467fcf;
    background-image: linear-gradient(120deg, #467fcf 0%, #2e86de 100%);
    background-size: cover; background-position: center;
}
.sp-scheda-copertina { height: 72px; }
.sp-scheda-corpo { padding: 0 1rem 1rem; text-align: center; }
.sp-scheda-foto,
.sp-foto {
    display: block; border: 4px solid #fff; border-radius: 50%; object-fit: cover;
    background: #e6e9ef; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.sp-scheda-foto { width: 76px; height: 76px; margin: -38px auto .4rem; }
.sp-scheda-nome { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.sp-ruolo { color: #9aa0ac; font-size: .85rem; }
.sp-resp { color: #6e7687; font-size: .8rem; margin-top: .15rem; }
.sp-resp b { font-weight: 600; }
.sp-scheda-azioni { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }

/* --- Pagina profilo ---------------------------------------------------- */
.sp-testata { border: 1px solid #e6e9ef; border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem; }
.sp-copertina { height: 180px; }
.sp-identita { display: flex; align-items: flex-end; gap: 1rem; padding: 0 1.25rem 1rem; }
.sp-foto { flex: 0 0 112px; width: 112px; height: 112px; margin-top: -56px; }
.sp-chi { min-width: 0; padding-top: .6rem; }
.sp-chi h1 { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.sp-chi .sp-resp { font-size: .82rem; }
.sp-modifica { margin-left: auto; align-self: center; margin-top: .6rem; }
.sp-titolo-post { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #9aa0ac; font-weight: 600; margin: 0 0 .6rem .25rem; }

/* Il nome dell'autore di un post porta al suo profilo (_post_testata). */
.social-post-autore { color: inherit; }
.social-post-autore:hover { color: #467fcf; }

@media (max-width: 576px) {
    .sp-copertina { height: 120px; }
    .sp-identita { flex-direction: column; align-items: flex-start; gap: .4rem; padding: 0 1rem 1rem; }
    .sp-foto { flex-basis: auto; width: 92px; height: 92px; margin-top: -46px; }
    .sp-chi { padding-top: 0; }
    .sp-modifica { margin: .25rem 0 0; align-self: flex-start; }
}

/* --- Tema scuro -------------------------------------------------------- */
html[data-theme="dark"] .sp-scheda,
html[data-theme="dark"] .sp-testata { border-color: var(--th-border, #2c3a49); }
html[data-theme="dark"] .sp-scheda-foto,
html[data-theme="dark"] .sp-foto { border-color: var(--th-surface, #171e26); background: var(--th-raised, #1f2937); }
html[data-theme="dark"] .sp-resp { color: var(--th-text-2, #8fa1b3); }