/* ==========================================
   GRID UTILITIES
   Consolidates duplicate grid patterns from portfolio tabs
   Aligned with RESPONSIVE_LAYOUT_RECOMMENDATIONS.md
   Uses design tokens from variables.css
   ========================================== */

/* 2-Column Grid Utility
   Mobile/Tablet (<1200px): 1 column (stacked)
   Desktop (1200-1920px): 2 columns (side-by-side)
   Ultra-wide (>1920px): 2 columns (or 3 with modifier)
*/
.grid-2col {
  display: grid;
  width: 100%;  /* Ensure grid container takes full width */
  gap: var(--space-lg);  /* Was: 1.5rem */
  grid-template-columns: 1fr 1fr;
}

/* Tablet & Mobile: Stack to 1 column */
@media (width <= 1200px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}

/* Mobile: Tighter spacing */
@media (width <= 768px) {
  .grid-2col {
    gap: var(--space-md);  /* Was: 1rem */
  }
}

/* Ultra-wide: Expand to 3 columns (for Performance, Risk, Construction tabs) */
@media (width >= 1920px) {
  .grid-2col.ultra-wide-3col {
    grid-template-columns: repeat(3, 1fr);
    /* Removed max-width: 2400px to match full-width charts stretching behavior */
  }
  
  /* Chart containers should fill their grid cells */
  .grid-2col.ultra-wide-3col .chart-container {
    width: 100%;
    max-width: none;  /* Allow charts to fill grid cells */
  }
}

/* 3-Column Grid (explicit, if needed) */
.grid-3col {
  display: grid;
  gap: var(--space-lg);  /* Was: 1.5rem */
  grid-template-columns: repeat(3, 1fr);
}

@media (width <= 1200px) {
  .grid-3col {
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .grid-3col {
    gap: var(--space-md);  /* Was: 1rem */
  }
}

/* Auto-fit Grid (for Market tablet mode - future use) */
.grid-auto-fit {
  display: grid;
  gap: var(--space-lg);  /* Was: 1.5rem */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

@media (width <= 768px) {
  .grid-auto-fit {
    gap: var(--space-md);  /* Was: 1rem */
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   DISPLAY UTILITIES
   Common display helper classes
   ========================================== */

/* Hide element completely (remove from layout) */
.d-none {
  display: none !important;
}

/* Show element as block */
.d-block {
  display: block !important;
}

/* Show element as inline */
.d-inline {
  display: inline !important;
}

/* Show element as inline-block */
.d-inline-block {
  display: inline-block !important;
}

/* Show element as flex */
.d-flex {
  display: flex !important;
}

/* Show element as inline-flex */
.d-inline-flex {
  display: inline-flex !important;
}

/* Show element as grid */
.d-grid {
  display: grid !important;
}