/* ============================================================
   2Bdent — Interactive Care Ring
   EVERY selector is scoped under #care-ring and every class is
   prefixed `cr-`, so nothing here can leak into or clash with
   the site's generic classes (.section, .eyebrow, .fade, .copy…).

   Colour values are the demo's own (they differ slightly from the
   site tokens) so the element looks exactly like the reference.
   Font families reuse the site tokens — those already match
   (Prata for display, Manrope for body).
   ============================================================ */

#care-ring {
  /* Light canvas. --cr-bg is ALSO the .cr-node-dot fill — that equality is what
     makes the inactive dots read as hollow, so the two must never diverge. */
  --cr-bg:      var(--color-bone);       /* canvas + hollow-dot fill */
  --cr-line:    var(--color-hairline);   /* ring circle + inactive spokes (decorative) */
  --cr-accent:  var(--color-oak);        /* node dot strokes — decorative */
  --cr-active:  var(--color-oak-deep);   /* active node/spoke/track — 3.1:1 */
  --cr-text:    var(--color-ink);        /* panel text, active label — 16.5:1 */
  --cr-muted:   var(--color-ink-soft);   /* description, inactive labels — 8.8:1 */

  background: var(--cr-bg);
  color: var(--cr-text);
  font-family: var(--font-body);
  padding-block: var(--space-3xl);
}

/* Section heading + lead sit ABOVE the ring. They deliberately use the site's
   own heading styles (h2 / .lead), not the ring's type — only the spacing
   below is scoped here. */
#care-ring .cr-intro {
  max-width: var(--container-text);
  margin-bottom: var(--space-2xl);
}

#care-ring .cr-grid {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* ---------- RING ---------- */
#care-ring .cr-ring-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
#care-ring .cr-ring-svg { width: 100%; height: 100%; overflow: visible; display: block; }
#care-ring .cr-ring-circle { fill: none; stroke: var(--cr-line); stroke-width: 1; }
#care-ring .cr-spoke { stroke: var(--cr-line); stroke-width: 1; transition: stroke .5s ease; }
#care-ring .cr-spoke.is-active { stroke: var(--cr-active); stroke-width: 1.4; }
#care-ring .cr-node-dot {
  fill: var(--cr-bg);
  stroke: var(--cr-accent);
  stroke-width: 1.4;
  transition: all .5s ease;
}
#care-ring .cr-node-dot.is-active {
  fill: var(--cr-active);
  stroke: var(--cr-active);
  /* oak bloom, retuned for the light canvas */
  filter: drop-shadow(0 0 6px rgba(163, 133, 95, .55));
}
#care-ring .cr-center-dot { fill: var(--cr-active); }
#care-ring .cr-center-halo { fill: none; stroke: var(--cr-accent); stroke-width: 1; opacity: .45; }

/* Centre label is ink and sits inside the enlarged centre disc (5.3:1 on oak) */
#care-ring .cr-center-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: .62rem; letter-spacing: .28em;
  color: var(--cr-text); font-weight: 600;
  pointer-events: none;
  padding-left: .28em;
  white-space: nowrap;
}

#care-ring .cr-node-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: .72rem; letter-spacing: .02em;
  color: var(--cr-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color .5s ease;
  user-select: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
#care-ring .cr-node-label.is-active { color: var(--cr-text); }
#care-ring .cr-node-label:hover { color: var(--cr-text); }
#care-ring .cr-node-label:focus-visible {
  outline: 2px solid var(--cr-active);
  outline-offset: 3px;
  color: var(--cr-text);
}

/* ---------- COPY PANEL ---------- */
#care-ring .cr-eyebrow {
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cr-accent); margin-bottom: 1.4rem;
  font-family: var(--font-body);
  font-weight: 400;
}
#care-ring .cr-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: normal;
  color: var(--cr-text);
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  max-width: none;
}
#care-ring .cr-desc {
  font-weight: 300; font-size: 1.02rem; line-height: 1.6;
  color: var(--cr-muted); margin-top: 1.1rem; max-width: 34ch;
  min-height: 3.4em;
}
#care-ring .cr-fade { transition: opacity .35s ease; }
#care-ring .cr-fade.is-out { opacity: 0; }

#care-ring .cr-meta {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2.2rem;
}
#care-ring .cr-counter {
  font-size: .8rem; letter-spacing: .14em;
  color: var(--accent-text); font-variant-numeric: tabular-nums;   /* AA 6.2:1 */
}
#care-ring .cr-track {
  flex: 1; height: 1px; background: var(--cr-line);
  position: relative; max-width: 150px;
}
#care-ring .cr-track-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--cr-active);
  transition: width .5s ease;
}

#care-ring .cr-link {
  display: inline-block; margin-top: 2.4rem;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cr-text); text-decoration: none;
  border-bottom: 1px solid var(--cr-accent); padding-bottom: .3rem;
  transition: color .3s, border-color .3s;
}
#care-ring .cr-link:hover { color: var(--accent-text); border-color: var(--accent-text); }

@media (max-width: 760px) {
  #care-ring { padding-block: var(--space-2xl); }   /* match the tighter mobile rhythm (ID beats .section) */
  #care-ring .cr-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  #care-ring .cr-ring-wrap { max-width: 320px; order: 2; }
  #care-ring .cr-copy { order: 1; text-align: center; }
  #care-ring .cr-desc { margin-inline: auto; }
  #care-ring .cr-meta { justify-content: center; }
  #care-ring .cr-name { justify-content: center; }
  #care-ring .cr-node-label { font-size: .64rem; }
}

/* Under 480px the ring + its outer labels overflowed the viewport ("Импланти"
   clipped left, right node under the floating phone button). Shrink the ring so
   the whole thing (7 nodes + labels) sits inside the viewport with side margin
   that absorbs the label text, clear of the fixed action buttons. */
@media (max-width: 480px) {
  #care-ring { padding-block: var(--space-xl); }
  #care-ring .cr-ring-wrap { max-width: 200px; }
  #care-ring .cr-node-label { font-size: .56rem; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #care-ring .cr-rotor { transition: none !important; }
}