/* gallery.css */

/* Breadcrumb */
.breadcrumb {
    /* O breadcrumb é um div no HTML, então essas propriedades são para o div container */
    padding: 0;
    margin: 10px 0 20px 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    font-size: 0.85em;
    color: #666;
}

/* Estilo para os links dentro do breadcrumb */
.breadcrumb a {
    color: #0077cc;
    text-decoration: none;
    white-space: nowrap; /* Garante que os links não quebrem linha */
    margin-right: 5px; /* Espaçamento entre os itens do breadcrumb */
    display: flex; /* Para alinhar a seta ao centro */
    align-items: center; /* Alinha a seta verticalmente */
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Estilo para a imagem da seta no breadcrumb */
.breadcrumb a img {
    height: 12px; /* Ajuste o tamanho da seta conforme necessário */
    margin: 0 5px; /* Espaçamento antes e depois da seta */
}

### Subcategorias e Lista de Imagens (`ul` e `li`)

No seu CSS, você já tem as seguintes regras para `ul` e `li` que são **adequadas** para remover os marcadores de lista padrão e o padding:

```css
/* Subcategorias e Lista de Imagens (aplicado globalmente a ul) */
ul {
    padding: 0; /* Remove o padding padrão das listas */
    list-style: none; /* Remove os marcadores de lista */
}

ul li {
    margin-bottom: 10px; /* Espaçamento entre os itens da lista de subcategorias */
}

/* Imagens */
/* Container principal usando CSS Grid */
.image-list {
  display: grid;
  /* Configuração padrão para telas grandes, ajustada pelas media queries */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; /* Espaçamento maior entre os cartões para melhor visualização */
  padding: 15px;
}

/* Estilos para cada cartão de imagem (a nova div .image-card) */
.image-card {
  display: flex; /* Habilita Flexbox dentro de cada cartão */
  flex-direction: column; /* Coloca os itens em coluna (título acima da imagem) */
  align-items: center; /* Centraliza o conteúdo horizontalmente dentro do cartão */
  text-align: center; /* Garante que o texto, como o título, esteja centralizado */
  background-color: #fff; /* Fundo branco para cada cartão */
  border: 1px solid #ddd; /* Borda sutil */
  border-radius: 8px; /* Cantos arredondados */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave para profundidade */
  overflow: hidden; /* Garante que o conteúdo não vaze das bordas arredondadas */
  padding-bottom: 10px; /* Espaço na parte inferior do cartão */
}

/* Estilos para o título dentro de cada cartão */
.image-card h4 {
  margin-top: 15px; /* Espaço acima do título */
  margin-bottom: 10px; /* Espaço abaixo do título */
  padding: 0 10px; /* Preenchimento horizontal para não grudar nas bordas */
  font-size: 1.2em; /* Tamanho da fonte do título */
  color: #333;
  width: 100%; /* Ocupa a largura total do .image-card */
  box-sizing: border-box; /* Inclui padding na largura total */
}

/* Estilos para a imagem dentro de cada cartão */
.image-card img {
  max-width: 100%; /* Garante que a imagem não ultrapasse a largura do cartão */
  height: 200px; /* Altura fixa para todas as imagens, para um layout mais uniforme */
  object-fit: cover; /* Recorta a imagem para preencher o espaço sem distorção */
  display: block; /* Remove o espaço extra abaixo da imagem */
  flex-shrink: 0; /* Previne que a imagem encolha se houver pouco espaço */
}

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

/* Telas Grandes (desktops e monitores maiores) */
@media (min-width: 1200px) {
  .image-list {
    grid-template-columns: repeat(5, 1fr); /* 5 colunas */
  }
}

/* Telas Médias (tablets e laptops menores) */
@media (max-width: 1199px) and (min-width: 768px) {
  .image-list {
    grid-template-columns: repeat(3, 1fr); /* 3 colunas */
  }
}

/* Telas Pequenas (smartphones maiores e tablets em retrato) */
@media (max-width: 767px) {
  .image-list {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
  }
}

/* Telas Muito Pequenas (smartphones menores) */
@media (max-width: 480px) {
  .image-list {
    grid-template-columns: 1fr; /* 1 coluna */
  }
}

/* Estilo do fundo escuro */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Container do conteúdo do modal (imagem + detalhes) */
/* Estilo do fundo escuro */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Aumentei a opacidade para 0.9 para melhor contraste */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Container do conteúdo do modal (imagem + detalhes) */
.modal-content {
    max-height: 80vh; /* Limita a altura do modal a 80% da altura da viewport */
    overflow-y: auto; /* Permite scroll vertical se conteúdo ultrapassar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Para começar o conteúdo no topo */
    padding: 20px;
    box-sizing: border-box;
}

/* Imagem centralizada no modal */
.modal-content img {
    height: auto !important; /* Garante que a altura se ajuste automaticamente à largura para manter a proporção */
    width: 100% !important;
    object-fit: contain; /* ESSENCIAL: Garante que a imagem seja contida, sem cortes, e mantenha a proporção */
    margin-bottom: 20px; /* Mais espaço entre a imagem e os detalhes */
}

/* Título abaixo da imagem */
.modal-title {
    color: white;
    font-size: 1.5rem; /* Um pouco maior para destaque */
    text-align: center;
    margin-top: 0; /* A margem já vem do margin-bottom da imagem */
    margin-bottom: 10px; /* Espaço entre o título e os detalhes */
}

/* Detalhes da imagem abaixo do título */
.modal-details {
    color: #ddd;
    font-size: 1rem; /* Tamanho padrão */
    text-align: center;
    margin-top: 0; /* A margem já vem do margin-bottom do título */
    max-width: 100%;
}

/* Fechar ao clicar fora */
.modal-overlay.active {
    display: flex;
    cursor: zoom-out;
}