/* ===== Agenda de Shows (mobile-first) ===== */

.agenda{
  padding-top: 2rem;
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  text-align:center;
}

.agenda__title{
  margin: 8px 0 10px;
}

.agenda__subtitle{
  color:var(--primary-font-black);
  opacity:.9;
  font-size: clamp(.95rem, 2.6vw, 1.125rem);
  line-height:1.4;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 350px) {
    .agenda__subtitle {
        padding: 0 .75rem
    }
}


/* grid de cards */
.agenda__grid{
  width:100%;
  margin: clamp(16px, 5vw, 40px) auto;
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 3vw, 24px);
}

/* breakpoints: 2 col / 3 col */
@media (min-width: 640px){
  .agenda__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .agenda__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* card */
.agenda-card{
  background:#0b0b0b;
  border:1px solid rgba(228,228,32,.25);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.agenda-card .image-container{
  position:relative;
  aspect-ratio: 16 / 9;
  background:#111;
}
.agenda-card .image-container img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* etiqueta (si querés evitar absolute, la podemos mover debajo de la imagen) */
.etiqueta{
  position:absolute; top:10px; left:10px;
  background:#b80f19;
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  padding:.25rem .5rem;
  border-radius:4px;
}

.card-content{
  padding: 12px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;            /* el contenido de la card alineado; el bloque general sigue centrado */
}

/* título dentro de la card */
.agenda-card__title{
  color:#fff;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height:1.2;
  margin: 2px 0 4px;
}

/* si querés limitar a 2 líneas */
.dos-renglones{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* línea de info (fecha + icono) */
.info-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
}
.info-line__icon{
  width:20px; height:20px; flex:0 0 20px; display:block; filter:invert(1);
}

/* CTA */
.agenda-card__cta{
  margin-top:8px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:.55rem 1rem;
  border:1px solid rgba(245,244,238,.3);
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  border-radius:6px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.agenda-card__cta:hover{
  background-color: rgba(245,244,238,.16);
  color:#fff;
  border-color: rgba(245,244,238,.5);
}

/* utilidad para el delay del reveal */
.delay-250{ --delay: 250ms; }