/* ================================
   📱 Responsividade
================================ */

@media (min-width: 1024px) {
   @import url("styles.css");
}


.videos-conteudo {
  margin-top: 2rem;
}

.grade-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.video-item {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.video-item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.video-legenda {
  margin-top: 0.8rem;
  font-size: 0.95rem;
}


/* Telas entre 1024px e 768px */
@media (max-width: 1024px) {

    .cards {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
    }

    .galeria {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .membro img {
        width: 130px;
        height: 130px;
    }
}

/* Telas até 768px (tablets e celulares maiores) */
@media (max-width: 768px) {

    .titulo-secao {
        font-size: 1.8rem;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .card img {
        height: 180px;
    }

    .sobre-conteudo,
    .quem-somos-conteudo,
    .exposicoes-conteudo,
    .tecnicas-conteudo {
        padding: 1.5rem;
    }

    .membros {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .membro img {
        width: 120px;
        height: 120px;
    }

    .galeria {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .item-galeria {
        height: 160px;
    }
}

/* Telas pequenas até 480px */
@media (max-width: 480px) {

    body {
        font-size: 0.95rem;
    }


    .titulo-secao {
        font-size: 1.6rem;
        margin-top: 1.5rem;
    }

    .card {
        border-radius: 6px;
    }

    .card-conteudo {
        padding: 1.2rem;
    }

    .membro img {
        width: 100px;
        height: 100px;
    }

    .exposicoes-menu button {
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
        border-radius: 6px;
    }

    .galeria {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.7rem;
    }

    .item-galeria {
        height: 140px;
    }

    .modal-fechar {
        font-size: 32px;
        right: 20px;
        top: 15px;
    }
}

/* Telas muito pequenas (até 360px) */
@media (max-width: 360px) {

    .titulo-secao {
        font-size: 1.4rem;
    }

    .membro img {
        width: 85px;
        height: 85px;
        border-width: 3px;
    }

    .exposicao {
        padding: 1.2rem;
    }

    .item-galeria {
        height: 120px;
    }
}