/* Services Grid Section Styles */

.services-grid-section {
  @apply relative;
}

/* Services Grid Container */
.services-grid-container {
  @apply relative;
}

/* Services Grid Slider - Splide Integration */
.services-grid-slider {
  @apply relative;
}

/* Override Splide default styles for better integration */
.services-grid-slider .splide__track {
  @apply overflow-hidden;
}

.services-grid-slider .splide__list {
  @apply flex;
}

.services-grid-slider .splide__slide {
  @apply flex-shrink-0;
}

/* Service Card Styles */
.service-card {
  @apply transition-all duration-300;
  min-height: 280px;
}

.service-card:hover {
  @apply shadow-lg;
  transform: translateY(-4px);
}

.service-icon {
  @apply transition-all duration-300;
}

.service-card:hover .service-icon {
  @apply scale-110;
}

.service-title {
  @apply transition-colors duration-200;
}

.service-card:hover .service-title {
  @apply text-accent;
}

.service-link {
  @apply transition-all duration-200;
}

.service-card:hover .service-link {
  @apply text-accent;
}

/* Navigation Buttons */
.services-nav-prev,
.services-nav-next {
  @apply transition-all duration-200;
}

.services-nav-prev:hover,
.services-nav-next:hover {
  @apply shadow-md;
  transform: scale(1.05);
}

.services-nav-prev:active,
.services-nav-next:active {
  transform: scale(0.95);
}

/* Responsive Design - Handled by Splide breakpoints */
@media (max-width: 768px) {
  .service-card {
    min-height: 240px;
    @apply p-6;
  }

  .service-icon {
    @apply mb-4;
  }

  .service-icon > div {
    @apply w-12 h-12;
  }

  .service-icon svg {
    @apply w-6 h-6;
  }

  .service-title {
    @apply text-lg;
  }
}

@media (max-width: 640px) {
  .service-card {
    min-height: 200px;
    @apply p-4;
  }

  .service-icon {
    @apply mb-3;
  }

  .service-icon > div {
    @apply w-10 h-10;
  }

  .service-icon svg {
    @apply w-5 h-5;
  }

  .service-title {
    @apply text-base;
  }

  .service-link {
    @apply text-xs;
  }
}

/* Header responsive adjustments */
@media (max-width: 768px) {
  .services-grid-section .flex {
    @apply flex-col gap-6;
  }

  .services-grid-section .flex > div:first-child {
    @apply text-center;
  }

  .services-grid-section .flex > div:last-child {
    @apply justify-center;
  }
}

@media (max-width: 640px) {
  .services-grid-section h2 {
    @apply text-3xl;
  }
}

/* Smooth scrolling handled by Splide */

/* Hover effects for service icons */
.service-icon > div {
  @apply transition-all duration-300;
}

.service-card:hover .service-icon > div {
  @apply bg-accent/20;
}

.service-card:hover .service-icon svg {
  @apply text-accent;
}

/* Focus states for accessibility */
.services-nav-prev:focus,
.services-nav-next:focus {
  @apply outline-none ring-2 ring-accent ring-offset-2;
}

.service-link:focus {
  @apply outline-none ring-2 ring-accent ring-offset-2 rounded;
}

/* Ensure slides are visible */
.services-grid-slider .splide__slide {
  opacity: 1;
}