/* ==========================================================
   PORTAL DAS JORNADAS CIENTÍFICAS
   Universidade Jean Piaget de Angola
   Ficheiro: responsive.css
   ========================================================== */

/* ==========================================================
   DESKTOP GRANDE
========================================================== */

@media (max-width:1400px){

    .container{
        max-width:1140px;
    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .container{
        max-width:960px;
    }

    .hero h1{
        font-size:3.2rem;
    }

    .hero h3{
        font-size:1.4rem;
    }

    .hero-logo img{
        width:320px;
    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .container{
        max-width:720px;
    }

    section{
        padding:80px 0;
    }

    .hero{
        min-height:70vh; /* mantém espaço suficiente para a imagem de fundo */
        padding:100px 0 70px;
        text-align:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .hero h3{
        font-size:1.3rem;
    }

    .hero p{
        margin:auto;
    }

    .hero-logo{
        margin-top:50px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-stats{
        justify-content:center;
    }

    .section-header h2{
        font-size:2.3rem;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .container{
        max-width:100%;
    }

    body{
        font-size:15px;
    }

    section{
        padding:70px 0;
    }

    h1{
        font-size:2.3rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.5rem;
    }

    .hero{
        min-height:60vh;
    }

    .hero h1{
        font-size:2.3rem;
    }

    .hero h3{
        font-size:1.1rem;
    }

    .hero p{
        font-size:1rem;
    }

    .hero-logo img{
        width:230px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .hero-buttons .btn{
        width:100%;
        max-width:320px;
    }

    .section-header{
        margin-bottom:50px;
    }

    .section-header h2{
        font-size:2rem;
    }

    .section-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}

/* ==========================================================
   SMARTPHONES
========================================================== */

@media (max-width:576px){

    body{
        font-size:14px;
    }

    section{
        padding:60px 0;
    }

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.7rem;
    }

    h3{
        font-size:1.3rem;
    }

    .hero{
        min-height:50vh;
        padding:90px 0 60px;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero-logo img{
        width:180px;
    }

    .hero-stats{
        flex-direction:column;
        gap:25px;
    }

    .card{
        margin-bottom:20px;
    }

    .card-body{
        padding:20px;
    }

    .navbar{
        height:65px;
    }

    .header{
        padding:0;
    }

    .logo img{
        width:50px;
        height:50px;
    }

    .logo-text h1{
        font-size:1rem;
    }

    .logo-text span{
        display:none;
    }

    .sidebar{
        width:280px;
    }

}

/* ==========================================================
   DISPOSITIVOS MUITO PEQUENOS
========================================================== */

@media (max-width:400px){

    .container{
        padding-left:12px;
        padding-right:12px;
    }

    h1{
        font-size:1.7rem;
    }

    h2{
        font-size:1.5rem;
    }

    .hero h1{
        font-size:1.6rem;
    }

    .hero-buttons .btn{
        font-size:.9rem;
        height:48px;
    }

    .btn{
        padding:10px 18px;
    }

    .section-header h2{
        font-size:1.5rem;
    }

    .footer{
        padding:50px 0 20px;
    }

}

/* ==========================================================
   IMPRESSÃO
========================================================== */

@media print{

    .navbar,
    .footer,
    .sidebar,
    .hero-buttons,
    .btn{
        display:none!important;
    }

    body{
        background:#FFF;
        color:#000;
    }

    *{
        box-shadow:none!important;
    }

}