/* CardForge Layout System - Local implementation to override global grid styles
 * This file contains layout-specific styles for CardForge V2
 * Created to resolve sticky behavior issues with the right column
 * Updated to work alongside global grid.css for footer compatibility
 */

/* Main container layout */
.cardforge-container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 4rem;
  min-height: calc(100vh - 200px);
  width: 100%;
}

/* Left column (form pane) */
.cf-left-column {
  flex: 1 1 66%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Right column (preview pane) */
.right-column {
  flex: 0 0 33%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--aura-bg-color, #1a1a2e);
  border-radius: 12px;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  max-width: 33%;
}

/* Card preview wrapper - non-sticky implementation */
.card-preview-zone {
  position: relative;
  z-index: 100; /* Increased z-index to ensure it's above other elements */
  background: var(--aura-bg-color, #1a1a2e);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid var(--mood-accent-color, #4a4a6a);
  width: 100%;
  box-sizing: border-box;
}

/* Drag divider for resizing panes */
.drag-divider {
  width: 6px;
  background: var(--mood-accent-color, #4a4a6a);
  cursor: col-resize;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.drag-divider:hover {
  background: var(--mood-primary-color, #7a7aaa);
}

/* Responsive behavior */
@media (max-width: 1200px) {
  .cardforge-container {
    flex-direction: column;
  }
  
  .cf-left-column,
  .right-column {
    flex: 1 1 100%;
    max-width: 100%;
  }
  
  .drag-divider {
    display: none;
  }
  
  .card-preview-zone {
    position: relative;
  }
}

/* Tablet and mobile adjustments */
@media (max-width: 768px) {
  .right-column {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  
  .card-preview-zone {
    padding: 0.5rem;
  }
}