/* ============================================
   EVENTS PAGE STYLES – KrachtigSuccesHotel&Casino
   Follows base.css design tokens and utilities
   ============================================ */

.hero {
  position: relative;
  isolation: isolate;
}
.hero-media {
  position: relative;
  max-height: 56vh;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 56vh;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.8);
}
.hero-inner {
  position: relative;
  margin-top: -6rem;
  background: linear-gradient(180deg, rgba(10,15,26,0.7) 0%, rgba(10,15,26,0.95) 100%);
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.hero-sub {
  color: var(--color-text-muted);
  max-width: 70ch;
}
.hero-cta { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Filters */
.events-filters { padding: var(--space-8) 0; }
.filters-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--space-6); align-items: end; }
.form-actions { display: flex; gap: var(--space-4); }
@media (max-width: 1024px) {
  .filters-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .filters-form { grid-template-columns: 1fr; }
}

/* Events list */
.events-list { padding: var(--space-8) 0 var(--space-12); }
.event-card figure { margin-bottom: var(--space-4); border-radius: var(--radius-xl); overflow: hidden; }
.event-card img { transition: transform var(--transition-slow); }
.event-card:hover img { transform: scale(1.03); }
.event-card details { margin-bottom: var(--space-4); }

/* CTA Section */
.events-cta { padding: var(--space-12) 0; }
.events-cta .card { background: linear-gradient(180deg, var(--color-background-elevated), rgba(36,41,56,0.9)); }
.events-cta .card .card-footer { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Minor utilities */
.mb-2 { margin-bottom: var(--space-2); }