/* =================================================
   Hotsite Responsive Overrides — /membros e /membros/{slug}

   Só entra aqui o que hotsite.css NÃO ajusta em media query.
   Todo seletor .member-* com breakpoint próprio em hotsite.css
   (perfil, toolbar, busca, filtros) é ajustado LÁ — uma fonte de
   verdade por seletor. O que sobrou abaixo não tem media query
   em hotsite.css.
   ================================================= */

@media (max-width: 1024px) {
    .member-grid {
        gap: 1.1rem;
    }
}

@media (max-width: 820px) {
    .member-grid {
        grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
        gap: 1rem;
    }

    .member-profile-avatar {
        width: 11rem;
        height: 11rem;
    }

    .member-profile-highlights {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .member-profile-avatar {
        width: 9.75rem;
        height: 9.75rem;
    }

    .member-profile-highlights {
        grid-template-columns: 1fr;
    }

    .member-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.9rem;
    }
}

@media (max-width: 480px) {
    .member-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .member-profile-avatar {
        width: 8.5rem;
        height: 8.5rem;
        border-width: 4px;
    }

    .member-search__shell {
        max-width: 100%;
    }

    .member-search__icon {
        left: 0.85rem;
    }
}