/* InjusticeTo.org - Shared Styles */

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

/* Enhanced mobile-first card interactions */
.card-hover {
  transition: all 0.3s ease;
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Mobile touch optimizations */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Mobile active states */
@media (hover: none) {
  .card-hover:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .btn-primary:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ==========================================================================
   SCROLLING & CONTAINERS
   ========================================================================== */

/* Improved mobile scrolling */
.scroll-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   TEXT UTILITIES
   ========================================================================== */

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

.line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-primary {
  background-color: #8B4513;
  color: white;
}

.btn-primary:hover {
  background-color: #5D2F02;
}

/* ==========================================================================
   LAYOUT COMPONENTS
   ========================================================================== */

.category-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
}

/* ==========================================================================
   HERO BACKGROUNDS
   ========================================================================== */

.hero-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)),
    url('https://images.unsplash.com/photo-1589994965851-a8f479c573a9?w=1600&h=800&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ==========================================================================
   ARTICLE SPECIFIC STYLES
   ========================================================================== */

.article-content {
  line-height: 1.8;
}

.back-btn {
  transition: all 0.3s ease;
}

.back-btn:hover {
  transform: translateX(-4px);
}

/* ==========================================================================
   MOBILE SPECIFIC IMPROVEMENTS
   ========================================================================== */

@media (max-width: 640px) {
  .hero-bg {
    background-attachment: scroll;
  }
  
  .min-h-screen {
    min-height: 100vh;
  }
}