/* ---------------------HORIZONTAL BAR GRAPH ------------------- */
/* container */
.infographic-section { flex: 1 1 0%; width: 100%; min-width: 0px; margin-top: 72px; margin-left: 40px; margin-right: 40px; } /* use this instead of an image container to break out of flex collapsing + border removal */
.graph-container {display: flex; flex-direction: column; min-width: 0px; position: relative; padding: 10px; box-sizing: border-box;
	--label-col-width: 120px;
	--axis-col-width: 6px; 
}
/* basic layout; callout box can be modified to be a title */
.title-callout { background-color: #D9ECFF; border-radius: 12px; padding: 16px; width: fit-content; margin-left: calc(var(--label-col-width) + var(--axis-col-width)); margin-bottom: 32px; position: relative; display: block; align-self: flex-start; }
.title-callout h2 { margin: 0; font-size: 3.2rem; font-weight: 900; color: var(--fau-blue); letter-spacing: 0.5px;}
.title-callout h2 span { color: var(--fau-red); }
.chart-area { min-width: 0px; display: grid; grid-template-columns: var(--label-col-width) var(--axis-col-width) minmax(0, 1fr); align-items: stretch; position: relative; }
.axis-line { background-color: var(--fau-blue); }

/* labels */
.labels-column { display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; padding-right: 15px; text-align: right; }
.label-top { display: flex; justify-content: flex-end; align-items: center; height: 80px; margin-top: 8px; font-weight: 800; font-size: 1.6rem; line-height: 1.3; color: var(--fau-blue); text-transform: uppercase; }
.label-bottom {
	margin-top: 24px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
	margin-bottom: 8px;
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--fau-blue);
	text-transform: uppercase;
}
.label-img-container { max-width: 100px; max-height: 80px; object-fit: contain; }

/* bars */
.bars-column { display: flex; flex-direction: column; padding: 16px 40px 16px 0; position: relative; width: 100%; min-width: 0px; box-sizing: border-box;  }
.bar-wrapper { display: flex; align-items: center; position: relative; height: 80px; width: 100%; justify-content: flex-start; }
.bar-wrapper ~ .bar-wrapper { margin-top: 20px; }
.bar {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 4px;
    justify-content: center;
    box-sizing: border-box;
	max-width: 100%;
}
.bar p {
  margin: 0;
  line-height: 1;
  font-weight: 700;
  font-size: 1.3rem;
  color: #ffffff;
  font-style: italic;
  white-space: normal;
  overflow-wrap: break-word;
}
.bar-top { background-color: var(--fau-blue); z-index: 2; position: relative; }
.bar-bottom { background-color: var(--gray); }

/* annotations */
.bar-icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 75px; height: 50px; }
.curved-arrow { position: absolute; left: 8%; top: 60px; width: 72px; height: 104px; z-index: 10; pointer-events: none; }
.alignment-line { position: absolute; top: 0; right: 0; height: 100px; border-left: 4px dashed var(--fau-blue); z-index: 1; }
/*  explicit labels on top the bars for mobile layouts rendering as a vertical stack */
.bar-label { display: none; }

/* laptop handling */
@media (min-width: 972px) and (max-width: 1454px) {
	.bar p { font-size: 1.25rem; z-index: 3}
}
/* mobile and tablet handling (vertical stack) */

@media (min-width: 601px) and (max-width: 972px) {
	.infographic-section { margin: auto; }
    .title-callout { margin: 16px 0px 16px 126px;}
	.bar p { font-size: 1.15rem; padding: 0 10px; z-index: 3;}
}
@media (max-width: 600px) {
	.infographic-section { margin: auto; }
	.bar-wrapper ~ .bar-wrapper { margin-top: auto; }
	.bars-column {padding: 16px 8px 16px 0; }
	.labels-column { align-items: center; text-align: center; padding-right: 16px; } 
	.label-bottom, .label-top { font-size: 1.2rem; }
	.label-img-container { max-width: 80px; max-height: 60px; object-fit: contain; }
	.curved-arrow, .bar-icon { display: none}
    .title-callout { margin: 16px 0px 16px 0px; align-self: center}
    .title-callout h2 { font-size: 2rem; }
    .bar p { font-size: 1rem; padding: 0 4px;}
	.graph-container { padding: 5px; --label-col-width: 80px; --axis-col-width: 4px; }}