/*
Il CSS custom serve solo per le animazioni e gli stili "proprietari" che Tailwind non ha di base.
Tutta la struttura della griglia è gestita in modo sicuro tramite le classi Tailwind iniettate nel PHP.
*/
.col-span-1 img {
  height: 100% !important;
}

.sh-bg-grid-pattern {
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}

.sh-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: none;
background: linear-gradient(135deg, #4f46e5, #4338ca);
color: white !important;
text-decoration: none;
}

.sh-btn-primary:hover {
background: linear-gradient(135deg, #6366f1, #4f46e5);
transform: translateY(-2px);
}

/* Animazioni */
@keyframes animate-blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
animation: animate-blob 8s infinite;
}

.animation-delay-4000 {
animation-delay: 4s;
}

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

.animate-float-vertical {
animation: float-up-down 5s ease-in-out infinite;
}