/* =====================================================================
   bf-chart — karta „bez / z Brandfeld"
   =====================================================================
   Zasady:
   • SVG zawiera wyłącznie geometrię. Cała typografia (osie, adnotacje,
     etykiety punktów) to HTML w warstwie nad SVG.
   • Wspólny układ współrzędnych: viewBox 0 0 100 100, preserveAspectRatio
     none. Punkt (i, v) → --x: i/11*100, --y: (1 - v/30)*100. Te same dwie
     liczby trafiają do SVG i do stylu elementu HTML.
   • Kreski: vector-effect: non-scaling-stroke. Kropki są w HTML, więc
     zostają okrągłe przy dowolnym rozciągnięciu pola wykresu.
   • Responsywność wyłącznie na container queries:
       bfchart — szerokość całej karty (układ dwóch kolumn / jedna)
       bfplot  — szerokość panelu z wykresem (adnotacje, proporcje, KPI)
   ===================================================================== */

.bf-chart {
  /* --- TOKENY: podmień na swoje ---------------------------------- */
  --bf-font: var(--font-family-heading);
  --bf-font-display: var(--font-family-heading);

  --bf-surface: #ffffff;
  --bf-hairline: #ede9e1;
  --bf-ink: #1c1b19;
  --bf-ink-soft: #302e2a;
  --bf-ink-muted: #6b6760;
  --bf-axis: #d3cec3;
  --bf-grid: #e4e0d7;

  --bf-fs-axis: 0.5625rem; /*  9px   opisy osi            */
  --bf-fs-note: 0.59375rem; /*  9.5px adnotacje            */
  --bf-fs-meta: 0.6875rem; /* 11px   legenda, eyebrow      */
  --bf-fs-body: 0.9375rem; /* 15px   punkty w prawej kolumnie */
  --bf-fs-kpi-label: 0.75rem; /* 12px                          */
  --bf-fs-kpi: 2.375rem; /* 38px                          */
  --bf-track: 0.1em;

  --bf-radius: 18px;
  --bf-pad: 26px 28px 22px;
  --bf-pad-aside: 30px 34px;
  --bf-gap: 14px;

  /* --- GEOMETRIA -------------------------------------------------- */
  --bf-ratio: 3; /* proporcja pola wykresu (szer./wys.) */
  --bf-dot: 6px;
  --bf-dot-end: 9px;
  --bf-stroke: 1.7px;
  --bf-stroke-ghost: 1.5px;
  --bf-leader: 15px; /* kreska od punktu do adnotacji      */
  --bf-ygutter: 20px; /* rynna na opisy osi Y               */

  /* --- ANIMACJA --------------------------------------------------- */
  --bf-dur: 1100ms; /* rysowanie linii */
  --bf-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --bf-ease-soft: cubic-bezier(0.16, 0.84, 0.28, 1); /* miękkie dojście  */
  --bf-kpi-lag: 140ms; /* przerwa po narysowaniu, przed KPI  */
  --bf-kpi-step: 110ms; /* odstęp między KPI                  */
  --bf-kpi-from: 12px; /* dystans wejścia; ujemny = z góry    */
  --bf-points-start: 0.3; /* start punktów jako ułamek --bf-dur  */
  --bf-points-step: 80ms;

  container: bfchart / inline-size;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--bf-ink);
}

/* Kolory stanu — reszta komponentu czyta tylko te zmienne. */

.bf-chart[data-state="bez"] {
  --bf-accent: #EF5C6C; /* chart line, icons in bullet list */
  --bf-accent-strong: #EF5C6C;
  --bf-accent-ghost: #c9a79f;
  --bf-accent-rule: #c9a79f;
  --bf-accent-soft: #ffedef;
  --bf-accent-wash: #d17781; /* gradient stop color */
  --bf-accent-wash-op: 0.14;
}

.bf-chart[data-state="z"] {
  --bf-accent: #4BC27A;          /* chart line, icons in bullet list */
  --bf-accent-strong: #4BC27A;
  --bf-accent-ghost: #A5C0AE;
  --bf-accent-rule: #A5C0AE;
  --bf-accent-soft: #EBF9F1;
  --bf-accent-wash: #7CC097;     /* gradient stop color */
  --bf-accent-wash-op: 0.14;
}

/* --- karta: dwie kolumny ------------------------------------------- */
.bf-chart__card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* 700 : 500 */
  background: var(--bf-surface);
  border-radius: var(--bf-radius);
  overflow: hidden;
}

/* panel wykresu — własny kontener zapytań */
.bf-chart__main {
  container: bfplot / inline-size;
  min-width: 0;
  border-right: 1px solid var(--bf-hairline);
}
.bf-chart__inner {
  box-sizing: border-box;
  height: 100%;
  padding: var(--bf-pad);
  display: flex;
  flex-direction: column;
  gap: var(--bf-gap);
}

/* prawa kolumna: punkty u góry, CTA na dole */
.bf-chart__aside {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--bf-pad-aside);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

/* --- nagłówek panelu ---------------------------------------------------- */
.bf-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bf-chart__eyebrow {
  margin: 0;
  font-size: var(--bf-fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-ink-muted);
}
/* Pill — placeholder, do podmiany na komponent z design systemu */
.bf-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bf-accent-soft);
  color: var(--bf-accent-strong);
  font-size: var(--bf-fs-meta);
  font-weight: 600;
  white-space: nowrap;
}
.bf-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--bf-accent);
}

/* --- siatka wykresu: rynna osi Y | pole; pod spodem oś X ------------------ */
.bf-chart__grid {
  display: grid;
  grid-template-columns: var(--bf-ygutter) 1fr;
  column-gap: 7px;
}
.bf-chart__ygutter {
  position: relative;
}
.bf-chart__ygutter span {
  position: absolute;
  right: 0;
  top: calc(var(--y) * 1%);
  translate: 0 -50%;
  font-size: var(--bf-fs-axis);
  letter-spacing: var(--bf-track);
  color: var(--bf-ink-muted);
}
.bf-chart__plot {
  position: relative;
  aspect-ratio: var(--bf-ratio);
}
.bf-chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.bf-chart__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bf-chart__xaxis {
  grid-column: 2;
  position: relative;
  height: 1.9em;
  margin-top: 5px;
}
.bf-tick {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: -5px;
  width: 1px;
  height: 3px;
  background: var(--bf-axis);
}
.bf-tick--major {
  height: 5px;
}
.bf-xlab {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: 2px;
  translate: var(--anchor, -50%) 0;
  font-size: var(--bf-fs-axis);
  letter-spacing: var(--bf-track);
  color: var(--bf-ink-muted);
  white-space: nowrap;
}

/* --- geometria w SVG -------------------------------------------------- */
.bf-grid line {
  stroke: var(--bf-grid);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}
.bf-baseline {
  stroke: var(--bf-axis);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bf-wash-from {
  stop-color: var(--bf-accent-wash);
  stop-opacity: var(--bf-accent-wash-op);
}
.bf-wash-to {
  stop-color: var(--bf-accent-wash);
  stop-opacity: 0;
}
.bf-line {
  fill: none;
  stroke: var(--bf-accent);
  stroke-width: var(--bf-stroke);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.bf-line--ghost {
  stroke: var(--bf-accent-ghost);
  stroke-width: var(--bf-stroke-ghost);
  stroke-dasharray: 4 4;
}
.bf-rule {
  stroke: var(--bf-accent-rule);
  stroke-width: 1;
  stroke-dasharray: 1 4;
  vector-effect: non-scaling-stroke;
}

/* --- typografia nad wykresem -------------------------------------------- */
.bf-pt {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--bf-dot);
  height: var(--bf-dot);
  margin: calc(var(--bf-dot) / -2); /* centrowanie marginesem — */
  border-radius: 999px;
  box-sizing: border-box; /* transform zostaje wolny   */
  background: var(--bf-surface);
  border: 1.2px solid var(--bf-accent);
}
.bf-pt--end {
  --bf-dot: var(--bf-dot-end);
  background: var(--bf-accent);
}

/* Adnotacja wisi pod punktem. --anchor: 0 = w prawo od punktu, -100% = w lewo.
   Krzywa rośnie w prawo, więc tekst po prawej ucieka spod linii.          */
.bf-note {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  translate: var(--anchor, -50%) 0;
  margin-top: var(--bf-leader);
  width: max-content;
  max-width: 17ch;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.bf-note::before {
  content: "";
  position: absolute;
  left: calc(var(--anchor, -50%) * -1);
  top: calc(var(--bf-leader) * -1);
  width: 1px;
  height: var(--bf-leader);
  background: var(--bf-accent-rule);
}
.bf-note[data-note="1"] {
  --anchor: -8%;
}
.bf-note[data-note="2"] {
  --anchor: -8%;
}
.bf-note[data-note="3"] {
  --anchor: -78%;
  --bf-leader: 32px;
}
.bf-note b {
  font-size: var(--bf-fs-note);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-accent-strong);
}
.bf-note span {
  font-size: var(--bf-fs-axis);
  color: var(--bf-ink-muted);
  line-height: 1.35;
}

.bf-flag {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: 0;
  margin: 0 0 0 6px;
  font-size: var(--bf-fs-note);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-accent-strong);
  white-space: nowrap;
}
.bf-flag [data-short] {
  display: none;
}
.bf-avg {
  position: absolute;
  right: 0;
  top: calc(var(--y) * 1%);
  translate: 0 -100%;
  margin: -4px 0 0;
  font-size: var(--bf-fs-axis);
  letter-spacing: var(--bf-track);
  text-transform: uppercase;
  color: var(--bf-accent-strong);
  white-space: nowrap;
}

/* --- legenda, KPI ------------------------------------------------------- */
.bf-chart__legend {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bf-fs-meta);
  color: var(--bf-ink-muted);
}
.bf-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bf-chart__legend i {
  width: 18px;
  border-top: 2px solid var(--bf-accent);
}
.bf-chart__legend li:last-child i {
  border-top: 1.5px dashed var(--bf-accent-ghost);
}
.bf-chart__rule {
  height: 1px;
  background: var(--bf-hairline);
}

.bf-chart__kpis {
  display: flex;
  gap: 48px;
  margin: 0;
}
.bf-chart__kpis div {
  margin: 0;
}
.bf-chart__kpis dt {
  font-family: var(--bf-font-display);
  font-size: var(--bf-fs-kpi);
  line-height: 1;
  font-weight: 400;
  color: var(--bf-accent-strong);
}
.bf-chart__kpis dd {
  margin: 7px 0 0;
  font-size: var(--bf-fs-kpi-label);
  color: var(--bf-ink-muted);
}

/* --- prawa kolumna ------------------------------------------------------ */
.bf-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.bf-points li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: var(--bf-fs-body);
  line-height: 1.5;
  color: var(--bf-ink-soft);
}
.bf-points__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--bf-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bf-points__icon svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--bf-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-chart__caption {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--bf-fs-meta);
  letter-spacing: 0.04em;
  color: var(--bf-ink-muted);
}

.bf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   ANIMACJA
   Wyzwalacz: klasa .is-in-view na .bf-chart (zakłada ją bf-chart.js).
   .bf-armed też zakłada JS — bez JS karta jest od razu widoczna.
   Kolejność: linia rysuje się od lewej, punkty i adnotacje zapalają się,
   gdy dojeżdża do nich odsłona (opóźnienie liczone z --x); równolegle
   wchodzą punkty z prawej kolumny; na końcu KPI.
   ===================================================================== */
.bf-chart.bf-armed .bf-series {
  clip-path: inset(0 100% 0 0);
}
.bf-chart.bf-armed :is(.bf-pt, .bf-note, .bf-flag, .bf-avg, .bf-chart__kpis div, .bf-points li, .bf-cta) {
  opacity: 0;
}

.bf-chart.bf-armed.is-in-view .bf-series {
  animation: bf-wipe var(--bf-dur) var(--bf-ease) forwards;
}
.bf-chart.bf-armed.is-in-view .bf-pt {
  animation: bf-pop 340ms var(--bf-ease) forwards;
  animation-delay: calc(var(--bf-dur) * var(--x) / 100);
}
.bf-chart.bf-armed.is-in-view :is(.bf-note, .bf-flag) {
  animation: bf-rise 420ms var(--bf-ease) forwards;
  animation-delay: calc(var(--bf-dur) * var(--x) / 100 + 120ms);
}
.bf-chart.bf-armed.is-in-view .bf-avg {
  animation: bf-rise 420ms var(--bf-ease) forwards;
  animation-delay: calc(var(--bf-dur) * 0.85);
}
.bf-chart.bf-armed.is-in-view .bf-points li {
  animation: bf-lift 520ms var(--bf-ease-soft) forwards;
  animation-delay: calc(var(--bf-dur) * var(--bf-points-start) + var(--i) * var(--bf-points-step));
}
.bf-chart.bf-armed.is-in-view .bf-cta {
  animation: bf-lift 520ms var(--bf-ease-soft) forwards;
  animation-delay: calc(var(--bf-dur) * var(--bf-points-start) + 5 * var(--bf-points-step) + 80ms);
}
.bf-chart.bf-armed.is-in-view .bf-chart__kpis div {
  animation: bf-lift 560ms var(--bf-ease-soft) forwards;
  animation-delay: calc(var(--bf-dur) + var(--bf-kpi-lag) + var(--i) * var(--bf-kpi-step));
}

@keyframes bf-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes bf-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bf-rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bf-lift {
  from {
    opacity: 0;
    transform: translateY(var(--bf-kpi-from));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-chart.bf-armed .bf-series {
    clip-path: none;
  }
  .bf-chart.bf-armed :is(.bf-pt, .bf-note, .bf-flag, .bf-avg, .bf-chart__kpis div, .bf-points li, .bf-cta) {
    opacity: 1;
  }
  .bf-chart * {
    animation: none !important;
  }
}

/* =====================================================================
   RESPONSYWNOŚĆ — karta (bfchart)
   Poniżej 820px dwie kolumny robią się za ciasne: wykres < 480px,
   punkty < 340px. Przechodzimy na jedną kolumnę w tej samej karcie.
   ===================================================================== */
/* W jednej kolumnie panel wykresu ma szerokość karty, więc progi niżej
   odpowiadają progom bfplot — lewa krawędź punktów trzyma się lewej
   krawędzi wykresu.                                                    */
@container bfchart (max-width: 820px) {
  .bf-chart__card {
    grid-template-columns: minmax(0, 1fr);
  }
  .bf-chart__main {
    border-right: 0;
    border-bottom: 1px solid var(--bf-hairline);
  }
  .bf-chart__aside {
    padding: 24px 28px 26px;
    gap: 24px;
  }
  .bf-cta {
    align-self: stretch;
  }
}
@container bfchart (max-width: 620px) {
  .bf-chart__aside {
    padding: 22px 20px 24px;
  }
}
@container bfchart (max-width: 430px) {
  .bf-chart__card {
    border-radius: 16px;
  }
  .bf-chart__aside {
    padding: 20px 18px 22px;
    gap: 22px;
  }
  .bf-points {
    gap: 14px;
  }
}
@container bfchart (max-width: 380px) {
  .bf-chart__aside {
    padding: 20px 16px 20px;
  }
  .bf-cta {
    padding: 0 16px;
    font-size: 0.875rem;
    gap: 8px;
  }
}

/* =====================================================================
   RESPONSYWNOŚĆ — panel wykresu (bfplot)
   Progi adnotacji wynikają z arytmetyki: adnotacje leżą w prawo od
   punktu, punkty stoją co ~27% szerokości pola, najdłuższy podpis
   ma ~150px. Trzecia mieści się od pola ≥ 560px (panel ≥ ~620px),
   pierwsza obok drugiej od pola ≥ 390px (panel ≥ ~470px).
   Zmieniasz teksty adnotacji → przelicz te dwa progi.
   ===================================================================== */
@container bfplot (max-width: 620px) {
  .bf-chart__inner {
    --bf-ratio: 2;
    --bf-pad: 20px 20px 22px;
    --bf-fs-kpi: 2rem;
  }
  .bf-note {
    max-width: 16ch;
  }
  .bf-note[data-note="3"],
  .bf-tick[data-optional] {
    display: none;
  }
}
@container bfplot (max-width: 470px) {
  .bf-note[data-note="1"] {
    display: none;
  }
}
@container bfplot (max-width: 430px) {
  .bf-chart__inner {
    --bf-ratio: 1.5;
    --bf-pad: 18px 18px 22px;
    --bf-ygutter: 17px;
    --bf-fs-kpi: 1.875rem;
    --bf-fs-kpi-label: 0.6875rem;
    --bf-leader: 16px;
  }
  .bf-chart__legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .bf-chart__kpis {
    gap: 0;
    justify-content: space-between;
  }
  .bf-note {
    max-width: 17ch;
  }
  .bf-flag [data-long],
  .bf-chart__eyebrow [data-long] {
    display: none;
  }
  .bf-flag [data-short] {
    display: inline;
  }
}
@container bfplot (max-width: 380px) {
  .bf-chart__inner {
    --bf-fs-kpi: 1.625rem;
    --bf-pad: 16px 16px 20px;
    --bf-ygutter: 15px;
  }
  .bf-chart__kpis dd [data-long] {
    display: none;
  }
  .bf-note {
    max-width: 15ch;
  }
}

/* =====================================================================
   OSADZENIE w Elementorze
   1. Szerokość: container-type: inline-size nakłada size containment —
      dla rodzica naturalna szerokość karty wynosi 0. W kontenerze flex,
      który dopasowuje dzieci do treści, widget zapadłby się do zera,
      więc szerokość musi przyjść z zewnątrz: width: 100%.
   2. Wysokość: widget nie może rosnąć ponad kartę. Elementor daje
      widgetom height: 100% (przez --container-widget-height i na
      .elementor-widget-container), a flex-grow / align-self: stretch
      rozciągają widget do wysokości rodzica. Wysokość = treść.
      align-self: flex-start zamiast stretch: w kolumnie szerokość i tak
      daje width: 100%, a w wierszu stretch działałby na wysokość.
   ===================================================================== */
.elementor-widget:has(.bf-chart) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  align-self: flex-start;
  height: auto !important;
  min-height: 0;
}
.elementor-widget-container:has(> .bf-chart) {
  width: 100%;
  height: auto !important;
}