/* VIOSCANS robotic Violet - Character Hunter only. v1.
   Loaded AFTER the unchanged site and Character Hunter styles.
   The leading row of every illustration contains Violet's upper cables.
   No image masking, fixed-height crop, object-fit:cover, or translated image offsets. */

body.vh2-site .vh2-main :is(.vh2-hero, .vh2-observe, .vh2-library),
body.vh2-site .vh2-main :is(.vh2-hero-art, .vh2-observe-art, .vh2-library-art) {
  min-width: 0;
  box-sizing: border-box;
}

/* The artwork panel begins at the exact top of its section's content box. */
body.vh2-site .vh2-main .vh2-hero,
body.vh2-site .vh2-main .vh2-observe,
body.vh2-site .vh2-main .vh2-library {
  display: grid;
  align-items: stretch;
  gap: clamp(14px, 3.5vw, 54px);
  overflow: visible;
  padding-top: 0;
}
body.vh2-site .vh2-main .vh2-hero {
  grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
}
body.vh2-site .vh2-main .vh2-observe {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
body.vh2-site .vh2-main .vh2-library {
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
}

body.vh2-site .vh2-main :is(.vh2-hero-copy, .vh2-observe-copy, .vh2-library-copy) {
  min-width: 0;
  position: relative;
  z-index: 2;
}
body.vh2-site .vh2-main .vh2-hero-copy {
  padding-top: clamp(26px, 5vw, 76px);
  padding-bottom: clamp(30px, 4vw, 58px);
}
body.vh2-site .vh2-main .vh2-observe-copy,
body.vh2-site .vh2-main .vh2-library-copy {
  padding-top: clamp(16px, 3.3vw, 47px);
  padding-bottom: clamp(24px, 4vw, 56px);
}

body.vh2-site .vh2-main :is(.vh2-hero-art, .vh2-observe-art, .vh2-library-art) {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

body.vh2-site .vh2-main :is(.vh2-hero-art, .vh2-observe-art, .vh2-library-art) > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto;
  align-self: center !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: top center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  clip-path: none !important;
  mask-image: none !important;
  border: 0 !important;
  z-index: 1;
}
body.vh2-site .vh2-main .vh2-hero-art > img { width: min(100%, 510px) !important; }
body.vh2-site .vh2-main .vh2-observe-art > img { width: min(100%, 590px) !important; }
body.vh2-site .vh2-main .vh2-library-art > img { width: min(100%, 355px) !important; }

/* Keep the illustrative annotation readable without covering robot hands or cables. */
body.vh2-site .vh2-main .vh2-hero-art .vh2-art-note {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: min(100%, 330px) !important;
  text-align: center;
  margin: 10px auto 17px !important;
  transform: none !important;
  pointer-events: none;
  z-index: 2;
}
body.vh2-site .vh2-main .vh2-hero-art .vh2-hero-aura {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1100px) {
  body.vh2-site .vh2-main .vh2-hero-art > img { width: min(100%, 430px) !important; }
  body.vh2-site .vh2-main .vh2-observe-art > img { width: min(100%, 480px) !important; }
  body.vh2-site .vh2-main .vh2-library-art > img { width: min(100%, 310px) !important; }
}

/* Earlier switch to stacked layout avoids art being squeezed or clipped in tablet widths. */
@media (max-width: 880px) {
  body.vh2-site .vh2-main .vh2-hero,
  body.vh2-site .vh2-main .vh2-observe,
  body.vh2-site .vh2-main .vh2-library {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  body.vh2-site .vh2-main .vh2-hero-art,
  body.vh2-site .vh2-main .vh2-observe-art,
  body.vh2-site .vh2-main .vh2-library-art {
    order: 0 !important;
    margin-inline: auto !important;
    width: min(100%, 600px) !important;
  }
  body.vh2-site .vh2-main .vh2-hero-copy,
  body.vh2-site .vh2-main .vh2-observe-copy,
  body.vh2-site .vh2-main .vh2-library-copy {
    order: 1 !important;
    width: 100% !important;
    padding-top: 22px !important;
  }
  body.vh2-site .vh2-main .vh2-hero-art > img { width: min(100%, 370px) !important; }
  body.vh2-site .vh2-main .vh2-observe-art > img { width: min(100%, 540px) !important; }
  body.vh2-site .vh2-main .vh2-library-art > img { width: min(100%, 315px) !important; }
}

@media (max-width: 540px) {
  body.vh2-site .vh2-main .vh2-hero,
  body.vh2-site .vh2-main .vh2-observe,
  body.vh2-site .vh2-main .vh2-library {
    padding-top: 0 !important;
  }
  body.vh2-site .vh2-main .vh2-hero-art > img { width: min(100%, 296px) !important; }
  body.vh2-site .vh2-main .vh2-observe-art > img { width: min(100%, 340px) !important; }
  body.vh2-site .vh2-main .vh2-library-art > img { width: min(100%, 255px) !important; }
  body.vh2-site .vh2-main .vh2-hero-art .vh2-art-note {
    margin: 6px auto 12px !important;
    font-size: 12px;
  }
  body.vh2-site .vh2-main :is(.vh2-hero-copy,.vh2-observe-copy,.vh2-library-copy) {
    padding-bottom: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vh2-site .vh2-main :is(.vh2-hero-art,.vh2-observe-art,.vh2-library-art) > img {
    transition: none !important;
    animation: none !important;
  }
}