/*
 * SMORTLER - Approved Robotic Violet homepage conversion v2
 * This file is loaded after the unchanged shared SI header stylesheets.
 * It affects only index.php with .si-robot-page, not index_SI.php or other pages.
 * Principle: every suspended cable touches the TOP section boundary, and
 * every robot is displayed at its natural aspect ratio with no cropping.
 */

.si-robot-page { min-width: 0; }

/* Move section breathing room to the copy, never above suspended artwork. */
.si-robot-page :is(.si-hero, .si-image-edge-section, .si-future-section) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}
.si-robot-page :is(.si-hero-grid, .si-image-edge-grid, .si-future-grid) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
.si-robot-page :is(.si-hero-copy, .si-image-edge-grid > .si-copy-block, .si-future-copy) {
  min-width: 0;
  padding-top: clamp(34px, 5vw, 78px) !important;
  padding-bottom: clamp(34px, 5vw, 78px) !important;
}

/* Neutralize legacy human-Violet bottom-edge placement and fixed-height crops. */
.si-robot-page :is(.si-hero-art, .si-character-panel, .si-invite-character) {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  inset-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  transform: none !important;
}
.si-robot-page .si-robot-picture {
  position: relative !important;
  display: block !important;
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  z-index: 1;
}
.si-robot-page .si-robot-picture > img.si-robot-art-image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: none !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  clip-path: none !important;
  border-radius: 0 !important;
}

/* Purposeful visual size per pose without changing image proportions. */
.si-robot-page .si-robot-presenter { max-width: 470px; }
.si-robot-page .si-robot-thinking  { max-width: 390px; }
.si-robot-page .si-robot-tablet   { max-width: 465px; }
.si-robot-page .si-robot-inviting { max-width: 335px; }

@media (min-width: 900px) {
  .si-robot-page .si-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
    column-gap: clamp(16px, 3vw, 52px) !important;
  }
  .si-robot-page .si-image-edge-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr) !important;
    column-gap: clamp(16px, 3vw, 52px) !important;
  }
  .si-robot-page .si-split-reverse.si-image-edge-grid {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr) !important;
  }
  .si-robot-page .si-future-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
    column-gap: clamp(16px, 3vw, 52px) !important;
  }
}

/* Tablet: no image clipping, even where the old art had fixed dimensions. */
@media (min-width: 900px) and (max-width: 1279px) {
  .si-robot-page .si-robot-presenter { max-width: 410px; }
  .si-robot-page .si-robot-thinking  { max-width: 340px; }
  .si-robot-page .si-robot-tablet   { max-width: 400px; }
  .si-robot-page .si-robot-inviting { max-width: 310px; }
  .si-robot-page .si-hero-art .si-float-card { display: none !important; }
}

/* Stack BEFORE the copy: the cables are still attached to the section's
   top color boundary, rather than starting below a block of text. */
@media (max-width: 899px) {
  .si-robot-page :is(.si-hero-grid, .si-image-edge-grid, .si-future-grid) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .si-robot-page :is(.si-hero-art, .si-character-panel, .si-invite-character) {
    order: -1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .si-robot-page :is(.si-hero-copy, .si-image-edge-grid > .si-copy-block, .si-future-copy) {
    order: 0 !important;
    padding-top: clamp(20px, 4vw, 38px) !important;
    padding-bottom: clamp(38px, 7vw, 62px) !important;
  }
  .si-robot-page .si-robot-presenter { max-width: 390px; }
  .si-robot-page .si-robot-thinking  { max-width: 345px; }
  .si-robot-page .si-robot-tablet   { max-width: 390px; }
  .si-robot-page .si-robot-inviting { max-width: 335px; }
  /* Decorative cards/orbit graphics are not part of the robot and can overlap hands.
     Hide them in the stacked version; don't crop the robot to make them fit. */
  .si-robot-page .si-hero-art :is(.si-float-card, .si-orbit) {
    display: none !important;
  }
}

@media (max-width: 599px) {
  .si-robot-page .si-robot-presenter { max-width: 340px; }
  .si-robot-page .si-robot-thinking  { max-width: 318px; }
  .si-robot-page .si-robot-tablet   { max-width: 340px; }
  .si-robot-page .si-robot-inviting { max-width: 300px; }
}

@media (max-width: 359px) {
  .si-robot-page .si-robot-presenter { max-width: 300px; }
  .si-robot-page .si-robot-thinking  { max-width: 285px; }
  .si-robot-page .si-robot-tablet   { max-width: 300px; }
  .si-robot-page .si-robot-inviting { max-width: 275px; }
}