/* EnergoSet — grafy.
   Legenda je HTML seznam pod grafem, ne <text> uvnitř SVG, aby se
   na úzkých displejích zalomila místo aby se překrývala. */

.chart {
  display: grid;
  gap: var(--es-4);
  min-width: 0;
}

.chart__svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--es-2) var(--es-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--es-font-mono);
  font-size: var(--es-size-label);
  color: var(--es-body);
  line-height: 1.4;
}

.chart__legend li {
  display: flex;
  align-items: center;
  gap: var(--es-2);
}

.chart__key {
  flex: none;
}

/* spojnice — tenká čára stejné síly jako v grafu */
.chart__key--line {
  width: 18px;
  height: 0;
  border-top: 2.4px solid var(--key-color);
}

/* sjednané hodnoty jsou v grafu přerušované */
.chart__key--dash {
  width: 18px;
  height: 0;
  border-top: 2.4px dashed var(--key-color);
}

/* sloupcové série mají čtvereček, ne čáru */
.chart__key--swatch {
  width: 10px;
  height: 10px;
  background: var(--key-color);
}

@media (min-width: 768px) {
  .chart__legend {
    font-size: var(--es-size-caption);
  }
}

/* ============================================================
   Hero graf
   ============================================================ */
.hero-chart {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--es-3);
  justify-items: stretch;
  min-width: 0;
}

/* Všechny tři prvky mají řádek určený výslovně. Kdyby ho měla jen ikona,
   automatické umístění by graf i box odsunulo o řádek níž. */
.hero-chart__svg {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--es-font);
}

/* Úspora stojí vedle částky, ne pod ní — proto nowrap. Na mobilu jsou
   oba údaje drobnější a odsazení menší, aby box zůstal nízký. */
.hero-chart__pay {
  opacity: 0;
  background: var(--es-white);
  border: 1px solid rgba(15, 43, 42, .14);
  border-radius: var(--es-radius-field);
  padding: var(--es-3) var(--es-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--es-3);
  flex-wrap: nowrap;
}

/* popisek se na úzkém boxu zalomí, ale nesmí ho roztáhnout do výšky zbytečně */
.hero-chart__pay .caption {
  font-size: 9.5px;
  letter-spacing: .06em;
  line-height: 1.25;
}

.hero-chart__amount {
  font-size: clamp(21px, 5.6vw, 32px);
  font-weight: 600;
  letter-spacing: var(--es-track-card);
  margin-top: 3px;
  line-height: 1;
  white-space: nowrap;
}

.hero-chart__saving {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: none;
}

.hero-chart__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--es-teal);
  color: var(--es-dark);
  border-radius: var(--es-radius-pill);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.hero-chart__pill svg {
  width: 10px;
  height: 11px;
  flex: none;
}

/* Na mobilu se nezobrazuje vůbec: odsazovalo hlavní tlačítko od boxu
   s měsíční platbou a animace se stejně přehraje při každém načtení.
   Od 1024 px stojí pod boxem jako v originále. */
.hero-chart__replay {
  display: none;
  grid-row: 3;
  grid-column: 1;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: var(--es-tap);
  height: var(--es-tap);
  padding: 0;
  background: transparent;
  border: none;
  color: var(--es-muted);
  cursor: pointer;
  transition: color var(--es-dur-fast) ease, transform .3s ease;
}

.hero-chart__replay:hover {
  color: var(--es-dark);
  transform: rotate(50deg);
}

@media (min-width: 480px) {
  .hero-chart__pay {
    padding: var(--es-4) 18px;
    gap: var(--es-4);
  }

  .hero-chart__pay .caption {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .hero-chart__pill {
    gap: var(--es-2);
    padding: 7px 14px;
    font-size: 12.5px;
  }
}

@media (min-width: 1024px) {
  .hero-chart {
    grid-template-rows: auto auto auto;
    gap: 22px;
  }

  .hero-chart__replay {
    display: inline-flex;
    margin-top: -14px;
  }

  .hero-chart__pay {
    align-items: flex-end;
    padding: 18px var(--es-5);
    gap: var(--es-5);
  }

  .hero-chart__pay .caption {
    font-size: var(--es-size-caption);
    letter-spacing: var(--es-track-caption);
  }

  .hero-chart__amount {
    margin-top: 6px;
  }

  .hero-chart__saving {
    align-items: center;
    gap: 6px;
  }

  .hero-chart__pill {
    padding: 9px 18px;
    font-size: 13.5px;
  }

  .hero-chart__pill svg {
    width: 12px;
    height: 14px;
  }
}

/* Bez pohybu je box s platbou i úsporou vidět rovnou, jinak by
   po vypnutí animací zůstal navždy neviditelný. */
@media (prefers-reduced-motion: reduce) {
  .hero-chart__pay,
  .hero-chart__saving {
    opacity: 1;
  }
}