/* ListDetailTemplate - SPACING CONTRACT: List + detail with gap */
.list-detail-layout {
  display: grid;
  height: 100%;
  margin: 0;
}

/* List width variants */
.list-detail-layout.list-width-30 {
  grid-template-columns: 30% 1fr;
}

.list-detail-layout.list-width-40 {
  grid-template-columns: 40% 1fr;
}

.list-detail-layout.list-width-50 {
  grid-template-columns: 1fr 1fr;
}

/* Gap variants */
.list-detail-layout.gap-sm {
  gap: var(--space-2);
}

.list-detail-layout.gap-md {
  gap: var(--space-4);
}

.list-detail-layout.gap-lg {
  gap: var(--space-6);
}

/* List pane */
.list-detail-list {
  overflow-y: auto;
  min-height: 0;
}

/* Detail pane */
.list-detail-detail {
  overflow-y: auto;
  min-height: 0;
}

/* Responsive: Stack mode */
@media (max-width: 768px) {
  .list-detail-layout.mobile-stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  
  .list-detail-layout.mobile-stack .list-detail-list {
    max-height: 40vh;
  }
}

/* Responsive: Overlay mode */
@media (max-width: 768px) {
  .list-detail-layout.mobile-overlay {
    position: relative;
  }
  
  .list-detail-layout.mobile-overlay .list-detail-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-workspace);
    z-index: 10;
    transform: translateX(100%);
    transition: transform var(--duration-300) var(--easing-out);
  }
  
  .list-detail-layout.mobile-overlay .list-detail-detail.active {
    transform: translateX(0);
  }
}