/* =============================================================
   KEY PERFORMANCE INDICATORS — responsive overrides
   Breakpoints: 1200 · 1024 · 768 · 600 · 480 · 360
   ============================================================= */

/* ── Laptop / small desktop ── */
@media (max-width: 1200px) {
  .cfp__grid { column-gap: 40px; }
}

/* ── Tablet landscape ── */
@media (max-width: 1024px) {
  .kpi-banner-text__main { font-size: 32px; }
  .cfp__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 40px; }
  .cfp-bar__col, .cfp-stack__seg { width: 20px; }
}

/* ── Tablet portrait ── */
@media (max-width: 768px) {
  /* On mobile the utility bar is hidden → header ≈ nav bar only */
  .bod-breadcrumb { top: 84px; }
  .bod-breadcrumb__inner { padding: 0 20px; }
  .bod-breadcrumb__item { font-size: 10px; }
  .bod-breadcrumb__sep  { padding: 0 6px; }

  .kpi-hero__inner { padding: 120px clamp(1.25rem, 6vw, 4rem) 16px; }
  .kpi-titleblock__title { font-size: 24px; }
  .kpi-titleblock__sub { font-size: 18px; }

  /* Charts stack one per row */
  .cfp__grid { grid-template-columns: 1fr; row-gap: 44px; }
  .cfp__inner { padding: 40px clamp(1.25rem, 6vw, 2.5rem) 56px; }
  .cfp__title { font-size: 19px; }
}

/* ── Large phone ── */
@media (max-width: 600px) {
  .kpi-banner-text__main { font-size: 28px; }
  .cfp-bars, .cfp-bars--stacked { height: 180px; }
  .cfp-bar__val, .cfp-xlabels span { font-size: 11.5px; }
}

/* ── Phone ── */
@media (max-width: 480px) {
  .kpi-hero__inner { padding-top: 104px; }
  .kpi-titleblock { padding: 12px 20px 12px 16px; }
  .kpi-titleblock__title { font-size: 22px; }
  .kpi-titleblock__sub { font-size: 16px; }
  .cfp-bar__col, .cfp-stack__seg { width: 18px; }
  .cfp-table { font-size: 11px; }
  .cfp-table th, .cfp-table td { padding: 4px 5px; }
}

/* ── Small phone ── */
@media (max-width: 360px) {
  .kpi-hero__inner { padding-left: 1rem; padding-right: 1rem; }
  .cfp-bar__val { font-size: 10.5px; }
}