/*============= EVENTOS (gerenciados em admin/events.php) ===============*/
/*
 * Os cards reaproveitam o visual original (main.css: .memory-boxarea e .memory3-boxarea).
 * Aqui só se garante que fotos de qualquer tamanho fiquem com a mesma proporção
 * das imagens originais do tema (370x450), além da página de detalhe (evento.html).
 * Mobile-first: base = celular; min-width = telas maiores.
 */

/*----- Cards (home e memories.html) -----*/
.ev-card .img1 {
  aspect-ratio: 370 / 450;
}

.ev-card .img1 > a {
  display: block;
  height: 100%;
}

.ev-card .img1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Em telas de toque não existe "hover": a faixa com o nome do evento fica sempre visível */
@media (hover: none) {
  .memory-inner-section-area .ev-card.memory3-boxarea .content-area {
    left: 0;
  }
}

.ev-all-link {
  margin-top: 40px;
}

/*----- Paginação da memories.html -----*/
.ev-pagination .page-link.disabled {
  pointer-events: none;
  opacity: 0.4;
}

.ev-empty {
  text-align: center;
  color: var(--ztc-text-text-3);
  font-family: var(--ztc-family-font2);
  font-size: var(--ztc-font-size-font-s18);
}

/*----- Página do evento (evento.html) -----*/
.ev-detail {
  --ev-accent: #e35b1c;
  --ev-blue: #022690;
}

.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ev-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 40px;
  background: rgba(2, 38, 144, 0.06);
  color: var(--ev-blue);
  font-family: var(--ztc-family-font1);
  font-size: 15px;
  font-weight: var(--ztc-weight-bold);
  line-height: 1.2;
}

.ev-meta li i {
  color: var(--ev-accent);
}

.ev-detail .ev-title {
  color: var(--ev-blue);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s32);
  font-weight: var(--ztc-weight-bold);
  line-height: 40px;
}

.ev-detail .ev-summary {
  color: var(--ztc-text-text-3);
  font-family: var(--ztc-family-font2);
  font-size: var(--ztc-font-size-font-s20);
  line-height: 30px;
}

/* Celular: capa mais baixa para o texto aparecer logo; desktop: mesma proporção dos cards */
.ev-cover {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 40px -24px rgba(2, 38, 144, 0.45);
}

.ev-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto livre vindo do editor do painel */
.ev-description {
  color: var(--ztc-text-text-3);
  font-family: var(--ztc-family-font2);
  font-size: var(--ztc-font-size-font-s18);
  line-height: 30px;
}

.ev-description p,
.ev-description ul {
  margin-bottom: 16px;
}

.ev-description ul li {
  list-style: disc;
  margin-left: 20px;
}

.ev-description h3 {
  color: var(--ev-blue);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s24);
  font-weight: var(--ztc-weight-bold);
  margin: 24px 0 12px;
}

/* Galeria: grade uniforme (fotos de qualquer formato ficam alinhadas); clique amplia */
.ev-gallery-title {
  color: var(--ev-blue);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s28);
  font-weight: var(--ztc-weight-bold);
}

.ev-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ev-gallery a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #eef0f6;
  cursor: zoom-in;
}

.ev-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Véu azul + lupa no hover */
.ev-gallery a::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  background: rgba(2, 38, 144, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .ev-gallery a:hover img {
    transform: scale(1.08);
  }

  .ev-gallery a:hover::after {
    opacity: 1;
  }
}

.ev-gallery a:focus-visible {
  outline: 3px solid var(--ev-accent);
  outline-offset: 2px;
}

/* Lightbox da galeria */
.mfp-ev .mfp-img {
  border-radius: 8px;
}

.mfp-ev .mfp-counter {
  font-family: var(--ztc-family-font1);
}

/*----- Tablet em diante -----*/
@media (min-width: 768px) {
  .ev-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/*----- Desktop -----*/
@media (min-width: 992px) {
  .ev-detail .ev-title {
    font-size: var(--ztc-font-size-font-s44);
    line-height: 52px;
  }

  .ev-gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .ev-cover {
    aspect-ratio: 370 / 450;
  }

  .ev-cover-col {
    position: sticky;
    top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-gallery img,
  .ev-gallery a::after {
    transition: none;
  }
}