/* ═══════════════════════════════════════════════════
   feria.css — Feria Ecuestre de Jerez (histórico por años)
   Jerez Ciudad del Caballo
   ═══════════════════════════════════════════════════ */

/* ── Selector de ediciones (año actual + histórico) ── */
.feria-ediciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 40px;
}
.feria-edicion-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1.5px solid var(--gris-300);
  color: var(--texto-muted);
  font-family: var(--fuente-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all var(--transicion);
}
.feria-edicion-pill:hover { border-color: var(--azul); color: var(--azul); }
.feria-edicion-pill.activo {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
}

/* ── Tarjetas de edición (página índice /feria-ecuestre/) ── */
.feria-edicion-card {
  display: block;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  transition: all var(--transicion);
  overflow: hidden;
  margin-bottom: 28px;
}
.feria-edicion-card:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-3px);
}
.feria-edicion-card-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
}
.feria-edicion-año {
  font-family: var(--fuente-titulo);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--azul);
  flex-shrink: 0;
  min-width: 110px;
}
.feria-edicion-info { flex: 1; }
.feria-edicion-info h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 4px;
}
.feria-edicion-info p {
  font-size: 0.85rem;
  color: var(--texto-muted);
  margin: 0;
}
.feria-edicion-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
  background: var(--gris-100);
  padding: 4px 10px;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .feria-edicion-card-inner { flex-wrap: wrap; padding: 20px; gap: 12px; }
  .feria-edicion-año { font-size: 1.9rem; min-width: 0; }
}

/* ── Tarjetas de concurso: una sola fila en vez de envolver ──
   Sobrescribe el ancho fijo de .cartel-card (compartido con el resto
   del sitio) solo dentro de la Feria, donde hay 4 o 5 tarjetas por
   bloque y deben caber todas en una fila sin recortar la última. */
.feria-carteles {
  display: grid;
  gap: 16px;
  justify-content: normal;
}
.feria-carteles .cartel-card { width: 100%; }
.feria-carteles .cartel-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}
.feria-carteles--4 { grid-template-columns: repeat(4, 1fr); }
.feria-carteles--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .feria-carteles--4, .feria-carteles--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .feria-carteles--4, .feria-carteles--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Galería de vídeos (carga diferida de YouTube) ── */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.video-gallery-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--blanco);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.video-gallery-card:hover { box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1); transform: translateY(-3px); }
.video-gallery-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--gris-800);
  cursor: pointer;
  overflow: hidden;
}
.video-gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.video-gallery-thumb iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}
.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
  border: none;
  cursor: pointer;
  transition: background var(--transicion);
}
.video-play-btn:hover { background: rgba(0,0,0,0.32); }
.video-play-btn svg { width: 56px; height: 40px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.video-gallery-body { padding: 14px 16px 16px; }
.video-gallery-body h4 {
  font-family: var(--fuente-titulo);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
  margin: 0 0 4px;
}
.video-gallery-body p {
  font-size: 0.72rem;
  color: var(--texto-muted);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Reels de Instagram (formato vertical 9:16) ── */
.reel-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.reel-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--gris-800);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.reel-embed { position: relative; aspect-ratio: 9 / 16; }
.reel-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ── Móvil: dos columnas en vez de una gigante ──
   minmax(260px,1fr) / minmax(200px,1fr) fuerzan una sola columna por
   debajo de esos anchos, y con el aspect-ratio vertical de los reels
   (9:16) una tarjeta a todo el ancho de pantalla mide ~600px de alto:
   18 reels en una columna dejaban la página en unos 20.000px. */
@media (max-width: 560px) {
  .video-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .video-gallery-body { padding: 8px 10px 10px; }
  .video-gallery-body h4 { font-size: 0.7rem; }
  .video-gallery-body p { font-size: 0.6rem; }
  .video-play-btn svg { width: 40px; height: 30px; }
  .reel-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── Encabezado de sub-sección (Vídeos y Streaming) ── */
.feria-videos-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 64px 0 8px;
  border-bottom: 2px solid var(--azul); padding-bottom: 12px;
}
.feria-videos-head h2 {
  font-family: var(--fuente-titulo); font-size: 1.2rem; font-weight: 700; color: var(--texto); margin: 0;
}
.feria-videos-intro {
  color: var(--texto-muted);
  font-size: 0.88rem;
  margin: 0 0 8px;
  max-width: 62ch;
}