/* ============================================
   EVENT LIST COMPONENT - CSS REFACTORED
   ============================================
   Refactored to use CSS custom properties,
   grouped by component, and improved maintainability.
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */
:root {
  /* Colors */
  --color-primary: #ec4899;
  --color-primary-rgb: 236, 72, 153;
  --color-secondary: #f43f5e;
  --color-secondary-rgb: 244, 63, 94;
  --color-accent: #fbbf24;
  --color-accent-rgb: 251, 191, 36;
  --color-gold: #d4af37;
  --color-gold-rgb: 212, 175, 55;
  
  /* Neutral Colors */
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-border: #e5e7eb;
  --color-border-light: rgba(255, 255, 255, 0.2);
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.2);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(10px);
  --glass-blur-lg: blur(20px);
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-cubic: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index */
  --z-index-base: 1;
  --z-index-dropdown: 10;
  --z-index-sticky: 20;
  --z-index-fixed: 30;
  --z-index-modal: 40;
  --z-index-toast: 50;
}

/* ============================================
   GLOBAL UTILITIES
   ============================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar for horizontal index */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   EVENT INDEX CARD
   ============================================ */
.event-index-card {
  position: relative;
}

.event-index-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, 
    rgba(var(--color-primary-rgb), 0.3), 
    rgba(var(--color-secondary-rgb), 0.3)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.event-index-card:hover::before {
  opacity: 1;
}

/* ============================================
   CARD COMPONENT
   ============================================ */
.card {
  transition: all var(--transition-cubic);
}

.card:hover {
  box-shadow: var(--shadow-xl);
}

/* ============================================
   EVENT CARD - PINK BORDER
   ============================================ */
/* Apply pink border to all event cards in the events list */
.grid > article {
  border: 2px solid var(--color-primary) !important;
  border-color: #f9a8d4 !important; /* Light pink border (pink-300) */
}

.grid > article:hover {
  border-color: #f472b6 !important; /* Slightly darker pink on hover (pink-400) */
}

/* Featured events get a stronger pink ring */
.grid > article[class*="ring-2"] {
  --tw-ring-color: #ec4899 !important; /* Pink-500 for featured events */
}

/* ============================================
   FLOATING NAVIGATION
   ============================================ */
#floating-nav {
  transition: opacity var(--transition-base), transform var(--transition-base);
}

#floating-nav button {
  transition: opacity var(--transition-base), 
              transform var(--transition-base), 
              background-color calc(var(--transition-base) * 0.67), 
              border-color calc(var(--transition-base) * 0.67);
}

#floating-nav button:hover {
  transform: translateX(-4px);
}

/* Responsive: Hide on mobile, show on tablet+ */
@media (max-width: 640px) {
  #floating-nav {
    right: 0.5rem;
  }
  
  #floating-nav button {
    padding: var(--spacing-sm);
  }
  
  #floating-nav button span {
    display: none;
  }
}

/* ============================================
   STICKY INDEX POSITIONING
   ============================================ */
@media (max-width: 768px) {
  nav[aria-label="活动快速导航"] {
    position: relative;
    top: 0;
  }
}

/* ============================================
   FONT STYLING - 隶书 (Li Shu)
   ============================================ */
.font-lishu {
  font-family: 'Ma Shan Zheng', 'STLiti', 'LiSu', 'SimLi', 'FangSong', 'KaiTi', serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(0, 0, 0, 0.3);
}

/* ============================================
   FONT STYLING - 行书 (Xing Shu / Running Script)
   ============================================ */
.font-xingshu {
  font-family: 'Zhi Mang Xing', 'ZCOOL XiaoWei', 'Liu Jian Mao Cao', 'Ma Shan Zheng', 'STXingkai', 'Xingkai SC', 'KaiTi', serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Event title specific styling with 行书 font */
.event-title-xingshu {
  font-family: 'Zhi Mang Xing', 'ZCOOL XiaoWei', 'Liu Jian Mao Cao', 'Ma Shan Zheng', 'STXingkai', 'Xingkai SC', 'KaiTi', serif;
  font-weight: 400;
  font-size: 2.25rem;
  letter-spacing: 0.08em;
  color: #1e293b;
  text-align: center;
}

@media (min-width: 768px) {
  .event-title-xingshu {
    font-size: 2.5rem;
  }
}

/* ============================================
   PARALLAX STAR EFFECT
   ============================================ */
.parallax-star {
  position: absolute;
  bottom: var(--spacing-xs);
  right: var(--spacing-xs);
  z-index: var(--z-index-dropdown);
  animation: parallaxFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(var(--color-gold-rgb), 0.8)) 
          drop-shadow(0 0 8px rgba(var(--color-gold-rgb), 0.6));
  transform-origin: center center;
}

.parallax-star span {
  display: inline-block;
  animation: starShine 2s ease-in-out infinite;
}

@keyframes parallaxFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-2px, -3px) rotate(-2deg);
  }
  50% {
    transform: translate(2px, -4px) rotate(2deg);
  }
  75% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
}

@keyframes starShine {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

/* Parallax effect on scroll - respect reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .parallax-star {
    will-change: transform;
  }
}

/* ============================================
   ADMIN ACTION BUTTONS
   ============================================ */
.admin-action-btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  max-width: 100%;
}

.admin-action-btn {
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: all var(--transition-cubic);
  white-space: nowrap;
  min-width: fit-content;
}

.admin-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.05)
  );
  opacity: 0;
  transition: opacity var(--transition-base);
}

.admin-action-btn:hover::before {
  opacity: 1;
}

.admin-action-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-lg);
}

/* Responsive admin buttons - stack on very small screens */
@media (max-width: 640px) {
  .admin-action-btn-container {
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing-xs) * 0.5);
    max-width: 50%; /* Prevent overflow */
    flex-shrink: 1;
    min-width: 0; /* Allow shrinking */
  }

  .admin-action-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.7rem;
    min-width: auto;
    width: 100%;
    justify-content: center;
  }

  /* Show only icons on very small screens */
  @media (max-width: 400px) {
    .admin-action-btn span:not(:first-child) {
      display: none;
    }
    
    .admin-action-btn {
      padding: var(--spacing-xs);
      min-width: 2rem;
      width: auto;
    }
  }
}

/* ============================================
   BADGE STYLES
   ============================================ */
.badge-modern {
  position: relative;
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-cubic);
}

.badge-modern:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.badge-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.3), 
    rgba(255, 255, 255, 0.1)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.badge-modern:hover::before {
  opacity: 1;
}

/* Featured badge with glow effect */
.badge-featured {
  animation: badgeGlow 2s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
  0% {
    box-shadow: 0 0 5px rgba(var(--color-accent-rgb), 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.8), 
                0 0 30px rgba(var(--color-accent-rgb), 0.4);
  }
}

/* ============================================
   COLOR CONTRAST FIXES
   ============================================ */

/* Fix light text colors that appear on light backgrounds */
/* Only override when text is too light for readability */

/* Light rose/pink text colors - make darker for better contrast */
.text-rose-400,
.text-rose-300,
.text-rose-200 {
  color: #be123c !important; /* Darker rose for better contrast */
}

.text-rose-400:hover {
  color: #9f1239 !important; /* Even darker on hover */
}

.text-pink-400,
.text-pink-300,
.text-pink-200 {
  color: #be185d !important; /* Darker pink for better contrast */
}

.text-amber-400,
.text-amber-300,
.text-amber-200 {
  color: #92400e !important; /* Darker amber for better contrast */
}

/* Ensure text on very light backgrounds is dark */
.bg-pink-50:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
.bg-rose-50:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
.bg-amber-50:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
.bg-yellow-50:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
[class*="bg-white/90"]:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
[class*="bg-white/80"]:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]) {
  color: #1f2937 !important; /* Dark text on light backgrounds */
}

/* Ensure child elements inherit dark text on light backgrounds */
.bg-pink-50 *:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]):not(.badge):not([class*="badge"]),
.bg-rose-50 *:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]):not(.badge):not([class*="badge"]),
.bg-amber-50 *:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]):not(.badge):not([class*="badge"]),
.bg-yellow-50 *:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]):not(.badge):not([class*="badge"]) {
  color: #1f2937 !important;
}

/* Ensure badges with light backgrounds have dark text */
.bg-amber-200:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
.bg-amber-100:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
.bg-pink-100:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]),
.bg-rose-100:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]) {
  color: #78350f !important; /* Dark amber text */
}

/* Ensure text in glass containers on light backgrounds is readable */
.glass:not([class*="bg-rose-9"]):not([class*="bg-amber-9"]):not([class*="bg-rose-8"]):not([class*="bg-amber-8"]),
.glass-card:not([class*="bg-rose-9"]):not([class*="bg-amber-9"]):not([class*="bg-rose-8"]):not([class*="bg-amber-8"]) {
  color: #1f2937 !important;
}

.glass *:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]):not([class*="bg-rose-9"]):not([class*="bg-amber-9"]):not([class*="bg-rose-8"]):not([class*="bg-amber-8"]),
.glass-card *:not(.text-white):not([style*="color: white"]):not([style*="color:#fff"]):not([class*="bg-rose-9"]):not([class*="bg-amber-9"]):not([class*="bg-rose-8"]):not([class*="bg-amber-8"]) {
  color: #1f2937 !important;
}

/* Preserve white text on dark backgrounds */
.bg-rose-900,
.bg-rose-800,
.bg-amber-900,
.bg-amber-800,
[style*="background"][style*="rose-900"],
[style*="background"][style*="amber-900"],
[style*="background"][style*="rose-800"],
[style*="background"][style*="amber-800"] {
  color: #ffffff !important;
}

.bg-rose-900 *,
.bg-rose-800 *,
.bg-amber-900 *,
.bg-amber-800 * {
  color: #ffffff !important;
}