/* ======================================= */
/* 1. Estilos Base (Mobile First)          */
/* Aplica-se a todas as telas, por padrão  */
/* ======================================= */

:root {
    --azul: #132748;
    --amarelo: #d99000;
    --branco: #f3f3f3;
    --branco-a: #fff;
}

/* Garante que padding e bordas não adicionem largura */
*, *::before, *::after {
    box-sizing: border-box; 
}

.team {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 52px;
}

.team h2 {
    font-size: 2em;
    margin-bottom: 30px;
    color: var(--azul);
    font-weight: bold;
}

/* Configuração Mobile: Cards empilhados (1 coluna) */
.equipe {
    display: flex;
    flex-direction: column; 
    gap: 20px;
    margin-bottom: 20px;
    /* Centraliza os cards em telas pequenas */
    align-items: center; 
}

.curriculo {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: 100%;
    /* No mobile, o card ocupa quase toda a largura, mas limitado a 400px */
    width: 90%; 
    max-width: 400px;
}

.professor-img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--amarelo);
}

.curriculo h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--azul);
}

.curriculo p {
    font-size: 0.95rem;
    color: #555;
    flex-grow: 1;
    margin-bottom: 20px;
    min-height: 50px;
}

.curriculo button {
    background-color: var(--azul);
    color: var(--branco-a);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 700;
}

.curriculo button:hover {
    background-color: var(--amarelo);
}

/* ======================================= */
/* 2. Media Query - Tablet (>= 768px)      */
/* 2 cards por linha                       */
/* ======================================= */

@media (min-width: 768px) {

    .team {
        max-width: 900px;
        margin: 0 auto;
    }

    .equipe {
        flex-direction: row; 
        flex-wrap: wrap; 
        /* Alinha os cards na horizontal e distribui o espaço */
        justify-content: space-between; 
        align-items: stretch; /* Garante que os cards tenham a mesma altura */
    }
    
    /* Zera a largura fixa para o Flexbox assumir */
    .curriculo {
        width: 100%; 
        max-width: none;
    }

    /* Redefine a largura do contêiner do card para 50% */
    .equipe section {
        width: calc(50% - 10px); /* 50% da largura, subtraindo metade do gap */
    }

    .curriculo p {
        min-height: 70px;
    }
}

/* ======================================= */
/* 3. Media Query - Desktop (>= 1024px)    */
/* 2 cards por linha, mas em um contêiner maior */
/* ======================================= */

@media (min-width: 1024px) {

    .team {
        /* Aumentamos a largura máxima do contêiner */
        max-width: 1200px;
    }

    .equipe {
        /* Aumentamos o espaçamento vertical entre os cards */
        gap: 30px 20px; 
        /* Alinha ao início para manter o fluxo organizado */
        justify-content: flex-start; 
    }

    .curriculo p {
        min-height: 80px; 
    }
}