/* Estilos Gerais */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 20%;
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
}

/* === CABEÇALHO ATUALIZADO === */
.header-com-colunas {
    display: flex; /* Transforma o header em um contêiner flex */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    justify-content: space-around; /* Distribui o espaço entre a logo e o texto */
    padding: 20px; /* Adiciona um pouco de padding ao cabeçalho */
    background-color: #f0f0f0; /* Um fundo para o cabeçalho, opcional */
    border-bottom: 1px solid #ccc; /* Uma linha para separar, opcional */
}

.coluna-logo {
    /* Ajustes para a coluna da logo, se necessário */
    flex-shrink: 0; /* Impede que a logo encolha demais */
}

.coluna-logo .logo {
    max-width: 150px; /* Define um tamanho máximo para a logo */
    height: auto; /* Mantém a proporção */
}

.coluna-texto {
    /* Ajustes para a coluna de texto */
    text-align: center; /* Centraliza o texto dentro da coluna */
    margin-left: 20px; /* Adiciona um espaçamento entre a logo e o texto */
}

.coluna-texto h1 {
    margin-top: 0; /* Remove margem superior padrão do h1 */
    margin-bottom: 10px; /* Espaço após o título */
}

.coluna-texto p {
    margin: 5px 0; /* Espaço entre os parágrafos */
}

/* Opcional: Para telas menores, você pode querer que eles fiquem um abaixo do outro */
@media (max-width: 768px) {
    .header-com-colunas {
        flex-direction: column; /* Empilha a logo e o texto em telas menores */
        text-align: center; /* Centraliza tudo */
    }

    .coluna-texto {
        margin-left: 0; /* Remove o margin-left quando empilhado */
        margin-top: 20px; /* Adiciona espaço acima do texto */
    }
}
/* === FIM DA ATUALIZAÇÃO DO CABEÇALHO === */


/* Conteúdo Principal */
main {
    padding: 20px 0;
}

.intro {
    text-align: center;
    padding-bottom: 20px;
}

.intro h2 {
    color: #004d99;
}

.destaque-futsal {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.destaque-futsal h3 {
    text-align: center;
    color: #333;
}

/* Seção da Galeria de Fotos */
.galeria-fotos {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.galeria-fotos h2 {
    text-align: center;
    color: #004d99;
    margin-bottom: 20px;
}

.grid-imagens {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.grid-imagens img {
    width: 200%;
    aspect-ratio: 9 / 3;
    object-fit: cover;
    border-radius: 8px;
}

/* Rodapé */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 20px;
}

/* === AJUSTE PARA TELAS MENORES (RESPONSIVIDADE) === */
@media (max-width: 992px) {
    .grid-imagens {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    /* Em telas pequenas, o logo volta para cima e centralizado */
    header .container {
        flex-direction: column;
    }

    .logo {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .header-texto {
        text-align: center;
    }
    
    .header-texto h1 {
        font-size: 2rem;
    }

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