/* ============================================
   SPATIAL COMPOSITION — Phase 6
   Macro: CSS Grid  |  Micro: Flexbox
   No-scroll viewport-locked layout
   ============================================ */

/* === ZOOM WRAPPER — provides stable dimensions for scaling === */
#zoom-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* === MACRO GRID (3-column, single-row) === */
.portfolio-grid {
  display: grid;
  grid-template-columns:
    clamp(240px, 20vw, 380px)   /* Left sidebar  */
    1fr                          /* Main content   */
    clamp(190px, 15vw, 280px);  /* Right sidebar  */
  grid-template-rows: 1fr;
  gap: var(--sp-lg);
  padding: var(--sp-lg);
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* === SIDEBARS (Flexbox vertical) === */
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-lg);
  min-height: 0;
  overflow: hidden;
}

/* Left: name (shrink) top, info (grow) bottom */
.sidebar--left .zone--name { flex: 0 0 auto; }
.sidebar--left .zone--info { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }

/* Right: nav (grow) top, social (shrink) bottom */
.sidebar--right .zone--nav    { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.sidebar--right .zone--social { flex: 0 0 auto; }

/* === MAIN CONTENT ZONE === */
.zone--main {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.zone--main #three-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}