/* =============================================
   layout.css (Grid & structural layout utilities)
   ============================================= */

/* Core grid wrappers */
.cards,
.kpis,
.grid-2,
.grid-3,
.portfolio-summary {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
}
.cards {
  margin: 1.5rem 0;
}
.cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.portfolio-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Economics specific grids */
.eco-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* Investment content grid */
.investment-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

/* Strategy grid */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Metrics container */
.metrics-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

/* Investment metrics */
.investment-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: stretch;
}

/* Responsive collapses */
@media (max-width: 900px) {
  .cards-4,
  .kpis,
  .portfolio-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards-3,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-2,
  .eco-cols,
  .investment-content,
  .strategy-grid,
  .metrics-container {
    grid-template-columns: 1fr;
  }
  .investment-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cards-4,
  .kpis,
  .portfolio-summary,
  .investment-metrics {
    grid-template-columns: 1fr;
  }
  .cards-3,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Hero split */
.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
}

/* Equal height flex children inside grid - reinforcement */
.card,
.kpi,
.portfolio-stat,
.site-card,
.strategy-item,
.metric-group,
.metric,
.box-common,
.note,
.chart-wrap,
.sim-panel,
.scenario-chart,
.financial-metrics,
.investment-input,
.accordion .item,
.inputs {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ensure grid children fill available space */
.grid-2 > *,
.grid-3 > *,
.cards > *,
.kpis > *,
.portfolio-summary > *,
.eco-cols > *,
.investment-content > *,
.strategy-grid > *,
.metrics-container > *,
.investment-metrics > *,
.kpi-grid > * {
  height: 100%;
  min-height: 0;
}

/* Finance & Economics layout fixes: disable equal-height forcing in these sections */
#finance .grid-2 > *,
#economics .grid-2 > * {
  height: auto !important;
  min-height: 0;
}
#economics .eco-cols > *,
#economics .eco-cols .col,
#finance .metrics-container > * {
  height: auto !important;
}

/* Ensure investment block columns size to content */
#finance .investment-content > * {
  height: auto !important;
}