/* ===== GALERIAS DE FOTOS — CRECI-MG =====================================
   assets/css/crc-galerias.css
   Carrega em: /galerias/ (listagem) e na página de um álbum.

   v2: cards SEM imagem de capa. A anatomia agora é a dos cards de evento —
   faixa colorida na borda esquerda, data com ícone, pill do tipo e título.
   Sem paginação: a listagem mostra tudo.
   ======================================================================== */

/* Cor por categoria — repetida aqui porque na LISTAGEM o
   crc-evento-single.css não carrega. Nenhum seletor com ID: as variantes
   precisam poder vencer a base (mesma armadilha da single). */
.crc-gal-card{ --cor:#00619c; }
.crc-gal-card.crc-ev-cor-azul{ --cor:#00619c; }
.crc-gal-card.crc-ev-cor-laranja{ --cor:#f28b00; }
.crc-gal-card.crc-ev-cor-verde{ --cor:#2e9e5b; }
.crc-gal-card.crc-ev-cor-roxo{ --cor:#7b52ab; }
.crc-gal-card.crc-ev-cor-vermelho{ --cor:#cb011b; }
.crc-gal-card.crc-ev-cor-amarelo{ --cor:#e8a20d; }

/* -------- container -------- */
.crc-gal-page{ max-width:1080px; margin:28px auto 64px; padding:0 20px; }

/* a página de um álbum reusa .crc-ev-single, que só tem largura via
   #tribe-events-content — este seletor devolve a largura sem o ID */
.crc-gal-single.crc-ev-single{ max-width:1080px; margin:28px auto 64px; padding:0 20px; }

/* -------- cabeçalho -------- */
.crc-gal-head{ margin-bottom:24px; }
.crc-gal-h1{
  font-size:26px; font-weight:700; color:#2b3641;
  margin:0 0 6px; padding:0; text-align:left;
}
.crc-gal-head .crc-barra{
  width:38px; height:3px; background:#f28b00;
  border-radius:2px; display:block; margin-bottom:12px;
}
.crc-gal-intro{ margin:0; font-size:15px; color:#5b6773; max-width:60ch; }

/* -------- grade: 3 por linha -------- */
.crc-gal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:900px){ .crc-gal-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .crc-gal-grid{ grid-template-columns:1fr; } }

/* -------- card -------- */
.crc-gal-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e2e8ee;
  border-left:5px solid var(--cor);
  border-radius:10px;
  padding:16px 18px;
  text-decoration:none; color:inherit;
  box-shadow:0 4px 14px rgba(10,63,102,.04);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.crc-gal-card:hover,
.crc-gal-card:focus-visible{
  box-shadow:0 10px 24px rgba(10,63,102,.10);
  transform:translateY(-2px);
}
.crc-gal-card:focus-visible{ outline:2px solid var(--cor); outline-offset:2px; }

/* linha de cima: data à esquerda, tipo à direita */
.crc-gal-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.crc-gal-data{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:#5b6773; white-space:nowrap;
}
.crc-gal-data i{ color:var(--cor); font-size:14px; line-height:1; }

.crc-gal-pill{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:#fff; background:var(--cor); padding:4px 10px; border-radius:20px;
  white-space:nowrap;
}

.crc-gal-titulo{
  font-size:15.5px; font-weight:600; line-height:1.35; color:#2b3641;
  margin:0 0 14px; padding:0; text-align:left;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.crc-gal-mais{
  margin-top:auto; font-size:13.5px; font-weight:600; color:var(--cor);
}

/* -------- rodapé da listagem e estado vazio -------- */
.crc-gal-total{
  margin:24px 0 0; font-size:13px; color:#7a8794; text-align:center;
}

.crc-gal-vazio{
  background:#fff; border:1px solid #e2e8ee; border-radius:14px;
  padding:26px; font-size:15px; color:#5b6773; margin:0;
}

@media (prefers-reduced-motion:reduce){
  .crc-gal-card{ transition:none; }
  .crc-gal-card:hover{ transform:none; }
}