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

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

.menu-list__item {

    position: relative; /* Necessário para posicionar a linha animada em relação ao botão */
    background: none; 
    border: none; 
    font-family: var(--fonte-texto);
    font-size: 1.21rem;
    padding: 0.5rem 1rem;
    cursor: pointer; 
    color: var(--cor-texto); 
    transition: color 0.3s; 
}

/* Muda a cor do texto ao passar o mouse */

.menu-list__item:hover {

    color: var(--houverP);
}

/* Linha animada embaixo do botão */

.menu-list__item::after {

    content: "";
    position: absolute;
    left: 0;
    bottom: 0; /* Distância da linha em relação ao texto */
    width: 100%;
    height: 1px;
    background-color: var(--houverP);
    transform: scaleX(0); /* Inicialmente invisível */
    transform-origin: left; /* Origem da animação à esquerda */
    transition: transform 0.4s ease; /* Transição suave */
}

/* Linha aparece ao passar o mouse */

.menu-list__item:hover::after {

    transform: scaleX(1);
}

/* Mantém a linha ativa no botão selecionado */

.menu-list__item.menu-list__item-ativo::after {

    transform: scaleX(1);
}

/* =========================
   Títulos dos filmes
   ========================= */

.film-list__item-titulo {

    font-size: 23px;
    color: var(--letraB);
}

/* =========================
   Descrições dos filmes
   ========================= */

.filme-list__descricao-tipo { font-size: 20px; }
.filme-list__descricao-dimensao { font-size: 20px; }
.filme-list__descricao-duracao { font-size: 19px; }
.filme-list__descricao-idade { font-size: 18px; }

/* =========================
   Lista de filmes
   ========================= */

.filme-list {

    display: flex;
    flex-wrap: wrap; /* Permite quebra de linha */
    gap: 1.1rem; /* Espaçamento entre cards */
    list-style-type: none; /* Remove marcadores */
    align-items: flex-start;
    margin-top: 50px;
}

/* Cada card de filme */

.filme-list__item {

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 32%; /* Largura base do card */
    max-width: 17em;
    width: 100%;
    height: 100%;
    box-shadow: var(--box-shadow-card); 
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s; /* Animação suave ao hover */
}

/* Animação ao passar o mouse no card */

.filme-list__item:hover {

    transform: scale(1.05); /* Zoom leve */
    box-shadow: 0 6px 12px var(--sombracard); 
}

/* Imagem do filme */

.filme-list__imagem {
  width: 100%;       /* largura fixa */
  height: 450px;      /* altura fixa */
  object-fit: cover;  /* corta a imagem para preencher */
  border-radius: 8px; /* opcional, para deixar cantos arredondados */
}


/* Container interno do card de filme */

.filme-list__container {

    padding: 0.90rem;
    font-family: var(--fonte-texto);
    flex-grow: 1;
    display: flex;
    gap: 42px;
    flex-direction: column;
    justify-content: space-between;
    height: 12em; /* diminui a altura aqui */
}

/* Linha interna do container (tipo e dimensão) */

.filme-list__linha {

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos das tags de dimensão e faixa etária */

.filme-list__descricao-dimensao, 
.filme-list__descricao-idade, 
.filme-list__descricao-idade-livre {

    padding: 0.5rem 1rem;
    border-radius: 0.7rem;
}

.filme-list__descricao-dimensao {
    background-color: var(--sombra);
}

.filme-list__descricao-idade {
    background-color: var(--cor-faixa-etaria);
}

.filme-list__descricao-idade-livre {
    background-color: var(--cor-faixa-etaria-livre);
}

/* Container da descrição */

.filme-list__descricao {

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* =========================
   Media Queries
   ========================= */

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

    .filme-list {
        justify-content: center; /* Centraliza cards */
    }

    .filme-list__descricao-tipo { font-size: 20px; }
    .filme-list__descricao-dimensao { font-size: 20px; }
    .filme-list__descricao-duracao { font-size: 20px; }
    .filme-list__descricao-idade { font-size: 20px; }
}
@media screen and (max-width: 477px){


.filme-list__item {

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100% ; /* Largura base do card */
    max-width: auto;
    
    height: 100%;
    box-shadow: var(--box-shadow-card); 
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s; /* Animação suave ao hover */
}


}