/* =========================
   Estilização global do corpo
   ========================= */

/*   Define a cor de fundo de toda a página  */

body {
    
    background-color: var(--fundoA);
}

/* =========================
   Container dos filmes
   ========================= */

/*    Cada card de filme tem um container interno com cor de fundo */

.filme-list__container {

    background-color: var(--cartaz-color);
}

/* =========================
   Seção cartaz
   ========================= */

/*   Container principal da seção de filmes. */

.cartaz {

    margin: 2rem auto;
    max-width: 75rem;
}

/* =========================
   Campo de pesquisa
   ========================= */

/*    Input de busca de filmes  */

.cartaz__pesquisa {

    margin: 1rem auto 1.5rem;
    padding: 0.5rem 1rem;
    width: 100%;
    max-width: 42.375rem;
    border-radius: 8px;
    border: 2px solid var(--houverP);
    display: block;
}

/*   Estilização do placeholder do input   */

.cartaz__pesquisa::placeholder {

    color: var(--letraB);
    font-family: var(--fonte-texto);
    background-image: url("../images/search.svg");
    background-repeat: no-repeat;
    background-position: right center;
}

/* =========================
   Menu de categorias
   ========================= */

/*   Lista horizontal de categorias (Em Cartaz / Em Breve) */

.menu-list {

    display: flex;
    gap: 1rem;
    list-style-type: none;
    color: var(--letraA);
}

/*    Cada botão dentro do menu de categorias */

.menu-list__item {

    font-family: var(--fonte-texto);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
}

/*    Botão atualmente selecionado */

.menu-list__item-ativo {

    font-weight: 700;
    text-decoration: underline;
    text-decoration: none; /* garante que não haja decoração duplicada */
}

/* =========================
   Título da seção cartaz
   ========================= */

/*    Título acima da lista de filmes   */
.cartaz__titulo {

    font-family: var(--fonte-titulo);
    font-size: 3rem;
    font-weight: 400;
    line-height: 2rem;
    margin-bottom: 2rem;
    margin-top: 50px;
    
    color: var(--letraA);
}

/* ========================= MEDIA QUERIES ========================= */

/* Telas até 1200px (tablets e notebooks menores) */
@media screen and (max-width: 1200px) {

    .cartaz {
        padding: 0 5rem; /* adiciona padding lateral */
    }

    .menu-list {
        gap: 0.5rem; /* reduz espaçamento entre botões */
    }

    .cartaz__pesquisa {
        padding: 0.5rem 1rem;
        max-width: 100%; /* ocupa toda a largura disponível */
    }

    .cartaz__titulo {
        font-size: 1.25rem; /* reduz tamanho do título */
        line-height: 1.75rem;
    }
}

/* Telas até 730px (celulares) */
@media screen and (max-width: 730px) {
    .cartaz {
        padding: 0 1.5rem; /* reduz padding lateral para caber na tela */
    }
}