/* ==========================================================================
   Portfolio Growth — Mobile-first (Horizontal bars)
   ========================================================================== */

.jda-chart--portfolio {
  display:grid;
  gap:1rem;
  grid-template-rows:auto;
  grid-template-columns:1fr;
  grid-template-areas:
    "header"
    "legend"
    "body"
    "axis-title";
}

.jda-chart--portfolio .jda-chart__x-axis-title {
  grid-area: axis-title;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
}

.jda-chart--portfolio .jda-chart__title {
  grid-area: header;
}

.jda-chart--portfolio .jda-chart__legend {
  grid-area: legend;
}

.jda-chart--portfolio .jda-chart__body {
  grid-area: body;
}

.jda-chart--portfolio .jda-chart__graph {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5em;
	padding-top: 0.5em;
}

.jda-chart--portfolio .jda-chart__group {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
}

.jda-chart--portfolio .jda-chart__bars {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	width: 100%;
}

.jda-chart--portfolio .jda-chart__bar-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

.jda-chart--portfolio .jda-chart__bar {
	width: 0;
	height: 32px;
	border-radius: 0 999px 999px 0;
	transition: width var(--animation--bar-duration) var(--ease--out-quad);
}

.jda-chart--portfolio .jda-chart__bar-label {
  inset: 50% auto auto 0.5rem;
	transform: translateY(-50%);
}

/* Small bar: label to the right of bar */
.jda-chart--portfolio .jda-chart__bar--small .jda-chart__bar-label {
	right: auto;
	left: calc(100% + 8px);
}

.jda-chart--portfolio.jda-chart--animated .jda-chart__bar {
	width: calc(var(--bar-height) * 1%);
}

.jda-chart--portfolio .jda-chart__bar--investments {
	background-color: var(--jda-teal);
}

.jda-chart--portfolio .jda-chart__bar--loans {
	background-color: var(--jda-green);
}

/* --------------------------------------------------------------------------
   Portfolio Growth — Desktop (Vertical bars, grouped)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .jda-chart--portfolio {
    grid-template-columns:40% 60%;
    grid-template-areas:
      "header legend"
      ". body";
  }

	.jda-chart--portfolio .jda-chart__x-labels {
    position:relative;
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 2em;
		margin-top: 8px;
	}

	/* On desktop the axis title lives inside x-labels, not its own grid area */
	.jda-chart--portfolio .jda-chart__x-axis-title {
		grid-area: unset;
    position:absolute;
    inset: auto 100% auto auto;
    font-size:1rem;
		text-align: left;
	}

  .jda-chart--portfolio .jda-chart__x-label {
		text-align: center;
		/* Match the width of a bar group (2 × 52px bar + 6px gap) */
		width: 110px;
	}

	/* Hide mobile pseudo-labels, show x-labels container */
	.jda-chart--portfolio .jda-chart__group::before {
		content: none;
	}

	/* Gridlines switch to horizontal */
	.jda-chart--portfolio .jda-chart__gridlines {
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: calc(100% - 1rem);
    inset: auto auto 0 auto;
	}

	.jda-chart--portfolio .jda-chart__gridline {
		width: 100%;
		height: 1px;
	}

	.jda-chart--portfolio .jda-chart__graph {
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		gap: 2em;
	}

	.jda-chart--portfolio .jda-chart__group {
		align-items: center;
	}

	.jda-chart--portfolio .jda-chart__bars {
		flex-direction: row;
		align-items: flex-end;
		gap: 6px;
		height: 400px;
		width: auto;
	}

	.jda-chart--portfolio .jda-chart__bar-wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		width: auto;
	}

	.jda-chart--portfolio .jda-chart__bar {
		width: 52px;
		height: 0;
		border-radius: 999px 999px 0 0;
		transition: height var(--animation--bar-duration) var(--ease--out-quad);
	}

	.jda-chart--portfolio .jda-chart__bar-label {
    inset: auto auto 0 50%;
    text-align: center;
    transform-origin: 0 center;
    transform: rotate(-90deg);
	}

	/* Small bar on desktop: label above bar (same position, just color change) */
	.jda-chart--portfolio .jda-chart__bar--small .jda-chart__bar-label {
		left: 50%;
		right: auto;
	}

	.jda-chart--portfolio.jda-chart--animated .jda-chart__bar {
		width: 52px;
		height: calc(var(--bar-height) * 1%);
	}
}