/* ========================================
   CARD COMPONENTS
   Stats, features, benefits items
   ======================================== */

/* ==================== STATS GRID ==================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.8;
  font-weight: 500;
}

/* ==================== FEATURE ITEMS (simple lists for index.php) ==================== */

.features-list {
  list-style: none;
  margin-bottom: 50px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Simple list without hover effect for main page */
}

.feature-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  backdrop-filter: blur(10px);
  transition: transform var(--duration-base) var(--ease-apple),
              box-shadow var(--duration-base) var(--ease-apple);
  position: relative;
  z-index: 2;
}

.feature-text {
  flex: 1;
  position: relative;
  z-index: 2;
}

.feature-name {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.feature-desc {
  opacity: 0.8;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ==================== BENEFIT ITEMS (simple lists for index.php) ==================== */

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Simple list without hover effect for main page */
}

.benefit-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-apple),
              box-shadow var(--duration-base) var(--ease-apple);
  position: relative;
  z-index: 2;
}

/* ==================== HOVER EFFECTS ==================== */

/* Hover only for icons in lists (index.php) */
.feature-icon:hover,
.benefit-icon:hover {
  transform: translateY(var(--lift-sm)) scale(var(--scale-md));
  box-shadow: var(--shadow-sm);
}

/* Hover for story-feature-card and chat-feature-item cards */
/* feature-card styles are in features-page.css */
.story-feature-card,
.chat-feature-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Shimmer effect for interactive cards - fast like in Help Center */
.story-feature-card::before,
.chat-feature-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left var(--shimmer-speed) ease;
  pointer-events: none;
  z-index: 1;
}

.story-feature-card:hover::before,
.chat-feature-item:hover::before {
  left: 100%;
}

.story-feature-card:hover,
.chat-feature-item:hover {
  transform: translateY(-3px) scale(1.02) translateZ(0);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.benefit-text {
  flex: 1;
  position: relative;
  z-index: 2;
}

.benefit-title {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.benefit-desc {
  opacity: 0.8;
  line-height: 1.5;
}

/* ==================== BLOCK-SPECIFIC TEXT AND ICON COLORS ==================== */

/* Features Section (Complete Event Platform) - Purple-Pink gradient */
.features-section:not([style]) .feature-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.features-section:not([style]) .benefit-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.features-section:not([style]) .feature-name,
.features-section:not([style]) .feature-desc,
.features-section:not([style]) .benefit-title,
.features-section:not([style]) .benefit-desc {
  color: white;
}

.features-section:not([style]) .benefit-title,
.features-section:not([style]) .benefit-desc,
.features-section:not([style]) .feature-name,
.features-section:not([style]) .feature-desc {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}


/* AI Features Section - Deep Purple gradient (#3b82f6 → #2563eb) */
.features-section[style*="3b82f6"] .feature-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.features-section[style*="3b82f6"] .benefit-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.features-section[style*="3b82f6"] .feature-name,
.features-section[style*="3b82f6"] .feature-desc,
.features-section[style*="3b82f6"] .benefit-title,
.features-section[style*="3b82f6"] .benefit-desc {
  color: white;
}

.features-section[style*="3b82f6"] .benefit-title,
.features-section[style*="3b82f6"] .benefit-desc,
.features-section[style*="3b82f6"] .feature-name,
.features-section[style*="3b82f6"] .feature-desc {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Chat & Stories Section - Blue gradient (#3b82f6 → #4facfe) */
.analytics-section[style*="4facfe"] .benefit-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #4facfe 100%);
  color: white;
}

.analytics-section[style*="4facfe"] .benefit-title,
.analytics-section[style*="4facfe"] .benefit-desc {
  color: white;
}

.analytics-section[style*="4facfe"] .benefit-title,
.analytics-section[style*="4facfe"] .benefit-desc {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Stories Section */
.analytics-section[style*="f093fb"] .benefit-icon {
  background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  color: white;
}

.analytics-section[style*="f093fb"] .benefit-title,
.analytics-section[style*="f093fb"] .benefit-desc {
  color: white;
}

.analytics-section[style*="f093fb"] .benefit-title,
.analytics-section[style*="f093fb"] .benefit-desc {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Premium Section - Orange/Peach gradient (#ffecd2 → #fcb69f) */
.community-section[style*="ffecd2"] .benefit-icon {
  background: linear-gradient(135deg, #ff9a56 0%, #ff6348 100%);
  color: white;
}

.community-section[style*="ffecd2"] .benefit-title,
.community-section[style*="ffecd2"] .benefit-desc {
  color: #2c2c2e;
  text-shadow: none;
}

/* Analytics Section (Get paid instantly) - Green/Teal gradient (#11998e → #38ef7d) */
.analytics-section:not([style]) .benefit-icon {
  background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%);
  color: white;
}

.analytics-section:not([style]) .benefit-title,
.analytics-section:not([style]) .benefit-desc {
  color: #2c2c2e;
  text-shadow: none;
}

/* Community Section - Pink gradient (#ff9a9e → #fecfef) */
.community-section:not([style]) .benefit-icon {
  background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
  color: white;
}

.community-section:not([style]) .benefit-title,
.community-section:not([style]) .benefit-desc {
  color: #2c2c2e;
  text-shadow: none;
}