/* PB Pillars — Whole Person interactive wheel — [pb_pillars]
   Fonts inherit from the theme (Flink body, P22 Mackinac headings).
   Navy/mulberry map to the Beaver Builder global colour variables with
   hex fallbacks; segment colours are baked into the SVG (brand values). */

.pb-wheel {
  --pbw-navy: var(--fl-global-navy, #23375A);
  --pbw-mulberry: var(--fl-global-mulberry, #7C5563);
  container-type: inline-size;
  margin: 8px 0;
  color: var(--pbw-navy);
}

.pb-wheel .pbw-model {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@container (min-width: 640px) {
  .pb-wheel .pbw-model { grid-template-columns: minmax(300px, 440px) 1fr; gap: 48px; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 721px) {
    .pb-wheel .pbw-model { grid-template-columns: minmax(300px, 440px) 1fr; gap: 48px; }
  }
}

/* --- Diagram --- */
.pb-wheel .pbw-diagram { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1/1; }
.pb-wheel .pbw-diagram svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pb-wheel .pbw-seg { cursor: pointer; transition: opacity .25s ease, transform .25s ease; transform-origin: 200px 200px; }
.pb-wheel .pbw-seg path { transition: fill .25s ease, stroke-width .2s ease; }
.pb-wheel .pbw-seg text { transition: fill .25s ease; }
.pb-wheel .pbw-diagram.pbw-has-active .pbw-seg { opacity: .42; }
.pb-wheel .pbw-diagram.pbw-has-active .pbw-seg.pbw-is-active { opacity: 1; transform: scale(1.035); }
.pb-wheel .pbw-seg:focus { outline: none; }
.pb-wheel .pbw-seg:focus-visible path { stroke: #fff; stroke-width: 4; }
.pb-wheel .pbw-core { cursor: pointer; }
.pb-wheel .pbw-seg-label {
  font-family: inherit; font-weight: 800; font-size: 19px; letter-spacing: .02em;
  pointer-events: none; dominant-baseline: middle;
}
@media (prefers-reduced-motion: reduce) {
  .pb-wheel .pbw-seg { transition: opacity .25s ease; }
  .pb-wheel .pbw-diagram.pbw-has-active .pbw-seg.pbw-is-active { transform: none; }
}

/* --- Detail panel --- */
.pb-wheel .pbw-panel { min-width: 0; }
.pb-wheel .pbw-panel h3 {
  font-size: 30px; line-height: 1.15; color: var(--pbw-navy);
  margin: 0 0 14px; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 14px;
}
.pb-wheel .pbw-h-ico { width: 38px; height: 38px; flex: none; }
.pb-wheel .pbw-panel p { font-size: 0.94em; line-height: 1.6; color: var(--pbw-navy); margin: 0 0 18px; }
.pb-wheel .pbw-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pb-wheel .pbw-panel li {
  position: relative; padding-left: 28px;
  font-size: 0.85em; line-height: 1.5; color: var(--pbw-navy);
}
.pb-wheel .pbw-panel li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--pbw-seg, var(--pbw-mulberry));
}
.pb-wheel .pbw-hint {
  font-size: 0.75em; color: var(--pbw-navy); opacity: .55; margin-top: 22px;
  display: flex; align-items: center; gap: 8px;
}
.pb-wheel .pbw-hint svg { width: 15px; height: 15px; flex: none; }