@import "./styles/reset.css";
@import "./styles/general.css";

#hero .container, #duvidas .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
#hero .container .content:first-child {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#hero h1 {
    font-size: 3.75rem;
    margin-bottom: 1.5rem;
    color: #101828;
    line-height: 4.5rem;
    letter-spacing: -0.02em;
}
#hero h1 span { color: #3697ED; }
#hero p {
    font-size: 1.25rem;
    line-height: 1.5em;
    color: #475467;
}
#quem-somos {
    position: relative;
    background: #2C53A4;
    color: #F0F0F2;
    padding-top: 6rem;
    padding-bottom: 9rem;    
}
#quem-somos .info-group { margin-bottom: 2.5rem; }
#quem-somos > .container > .content > span { 
    display: block;
    margin-bottom: .75rem;
    font-weight: 600;
    line-height: 1.5em;
}
#quem-somos > .container > .content > h2 { 
    margin-bottom: 1.25rem;
    color: #F0F0F2; 
}
#quem-somos > .container > .content > p { color: #D5D7DA; }
#nosso-time .container {
    display: flex;    
    flex-wrap: wrap;
    gap: 3rem;
    margin-top: 6rem;
}
#nosso-time > .container > .content { flex: 1 0 330px; }
#nosso-time > .container > .content > span {
    display: block;
    margin-bottom: .75rem;    
    font-weight: 600;
    color: #3697ED;
}
#nosso-time  > .container > .content > h2 { margin-bottom: 1.25rem; }
#nosso-time  > .container > .content > p { color:#475467 }
#nosso-time .container .cardList {    
    flex: 2;
    flex-basis: 700px;
    display: flex;        
    flex-wrap: wrap;
    gap: 2rem;
}
#nosso-time .cardList .card {    
    flex: 1 1 300px;
    flex-basis: 300px;
    position: relative;    
}
#nosso-time .cardList .cardInfo {
    margin: 0 1rem;
    padding: 1rem;
    position: absolute;
    bottom: 1rem;
    background: rgba(42, 60, 104, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    color: #FFF;
    min-height: 150px;
}
#nosso-time .cardList .cardInfo .name{ 
    color: #FFF;
    font-size: 1.75rem;
    line-height: 1.35em;
    margin-bottom: .5rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
#nosso-time .cardList .cardInfo .role{ 
    margin-bottom: .25rem;
    font-size: 1rem;
    line-height: 1.75em;
    font-weight: 600;
}
#nosso-time .cardList .cardInfo .description{ 
    font-size: .875rem;
    line-height: 1.4em;
}
#nosso-time .cardList .cardInfo a{ 
    position: fixed;    
    bottom: .8rem;
}
#duvidas {
    background: #EBF0FB;
    padding: 6rem 0;
    margin-bottom: 0;
}
#duvidas span {
    display: block;
    margin-bottom: .75rem;
    color: #3697ED;
    font-weight: 600;
}
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.accordion-item {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-radius: 1rem;
    background-color: transparent; 
    border: none;
    cursor: pointer;
    padding: 2rem;
}
.accordion-item .accordion-header:after {    
    top: 0;    
    background: url('./images/icon-plus.svg');
    background-size: contain;
    width: 1.25rem;    
}
.accordion-item.show { 
    padding: 2rem;
    background-color: #F9FAFB;     
}
.accordion-item.show .accordion-header:after { background-image: url('./images/icon-minus.svg'); }
.accordion-header {    
    padding: 0;
    padding-right: 2rem;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
}
.accordion-body {
    font-size: 16px;
    color: #475467;
    padding-right: 2rem;
    line-height: 1.5em;
}

@media (max-width: 768px){
    #hero .container, #duvidas .container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #hero { padding: 2rem 0; }
    #hero h1 { font-size: 2rem; }

    #quem-somos { padding: 2rem 0; }
    #quem-somos h3 { font-size: 1.5rem; }
    #quem-somos .container { display: block; }
    #quem-somos .document-list {
        position: unset;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: unset;
        transform: unset;
        gap: 1rem;
        padding: 2rem;
    }
    #quem-somos .document-list .card { flex-direction: column; }
    #quem-somos .document-list .card a {
        text-decoration: unset;
        color: #003FF2;
    }
    #nosso-time { padding: 3rem 0; }
    #nosso-time .container { display: block; }
    #duvidas { padding: 3rem 0; }
    footer .content { display: block; }
}