/* Safety net against a Swiper init race where the container reads a bad
   width before layout settles and blows up to a huge pixel value (visible
   as a giant blank/gray section). max-width always wins over an inline
   width style, so this clamps the runaway size regardless of the JS timing. */
.swiper,
.swiper-wrapper,
.swiper-slide {
  max-width: 100%;
}

/* A touch-drag that starts on an <img> can be hijacked by the browser's
   native "drag this image" gesture instead of reaching Swiper's own touch
   handling, which is why swiping on the services cards (image fills most
   of the card) could fail to advance the slide on phones. */
.swiper-slide img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Services cards: carousel only on phone. From "sm" up, force the Swiper
   markup back into a plain static grid so desktop/tablet shows all cards
   at once instead of a swipeable slider. !important beats the inline
   width/transform Swiper's JS keeps setting on these elements. */
@media (min-width: 640px) {
  .servicesCardSwiper {
    overflow: visible !important;
  }
  .servicesCardSwiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    transform: none !important;
  }
  .servicesCardSwiper .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
  }
  .servicesCardSwiper .swiper-pagination {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .servicesCardSwiper .swiper-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Phone view: Swiper's default pagination is absolutely positioned inside
   the container (bottom: 10px), which sits it on top of the card instead of
   below it. Push it into normal flow with spacing so it clears the card. */
@media (max-width: 639px) {
  .servicesCardSwiper .swiper-pagination {
    position: static !important;
    margin-top: 16px;
  }
}

/* Services cards in dark mode: glass instead of solid, and the inline dark
   navy text (title first word, feature labels) switched to a light color —
   those are inline styles so the site's normal .dark .bg-white / .dark
   .text-secondary-white overrides never reach them. */
html.dark .services-swiper-card {
  background: rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .svc-title-dark,
html.dark .svc-feature-title,
html.dark .svc-cta-title {
  color: #e2e8f0 !important;
}

html.dark .svc-feature-desc,
html.dark .svc-cta-desc {
  color: #94a3b8 !important;
}

/* Hover lift: service cards and testimonial cards rise slightly with a
   deeper shadow on hover, matching the zoom-on-hover already applied to
   card images elsewhere (image-hover-effects.css) — that transforms the
   <img> itself, this transforms the card wrapper, so the two compose
   without fighting each other. The testimonial card already sets its own
   box-shadow inline (higher specificity than a plain class rule), so the
   hover shadow needs !important to actually take over on :hover. */
.services-swiper-card,
.testimonial .swiper-slide {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-swiper-card:hover,
.testimonial .swiper-slide:hover {
  transform: translateY(-8px);
}

.services-swiper-card:hover {
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
}

.testimonial .swiper-slide:hover {
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .services-swiper-card,
  .testimonial .swiper-slide {
    transition: none;
  }
  .services-swiper-card:hover,
  .testimonial .swiper-slide:hover {
    transform: none;
  }
}