/* ==========================================================================
   Service card image treatment
   Controls you can adjust quickly:
   --service-card-image-opacity: default image visibility
   --service-card-image-hover-opacity: hover image visibility
   --service-card-overlay-opacity: dark overlay strength for text readability
   --service-card-overlay-hover-opacity: hover overlay strength
   --service-card-image-filter: default black/white treatment
   --service-card-image-hover-filter: hover treatment (remove grayscale / add color)
   --service-card-hover-lift: hover motion
   ========================================================================== */
/* 
:root {
  --service-card-min-height: 320px;
  --service-card-image-scale: 1.03;
  --service-card-image-hover-scale: 1.08;

  --service-card-image-opacity: 0.52;
  --service-card-overlay-opacity: 0.12;
  --service-card-image-filter: grayscale(1) brightness(0.2) contrast(0.2);

  --service-card-image-hover-opacity: 0.58;
  --service-card-overlay-hover-opacity: 0.54;
  --service-card-image-hover-filter: grayscale(0) brightness(0.72) contrast(1.04) saturate(1.08);
  --service-card-hover-lift: -6px;
  --service-card-text-max-width: 31ch;
} */

:root {
  --service-card-min-height: 320px;
  --service-card-image-scale: 1.05;
  --service-card-image-hover-scale: 1.08;

  --service-card-image-opacity: 0.62;
  --service-card-image-hover-opacity: 0.76;

  --service-card-overlay-opacity: 0.32;
  --service-card-overlay-hover-opacity: 0.2;

  /* OVERLAY COLORS: use normal hex values here */
  --service-card-overlay-color: #0a204a;
  --service-card-overlay-hover-color: #12346e;

  --service-card-image-filter: grayscale(1) brightness(0.98) contrast(1.02) blur(2.5px);
  --service-card-image-hover-filter: grayscale(0) brightness(1.02) contrast(1.03) saturate(1.1) blur(0px);

  --service-card-hover-lift: -6px;
  --service-card-text-max-width: 31ch;
}

.service-card-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: var(--service-card-min-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.2), transparent 35%), linear-gradient(180deg, #09111f 0%, #111827 100%);
}

.service-card-media > * {
  position: relative;
  z-index: 2;
}

.service-card-media::before,
.service-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  transition:
    opacity 0.28s ease,
    transform 0.42s ease,
    filter 0.28s ease,
    background 0.28s ease;
  pointer-events: none;
}

.service-card-media::before {
  background-image: var(--service-card-bg-image);
  background-position: var(--service-card-image-position, center center);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--service-card-image-opacity);
  filter: var(--service-card-image-filter);
  transform: scale(var(--service-card-image-scale));
}

.service-card-media::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--service-card-overlay-color) calc((var(--service-card-overlay-opacity) - 0.18) * 100%), transparent) 0%,
    color-mix(in srgb, var(--service-card-overlay-color) calc(var(--service-card-overlay-opacity) * 100%), transparent) 58%,
    color-mix(in srgb, var(--service-card-overlay-color) calc((var(--service-card-overlay-opacity) + 0.08) * 100%), transparent) 100%
  );
}

.service-card-media h3,
.service-card-media p {
  max-width: var(--service-card-text-max-width);
}

.service-card-media h3 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.service-card-media .text-secondary {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.service-card-media .icon-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.service-card-media .service-link {
  margin-top: auto;
  padding-top: 1.15rem;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.service-card-media .service-link:hover,
.service-card-media .service-link:focus {
  color: #dbeafe;
}

.service-card-media:hover,
.service-card-media:focus-within {
  transform: translateY(var(--service-card-hover-lift));
}

.service-card-media:hover::before,
.service-card-media:focus-within::before {
  opacity: var(--service-card-image-hover-opacity);
  filter: var(--service-card-image-hover-filter);
  transform: scale(var(--service-card-image-hover-scale));
}

.service-card-media:hover::after,
.service-card-media:focus-within::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--service-card-overlay-hover-color) calc((var(--service-card-overlay-hover-opacity) - 0.16) * 100%), transparent) 0%,
    color-mix(in srgb, var(--service-card-overlay-hover-color) calc(var(--service-card-overlay-hover-opacity) * 100%), transparent) 58%,
    color-mix(in srgb, var(--service-card-overlay-hover-color) calc((var(--service-card-overlay-hover-opacity) + 0.06) * 100%), transparent) 100%
  );
}

.service-card-ai-agents {
  --service-card-bg-image: url("../img/services/s_ai-agents.jpg");
  --service-card-image-position: center center;
}

.service-card-web-mobile {
  --service-card-bg-image: url("../img/services/s_web-mobile-app-development.jpg");
  --service-card-image-position: center center;
}

.service-card-ui-ux {
  --service-card-bg-image: url("../img/services/s_ui-ux-design.jpg");
  --service-card-image-position: center center;
}

.service-card-ai-creative {
  --service-card-bg-image: url("../img/services/s_ai-creative-production.jpg");
  --service-card-image-position: center center;
}

.service-card-ai-cloning {
  --service-card-bg-image: url("../img/services/s_ai-cloning.jpg");
  --service-card-image-position: center center;
}

.service-card-accessibility {
  --service-card-bg-image: url("../img/services/s_wcag-508-accessibility-testing.jpg");
  --service-card-image-position: center center;
}

@media (max-width: 767.98px) {
  :root {
    --service-card-min-height: 300px;
    --service-card-image-opacity: 0.3;
    --service-card-image-hover-opacity: 0.5;
  }

  .service-card-media h3,
  .service-card-media p {
    max-width: none;
  }
}