/* Modern Components CSS - Tailwind-style utilities for homepage components */

/* Base Tailwind-like utilities that work with existing theme */

/* Layout utilities */
.max-w-7xl { max-width: 1280px !important; margin: 0 auto; }
.max-w-5xl { max-width: 1024px !important; margin: 0 auto; }
.max-w-3xl { max-width: 768px !important; margin: 0 auto; }
.max-w-2xl { max-width: 672px !important; margin: 0 auto; }

/* Grid system */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Position utilities */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-5 { z-index: 5 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }

/* Gradients */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)) !important; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)) !important; }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-from), var(--tw-gradient-to)) !important; }

/* Gradient stops */
.from-slate-50 { --tw-gradient-from: #f8fafc; }
.from-blue-50 { --tw-gradient-from: #eff6ff; }
.from-blue-500 { --tw-gradient-from: #3b82f6; }
.from-blue-600 { --tw-gradient-from: #2563eb; }
.from-blue-700 { --tw-gradient-from: #1d4ed8; }
.from-blue-900 { --tw-gradient-from: #1e3a8a; }
.from-purple-500 { --tw-gradient-from: #8b5cf6; }
.from-purple-600 { --tw-gradient-from: #7c3aed; }
.from-purple-700 { --tw-gradient-from: #6d28d9; }
.from-purple-900 { --tw-gradient-from: #581c87; }
.from-yellow-400 { --tw-gradient-from: #facc15; }
.from-yellow-500 { --tw-gradient-from: #eab308; }
.from-yellow-600 { --tw-gradient-from: #ca8a04; }
.from-green-400 { --tw-gradient-from: #4ade80; }
.from-green-500 { --tw-gradient-from: #22c55e; }
.from-red-600 { --tw-gradient-from: #dc2626; }
.from-red-700 { --tw-gradient-from: #b91c1c; }
.from-pink-500 { --tw-gradient-from: #ec4899; }
.from-pink-600 { --tw-gradient-from: #db2777; }
.from-gray-900 { --tw-gradient-from: #111827; }

.via-blue-50 { --tw-gradient-via: #eff6ff; }
.via-blue-900 { --tw-gradient-via: #1e3a8a; }
.via-purple-900 { --tw-gradient-via: #581c87; }
.via-orange-400 { --tw-gradient-via: #fb923c; }

.to-blue-50 { --tw-gradient-to: #eff6ff; }
.to-blue-500 { --tw-gradient-to: #3b82f6; }
.to-purple-600 { --tw-gradient-to: #7c3aed; }
.to-purple-700 { --tw-gradient-to: #6d28d9; }
.to-purple-900 { --tw-gradient-to: #581c87; }
.to-indigo-100 { --tw-gradient-to: #e0e7ff; }
.to-indigo-900 { --tw-gradient-to: #312e81; }
.to-orange-500 { --tw-gradient-to: #f97316; }
.to-orange-600 { --tw-gradient-to: #ea580c; }
.to-pink-500 { --tw-gradient-to: #ec4899; }
.to-pink-600 { --tw-gradient-to: #db2777; }
.to-pink-700 { --tw-gradient-to: #be185d; }
.to-red-400 { --tw-gradient-to: #f87171; }
.to-rose-600 { --tw-gradient-to: #e11d48; }
.to-teal-600 { --tw-gradient-to: #0d9488; }

/* Update gradient implementation */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-via, transparent), var(--tw-gradient-to, transparent)) !important;
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-from, transparent), var(--tw-gradient-via, transparent), var(--tw-gradient-to, transparent)) !important;
}

/* Typography */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }

@media (min-width: 768px) {
    .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
    .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

.leading-tight { line-height: 1.25 !important; }
.leading-relaxed { line-height: 1.625 !important; }

.text-center { text-align: center !important; }
.italic { font-style: italic !important; }
.underline { text-decoration: underline !important; }

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

/* Shadows */
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important; }

.hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; }

/* Object fit */
.object-cover { object-fit: cover !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-30 { opacity: 0.3 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }

/* Border */
.border { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-white { border-color: white !important; }
.border-gray-300 { border-color: #d1d5db !important; }
.border-opacity-30 { border-color: rgba(255, 255, 255, 0.3) !important; }
.border-opacity-50 { border-color: rgba(255, 255, 255, 0.5) !important; }

/* Ring */
.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color) !important; }
.ring-4 { box-shadow: 0 0 0 4px var(--tw-ring-color) !important; }
.ring-blue-100 { --tw-ring-color: #dbeafe !important; }
.ring-purple-100 { --tw-ring-color: #e9d5ff !important; }
.ring-purple-200 { --tw-ring-color: #ddd6fe !important; }

/* Transform */
.transform { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skew(var(--tw-skew-x, 0), var(--tw-skew-y, 0)) scale(var(--tw-scale-x, 1), var(--tw-scale-y, 1)) !important; }
.rotate-1 { --tw-rotate: 1deg !important; }
.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
.-translate-x-1\/2 { --tw-translate-x: -50%; }
.-translate-y-2 { --tw-translate-y: -0.5rem; }
.-translate-y-3 { --tw-translate-y: -0.75rem; }

/* Hover transforms */
.hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skew(var(--tw-skew-x, 0), var(--tw-skew-y, 0)) scale(var(--tw-scale-x, 1), var(--tw-scale-y, 1)) !important; }
.hover\:scale-110:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skew(var(--tw-skew-x, 0), var(--tw-skew-y, 0)) scale(var(--tw-scale-x, 1), var(--tw-scale-y, 1)) !important; }
.hover\:-translate-y-2:hover { --tw-translate-y: -0.5rem; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y)) rotate(var(--tw-rotate, 0)) skew(var(--tw-skew-x, 0), var(--tw-skew-y, 0)) scale(var(--tw-scale-x, 1), var(--tw-scale-y, 1)) !important; }
.hover\:-translate-y-3:hover { --tw-translate-y: -0.75rem; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y)) rotate(var(--tw-rotate, 0)) skew(var(--tw-skew-x, 0), var(--tw-skew-y, 0)) scale(var(--tw-scale-x, 1), var(--tw-scale-y, 1)) !important; }

/* Transitions */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
.transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
.transition-colors { transition-property: color, background-color, border-color !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
.transition-transform { transition-property: transform !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
.transition-opacity { transition-property: opacity !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }

.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }
.duration-700 { transition-duration: 700ms !important; }

/* Animation utilities */
.animate-bounce { animation: bounce 1s infinite !important; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; }

/* Filter utilities */
.filter { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ) !important; }
.blur-xl { --tw-blur: blur(24px) !important; }

/* Mix blend mode */
.mix-blend-multiply { mix-blend-mode: multiply !important; }

/* Backdrop filter */
.backdrop-blur-sm { backdrop-filter: blur(4px) !important; }

/* Display utilities */
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline-flex { display: inline-flex !important; }
.hidden { display: none !important; }

@media (min-width: 768px) {
    .md\:block { display: block !important; }
    .md\:flex { display: flex !important; }
}

/* Custom keyframes for modern animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slowZoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(12px); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Apply animations */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

.animate-slow-zoom {
    animation: slowZoom 20s ease-in-out infinite;
}

.animate-scroll {
    animation: scroll 2s ease-in-out infinite alternate;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Animation delays */
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-900 { animation-delay: 0.9s; }
.animation-delay-1200 { animation-delay: 1.2s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Ensure compatibility with existing theme */
.group {
    position: relative;
}

/* Fill utilities for SVGs */
.fill-current { fill: currentColor !important; }

/* Responsive utilities */
@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:flex-row { flex-direction: row !important; }
}

@media (min-width: 1024px) {
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Text gradient */
.text-transparent { color: transparent !important; }
.bg-clip-text {
    background-clip: text !important;
    -webkit-background-clip: text !important;
}

/* Ensure all our modern components work seamlessly */
.modern-component {
    position: relative;
    z-index: 1;
}

.modern-component * {
    box-sizing: border-box;
}

/* Override any theme conflicts specifically for our components */
.modern-component .grid,
.modern-component .flex,
.modern-component .relative,
.modern-component .absolute {
    position: inherit !important;
    display: inherit !important;
}

/* Ensure proper stacking context */
section[class*="bg-gradient"] {
    isolation: isolate;
}