/******************** QUALITY GRAPH ********************/
.quality-bar-chart {
  --chart-height: clamp(280px, 40vw, 320px);
  --label-height: clamp(72px, 10vw, 110px);
  --group-gap: clamp(6px, 1.25vw, 18px);
  --bar-width: clamp(10px, 1.6vw, 22px);
  --label-size: clamp(0.6rem, 0.95vw, 1rem);
  --axis-width: clamp(34px, 4vw, 52px);
  width: 100%;
  max-width: 100%;
  color: inherit;
  box-sizing: border-box;
}
.quality-bar-chart,
.quality-bar-chart * {
  box-sizing: border-box;
}
.quality-bar-chart .chart-grid {
  display: grid;
  grid-template-columns: var(--axis-width) minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.quality-bar-chart .y-axis {
  position: relative;
  height: var(--chart-height);
}
.quality-bar-chart .y-label {
  position: absolute;
  left: 0;
  bottom: calc(var(--tick) * 1%);
  transform: translateY(50%);
  font-size: clamp(0.75rem, 1vw, 1rem);
  line-height: 1;
  white-space: nowrap;
}
.quality-bar-chart .chart-area {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.quality-bar-chart .plot-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--chart-height);
  pointer-events: none;
  z-index: 1;
}
.quality-bar-chart .grid-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--tick) * 1%);
  height: 1px;
  background: var(--wp--preset--color--border);
}
.quality-bar-chart .bars-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--group-gap);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.quality-bar-chart .bar-group {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--chart-height) var(--label-height);
  justify-items: center;
}
.quality-bar-chart .plot-area {
  position: relative;
  width: 100%;
  height: var(--chart-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  z-index: 2;
}
.quality-bar-chart .bar {
  width: var(--bar-width);
  max-width: 33.333%;
  height: calc(var(--value) * 1%);
  background: var(--wp--preset--color--border);
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
}
.quality-bar-chart .bar-2022 {
  background: color-mix(in srgb, var(--wp--preset--color--yellow) 75%, white);
}
.quality-bar-chart .bar-2023 {
  background: var(--wp--preset--color--primary);
}
.quality-bar-chart .bar-2024 {
  background: var(--wp--preset--color--tertiary);
}
.quality-bar-chart .marker {
  position: absolute;
  left: 50%;
  z-index: 3;
}
.quality-bar-chart .marker-blue {
  bottom: calc(var(--value) * 1% - 5px);
  width: clamp(16px, 2.2vw, 28px);
  height: clamp(6px, 0.8vw, 10px);
  background: var(--wp--preset--color--blue);
  transform: translateX(-50%);
}
.quality-bar-chart .marker-green {
  bottom: calc(var(--value) * 1% - 6px);
  width: clamp(10px, 1vw, 16px);
  height: clamp(10px, 1vw, 16px);
  background: var(--wp--preset--color--green);
  transform: translateX(-50%) rotate(45deg);
}
.quality-bar-chart .label {
  height: var(--label-height);
  padding-top: 0.9rem;
  font-size: var(--label-size);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 14ch;
}
.quality-bar-chart .quality-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  margin-top: 1.5rem;
  font-size: clamp(0.75rem, 1vw, 1rem);
}
.quality-bar-chart .legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.quality-bar-chart .legend-swatch {
  width: 14px;
  height: 14px;
  display: inline-block;
}
.quality-bar-chart .legend-line {
  width: 18px;
  height: 4px;
  background: var(--wp--preset--color--blue);
  display: inline-block;
}
.quality-bar-chart .legend-diamond {
  width: 10px;
  height: 10px;
  background: var(--wp--preset--color--green);
  transform: rotate(45deg);
  display: inline-block;
}
@media (max-width: 767px) {
  .quality-bar-chart {
    --chart-height: 240px;
    --label-height: 88px;
    --group-gap: 6px;
    --bar-width: clamp(8px, 1.8vw, 14px);
    --label-size: 0.58rem;
    --axis-width: 32px;
  }
  .quality-bar-chart .marker-blue {
    width: 14px;
    height: 6px;
  }
  .quality-bar-chart .marker-green {
    width: 9px;
    height: 9px;
  }
  .quality-bar-chart .label {
    max-width: 11ch;
  }
}
@media (max-width: 480px) {
  .quality-bar-chart {
    --chart-height: 220px;
    --label-height: 96px;
    --group-gap: 4px;
    --bar-width: clamp(6px, 1.5vw, 10px);
    --label-size: 0.5rem;
    --axis-width: 28px;
  }
  .quality-bar-chart .label {
    max-width: 10ch;
  }
}
/******************** LEGEND ********************/
.quality-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  margin-top: 0!important;
  font-size: clamp(0.75rem, 1vw, 1rem);
}
.quality-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
/* BAR SWATCHES */
.legend-swatch {
  width: 14px;
  height: 14px;
  display: inline-block;
}
.swatch-2022 {
  background: color-mix(in srgb, var(--wp--preset--color--yellow) 25%, white);
}
.swatch-2023 {
  background: var(--wp--preset--color--primary);
}
.swatch-2024 {
  background: var(--wp--preset--color--tertiary);
}
/* BLUE LINE */
.legend-line {
  width: 18px;
  height: 4px;
  background: var(--wp--preset--color--blue);
  display: inline-block;
}
/* GREEN DIAMOND */
.legend-diamond {
  width: 10px;
  height: 10px;
  background: var(--wp--preset--color--green);
  transform: rotate(45deg);
  display: inline-block;
}
/******************** BAR ANIMATION ********************/
.subblock-animation.quality-bar-chart .bar {
  transform: scaleY(0);
  transform-origin: bottom center;
  animation: none;
  will-change: transform;
}

.subblock-animation.is-visible.quality-bar-chart .bar {
  animation: qualityBarGrow 1000ms cubic-bezier(.22,1,.36,1) forwards;
}

/* stagger by group */
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(1) .bar { animation-delay: 0ms; }
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(2) .bar { animation-delay: 80ms; }
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(3) .bar { animation-delay: 160ms; }
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(4) .bar { animation-delay: 240ms; }
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(5) .bar { animation-delay: 320ms; }
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(6) .bar { animation-delay: 400ms; }
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(7) .bar { animation-delay: 480ms; }
.subblock-animation.is-visible.quality-bar-chart .bar-group:nth-child(8) .bar { animation-delay: 560ms; }

@keyframes qualityBarGrow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .subblock-animation.quality-bar-chart .bar,
  .subblock-animation.is-visible.quality-bar-chart .bar {
    animation: none;
    transform: none;
  }
}