/*
  Recursive hero full-frame sizing.
  Scope: #kx-recursive-hero-visual and its immediate visual container only.
  No navbar, translation, database, route, or animation logic changes.
*/

/* Make the animated visual fill the right hero card instead of floating as a smaller inner card. */
#kx-recursive-hero-visual {
  width: 100% !important;
  height: 100% !important;
  min-height: 620px !important;
  margin: 0 !important;
  border-radius: inherit !important;
  display: block !important;
}

/* Ensure the SVG uses the whole visual surface. */
#kx-recursive-hero-visual .kx-rd-svg {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Reduce internal padding effect by pushing controls and badge to the true frame corners. */
#kx-recursive-hero-visual .kx-rd-step-badge {
  top: 24px !important;
  left: 28px !important;
}

#kx-recursive-hero-visual .kx-rd-controls {
  top: 22px !important;
  right: 24px !important;
}

/* Move the caption down and stretch it so it feels part of the full frame, not a floating overlay. */
#kx-recursive-hero-visual .kx-rd-caption {
  left: 34px !important;
  right: 34px !important;
  bottom: 34px !important;
  max-width: none !important;
}

/* If the parent card has padding, neutralize it only when it directly contains this visual. */
.kx-doctrine-page *:has(> #kx-recursive-hero-visual) {
  padding: 0 !important;
}

/* Remove unnecessary inner visual shrinkage caused by inherited hero-card styling. */
.kx-doctrine-page *:has(> #kx-recursive-hero-visual) > #kx-recursive-hero-visual {
  box-sizing: border-box !important;
}

/* Give the diagram more visible area inside the same SVG by scaling the SVG content visually. */
#kx-recursive-hero-visual .kx-rd-svg {
  transform: scale(1.08) translateY(-8px) !important;
  transform-origin: center center !important;
}

/* Keep caption readable after SVG expansion. */
#kx-recursive-hero-visual .kx-rd-caption {
  z-index: 20 !important;
}

/* Desktop large screens: occupy the current right-side frame aggressively. */
@media (min-width: 1100px) {
  #kx-recursive-hero-visual {
    min-height: 650px !important;
  }
}

/* Medium screens: avoid overflow. */
@media (max-width: 1099px) {
  #kx-recursive-hero-visual {
    min-height: 560px !important;
  }

  #kx-recursive-hero-visual .kx-rd-svg {
    transform: scale(1.02) translateY(0) !important;
  }
}

/* Mobile: keep the frame usable. */
@media (max-width: 700px) {
  #kx-recursive-hero-visual {
    min-height: 520px !important;
  }

  #kx-recursive-hero-visual .kx-rd-caption {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
  }

  #kx-recursive-hero-visual .kx-rd-controls {
    top: auto !important;
    bottom: 124px !important;
    right: 18px !important;
  }
}