/* Conteudo da subseção de portifolio */



.container_list_trajetoria {

    width:100%;    
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:start;
    padding:5px;
    gap:15px;
    
}


.content_list_trajetoria{
    width:100%; 
    
    color:var(--cor-primary);
    background: var(--cor-primary-linear-gradient); 
    border: 1px solid var(--cor-primary-linear-gradient); 
    border-radius:15px; 
    padding:10px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
   
    transition:scale 0.2s ease;
}


.content_list_trajetoria:hover{

    transform:scale(1.008);
    filter:brightness(1.1);

}


/* Conteudo dos items da lista */


/* cabeçalho do card do trajeto  */
.container_header_trajetoria{
    display:flex;
    flex-direction:row;
    align-items:start;
    justify-content:space-between;
    gap:10px;
    align-self:start;
}


.container_image_perfil{
    max-width:50px;
    max-height:50px;
    display:flex;
    align-items:center;
    justify-content:start;
   
    border: 1px solid var(--cor-primary-linear-gradient);
    border-radius:25%;
    overflow:hidden;

}

.image_perfil_trajetoria{
    
    max-width: 100%;
    max-height: 100%;
    
    object-fit:cover;
    
}

.container_headerText_trajetoria{
    width:100%;
    
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:start;
    
}

.container_headerText_trajetoria h3 {
    text-align:left;
    font-size:0.9rem;

}

.container_headerText_trajetoria h4{
    margin:2px 0px;
    text-align:left;
    font-size:0.85rem;
    font-weight: normal;
}



/* Descrição do card de trajetoria  */

.container_description_trajetoria {
    display: flex;               
    flex-direction: column;
    overflow: hidden;            
    max-height: 0;               
    opacity: 0;                  
    
    text-shadow:none;
    transform:translateY(1px);
    transition:
      max-height 0.2s ease,     
      opacity     0.2s ease,
      transform 0.2s ease;
}


.container_description_trajetoria.active {
    width:100%;
    max-height:100000px;
    transform:translateY(5px);
    opacity:1;
    margin: 10px 0;
    gap:10px;

    transition:
    max-height 0.6s ease,     
    opacity     0.6s ease,
    transform 0.6s ease;

}

.content_calendar_trajetoria {

    width:100%;
    display:flex;
    flex-direction: row; 
    gap:5px;

    align-items:center;
    justify-items:center;
   

}


.image_calendar{

    max-width:18px;
    object-fit:cover;

}

.calendar_text{
    display:flex;
    flex-direction: column;
    gap:5px;


    font-size:0.6rem;
    font-weight:800;
    
}


.content_text_trajetoria{

    font-size:0.6rem;
    font-weight:600;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    
}

/* botao no rodape do card "ver mais e ver menos"  */

.btn_seeMore {
    max-width: 100px;
    margin:10px 0px;
    padding:0px 10px;
    background:var(--cor-primary);
    border:none;
    border-radius:20px;
    color:var(--cor-primary);
    transition: transform 0.1s ease;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor: pointer;
    
}

.btn_seeMore:hover {
    transform:scale(1.02);
    font-weight:bold;
    }

.btn_seeMore:active {
    transform:translateY(1px);
    font-weight:bold;    
}


.btn_arrowImage_seeMore {
    max-width:15px;
    
    
}


/* botão de certificados */
.btn-certificate{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;

    width:50%;
    padding:5px 15px;

    background-color:var(--cor-primary);
    border:none;
    border-radius:20px; 

    transition: all 0.8s ease;
}

.btn-certificate:hover{
    filter: brightness(1.1), drop-shadow(1px 1px 1px var(--cor-secundary-alpha));
    transform:scale(1.08);
    border:1px solid var(--cor-secundary);
}


.btn-certificate img{
    max-width:20px;
}


.btn-certificate p{
    width:80px;
    text-align: center;
}






/* Responsividade globais */



@media (min-width:1080px){
    
    .container_list_trajetoria{

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow:row;
        align-items:start;
        justify-content:center;
    
    }

}