/* VIOSCANS - Violet Uniques - Robotic Violet artwork and layout v1.
   Page-specific overrides only. Shared header/footer and application styles remain intact.
   Original image is top-cable-aligned and all transparent assets are COMPLETE frames.
   Never use fixed image heights, object-fit:cover, clipping, or CSS translate offsets. */

body.vio-site .vu-page,
body.vio-site .vu-page * { box-sizing: border-box; }
body.vio-site .vu-page { min-width: 0; }
body.vio-site .vu-page .vu-hero {
  display: grid !important;
  grid-template-columns: minmax(0,1.13fr) minmax(0,.87fr) !important;
  align-items: stretch !important;
  gap: clamp(10px, 2.7vw, 36px) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: linear-gradient(123deg,#fff 0%,#fdf9ff 57%,#f6ecff 100%);
  border: 1px solid rgba(110,58,182,.16);
  border-radius: 18px;
}
body.vio-site .vu-page .vu-hero .vu-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: center;
  padding: clamp(27px,4vw,54px) 0 clamp(27px,4vw,54px) clamp(22px,4vw,56px) !important;
}
body.vio-site .vu-page .vu-hero .vu-copy h1 {
  overflow-wrap: normal;
  max-width: 700px;
  line-height: 1.13;
}
body.vio-site .vu-page .vu-hero .vu-copy p { max-width: 680px; }

/* The first visible cable pixels align with the TOP of the colored hero section.
   No margin, padding, artificial image crop, or transform on the artwork. */
body.vio-site .vu-page .vu-hero .vu-art {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}
body.vio-site .vu-page .vu-hero .vu-art .vu-robot-picture {
  display: block !important;
  position: relative !important;
  width: min(100%, 500px) !important;
  max-width: 100% !important;
  flex: 0 1 auto;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.vio-site .vu-page .vu-hero .vu-art .vu-robot-image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: top center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  mask: none !important;
  transform: none !important;
  filter: drop-shadow(0 13px 24px rgba(61,27,110,.16));
}

/* Quiet polish for surrounding tool controls, without touching processing logic. */
body.vio-site .vu-page .vu-tool-card,
body.vio-site .vu-page .vu-results-card,
body.vio-site .vu-page .vu-help-card {
  min-width: 0;
  overflow-wrap: break-word;
}
body.vio-site .vu-page .vu-tool-card { border-color: rgba(105,52,175,.16); }
body.vio-site .vu-page .vu-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
body.vio-site .vu-page .vu-chip { white-space:normal; }
body.vio-site .vu-page .vu-controls-row { min-width:0; flex-wrap:wrap; }
body.vio-site .vu-page .vu-sort-wrap { min-width:0; flex-wrap:wrap; }
body.vio-site .vu-page .vu-form,
body.vio-site .vu-page .vu-form textarea,
body.vio-site .vu-page .vu-textarea { max-width:100%; min-width:0; }
body.vio-site .vu-page .vu-table-wrap { overflow-x:auto !important; max-width:100%; -webkit-overflow-scrolling:touch; }
body.vio-site .vu-page .vu-results-card .vu-table { width:100%; min-width:765px; }
body.vio-site .vu-page .vu-help-grid { min-width:0; }
body.vio-site .vu-page .vu-help-grid > * { min-width:0; }

/* For smaller desktops/tablets, switch BEFORE Violet's hands get squeezed. */
@media (max-width: 1080px) {
  body.vio-site .vu-page .vu-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  body.vio-site .vu-page .vu-hero .vu-art {
    order: 0 !important;
    align-self: center !important;
    width: 100% !important;
  }
  body.vio-site .vu-page .vu-hero .vu-art .vu-robot-picture {
    width: min(100%, 480px) !important;
  }
  body.vio-site .vu-page .vu-hero .vu-copy {
    order: 1 !important;
    width: 100% !important;
    align-self: stretch !important;
    padding: clamp(18px,4vw,32px) clamp(22px,5vw,45px) clamp(25px,5vw,42px) !important;
  }
}
@media (max-width: 640px) {
  body.vio-site .vu-page .vu-hero { border-radius: 13px; }
  body.vio-site .vu-page .vu-hero .vu-art .vu-robot-picture {
    width: min(96%, 340px) !important;
  }
  body.vio-site .vu-page .vu-hero .vu-copy {
    padding: 17px 18px 26px !important;
  }
  body.vio-site .vu-page .vu-hero .vu-copy h1 {
    font-size: clamp(29px,7.6vw,40px) !important;
  }
  body.vio-site .vu-page .vu-tool-head,
  body.vio-site .vu-page .vu-controls-row,
  body.vio-site .vu-page .vu-sort-wrap {
    gap: 12px;
  }
  body.vio-site .vu-page .vu-help-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
}
@media (max-width: 380px) {
  body.vio-site .vu-page .vu-hero .vu-art .vu-robot-picture {
    width: min(96%, 282px) !important;
  }
  body.vio-site .vu-page .vu-hero .vu-copy {
    padding: 14px 15px 22px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.vio-site .vu-page .vu-hero .vu-art .vu-robot-image { transition:none !important; }
}