/* layout.css — arranjo cartão/painel e TODA a responsividade.
   Regra: nenhuma media query fora deste arquivo. */

.layout{
    display:flex;
    gap:24px;
    align-items:center;

    /* sem isto o conjunto ultrapassa a janela em vez de encolher, e o par
       cartão+painel sai pela esquerda em telas menores */
    max-width:100%;
}

/* O menu tem tamanho fixo: quem cede espaço quando a janela aperta é o
   painel, sempre. Sem isso os dois encolhem juntos, e em quantidades que
   dependem do painel aberto — o menu mudava de largura ao circular entre
   eles. */
.card:not(.painel){
    flex-shrink:0;
}

.painel{
    display:none;

    width:600px;
    flex-shrink:1;
}

.painel.aberto{
    display:block;
    padding:40px;
}

/* ---- empilhado ---- */
@media (max-width:900px){

    body{
        padding:20px;
        align-items:flex-start;
    }

    .layout{
        width:100%;
        flex-direction:column;
        align-items:center;
    }

    .painel{
        width:min(600px,90vw);
    }

}

/* ---- telas estreitas ---- */
@media (max-width:700px){

    body{
        padding:12px;
    }

    .layout{
        gap:16px;
    }

    .card,
    .painel{
        width:100%;
        max-width:none;
    }

    .card{
        padding:24px;
    }

    .painel.aberto{
        padding:24px;
    }

    h1{
        font-size:2.8rem;
    }

    .subtitle{
        font-size:1.3rem;
    }

    .links a{
        font-size:1.6rem;
    }

    .terminal-content{
        font-size:1.25rem;
    }

    .avatar{
        width:110px;
        height:110px;
    }

}