/* ============================================================
   AI Retail Intelligence — page-scoped overrides only
   Does not alter shared service-hero, service-reality, or other pages.
   Desktop design preserved; responsive tweaks below.
   ============================================================ */

.service-page--ai-retail {
  overflow-x: clip;
}

/* Allow reality phones to breathe at edges (same need as field-sales) */
.service-page--ai-retail .service-reality {
  overflow: visible;
}

/*
 * AI reality assets are tighter-cropped than Field Sales PNGs.
 * Cap phone width so the visual phone body matches Field Sales scale.
 */
.service-page--ai-retail .service-reality__phone {
  max-width: min(var(--phone-max, 600px), 46vw);
}

.service-page--ai-retail .service-reality__phone[data-phone-index="0"] {
  max-width: min(var(--phone-max, 560px), 42vw);
}

/* Multi-line hero title (newline preserved from PHP string) */
.service-page--ai-retail .service-hero__title {
  white-space: pre-line;
}

/* Keep video as the dominant visual story */
.service-page--ai-retail .service-hero__video {
  object-fit: cover;
  object-position: center center;
}

/*
 * Workflow phones — AI assets are taller full-bleed portraits than Field Sales.
 * Cap size page-only so the fan matches Field Sales visual scale.
 * Does not modify shared service-workflow.css or Field Sales.
 */
.service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone {
  max-width: min(420px, 30vw);
  width: min(420px, 30vw);
}

.service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(54vh, 500px);
  object-fit: contain;
  object-position: bottom center;
}

.service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone--center img {
  transform: scale(1.04);
  max-height: min(58vh, 540px);
}

.service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone--past img,
.service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone--future img {
  transform: scale(0.92);
}

@media (min-width: 992px) {
  .service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-m-card__phone {
    max-width: 280px;
  }

  .service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-m-card__phone img {
    max-height: 420px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Workflow grid bg — AI page only */
.service-page--ai-retail .section-workflow--ai-retail-intelligence .section-workflow__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 92% 80% at 50% 42%, #000 32%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 92% 80% at 50% 42%, #000 32%, transparent 92%);
}

/* CTA — phone mockup visual (page-scoped only) */
.service-page--ai-retail .loyalty-cta__arrow {
  max-width: 250px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 36px rgba(7, 26, 51, 0.18));
}

.service-page--ai-retail .loyalty-cta__visual {
  position: absolute;
  right: 2%;
  bottom: 3%;
  z-index: 3;
  width: auto;
  pointer-events: none;
  user-select: none;
}

/* ---- Large tablet ---- */
@media (max-width: 1199.98px) {
  .service-page--ai-retail .service-reality__phone {
    max-width: min(var(--phone-max, 480px), 40vw);
  }

  .service-page--ai-retail .service-reality__phone[data-phone-index="0"] {
    max-width: min(var(--phone-max, 440px), 36vw);
  }

  .service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone {
    max-width: min(360px, 28vw);
    width: min(360px, 28vw);
  }

  .service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone img {
    max-height: min(50vh, 440px);
  }

  .service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone--center img {
    max-height: min(54vh, 480px);
  }

  .service-page--ai-retail .ai-solution__inner,
  .service-page--ai-retail .ai-retail-features__inner {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- Tablet / mobile stack ---- */
@media (max-width: 991.98px) {
  .service-page--ai-retail {
    overflow-x: clip;
  }

  .service-page--ai-retail .service-hero__title {
    font-size: clamp(1.65rem, 5.5vw, 2.2rem);
  }

  /* Desktop fan overrides not needed on mobile workflow cards */
  .service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone {
    max-width: none;
    width: auto;
  }

  .service-page--ai-retail .section-workflow--ai-retail-intelligence .workflow-phone img {
    max-height: none;
  }

  .service-page--ai-retail .loyalty-cta__visual {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .service-page--ai-retail .loyalty-cta__arrow {
    max-width: 220px;
    width: 58%;
  }

  .service-page--ai-retail .ai-solution,
  .service-page--ai-retail .ai-retail-features {
    overflow-x: clip;
  }
}

@media (max-width: 767.98px) {
  .service-page--ai-retail .service-hero__description {
    font-size: 0.92rem;
  }

  .service-page--ai-retail .service-hero__actions {
    flex-wrap: wrap;
  }

  .service-page--ai-retail .service-hero__btn {
    width: 100%;
    justify-content: center;
  }

  .service-page--ai-retail .loyalty-cta__arrow {
    max-width: 180px;
    width: 55%;
  }
}

@media (max-width: 575.98px) {
  .service-page--ai-retail .service-hero__title {
    font-size: clamp(1.45rem, 7vw, 1.75rem);
  }

  .service-page--ai-retail .loyalty-cta__arrow {
    max-width: 160px;
  }
}