/* Frontend Styles - Catálogo de Expositores */

/* Estilos gerais */
.cat-expo-home,
.cat-expo-catalogo,
.cat-expo-single {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cat-expo-home {
    animation: fadeIn 0.6s ease-out;
}

/* Botões da home */
.cat-expo-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.cat-expo-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cat-expo-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Cards de expositores */
.cat-expo-catalogo #cat-expo-grid > div {
    animation: fadeIn 0.5s ease-out;
    animation-fill-mode: both;
}

.cat-expo-catalogo #cat-expo-grid > div:nth-child(1) { animation-delay: 0.1s; }
.cat-expo-catalogo #cat-expo-grid > div:nth-child(2) { animation-delay: 0.2s; }
.cat-expo-catalogo #cat-expo-grid > div:nth-child(3) { animation-delay: 0.3s; }
.cat-expo-catalogo #cat-expo-grid > div:nth-child(4) { animation-delay: 0.4s; }
.cat-expo-catalogo #cat-expo-grid > div:nth-child(5) { animation-delay: 0.5s; }
.cat-expo-catalogo #cat-expo-grid > div:nth-child(6) { animation-delay: 0.6s; }

/* Truncar texto em 3 linhas */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aspect ratio para vídeos */
.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%;
}

.aspect-w-16 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Aspect ratio para imagens da galeria */
.aspect-w-4 {
    position: relative;
    padding-bottom: 75%;
}

.aspect-w-4 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Loading spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Transições suaves */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Hover effects */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Galeria lightbox effect */
.cat-expo-single .aspect-w-4 img {
    transition: transform 0.3s ease;
}

.cat-expo-single .aspect-w-4:hover img {
    transform: scale(1.05);
}

/* Responsivo */
@media (max-width: 768px) {
    .cat-expo-home h1 {
        font-size: 2.5rem;
    }
    
    .cat-expo-single h1 {
        font-size: 2rem;
    }
}

/* Cores do Tailwind que podem não estar disponíveis */
.bg-blue-50 { background-color: #eff6ff; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-green-100 { background-color: #dcfce7; }
.bg-purple-600 { background-color: #9333ea; }
.bg-purple-700 { background-color: #7e22ce; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }

.text-blue-800 { color: #1e40af; }
.text-blue-100 { color: #dbeafe; }
.text-green-100 { color: #dcfce7; }
.text-purple-100 { color: #f3e8ff; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }

.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-purple-700:hover { background-color: #7e22ce; }

.border-gray-300 { border-color: #d1d5db; }
.border-blue-500 { border-color: #3b82f6; }

.focus\:ring-2:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
    outline: none;
}

.focus\:border-transparent:focus {
    border-color: transparent;
}