@charset "utf-8";

/* ALTERAÇÃO: arquivo criado. Estilos usados SÓ na página inicial (index.html).
   O que é comum a todas as páginas fica no style.css */

#topo{
    padding-top: 200px;   /* empurra só o texto, a foto começa lá em cima */
    /* ALTERAÇÃO: o "../" foi adicionado porque o CSS agora está na pasta css/, então precisa sair dela para achar a pasta img/ */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 1)), url(../img/fotos-box/imagem-nova-01.jpg);
    background-size: cover;        /* a imagem cobre a seção toda */
    background-position: center;   /* centraliza a imagem */
    background-repeat: no-repeat;  /* não repete a imagem */
    height: 100vh;                 /* seção com a altura da tela inteira */

    text-align: center;
}

#sobre {
    padding: 100px 5%;
    flex-direction: row;
    display: flex;
    justify-content: space-around;
    align-items: center; /* ALTERAÇÃO: texto e carrossel ficam alinhados pelo meio */
    background-color: black;
}
#sobre article p{
    font-size: 20px;
    color: gray;
}
/* ALTERAÇÃO: no Sobre o título fica à esquerda, porque o texto está em coluna ao lado do carrossel */
#sobre .sub, #sobre .titulo {
    text-align: left;
}
#sobre article {
    width: 50%;
    padding: 50px 50px;
}

/* ALTERAÇÃO: carrossel refeito, a troca das fotos agora é feita no js/carrossel.js
   (antes era só CSS, com overflow-x e scroll-snap) */
#carrossel{
    width: 50%;
    margin: 0;              /* a tag figure vem com margem por padrão, aqui tiramos */
    position: relative;     /* serve de referência para posicionar os botões em cima da foto */
}
#moldura {
    width: 100%;
    height: 500px;
    object-fit: cover;  /* a imagem cobre o espaço definido, cortando o que passar */
    border-radius: 20px;
    display: block;     /* tira o espacinho que fica embaixo da imagem */
}
#carrossel button {
    position: absolute;     /* o botão "flutua" em cima da foto */
    top: 250px;             /* metade da altura da foto (500px / 2) */
    margin-top: -25px;      /* sobe metade da altura do botão, para ficar bem no meio */
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;     /* deixa o botão redondo */
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFC300;
    font-size: 20px;
    cursor: pointer;        /* mostra a "mãozinha" ao passar o mouse */
}
#carrossel button:hover {
    background-color: #FFC300;
    color: black;
}
#btnVoltar {
    left: 15px;
}
#btnAvancar {
    right: 15px;
}
/* ALTERAÇÃO: a parte comum dos cards foi para a classe .card no style.css,
   aqui fica só o que é específico das modalidades */
#modalidades article {
    max-width: 500px; /* o card não fica largo demais em telas grandes */
}
#modalidades article img{
    width: 100%;
    height: 300px;
    object-fit: cover; /* ALTERAÇÃO: as duas fotos ficam com a mesma altura, cortando o excesso */
}

/* ALTERAÇÃO: seção nova com chamada para as páginas de planos e horários */
#chamada {
    padding: 100px 5%;
    text-align: center;
}
#chamada p {
    font-size: 22px;
    color: gray;
    margin-bottom: 40px;
}
#chamada .botao {
    margin: 10px;
}

/* ALTERAÇÃO: seção nova de depoimentos */
#depoimentos article {
    padding: 30px;
}
#depoimentos blockquote {
    font-size: 20px;
    font-style: italic;
    margin: 0 0 20px 0;
}
#depoimentos cite {
    color: #FFC300;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media screen and (max-width: 600px) {
    
    #sobre, #modalidades, #chamada, #depoimentos {
        padding: 40px 5% 40px;
    }

    .card h3 {
        margin: 20px 0;
    }
    
    .card p {
        margin: 0px 0px 20px 0px;
    }

    /* ALTERAÇÃO: no celular o Sobre vira coluna (texto em cima, carrossel embaixo) */
    #sobre {
        flex-direction: column;
    }

    #sobre article, #carrossel {
        width: 100%;
        padding: 10px 0;
    }

    #sobre article p {
        text-align: justify;
    }
    
    #sobre .titulo, #sobre .sub {
        text-align: center;
    }

    #sobre .botao {
        display: block;       /* ocupa a própria linha */
        width: fit-content;   /* mas só do tamanho do conteúdo */
        margin: 0 auto;       /* centraliza horizontalmente */
        font-size: 24px;
    }

    #moldura {
        height: 300px;
    }
    
    #carrossel button {
        top: 150px; /* metade da nova altura da foto (300px / 2) */
    }

}