/* membros.css */

/* NOVO: Wrapper para centralizar e aumentar a largura da página */
.page-wrapper {
    width: 80%; /* Ocupa 80% da tela */
    max-width: 1600px; /* ALTERADO: Mantém um limite superior */
    margin: 0 auto; /* Centraliza */
    padding: 2rem 0;
}

.members-page {
    padding: 0; 
}

/* Centraliza Títulos e Descrição */
.members-page h1, .members-page p {
    text-align: center;
}


/* --- FILTROS (Estilo Centralizado, Compacto e Responsivo) --- */
.filter-group {
    /* Ocupa a largura total do page-wrapper */
    margin: 10px 0; 
    padding: 10px 0; 
    
    /* Remove background e sombra para um visual mais limpo na borda */
    background-color: transparent; 
    box-shadow: none; 
    text-align: center;
    
}
.filter-group h4 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 8px; 
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    /* Simula a borda superior para "encaixar" */
    padding-top: 5px;
    border-top: 2px solid var(--color-primary);
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os botões */
    gap: 6px; 
}

.filter-menu button, .filter-buttons .filter-btn {
    background-color: #fff;
    color: var(--color-primary);
    border: 1px solid #ccc;
    padding: 6px 10px; 
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    font-size: 0.8rem;
    white-space: nowrap; 
}

.filter-menu button:hover, 
.filter-buttons .filter-btn:hover,
.filter-menu button.active,
.filter-buttons .filter-btn.active {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- GRID DE MEMBROS (Correção Definitiva da Centralização e Altura) --- */
.members-grid {
    display: grid;
    /* AJUSTE DE LARGURA: Reduzido para 220px */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 30px;
    margin-top: 30px;
    
    /* Garante que o grid se centralize no espaço restante do container */
    justify-content: center; 
}


/* Efeito de Transição para o Filtro */
.member-card {
    /* Altura Mínima para Uniformizar os Cards */
    min-height: 400px; 
    
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, opacity 0.3s, min-height 0.3s, margin 0.3s;
    
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-radius: var(--border-radius);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: perspective(1000px) rotateX(0deg);
}

.member-card.hidden {
    opacity: 0;
    transform: scale(0.9);
    min-height: 0; /* Colapsa */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}


/* --- CARD DE MEMBRO --- */

.member-card:hover {
    transform: perspective(1000px) rotateX(3deg) translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 15px var(--color-secondary);
}

.member-image-container {
    position: relative;
    /* Ajusta o tamanho do container da imagem para a nova largura */
    width: 150px; 
    height: 150px;
    margin-bottom: 1rem;
    cursor: pointer;
    overflow: hidden; 
    
    /* ESTILO DA BORDA: Quadrado com dois cantos arredondados */
    border-radius: 0 var(--border-radius) var(--border-radius) 0; 
    border: 4px solid var(--color-text-light);
}

.member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

/* Solução para a lentidão/falha de carregamento: Estilo para o placeholder */
.member-image:not([src]) {
    background-color: #555; 
    content: "Foto Indisponível";
    color: white;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


.member-name {
    color: var(--color-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    min-height: 4.5em; 
}

.member-info {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Exibição do País/Sigla */
.member-info .country-pill, .member-info .sigla-pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--color-secondary);
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-right: 5px;
}

/* Estilos de links e pop-up (mantidos) */
.member-links {
    margin-top: auto;
    display: flex;
    gap: 10px;
    margin-top: 1rem;
}
.member-links .btn-link {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s;
}

.member-links a:hover {
    background-color: #f39c12;
}

@media (max-width: 768px) {
    .page-wrapper {
        width: 100%; 
        padding: 0 10px;
    }
    .members-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
        gap: 20px;
    }
}