/* ==========================================================================
   AI Vision Solutions
   Page styles for services_ai_vision.html, service_vision_ppe.html and
   service_vision_defect.html.

   Loaded after styles.css and 57theme.css. Adds only. Nothing in this file
   is required by any pre-existing page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Services dropdown, four item variant

   57theme/styles.css styles the dropdown for exactly three items using
   :first-child, :nth-child(2) and :last-child. These pages carry a fourth
   item, which shifts Enterprise Mobile off :last-child. The rules below
   restore Enterprise Mobile at position three and style AI Vision at four.
   -------------------------------------------------------------------------- */

.dropdown-menu.services .dropdown-item:nth-child(3) {
  background-color: #E5F1FD;
  color: #212529;
}

.dropdown-menu.services .dropdown-item:nth-child(3) .dropdown-bg {
  background-image: url("../assets/Home/billboard-ems.png");
}

.dropdown-menu.services .dropdown-item:last-child {
  background-color: #0E1A1C;
  color: #FFFFFF;
}

.dropdown-menu.services .dropdown-item:last-child .dropdown-bg {
  background-image: url("../assets/Images/AI Vision Solutions/banner-vision.jpg");
}


/* --------------------------------------------------------------------------
   2. Page banners
   -------------------------------------------------------------------------- */

.visionBanner {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
}

.visionBanner.pillar {
  background-image: url("../assets/Images/AI Vision Solutions/banner-vision.jpg");
  background-position: center 30%;
}

.visionBanner.ppe {
  background-image: url("../assets/Images/AI Vision Solutions/banner-ppe.jpg");
  background-position: center 20%;
}

.visionBanner.defect {
  background-image: url("../assets/Images/AI Vision Solutions/banner-defect.jpg");
  background-position: center;
}


/* --------------------------------------------------------------------------
   3. Intro header

   Mirrors header.svcAutohead so these pages sit at the same rhythm as the
   other service pages. Redeclared rather than shared because servicesAuto.css
   is not loaded here.
   -------------------------------------------------------------------------- */

header.svcVisionHead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: #060D24;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

header.svcVisionHead h1,
header.svcVisionHead .h1 {
  font-size: 2.25rem;
}

@media (min-width: 992px) {
  header.svcVisionHead {
    height: fit-content;
    min-height: 20rem;
    padding-top: 8rem;
    padding-bottom: 4rem;
  }
  header.svcVisionHead p {
    font-size: 1.15rem;
  }
  header.svcVisionHead h1,
  header.svcVisionHead .h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  header.svcVisionHead h1,
  header.svcVisionHead .h1 {
    font-size: 3.5rem;
  }
}


/* --------------------------------------------------------------------------
   4. Alternating image and text feature rows
   -------------------------------------------------------------------------- */

.vision-feature {
  height: 500px;
  display: flex;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .vision-feature {
    height: 280px;
  }
}

.vision-text {
  display: flex;
  align-items: center;
  height: 100%;
}


/* --------------------------------------------------------------------------
   5. Scope cards

   Used for the PPE detection classes and for the inspection concepts. The
   scope chip is load bearing: it states whether an item is inside the
   supplied scope, so a reader is never left guessing.
   -------------------------------------------------------------------------- */

.scope-card {
  background-color: #FFFFFF;
  border: 1px solid #E2E4E4;
  padding: 34px 30px 30px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.scope-card:hover {
  border-color: #12a195;
  box-shadow: 0 8px 24px rgba(6, 13, 36, 0.08);
}

.scope-card .scope-icon {
  height: 64px;
  width: 64px;
  margin-bottom: 22px;
}

.scope-card h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #111110;
}

.scope-card p {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4f4f;
  margin-bottom: 22px;
}

.scope-card .scope-chip {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid #12a195;
  color: #0d7d74;
}

.scope-card .scope-chip.out {
  border-color: #b9bdbd;
  color: #6c7373;
}

.scope-card.muted {
  background-color: #F6F7F7;
}

.scope-card.muted .scope-icon {
  opacity: 0.45;
}


/* --------------------------------------------------------------------------
   6. Sequence steps

   Numbered because the content genuinely is ordered. The connector is drawn
   only where a following step exists.
   -------------------------------------------------------------------------- */

.sequence {
  counter-reset: sequence;
}

.sequence-step {
  position: relative;
  padding-top: 34px;
}

.sequence-step::before {
  counter-increment: sequence;
  content: "0" counter(sequence);
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #12a195;
  margin-bottom: 14px;
}

.sequence-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: #d8dcdc;
}

.sequence-step:first-child::after {
  left: 0;
}

.sequence-step:last-child::after {
  right: 0;
}

.sequence-step .step-marker {
  position: absolute;
  top: -5px;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #12a195;
}

.sequence-step:first-child .step-marker {
  left: 0;
}

.sequence-step h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #111110;
}

.sequence-step p {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4f4f;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .sequence-step {
    padding-top: 0;
    padding-left: 30px;
    padding-bottom: 34px;
  }
  .sequence-step::after {
    top: 6px;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .sequence-step:last-child::after {
    display: none;
  }
  .sequence-step .step-marker,
  .sequence-step:first-child .step-marker {
    top: 4px;
    left: 0;
  }
}


/* --------------------------------------------------------------------------
   7. Capability list, used for the dashboard and inclusions sections
   -------------------------------------------------------------------------- */

.capability-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.capability-list li {
  position: relative;
  padding-left: 34px;
  padding-bottom: 20px;
  font-size: 17px;
  line-height: 1.55;
}

.capability-list li:last-child {
  padding-bottom: 0;
}

.capability-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 2px;
  background-color: #12a195;
}

.capability-list.on-dark li {
  color: rgba(255, 255, 255, 0.85);
}


/* --------------------------------------------------------------------------
   8. Coverage diagram
   -------------------------------------------------------------------------- */

.coverage-diagram {
  background-color: #FFFFFF;
  border: 1px solid #E2E4E4;
  padding: 30px;
}

.coverage-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.coverage-caption {
  font-size: 14px;
  color: #6c7373;
  margin: 18px 0 0 0;
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   9. Capability band

   Reuses the #experience treatment from 57theme.css. Only the figure size is
   adjusted, because these figures run to four characters where the existing
   pages use three.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  #experience h1 {
    font-size: 4.5rem;
  }
}

@media (max-width: 575px) {
  #experience h1 {
    font-size: 4rem;
  }
}


/* --------------------------------------------------------------------------
   10. Explore other services cards
   -------------------------------------------------------------------------- */

.explore-card {
  height: 550px;
}

.explore-card .explore-body {
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
}

.explore-card h3 {
  margin-bottom: 0.5rem;
}

.explore-card p {
  min-height: 100px;
  max-height: 100px;
  overflow: hidden;
  margin-bottom: 0;
}

.explore-card .explore-image {
  height: 280px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.explore-card .explore-image > div {
  height: 100%;
  width: 100%;
}

@media (max-width: 991px) {
  .explore-card {
    height: auto;
    margin-bottom: 1.5rem;
  }
  .explore-card p {
    max-height: none;
  }
}


/* --------------------------------------------------------------------------
   11. Quality floor
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.learn-more-btn:focus-visible {
  outline: 2px solid #12a195;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .scope-card {
    transition: none;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}