/* ===== LAYOUT SYSTEM ===== */
@layer components {
  .main-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .main-content {
    width: 100%;
    max-width: min(100% - 2rem, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    align-items: center;
    flex: 1;
    container-type: inline-size;
    position: relative;
  }

  /* Section positioning to prevent overlap */
  .upload-section,
  .preview-container,
  .result-wrapper {
    width: 100%;
    max-width: min(100%, 800px);
    position: relative;
    transition: all var(--duration-300) var(--ease-out);
    box-sizing: border-box;
    overflow: visible;
  }

  /* Ensure result wrapper adapts to content size */
  .result-wrapper {
    min-height: auto;
    height: auto;
  }

  .result-wrapper * {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Hide sections properly */
  .upload-section.hidden,
  .preview-container.hidden,
  .result-wrapper.hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Show sections properly */
  .upload-section.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
    height: auto;
  }

  .preview-container.show {
    display: block !important;
    opacity: 1;
    visibility: visible;
    height: auto;
  }

  /* Responsive layout adjustments - keep vertical flow */
  @media (min-width: 1024px) {
    .main-content {
      max-width: 1200px;
      gap: var(--space-16);
      /* Keep flexbox layout - no grid changes */
    }
  }

  @media (min-width: 1440px) {
    .main-content {
      gap: var(--space-20);
    }
  }

  @media (min-width: 1700px) {
    .main-content {
      max-width: var(--max-app-width);
    }

  }
  
  /* Only enable grid when explicitly needed */
  .main-content.grid-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .main-content.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    .upload-section {
      width: 100%;
      justify-self: center;
    }

    /* Sticky behavior ONLY for main result wrapper on desktop */
    .result-wrapper {
      position: static;
      top: var(--space-6);
      max-height: none;
      overflow-y: visible;
      overflow-x: visible;
      width: 100%;
      height: auto;
      min-height: auto;
    }
  }

  /* Container query for responsive sticky behavior */
  @container (min-width: 70rem) {
    .result-wrapper {
      position: static;
      top: var(--space-6);
      max-height: none;
      overflow-y: visible;
      overflow-x: visible;
      height: auto;
      min-height: auto;
    }

    /* Card doesn't stick if there's a preview container shown */
    .main-content:has(.preview-container.show) .result-wrapper {
      position: static;
      max-height: none;
      overflow: visible;
      height: auto;
      min-height: auto;
    }

    .preview-container {
      width: 100%;
    }
  }

  /* Section constraints */
  .stats-bar,
  .upload-section,
  .preview-container,
  .result-wrapper {
    width: 100%;
    max-width: inherit;
    margin-inline: auto;
  }

  /* ===== RESULT WRAPPER (main container) ===== */
  .result-wrapper {
    margin: var(--space-12) auto;
    background: var(--color-surface-glass);
    border-radius: 16px;
    overflow: visible;
    position: static;
  }

  /* Content Areas */
  .content-area {
    padding: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-4);
  }

  /* Section Dividers */
  .section-divider {
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-border),
      transparent
    );
    margin: var(--space-8) 0;
  }

  /* Flex Layout Utilities */
  .flex-container {
    display: flex;
    gap: var(--space-4);
  }

  .flex-container.row {
    flex-direction: row;
  }

  .flex-container.column {
    flex-direction: column;
  }

  .flex-container.wrap {
    flex-wrap: wrap;
  }

  .flex-container.center {
    align-items: center;
    justify-content: center;
  }

  .flex-container.between {
    justify-content: space-between;
  }

  .flex-container.around {
    justify-content: space-around;
  }

  /* Grid Layout Utilities */
  .grid-container {
    display: grid;
    gap: var(--space-4);
  }

  .grid-container.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-container.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-container.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Responsive Grid */
  @media (max-width: 768px) {
    .grid-container.cols-2,
    .grid-container.cols-3,
    .grid-container.cols-4 {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    .grid-container.cols-3,
    .grid-container.cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Padding Utilities for Sections */
  .section-padding {
    padding: var(--space-8);
  }

  .section-padding-sm {
    padding: var(--space-4);
  }

  .section-padding-lg {
    padding: var(--space-12);
  }

  /* Responsive Padding */
  @media (max-width: 768px) {
    .section-padding {
      padding: var(--space-6);
    }

    .section-padding-lg {
      padding: var(--space-8);
    }
  }
}