/* ===== EVENTOS ===== */

/*
 * Misma gramática que el resto del sitio: foto de fondo con velo oscuro,
 * titular en Fraunces itálica, texto en Jost y los mismos pasos de espaciado.
 * Lo único nuevo es la rejilla, porque estas fotos son verticales y en las
 * galerías 2:1 de la portada no se verían.
 */

/* ---------- Cabecera ---------- */

.ep-eventos-portada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 60vh;
  padding: calc(120px + var(--ep-esp-3xl)) var(--ep-esp-sm) var(--ep-esp-3xl);
  background-color: var(--ep-negro);
  background-size: cover;
  background-position: 50% 60%;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* El mismo velo al 75 % que las secciones de la portada. */
.ep-eventos-portada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ep-negro-suave);
  opacity: 0.75;
}

.ep-eventos-portada__contenido {
  width: 100%;
  max-width: var(--ep-ancho-estrecho);
}

.ep-eventos-portada h1 {
  margin: 0 0 var(--ep-esp-sm);
  font-size: var(--ep-txt-xxl);
  font-style: italic;
  color: var(--ep-melocoton);
}

.ep-eventos-portada p {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--ep-crema);
  font-size: var(--ep-txt-medio);
  font-weight: 300;
}

/* ---------- Texto libre de la página ---------- */

.ep-eventos-texto {
  padding: var(--ep-esp-3xl) 0 0;
  color: var(--ep-crema);
  font-size: var(--ep-txt-medio);
  text-align: center;
}

.ep-eventos-texto p {
  max-width: 62ch;
  margin-inline: auto;
}

/* ---------- Rejilla de fotos ---------- */

.ep-eventos-galeria {
  padding: var(--ep-esp-3xl) 0;
}

/*
 * `auto-fit` con `minmax` reparte las columnas sin necesidad de breakpoints:
 * una en móvil, dos en tableta y tres en escritorio, según quepa.
 */
.ep-eventos-rejilla {
  display: grid;
  /*
   * 300px de mínimo, no 280: con 280 y el contenedor a 1242px caben cuatro
   * columnas y las fotos se quedan en 296px, demasiado apretadas para diez.
   * Con 300 salen tres de ~400px, que es donde una foto vertical se lee.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--ep-esp-xs);
}

.ep-eventos-rejilla figure {
  margin: 0;
  /*
   * La figura ocupa toda la celda. Las filas las mide la foto más alta de cada
   * una, así que si la imagen no estirase quedaría una franja de fondo bajo
   * las apaisadas.
   */
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ep-negro-suave);
}

.ep-eventos-rejilla img {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  /*
   * Un acercamiento muy leve al pasar el ratón. Es lo único que se mueve en
   * toda la página y solo pasa con puntero de verdad, para que en el móvil no
   * se quede una foto ampliada tras un toque.
   */
  transition: transform 0.6s var(--ep-salida);
}

@media (hover: hover) and (pointer: fine) {
  .ep-eventos-rejilla figure:hover img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-eventos-rejilla img {
    transition: none;
  }
  .ep-eventos-rejilla figure:hover img {
    transform: none;
  }
}

/*
 * Dos fotos de la serie son tomas de conjunto y van apaisadas, ocupando dos
 * columnas. Rompen la monotonía de la cuadrícula —una rejilla de diez celdas
 * idénticas no es un diseño, es una hoja de contactos— y de paso hacen que las
 * cuentas cuadren: 2+2+8 = 12 celdas, cuatro filas justas de tres.
 *
 * En móvil no se aplica: a una columna todas ocupan lo mismo.
 */
@media (min-width: 900px) {
  .ep-eventos-rejilla .es-ancha {
    grid-column: span 2;
  }
}

.ep-eventos-rejilla .es-ancha img {
  aspect-ratio: 3 / 2;
}

/* ---------- Cierre ---------- */

.ep-eventos-cierre {
  padding: 0 0 var(--ep-esp-3xl);
  text-align: center;
}

.ep-eventos-cierre p {
  max-width: 52ch;
  margin: 0 auto var(--ep-esp-md);
  color: var(--ep-crema);
  font-size: var(--ep-txt-medio);
  font-weight: 300;
}

.ep-eventos-cierre__telefono {
  display: inline-block;
  font-family: var(--ep-fuente-titulo);
  font-size: var(--ep-txt-grande);
  font-style: italic;
  color: var(--ep-melocoton);
  /* 44 px de alto: es un enlace para pulsar desde el móvil. */
  padding: 0.5rem 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .ep-eventos-cierre__telefono:hover {
    color: var(--ep-oro);
  }
}