/******************** SATISFACTION GRAPH ********************/
.satisfaction-bar-chart {
  --chart-height: clamp(280px, 42vw, 520px);
  --bar-gap: clamp(5px, 3vw, 44px);
  --label-size: clamp(0.85rem, 1.3vw, 1.25rem);
  --value-size: clamp(1rem, 1.5vw, 1.75rem);
  --primary-bar-width: 1.15;
  width: 100%;
}

.satisfaction-bar-chart .chart-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bar-gap);
  width: 100%;
}

.satisfaction-bar-chart .bar-group {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--chart-height) auto;
  row-gap: 0;
  justify-items: center;
  align-items: end;
}

.satisfaction-bar-chart .bar-wrap {
  position: relative;
  width: 100%;
  height: var(--chart-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.satisfaction-bar-chart .value {
  position: absolute;
  bottom: calc(var(--value) * 1%);
  left: 50%;
  transform: translate(-50%, 0);
  font-size: var(--value-size);
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 1rem;
  z-index: 2;
}

.satisfaction-bar-chart .bar {
  align-self: end;
  width: 100%;
  max-width: 150px;
  height: calc(var(--value) * 1%);
  background: var(--wp--preset--color--border);
  transition: background-color 0.3s ease;
}

.satisfaction-bar-chart .bar--lhcc {
  width: calc(100% * var(--primary-bar-width));
  max-width: 172px;
  background: var(--wp--preset--color--primary);
}

.satisfaction-bar-chart:hover .bar--lhcc {
  background: var(--wp--preset--color--secondary);
}

.satisfaction-bar-chart .label {
  margin-top: 1rem;
  font-size: var(--label-size);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  max-width: 12ch;
}

.satisfaction-bar-chart .bar-group--lhcc .label {
  max-width: 16ch;
}

@media (max-width: 575px) {
  .satisfaction-bar-chart {
    --chart-height: 240px;
    --label-size: 0.6rem;
    --value-size: 0.95rem;
  }
}

@media (max-width: 400px) {
  .satisfaction-bar-chart {
    --chart-height: 240px;
    --label-size: 0.45rem;
    --value-size: 0.85rem;
  }
}