/**
 * Events List Page – Premium/高大上 Styling
 * Applied to /events/ page for matchmaking tone.
 */

/* Page wrapper – subtle elevation background */
.events-list-premium {
  --el-text-primary: #433422;
  --el-border-subtle: rgba(226, 232, 240, 0.8);
}

/* Header section – refined gradient */
.events-list-premium .events-list-header {
  background-image: radial-gradient(ellipse 90% 60% at 50% -5%, rgba(255, 255, 255, 0.7), transparent 55%),
                    radial-gradient(ellipse 70% 50% at 90% 20%, rgba(248, 250, 252, 0.5), transparent),
                    radial-gradient(ellipse 70% 50% at 10% 20%, rgba(241, 245, 249, 0.5), transparent);
}

/* Page title – warm tone */
.events-list-premium .events-list-title {
  color: var(--el-text-primary) !important;
}

/* Elegant accent line under title */
.events-list-premium .events-list-accent {
  height: 3px;
  width: 60px;
  margin: 0.5rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.5), transparent);
  border-radius: 2px;
}

/* Premium index nav (horizontal tabs) */
.events-list-premium nav[aria-label="活动快速导航"] {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.06),
              0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  border: 1px solid var(--el-border-subtle);
  transition: box-shadow 0.3s ease;
}

.events-list-premium nav[aria-label="活动快速导航"]:hover {
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.08),
              0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

/* Premium event cards */
.events-list-premium .grid > article {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08),
              0 0 0 1px rgba(255, 255, 255, 0.6) inset,
              0 4px 24px -4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--el-border-subtle) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.events-list-premium .grid > article:hover {
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(255, 255, 255, 0.8) inset,
              0 8px 32px -8px rgba(0, 0, 0, 0.06) !important;
}

/* Event title in cards – warm tone */
.events-list-premium .event-title-xingshu {
  color: var(--el-text-primary) !important;
}

/* Registration status box – refined */
.events-list-premium .grid > article .bg-slate-50 {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.6);
}

/* Action buttons area – subtle depth */
.events-list-premium .grid > article [class*="grid-cols-2"] a {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* List section background */
.events-list-premium .events-list-section {
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.5), rgba(255, 255, 255, 0.9));
}

/* Breadcrumb – refined */
.events-list-premium [aria-label="Breadcrumb"] .relative {
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--el-border-subtle);
}

/* Filter select – premium look */
.events-list-premium #event-filter-select {
  border-color: rgba(226, 232, 240, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.events-list-premium #event-filter-select:focus {
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

/* Event count badge – warm tone */
.events-list-premium .events-list-count {
  color: var(--el-text-primary) !important;
}

/* Index card hover – subtle pink accent (matchmaking tone) */
.events-list-premium nav[aria-label="活动快速导航"] a:hover > div {
  border-color: rgba(236, 72, 153, 0.25) !important;
  box-shadow: 0 4px 12px -4px rgba(236, 72, 153, 0.15);
}