/* SikaDamp price comparison chart: real HTML/CSS replacement for priceGraph.jpg.
   Bar heights come from each bar's --v value (price) against an $8.00 scale. */

.pc-figure {
  --pc-max: 8;               /* top of the price axis, in dollars */
  --pc-height: 260px;        /* height of the plotting area */
  margin: 0 0 1.25rem;
  width: 100%;
  max-width: 520px;
  color: #1a1a1a;
}
@media (min-width: 768px) {
  .pc-figure {
    float: right;
    width: 48%;
    margin: 0 0 1rem 1.5rem;
  }
}

.pc-title {
  text-align: center;
  line-height: 1.3;
  margin-bottom: 1.1rem;
}
.pc-title strong { display: block; font-size: 1.2rem; }
.pc-title span   { font-style: italic; font-size: .95rem; color: #444; }

.pc-chart {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  margin-top: .6rem;
  margin-bottom: 2.9rem;     /* room for the product labels under the axis */
}

/* Y axis labels */
.pc-axis { position: relative; height: var(--pc-height); }
.pc-axis span {
  position: absolute;
  right: .4rem;
  bottom: calc(var(--i) / var(--pc-max) * 100%);
  transform: translateY(50%);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: #333;
}

/* Plot area with horizontal gridlines every $1 */
.pc-plot {
  list-style: none;
  margin: 0;
  padding: 0 .5rem;
  height: var(--pc-height);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  border-left: 1px solid #333;
  border-bottom: 2px solid #333;
  background-image: repeating-linear-gradient(
    to top,
    #e3e3e3 0 1px,
    transparent 1px calc(100% / var(--pc-max))
  );
}

.pc-col {
  position: relative;
  flex: 0 0 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.pc-val {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .25rem;
}

.pc-bar {
  width: 100%;
  height: calc(var(--v) / var(--pc-max) * 100%);
  background: var(--c);
  border-radius: 2px 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.15rem;
  white-space: nowrap;
}

/* Product label under the axis (first in the HTML so screen readers hear it first) */
.pc-label {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100%;
  margin-top: .5rem;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 700;
  font-size: clamp(.68rem, 2.6vw, .8rem);
  line-height: 1.2;
  color: var(--c);
}

/* "Price Drop!" badge sits just above the price label of its column */
.pc-drop {
  position: absolute;
  left: 50%;
  bottom: calc(var(--v) / var(--pc-max) * 100% + 2rem);
  transform: translateX(-50%) rotate(-5deg);
  white-space: nowrap;
  font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  font-weight: 700;
  color: #d62828;
}

.pc-note {
  margin: 0;
  padding: .4rem .6rem;
  border: 1px solid #bbb;
  border-radius: 6px;
  text-align: center;
  font-style: italic;
  font-size: .8rem;
  color: #333;
}

.pc-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}