/* ============================================================================
   RESPONSIVE OVERRIDES
   Mobile-first adjustments that need to override component defaults.
   ============================================================================ */

/* ---------- Hero 3D canvas sizing ---------- */
/*
  KEY DESIGN CHOICE:
  The 3D orb takes the full hero half on desktop (~560px tall),
  but on mobile it shrinks to a compact ~220px-tall element placed
  ABOVE the headline so it doesn't dominate the screen.
*/
#hero-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 220px;            /* mobile default — smaller, above text */
  max-width: 280px;         /* keeps the orb compact, not edge-to-edge */
  margin: 0 auto 1rem auto; /* center horizontally on mobile */
}

@media (min-width: 640px) {
  #hero-canvas-wrapper {
    height: 280px;
    max-width: 360px;
  }
}

@media (min-width: 1024px) {
  /* Desktop: full half of the hero, centered in its column */
  #hero-canvas-wrapper {
    height: 560px;
    max-width: none;
    margin: 0;
  }
}

/* ---------- Hero layout: orb position differs by viewport ---------- */
/*
  Mobile/tablet: orb shows ABOVE the text (smaller, decorative).
  Desktop:       orb shows on the right (large, dominant).
*/
.hero-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* On mobile, the 3D wrapper renders FIRST (visually above the text).
   On desktop, we put it on the RIGHT via grid order. */
.hero-text  { order: 2; }
.hero-3d    { order: 1; }

@media (min-width: 1024px) {
  .hero-text { order: 1; }
  .hero-3d   { order: 2; }
}

/* ---------- Hero headline tightening on small screens ---------- */
@media (max-width: 639px) {
  .hero-text h1 {
    font-size: 2.25rem;     /* 36px — keeps the 3D + headline visible together */
    line-height: 1.1;
  }
}

/* ---------- Section spacing — slightly tighter on mobile ---------- */
@media (max-width: 639px) {
  section { padding-top: 4rem; padding-bottom: 4rem; }
}

/* ---------- Flow divider shorter on mobile ---------- */
@media (max-width: 639px) {
  .flow-divider { height: 100px; }
}