/* =====================================================================
   AIS Web Studio — sections/services.css
   Scoped under .ais-services (dark). Premium service-card grid:
   icon tile, faux index number, optional link, hover shine + accent.

   Tokens only — no raw hex. The .ais-reveal hidden/entrance state is
   owned by animations.css (under body.ais-anim); here we only add the
   card / icon / hover polish.
   ===================================================================== */

.ais-services {
  overflow: hidden;
}

/* Ambient orange glow behind the grid */
.ais-services__glow {
  position: absolute;
  top: 8%;
  right: -6%;
  width: min(640px, 60vw);
  height: min(640px, 60vw);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--ais-orange) 16%, transparent),
    transparent 70%
  );
  opacity: calc(.5 + (var(--ais-glow-intensity, 60) / 200));
  filter: blur(10px);
}

.ais-services .ais-container {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ */
/* Grid                                                               */
/* ------------------------------------------------------------------ */
.ais-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--ais-grid-gap);
}

/* ------------------------------------------------------------------ */
/* Card                                                               */
/* ------------------------------------------------------------------ */
.ais-services__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ais-space-4);
  overflow: hidden;
  isolation: isolate;
}

/* Top accent bar that grows in on hover */
.ais-services__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--ais-orange), var(--ais-orange-soft));
  border-radius: var(--ais-radius-lg) var(--ais-radius-lg) 0 0;
  transition: transform .45s var(--ais-ease);
  z-index: 2;
}
.ais-services__card:hover::before,
.ais-services__card:focus-within::before {
  transform: scaleX(1);
}

/* Deep-linked card (from footer service links) is identifiable in the grid */
.ais-services__card:target {
  outline: 2px solid var(--ais-orange);
  outline-offset: 3px;
}

/* Faux index number, top-right */
.ais-services__index {
  position: absolute;
  top: clamp(18px, 2.4vw, 28px);
  right: clamp(20px, 2.6vw, 30px);
  font-family: var(--ais-heading-font);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ais-orange);
  opacity: .16;
  transition: opacity .4s var(--ais-ease), color .4s var(--ais-ease);
  pointer-events: none;
  z-index: 0;
}
.ais-services__card:hover .ais-services__index,
.ais-services__card:focus-within .ais-services__index {
  opacity: .28;
  color: var(--ais-orange);
}

/* Icon tile */
.ais-services__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--ais-radius);
  color: var(--ais-orange);
  background: color-mix(in srgb, var(--ais-orange) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ais-orange) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ais-orange) 8%, transparent);
  transition: transform .45s var(--ais-ease),
              background-color .45s var(--ais-ease),
              color .45s var(--ais-ease),
              box-shadow .45s var(--ais-ease);
}
.ais-services__icon .ais-icon {
  width: 27px;
  height: 27px;
}
.ais-services__card:hover .ais-services__icon,
.ais-services__card:focus-within .ais-services__icon {
  transform: translateY(-2px) rotate(-4deg);
  background: var(--ais-orange);
  color: var(--ais-on-primary);
  box-shadow: 0 14px 32px -14px color-mix(in srgb, var(--ais-glow-color) 38%, transparent);
}

/* Text */
.ais-services__title {
  font-size: var(--ais-fs-h3);
  letter-spacing: var(--ais-tracking-tight);
  color: var(--ais-text);
}

.ais-services__text {
  margin-top: calc(var(--ais-space-1) * -1);
  font-size: var(--ais-fs-body);
  line-height: var(--ais-leading-body);
  color: var(--ais-text-muted);
}

/* Optional link */
.ais-services__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ais-space-2);
  min-height: var(--ais-tap-min);
  margin-top: var(--ais-space-1);
  font-family: var(--ais-heading-font);
  font-size: var(--ais-fs-sm);
  font-weight: 600;
  color: var(--ais-orange);
}
.ais-services__link .ais-icon {
  width: 1.05em;
  height: 1.05em;
  transition: transform .3s var(--ais-ease);
}
.ais-services__link:hover {
  color: var(--ais-orange-soft);
}
.ais-services__link:hover .ais-icon {
  transform: translateX(4px);
}

/* Push the link to the bottom for even card heights */
.ais-services__link { margin-top: auto; }
.ais-services__text { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Section CTA (trailing primary action → #contact)                   */
/* ------------------------------------------------------------------ */
.ais-services__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--ais-stack-gap);
}

/* Diagonal shine sweep on hover */
.ais-services__shine {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 35%,
    color-mix(in srgb, var(--ais-orange) 10%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform .9s var(--ais-ease);
}
.ais-services__card:hover .ais-services__shine {
  transform: translateX(120%);
}

/* Keep card content above the shine layer */
.ais-services__icon,
.ais-services__title,
.ais-services__text,
.ais-services__link {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .ais-services__icon {
    width: 52px;
    height: 52px;
  }
  .ais-services__icon .ais-icon {
    width: 24px;
    height: 24px;
  }
}

/* Honor reduced motion: no shine sweep / transforms */
@media (prefers-reduced-motion: reduce) {
  .ais-services__shine { display: none; }
  .ais-services__card::before { transition: none; }
  .ais-services__icon,
  .ais-services__link .ais-icon { transition: none; }
}

/* ------------------------------------------------------------------ */
/* RTL — mirror directional pieces only; LTR is byte-for-byte intact.  */
/* ------------------------------------------------------------------ */
[dir="rtl"] .ais-services__glow {
  right: auto;
  left: -6%;
}
[dir="rtl"] .ais-services__card::before {
  transform-origin: right;
}
[dir="rtl"] .ais-services__index {
  right: auto;
  left: clamp(20px, 2.6vw, 30px);
}
[dir="rtl"] .ais-services__link:hover .ais-icon {
  transform: translateX(-4px);
}
[dir="rtl"] .ais-services__shine {
  transform: translateX(120%);
  background: linear-gradient(
    240deg,
    transparent 35%,
    color-mix(in srgb, var(--ais-orange) 10%, transparent) 50%,
    transparent 65%
  );
}
[dir="rtl"] .ais-services__card:hover .ais-services__shine {
  transform: translateX(-120%);
}