/**
 * Carrusel de Eventos — Gózate Bogotá
 * Archivo: css/eventos-carrusel.css
 *
 * Paleta:
 *   --carrusel-acento:    #E8421A  (naranja-rojo bogotano / festivo)
 *   --carrusel-superficie:#FFF8F2  (marfil cálido)
 *   --carrusel-texto:     #1A1614  (casi negro)
 *   --carrusel-secundario:#6B5E57  (tierra grisácea)
 *   --carrusel-borde:     #EDE3DC  (borde suave)
 *   --carrusel-badge:     #FFF0E8  (fondo etiqueta categoría)
 */

/* ===== Variables ===== */
.eventos-carrusel {
  --c-acento:     #aa1023;
  --c-sup:        #FFF8F2;
  --c-texto:      #1A1614;
  --c-sec:        #6B5E57;
  --c-borde:      #EDE3DC;
  --c-badge:      #f7b325;
  --c-sombra:     rgba(26, 22, 20, 0.08);
  --card-w:       356px;
  --card-gap:     20px;
  --radius:       12px;
  --transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Contenedor principal ===== */
.eventos-carrusel {
  position: relative;
  overflow: hidden;
  padding-block: 8px 32px;
  background: transparent;
}

/* ===== Track deslizante ===== */
.eventos-carrusel__track {
  display: flex;
  gap: var(--card-gap);
  list-style: none;
  margin: 0;
  padding: 0 4px 8px;
  transition: transform var(--transition);
  will-change: transform;
  cursor: grab;
  user-select: none;
}

.eventos-carrusel__track:active {
  cursor: grabbing;
}

/* ===== Tarjeta ===== */
.eventos-carrusel__card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--transition),
    box-shadow var(--transition);
  position: relative;
}

.eventos-carrusel__card:hover {
  transform: translateY(-4px);
}

/* Toda la tarjeta es clicable si hay enlace */
.eventos-carrusel__card a.evento-card__enlace-principal {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}

/* ===== Etiqueta de categoría ===== */
.evento-card__categoria {
  display: block;
  align-items: center;
  color: var(--c-acento);
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 8px;
  line-height: 1;
  text-align:center;
  box-sizing:border-box;
  padding: 5px;
  background: url(https://www.foncep.gov.co/sites/default/files/2026-07/barra-amarilla-foncep.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Categoría puede venir envuelta en un <div> desde Views */
.evento-card__categoria a,
.evento-card__categoria a:visited {
  color: inherit;
  text-decoration: none;
}
 
/* ===== Imagen ===== */
.evento-card__imagen {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-borde);
  margin-top: 5px;
  height: 300px;
  border-radius: 20px 20px 0px 0px;
}
 
.evento-card__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
 
.eventos-carrusel__card:hover .evento-card__imagen img {
  transform: scale(1.04);
}
 
.evento-card__imagen-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-sec);
}
 
/* ===== Cuerpo de la tarjeta ===== */
.evento-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
 
/* ===== Título ===== */
.evento-card__titulo {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-texto);
  margin: 0;
  /* 3 líneas máximo con elipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
.evento-card__titulo a,
.evento-card__titulo a:visited {
  color: inherit;
  text-decoration: none;
}
 
.evento-card__titulo a:hover {
  color: var(--c-acento);
}
 
/* ===== Fecha ===== */
.evento-card__fecha {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--c-sec);
  font-size: 0.82rem;
  line-height: 1.4;
}
 
.evento-card__icono {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-acento);
}
 
/* Smart date range puede producir varios spans */
.evento-card__fecha .smartdate--instance,
.evento-card__fecha .date-display-range {
  display: inline;
}
 
/* ===== Controles ===== */
.eventos-carrusel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
 
.eventos-carrusel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--c-borde);
  background: var(--c-sup);
  color: var(--c-texto);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
  flex-shrink: 0;
}
 
.eventos-carrusel__btn:hover:not(:disabled) {
  background: var(--c-acento);
  color: #fff;
  border-color: var(--c-acento);
}
 
.eventos-carrusel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
 
/* ===== Dots ===== */
.eventos-carrusel__dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
 
.eventos-carrusel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-borde);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
 
.eventos-carrusel__dot--activo {
  background: var(--c-acento);
  width: 22px;
  border-radius: 4px;
}
 
/* ===== Responsive ===== */
@media (max-width: 768px) {
  .eventos-carrusel {
    --card-w: 260px;
  }
 
  .eventos-carrusel__track {
    padding-inline: 16px;
  }
}
 
@media (max-width: 480px) {
  .eventos-carrusel {
    --card-w: calc(100vw - 48px);
  }
}
 
/* ===== Respeta preferencia de movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
  .eventos-carrusel__track,
  .eventos-carrusel__card,
  .evento-card__imagen img,
  .eventos-carrusel__btn,
  .eventos-carrusel__dot {
    transition: none;
  }
}
 
 
/* ===== Título superpuesto sobre la imagen ===== */
.evento-card__imagen {
  position: relative; /* asegurar que ya tiene position */
}
 
.evento-card__titulo-imagen {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px 12px;
  background: #000000a8;
      height: 40%;
}
 
.evento-card__titulo {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
/* ===== Footer de la tarjeta ===== */
.evento-card__footer {
  text-align:center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 2px solid #f1c66e;
  border-radius: 0px 0px 20px 20px;
  height: 30px;
  margin-top: -2px;
  color:#000;
  font-weight:600;
  font-size: 0.8rem;
    align-items: center;
    justify-content: center;
}
 
/* Redefinir categoría dentro del footer (sin margen superior) */
.evento-card__footer .evento-card__categoria {
  margin: 0;
}
 
/* ===== Enlace principal que cubre toda la tarjeta ===== */
.eventos-carrusel__card {
  position: relative; /* ya estaba, confirmar */
}
 
.evento-card__enlace-principal {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius);
}

.evento-card__titulo-span{
	background: #7f7e7d;
    position: absolute;
    right: 0;
    bottom: 15px;
    padding: 5px;
    width: 40%;
    border-radius: 15px 0px 0px 15px;
    text-align: center;
    font-weight: 100;
}