/**
 * @file
 * Styles for the p_data_chart paragraph (donut/pie + side legend).
 * Layout: title + intro (centered) over a flex row of [SVG chart] + [legend list],
 * with a source/methodology note below.
 * Tokens-driven typography per CSS architecture rules — no hardcoded font primitives.
 */

.p-data-chart {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: 48px;
  padding-inline: 24px;
}

/* Heading + intro: 800px-wide centered block, 40px gap (Figma 18983:79085 /
   19075:23166). Typography comes from the .rmaa-h3 / .rmaa-body-m utility
   classes on the elements; only layout + color live here. */
.p-data-chart__title {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
  color: var(--black);
}

.p-data-chart__intro {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
  color: var(--black);
}

.p-data-chart__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 80px 100px;
  border-radius: var(--radius-card);
}

/* "Dark background" option (field_dark): the whole section gets a
   full-bleed --grayMoreLight shaded band (breaks out of the Bootstrap
   container via the site's standard 100vw ::before trick, same as the FAQ
   block) and the chart sits on it as a white card. Unchecked = transparent. */
.p-data-chart--dark {
  position: relative;
}

.p-data-chart--dark::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--grayMoreLight);
  z-index: 0;
}

/* Keep the section's own content above the full-bleed band. A positive
   z-index here (rather than a negative one on the band) is required — at
   z-index:-1 the band paints behind the page canvas and never shows. */
.p-data-chart--dark > * {
  position: relative;
  z-index: 1;
}

.p-data-chart--dark .p-data-chart__layout {
  background-color: var(--white);
}

.p-data-chart__canvas {
  flex: 0 0 auto;
  width: 100%;
  max-width: 380px;
}

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

.p-data-chart__arc-label {
  fill: var(--white);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: 16.228px;
  letter-spacing: var(--ls-tight);
}

.p-data-chart__legend {
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 313px;
  max-width: 100%;
}

.p-data-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-data-chart__swatch {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.p-data-chart__legend-label {
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--BodyM);
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary, var(--black));
}

.p-data-chart__source {
  margin-block-start: 32px;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--BodyXS);
  line-height: var(--lh-body);
  color: var(--gray, #6b6b6b);
}

.p-data-chart__source p {
  margin-block: 4px;
}

@media (max-width: 768px) {
  .p-data-chart {
    padding-block: 32px;
    padding-inline: 16px;
  }

  .p-data-chart__layout {
    flex-direction: column;
    gap: 64px;
    padding: 80px 16px;
  }

  .p-data-chart__canvas {
    max-width: 280px;
  }

  .p-data-chart__legend {
    width: 100%;
  }
}