/* Adattamento della sola pagina Persone: le righe condivise e il mobile
   mantengono gli stili originali. */
body.followed-page .followed-connection-summary > div {
    position: relative;
}
.followed-summary-link::after {
    content: '';
    position: absolute;
    inset: -0.35rem 0.25rem;
    border-radius: 0.5rem;
}
.followed-summary-link:hover {
    color: var(--content-heading);
    text-decoration: underline;
}
.followed-summary-link:focus-visible::after {
    outline: 2px solid var(--action-primary);
}
body.followed-page :is(#following-title, #notif-title) {
    scroll-margin-top: 7rem;
}
.followed-reset {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    color: var(--content-secondary);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
.followed-reset:hover { color: var(--content-heading); }
.followed-reset:focus-visible {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
    border-radius: 0.5rem;
}
.followed-reset[hidden] { display: none; }

@media (min-width: 768px) {
    body.followed-page .ha-person-list {
        max-width: none;
    }
}

@media (min-width: 1024px) {
    body.followed-page .followed-shell {
        max-width: 90rem;
        padding-inline: 2.5rem;
    }

    body.followed-page .followed-hero {
        --page-hero-pad-x: max(2.5rem, calc((100vw - 90rem) / 2 + 2.5rem));
        /* L'altezza resta quella condivisa in 28-page-hero.css. La foto
           prosegue dietro ai controlli senza spostare la lista più in basso. */
        margin-bottom: calc(19rem - clamp(20rem, 28vw, 27rem));
    }

    body.followed-page .followed-search-bar,
    body.followed-page .followed-filters {
        position: relative;
        z-index: 1;
    }

    body.followed-page .followed-search-bar {
        display: grid;
        grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto;
        gap: 0.85rem;
    }

    body.followed-page .followed-search-input,
    body.followed-page .followed-search-btn {
        min-width: 0;
        min-height: 3.25rem;
        font-size: 1rem;
    }

    body.followed-page .followed-search-input {
        --ha-field-bg: rgba(35, 31, 32, 0.92);
    }

    body.followed-page .followed-search-input::placeholder {
        color: var(--content-secondary);
    }

    body.followed-page .followed-section {
        margin-top: 2.5rem;
    }

    body.followed-page .followed-section-heading h2 {
        font-size: 1.85rem;
        line-height: 1.25;
    }

    body.followed-page .ha-person-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    body.followed-page .ha-person-row {
        min-width: 0;
        min-height: 7rem;
        padding: 1.25rem;
        gap: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.025);
    }

    body.followed-page .ha-person-row:hover,
    body.followed-page .ha-person-row:focus-within {
        background: rgba(255, 255, 255, 0.055);
    }

    /* Il menu resta sopra le schede successive, senza ritagliarlo. */
    body.followed-page .ha-person-row:focus-within {
        z-index: 1;
    }

    body.followed-page .ha-person-identity {
        gap: 1rem;
    }

    body.followed-page .ha-person-avatar {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.15rem;
    }

    body.followed-page .ha-person-name {
        font-size: 1.1rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.followed-page .ha-person-meta {
        font-size: 0.9rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.followed-page .ha-person-text {
        gap: 0.35rem;
    }

    body.followed-page .ha-person-button {
        min-height: 2.75rem;
        font-size: 0.9rem;
    }

    body.followed-page .ha-person-menu-button {
        width: 2.75rem;
        height: 2.75rem;
    }

    body.followed-page .ha-person-more,
    body.followed-page .ha-person-list > .followed-empty {
        grid-column: 1 / -1;
    }

    body.followed-page .ha-person-more {
        margin-top: 0.25rem;
    }

    body.followed-page .followed-section > p {
        margin-bottom: 1rem;
        color: var(--content-secondary);
    }
}

@media (min-width: 1280px) {
    body.followed-page .followed-section-discover {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1.5rem;
    }

    body.followed-page .followed-section-discover > .followed-section-heading,
    body.followed-page .followed-connection-summary {
        margin: 0;
    }

    body.followed-page .followed-connection-summary {
        padding: 0;
        border: 0;
    }

    body.followed-page .followed-connection-summary > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    body.followed-page .followed-connection-summary dt {
        grid-column: 1;
        grid-row: 2;
    }

    body.followed-page .followed-section-discover > .followed-browser {
        grid-column: 1 / -1;
    }
}