/* ============================================================
   50-wwt-bodymap — two-column interactive body map. Left: body
   model w/ 7 hotspot dots (duotone tint approach echoes
   css/sections/04-conditions.css, own class names/root here).
   Right: single live card that swaps content on dot hover/tap
   (js/sections/50-wwt-bodymap.js). Scoped under .sec-50-wwt-bodymap.
   ============================================================ */

.sec-50-wwt-bodymap {
  background: var(--bone);
  /* __glow is inset:-14% on the model box and overflowed the section, widening the
     mobile layout viewport. */
  overflow-x: clip;
}

.sec-50-wwt-bodymap__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 780px) {
  .sec-50-wwt-bodymap__layout {
    grid-template-columns: minmax(260px, 380px) 1fr;
  }
}

/* --- Left: body model --- */
.sec-50-wwt-bodymap__model {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

.sec-50-wwt-bodymap__glow {
  position: absolute;
  inset: -14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.sec-50-wwt-bodymap__model img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto; /* required: img ships width/height attrs which would otherwise stretch it */
  display: block;
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  filter: grayscale(1) contrast(1.04);
}

/* Accent-duotone tint over the model, tracks --accent so a client re-skin
   carries through automatically instead of shipping the raw grayscale look */
.sec-50-wwt-bodymap__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
  background: linear-gradient(170deg, hsl(var(--accent-h) 55% 62% / 0.5), hsl(var(--accent-h) 65% 30% / 0.55));
  mix-blend-mode: color;
  pointer-events: none;
}

.sec-50-wwt-bodymap__active-glow {
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  left: 47%;
  top: 33%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(6px);
  opacity: 1;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out), left 300ms var(--ease-out), top 300ms var(--ease-out);
}

html.reduced-motion .sec-50-wwt-bodymap__active-glow {
  transition: none;
}

.sec-50-wwt-bodymap__dot {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent-strong);
  background: var(--white);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out),
    border-color 250ms var(--ease-out), transform 250ms var(--ease-spring);
}

/* 44px invisible tap target around the visible dot */
.sec-50-wwt-bodymap__dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}

.sec-50-wwt-bodymap__dot-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-strong);
  opacity: 0;
}

.sec-50-wwt-bodymap__dot:hover,
.sec-50-wwt-bodymap__dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

.sec-50-wwt-bodymap__dot:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

.sec-50-wwt-bodymap__dot.is-active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-on);
  transform: translate(-50%, -50%) scale(1.18);
}

.sec-50-wwt-bodymap__dot.is-active .sec-50-wwt-bodymap__dot-ring {
  opacity: 1;
  animation: sec-50-wwt-bodymap-pulse 1.8s ease-out infinite;
}

@keyframes sec-50-wwt-bodymap-pulse {
  from { transform: scale(0.55); opacity: 0.8; }
  to { transform: scale(1.9); opacity: 0; }
}

html.reduced-motion .sec-50-wwt-bodymap__dot.is-active .sec-50-wwt-bodymap__dot-ring {
  animation: none;
  opacity: 0.45;
  transform: scale(1);
}

html.reduced-motion .sec-50-wwt-bodymap__dot {
  transition: none;
}

/* --- Right: swapping live card --- */
.sec-50-wwt-bodymap__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(2rem, 2vw + 1.5rem, 3rem);
  max-width: 480px;
}

.sec-50-wwt-bodymap__card.is-swapping {
  transition: opacity 200ms var(--ease-out);
  opacity: 0.35;
}

html.reduced-motion .sec-50-wwt-bodymap__card.is-swapping {
  transition: none;
  opacity: 1;
}

.sec-50-wwt-bodymap__card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.sec-50-wwt-bodymap__card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.75rem;
}

.sec-50-wwt-bodymap__card p {
  color: var(--text-on-bone-dim);
  max-width: 40ch;
}

.sec-50-wwt-bodymap__card-link {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-50-wwt-bodymap__card-link:hover {
  gap: 0.65rem;
  color: var(--accent-strong);
}