body {
    
    background:rgb(94, 85, 85);
    margin: 0;
    
}



h2{
    color: yellow;
    margin-left: 8px;
    font-family:"Smooch Sans", sans-serif;
    font-size:20px;
}


/* NAVBAR */

.nave{
display:flex;
justify-content:space-between;
align-items:center;
padding:5px 25px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
top:0;
z-index:1000;
}

.logo{
font-size:30px;
font-weight:600;
font-family:"Smooch Sans", sans-serif;
}

.links{
    text-decoration:none;
}

/* DESKTOP MENU */

.menu{
display:flex;
gap:30px;
}

.menu a{
  font-family:"Smooch Sans", sans-serif;
  font-weight: 550;
text-decoration:none;
color:black;
}

/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.hamburger span{
width:28px;
height:3px;
background:#333;
transition:0.3s;
}

/* MOBILE MENU */

.mobile-menu{
position:fixed;
top:0;
right:-100%;
width:260px;
height:100%;
background:white;
box-shadow:-5px 0 20px rgba(0,0,0,0.1);
display:flex;
flex-direction:column;
padding:80px 30px;
gap:25px;
transition:0.4s;
z-index:2000;
}

.mobile-menu a{
  font-family:"Smooch Sans", sans-serif;
  font-weight: 550;
text-decoration:none;
color:black;
font-size:18px;
}

/* ACTIVE */

.mobile-menu.active{
right:0;
}

/* OVERLAY */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(3px);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:1500;
}

.overlay.active{
opacity:1;
visibility:visible;
}

/* HAMBURGER ANIMATION */

.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(5px,-5px);
}

/* MOBILE */

@media(max-width:768px){

.menu{
display:none;
}

.hamburger{
display:flex;
}

}


/* Centraliza a busca na index */
.container-busca {
    text-align: center;
    margin:15px;
}

input {

    background:rgb(44, 41, 41) ;
    padding: 10px;
    width: 300px;
    border-radius: 5px 0 0 5px;
    border: none;
    color: whitesmoke;
    

    
}


button {

    
    padding: 10px;
    background:rgb(7,7,74);
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    
}

button:active{
  background-color: #a08282;
}

@media (max-width: 399px) {
  
  /* Centraliza a busca na index */
.container-busca {
    text-align: center;
    margin:5px;
}

input {

    width: 200px;
 
}

}

/* Grid de resultados */
.grid-stream{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    padding: 8px;
    margin-top: 20px;
}

@media (min-width:768px){
  .grid-stream{ /* Esta é a chave para a responsividade: */
    /* - repeat(auto-fit, ...): Cria tantas colunas quanto couberem. */
    /* - minmax(300px, 1fr): Cada coluna terá no mínimo 300px de largura. */
    /* Se houver mais espaço, elas crescerão igualmente (1fr) para preenchê-lo, */
    /* garantindo que o número de colunas se ajuste (2, 3, 4, etc.). */
    
    grid-template-columns: 1fr 1fr 1fr;
    padding: 8px;
    gap: 8px;             
  }

    .card-filme:hover {
    opacity: 70%;
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

 }

 @media (min-width:1024px){
  .grid-stream{ /* Esta é a chave para a responsividade: */
    /* - repeat(auto-fit, ...): Cria tantas colunas quanto couberem. */
    /* - minmax(300px, 1fr): Cada coluna terá no mínimo 300px de largura. */
    /* Se houver mais espaço, elas crescerão igualmente (1fr) para preenchê-lo, */
    /* garantindo que o número de colunas se ajuste (2, 3, 4, etc.). */
    
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .card-filme:hover {
    opacity: 70%;
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

 }

  @media (min-width:1260px){
  .grid-stream{ /* Esta é a chave para a responsividade: */
    /* - repeat(auto-fit, ...): Cria tantas colunas quanto couberem. */
    /* - minmax(300px, 1fr): Cada coluna terá no mínimo 300px de largura. */
    /* Se houver mais espaço, elas crescerão igualmente (1fr) para preenchê-lo, */
    /* garantindo que o número de colunas se ajuste (2, 3, 4, etc.). */
    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .card-filme:hover {
    opacity: 70%;
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

 }



.card-filme {

    background: rgb(36, 29, 29);
    display: grid;
    min-height:200px; /* Defina uma altura fixa para o cartão (necessário) */
    text-decoration: none; 
    border:1px solid rgb(44, 41, 41);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    grid-template-rows: 3fr 1fr;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    /* 🔑 CHAVE PARA DISTRIBUIÇÃO VERTICAL: */
    /* Exemplo: 3 partes para a imagem e 1 parte para o texto (75%/25%) */
    grid-template-rows: 3fr 1fr;
    position: relative;
}




.card-filme img {
    width: 100%;
    height: 100%;
    padding-bottom: 0px;
    aspect-ratio: 16/9;
}



.info h3{
    padding: 0px 5px;
    font-family:"Smooch Sans", sans-serif;
    margin-top:0%;
    color:white;
    font-size:15px;
}

/* Escondido por padrão (Telemóveis) */
.banner-desktop {
  display: none;
}

/* Visível por padrão */
.banner-mobile-only {
  display: block;
}

/* Esconde quando o ecrã for maior que 767px (Desktop/Tablets Grandes) */
@media (min-width: 768px) {
  .banner-mobile-only {
    display: none;
  }
}

/* Visível apenas em ecrãs maiores que 768px (Tablets e PCs) */
@media (min-width: 768px) {
  .banner-desktop {
    display: block;
  }
}

@media (max-width: 480px) {
    .info h3 {
   
    display:-webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

}