/* Resets básicos e configuração de altura total */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', sans-serif;
}

.teaser-container {
    width: 100%;
    height: 100vh;
    /* Ocupa 100% da altura da tela */
    position: relative;
    /* Necessário para posicionar o container de links */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    /* Como solicitado */
    background-color: #f0f0f0;
    /* Cor de fundo caso a imagem não preencha tudo */
}

/* Estilos para o container dos links */
.links-container {
    position: absolute;
    bottom: 10%;
    /* Posiciona a 30% da parte inferior da página */
    left: 0;
    right: 0;
    width: 100%;
    max-width: 960px;
    /* Limita a largura em telas muito grandes */
    padding: 0 15px;
}

/* Estilos para cada caixa de link */
.link-box {
    display: block;
    padding: 20px;
    /* Novo estilo com gradiente */
    background: linear-gradient(to bottom, #fcdf43, #cc8d0c);
    color: #2e383f;
    box-shadow: 0 4px 8px rgba(46, 56, 63, 0.3);
    /* Sombra com a cor #2e383f e transparência */
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.link-box:hover {
    transform: translateY(-5px);
    /* Efeito sutil ao passar o mouse */
    box-shadow: 0 6px 12px rgba(46, 56, 63, 0.4);
    /* Sombra mais forte no hover */
    color: #2e383f;
    /* Garante que a cor do texto não mude */
}

.link-box h2 {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.link-box p {
    margin-bottom: 0;
}

/* --- Media Queries para Responsividade --- */

/* Estilo para Mobile (telas menores que 768px) */
/* Por padrão, o Bootstrap já empilha as colunas, então só precisamos definir a imagem de fundo */
.teaser-container {
    background-image: url('../img/bg_vertical.jpg');
}

/* Estilo para Desktop (telas de 768px ou maiores) */
@media (min-width: 768px) {
    .teaser-container {
        background-image: url('../img/bg_horizontal.jpg');
    }
}