/* ============================================================
   EVENTS WIDGET — Custom Eventbrite card grid
   ============================================================ */

/* Grid layout */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 640px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .events-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card — clickable anchor */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--undertow-60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all var(--ease);
}

.event-card:hover {
  background: var(--undertow-80);
  border-color: var(--gold-40);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Card image */
.event-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(26, 42, 74, 0.8);
}

.event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease);
}

.event-card:hover .event-card__image img {
  transform: scale(1.03);
}

/* Card details */
.event-card__details {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

.event-card__date {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.event-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--cream);
  line-height: var(--lh-heading);
  margin: 0;
}

.event-card__time {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--warm-sand);
}

.event-card__venue {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--cream-50, rgba(245, 240, 232, 0.5));
  margin-top: auto;
}

/* City badge (top-left) */
.event-card__city {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: rgba(10, 22, 40, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  border: 1px solid rgba(201, 169, 110, 0.25);
}

/* Tag badge (Women Only, Men Only, etc.) */
.event-card__tag {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--gold);
  color: var(--abyss);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

/* ---- Section-alt (light background) overrides ---- */
.section-alt .event-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--gold-20);
}

.section-alt .event-card:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--gold-40);
}

.section-alt .event-card__title {
  color: var(--abyss);
}

.section-alt .event-card__time {
  color: var(--deep-water);
}

.section-alt .event-card__venue {
  color: rgba(10, 22, 40, 0.5);
}

/* ---- Loading skeleton ---- */
.event-card--skeleton {
  pointer-events: none;
}

.skeleton-pulse {
  aspect-ratio: 16 / 9;
  background: linear-gradient(
    110deg,
    rgba(201, 169, 110, 0.05) 30%,
    rgba(201, 169, 110, 0.12) 50%,
    rgba(201, 169, 110, 0.05) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line {
  height: 0.85rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    110deg,
    rgba(201, 169, 110, 0.08) 30%,
    rgba(201, 169, 110, 0.15) 50%,
    rgba(201, 169, 110, 0.08) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line--short { width: 40%; }
.skeleton-line--long { width: 85%; height: 1.1rem; }
.skeleton-line--medium { width: 60%; }

.event-card--skeleton .event-card__details {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Empty / error state ---- */
.events-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--cream-60, rgba(245, 240, 232, 0.6));
}

.events-empty p {
  margin: var(--space-sm) 0;
  font-size: var(--fs-body);
}

.events-empty a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.events-empty a:hover {
  color: var(--cream);
}

.section-alt .events-empty {
  color: rgba(10, 22, 40, 0.5);
}

.section-alt .events-empty a {
  color: var(--deep-water);
}