/* Layout general */
.events-wrap {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 40px;
}

/* Left (galería) */
.events-left { flex: 1 1 0; min-width:0; }

/* Right (detalle) */
.events-right {
  width: 360px;
  max-width: 35%;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}
.detail-box {
  background: linear-gradient(180deg,#fff,#fff);
  padding:18px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,0.03);
}
.detail-logo { max-width:100px; display:block; margin:0 auto 8px auto; }
.detail-list { padding-left:18px; color:#333; font-family:'Roboto',sans-serif; font-weight:300; }

/* Gallery (CSS-columns for Pinterest look) */
.gallery {
  column-count: 4;            /* columnas en desktop */
  column-gap: 16px;
}
.grid-sizer { display:block; width:100%; }

/* Cada item se evita que se rompa entre columnas */
.gallery-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 16px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,0.06);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* Imagen */
.gallery-item img {
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
  transform-origin: center;
  border-bottom: 0;
  /* sutil animación flotante */
  animation: float 8s ease-in-out infinite;
  will-change: transform;
}

/* Stagger small delays so movement is not uniform */
.gallery-item:nth-child(3n) img { animation-delay: .4s; }
.gallery-item:nth-child(4n) img { animation-delay: .9s; }
.gallery-item:nth-child(5n) img { animation-delay: 1.5s; }

/* Hover */
.gallery-item:hover { transform: translateY(-6px); box-shadow:0 10px 30px rgba(0,0,0,0.12); }
.gallery-item:hover img { transform: scale(1.03); animation-play-state:paused; }

/* Caption below each image */
.item-caption {
  padding:10px 12px 14px;
  font-family:'Roboto',sans-serif;
  font-size:14px;
  color:#2e473b;            /* verde oscuro */
  background:#f5f1ed;       /* madera claro */
  border-top:1px solid rgba(0,0,0,0.02);
}

/* botón elegante */
.btn-more {
  display:inline-block;
  margin-top:12px;
  padding:10px 16px;
  border-radius:8px;
  background:transparent;
  color:#111;
  font-family:'Roboto',sans-serif;
  text-decoration:none;
  border:2px solid #deb887;
  transition: all .2s ease;
  font-weight:500;
}
.btn-more:hover {
  background:#deb887;
  color:#111;
}

/* keyframes float (muy sutil) */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Responsive: el layout se apila en móviles, pero la galería sigue en columna múltiple */
@media (max-width: 1100px) {
  .gallery { column-count: 3; }
  .events-right { max-width:32%; width:320px; }
}
@media (max-width: 820px) {
  .events-wrap { flex-direction: column; }
  .events-right { position: static; width:100%; max-width:100%; order: 2; margin-top:16px; }
  .events-left { order: 1; }
  .gallery { column-count: 2; } /* mantiene estilo pinterest en móvil: 2 columnas */
}
@media (max-width: 420px) {
  .gallery { column-count: 2; } /* en móviles muy pequeños aún 2 columnas para evitar 1 larga */
  .item-caption { font-size:13px; padding:8px; }
  .detail-box { padding:14px; }
}