/* Scoped enhancements for the Services grid with AI featured card */
.services-modern .services-grid-ai-left {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* desktop: 6-col for flexible spanning */
  gap: 22px;
  align-items: stretch;
  margin-top: 28px;
  grid-auto-flow: dense;
}

.services-modern .service-card-compact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 22px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.12) 0%, rgba(100, 116, 139, 0.14) 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
  overflow: hidden;
  cursor: pointer;
  min-height: 148px;
}

/* Default (non-breakpoint) baseline for AI; overridden on desktop/tablet breakpoints below */
.services-modern .services-grid-ai-left .service-card-compact[data-service="ai"] {
  min-height: 200px;
  padding: 24px 20px;
}

.services-modern .services-grid-ai-left .service-card-compact:not([data-service="ai"]) {
  min-height: 180px;
}

.services-modern .service-card-compact:hover {
  transform: translateY(-8px);
  border-color: rgba(99, 102, 241, 0.65);
  box-shadow: 0 16px 44px rgba(2, 6, 23, 0.45), 0 0 0 2px rgba(99, 102, 241, 0.15) inset;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.18) 0%, rgba(100, 116, 139, 0.2) 100%);
}

.services-modern .service-card-compact:focus-within,
.services-modern .service-card-compact:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

.services-modern .service-card-compact .service-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e5e7eb;
  background: radial-gradient(75% 75% at 30% 30%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%), linear-gradient(135deg, rgba(99,102,241,.18) 0%, rgba(139,92,246,.18) 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}

.services-modern .service-card-compact .service-icon i {
  font-size: 28px;
  transition: transform .35s ease, filter .35s ease;
}

.services-modern .service-card-compact:hover .service-icon {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border-color: rgba(99, 102, 241, 0.45);
}

.services-modern .service-card-compact:hover .service-icon i {
  transform: scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(99,102,241,.35));
}

.services-modern .service-card-compact .service-content h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .2px;
}

.services-modern .service-card-compact .service-content p {
  margin: 8px 0 0 0;
  font-size: .98rem;
  line-height: 1.45;
  color: #cbd5e1;
}

/* Featured AI card styling */
.services-modern .service-card-compact.featured.ai-premium {
  background: linear-gradient(135deg, rgba(99,102,241,.22) 0%, rgba(139,92,246,.22) 50%, rgba(59,130,246,.18) 100%);
  border: 1px solid rgba(99,102,241,.55);
  box-shadow: 0 18px 60px rgba(99,102,241,.25), 0 0 0 1px rgba(255,255,255,.08) inset;
}

.services-modern .service-card-compact.featured.ai-premium:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 26px 80px rgba(99,102,241,.32), 0 0 0 2px rgba(139,92,246,.22) inset;
}

/* Compact pill badge for AI (override any wide pill styles) */
.services-modern .services-grid-ai-left .service-card-compact.featured.ai-premium .ai-badge {
  position: absolute;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .6px;
  color: #0b1020;
  background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 100%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 6px 18px rgba(99,102,241,.35);
}

.services-modern .service-card-compact .ai-icon {
  background: linear-gradient(135deg, rgba(99,102,241,.28) 0%, rgba(139,92,246,.3) 100%);
  color: #fff;
}

/* Subtle rotating accent for icons (respects --rotation-speed if set) */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.services-modern .service-card-compact .service-icon[data-animate="spin"] i,
.services-modern .service-card-compact .ai-icon i {
  animation: spin-slow var(--rotation-speed, 12s) linear infinite;
}

/* Left spotlight glow for the featured card */
/* Default spotlight (kept for generic usage) */
.services-modern .service-card-compact.left-spotlight::after {
  content: '';
  position: absolute;
  inset: -20% -30% -20% 0;
  background: radial-gradient(60% 60% at 10% 50%, rgba(99,102,241,.18) 0%, rgba(99,102,241,0) 70%);
  pointer-events: none;
}

/* Centered spotlight specifically for AI when centered */
.services-modern .services-grid-ai-left .service-card-compact[data-service="ai"].left-spotlight::after {
  inset: -10% -10% -10% -10%;
  background: radial-gradient(55% 55% at 50% 50%, rgba(99,102,241,.2) 0%, rgba(99,102,241,0) 70%);
}

/* Color variants baseline (can be extended) */
.services-modern .service-card-compact.cloud-premium .service-icon {
  background: linear-gradient(135deg, rgba(59,130,246,.18) 0%, rgba(56,189,248,.18) 100%);
}

/* Responsive grid */
@media (min-width: 1025px) {
  /* 3 cards per row by default (2 columns each over 6-col grid) */
  .services-modern .services-grid-ai-left .service-card-compact {
    grid-column: span 2;
  }
  /* Center AI (columns 3-4) */
  .services-modern .services-grid-ai-left .service-card-compact[data-service="ai"] {
    grid-column: 3 / span 2;
    grid-row: 2;
  }
  /* Put printing & disaster side-by-side, half row each */
  .services-modern .services-grid-ai-left .service-card-compact[data-service="printing"] {
    grid-column: 1 / span 3;
    grid-row: auto;
    min-height: 220px;
    order: 100;
  }
  .services-modern .services-grid-ai-left .service-card-compact[data-service="disaster"] {
    grid-column: 4 / span 3;
    grid-row: auto;
    min-height: 220px;
    order: 100;
  }
}
@media (max-width: 1024px) {
  .services-modern .services-grid-ai-left {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .services-modern .services-grid-ai-left .service-card-compact[data-service="ai"] {
    grid-column: 1 / -1;
    grid-row: 1;
    order: -1;
    min-height: 220px;
    padding: 22px 18px;
  }
}

@media (max-width: 640px) {
  .services-modern .services-grid-ai-left {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .services-modern .service-card-compact {
    padding: 18px 16px;
  }
  .services-modern .services-grid-ai-left .service-card-compact[data-service="ai"] {
    grid-column: auto;
    grid-row: 1;
    order: -1;
    min-height: 200px;
    padding: 20px 16px;
  }
}