/* body-map — Section 8 (nested in science-index's main column, Pattern C: no .container, no own padding).
   Source: brief/body-map.md (§2 fluid rows, §5 hotspot ↔ card map, §6 composition) + cache/body-map.{desktop,mobile}.json.
   Nodes: desktop 1817:4468 (1050 x 700 map, title + one card overlaid) · mobile 1817:5063 (title → map → 5 cards → disclaimer).
   Mobile-first: base = < 768 · 768–1023 pseudo-tablet (mobile composition, cards grid-2) · >= 1024 desktop overlay.
   Fluid: Δ = (var(--max-vw) - 390px) * 0.015 (mobile) · s = var(--max-vw) / var(--vw-base) (desktop). */

/* ---------- Section root — mobile base (< 768) ---------- */
.body-map {
  /* section-local fluid sizes (§2) */
  --bm-gap:          clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
  --bm-card-pad:     clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 24px);
  --bm-card-gap:     clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  --bm-text-gap:     clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 12px);
  --bm-research-gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 8px);
  --bm-link-gap:     clamp(4px, calc(5px + (var(--max-vw) - 390px) * 0.015), 5px);
  --bm-link-pad:     2px;
  --bm-arrow:        clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  --bm-link-size:    clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);   /* D-BM-9: binds the 16 style */
  --bm-dot:          clamp(21px, calc(26px + (var(--max-vw) - 390px) * 0.015), 42px);
  --bm-dot-icon:     clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 32px);
  --bm-dot-pad:      0px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bm-gap);
  isolation: isolate;           /* keeps the dot / title / card z-indices inside the section */
}

/* ---------- Title ---------- */
.body-map__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-graphite);
  text-align: left;
}

/* ---------- Map (photo + hotspots) ---------- */
.body-map__map {
  position: relative;
  width: 100%;
  aspect-ratio: 358 / 239;
  overflow: hidden;             /* 1817:5065 / 1817:4469 clipsContent: true */
}

.body-map__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.body-map__dot {
  position: absolute;
  z-index: 1;
  left: var(--mx);
  top: var(--my);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bm-dot);
  height: var(--bm-dot);
  padding: var(--bm-dot-pad);
  border: 1px solid var(--color-white-80);
  border-radius: 9999px;
  background: transparent;
  pointer-events: none;         /* BA-BM-2: decorative below 1024 */
}

.body-map__dot-pic { display: contents; }

.body-map__dot-icon {
  flex: none;
  width: var(--bm-dot-icon);
  height: var(--bm-dot-icon);
  max-width: none;
}

.body-map__dot:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* ---------- Cards ---------- */
.body-map__cards {
  display: flex;
  flex-direction: column;
  gap: var(--bm-gap);
}

.body-map__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bm-card-gap);
  padding: var(--bm-card-pad);
  border: 1px solid var(--color-ink-10);
  background: transparent;      /* D-BM-8: mobile cards are unfilled */
  overflow: hidden;
}

.body-map__card-body,
.body-map__research {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.body-map__card-body { gap: var(--bm-text-gap); }
.body-map__research  { gap: var(--bm-research-gap); }

.body-map__card-title {
  align-self: stretch;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: var(--color-coal);
}

.body-map__card-text,
.body-map__card-label {
  align-self: stretch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-coal);
}

.body-map__card-text  { font-weight: var(--weight-regular); }
.body-map__card-label { font-weight: var(--weight-medium); }

.body-map__rule {
  display: block;
  align-self: stretch;
  height: 1px;
  margin-block: -0.5px;         /* the drawn Divider is 0 tall: net box height stays 0 */
  background: var(--color-ink-10);
}

.body-map__card-ref {
  align-self: stretch;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-stone);
}

/* "See study details →" (Action/Button, Type=text, Size=L, icon right) */
.body-map__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bm-link-gap);
  padding: var(--bm-link-pad) 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.body-map__link-label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--bm-link-size);
  line-height: 1.32;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  white-space: nowrap;
}

.body-map__link-icon {
  flex: none;
  width: var(--bm-arrow);
  height: var(--bm-arrow);
}

.body-map__link:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* ---------- Disclaimer (mobile composition only, D-BM-6) ---------- */
.body-map__disclaimer {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-stone);
}

/* ---------- 768–1023 pseudo-tablet: mobile composition, cards grid-2 (brief §6 "Tablet layout") ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .body-map {
    --bm-gap:          24px;
    --bm-card-pad:     24px;
    --bm-card-gap:     20px;
    --bm-text-gap:     12px;
    --bm-research-gap: 8px;
    --bm-link-gap:     5px;
    --bm-link-pad:     2px;
    --bm-arrow:        20px;
    --bm-link-size:    var(--text-body);
    --bm-dot:          clamp(31.66px, calc(31.66px + (var(--max-vw) - 768px) * 0.025), 42px);
    --bm-dot-icon:     clamp(29.66px, calc(29.66px + (var(--max-vw) - 768px) * 0.025), 32px);
    --bm-dot-pad:      0px;
  }

  .body-map__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bm-gap);
  }

  /* RESPONSIVE 6c: 5 cards in grid-2 leave the last row half empty (Bones | —, 50 % of the row blank at 768–1023);
     the odd last card spans both tracks instead (its text runs at ≤ the drawn 1050 desktop measure). */
  .body-map__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- >= 1024 desktop: single-cell overlay (photo → dots → title → one open card) ---------- */
@media (min-width: 1024px) {
  .body-map {
    --bm-card-pad:     clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
    --bm-card-gap:     clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --bm-text-gap:     clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
    --bm-research-gap: clamp(4px, calc(8px * (var(--max-vw) / var(--vw-base))), 8px);
    --bm-link-gap:     clamp(3px, calc(5px * (var(--max-vw) / var(--vw-base))), 5px);
    --bm-link-pad:     clamp(1px, calc(2px * (var(--max-vw) / var(--vw-base))), 2px);
    --bm-arrow:        clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    --bm-link-size:    var(--text-body);
    --bm-dot:          clamp(22px, calc(42px * (var(--max-vw) / var(--vw-base))), 42px);
    --bm-dot-icon:     clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
    --bm-dot-pad:      clamp(2px, calc(4px * (var(--max-vw) / var(--vw-base))), 4px);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stack";
    gap: 0;
  }

  .body-map__map {
    grid-area: stack;
    aspect-ratio: 3 / 2;
    /* FIX_SECTION BM-A1 (Δ2b): dark fallback under the white title while the lazy photo is not yet painted (or fails);
       a darker tone of the photo's own median under the title (#8f979b) — invisible once the photo has loaded. */
    background-color: #6b7275;
  }

  .body-map__title {
    grid-area: stack;
    z-index: 2;
    align-self: start;
    justify-self: start;
    width: 40%;                         /* 420 / 1050 */
    margin: 3.8095% 0 0 3.8095%;        /* 40 / 1050 on both axes (grid-area width) */
    color: var(--color-white);
    pointer-events: none;
  }

  .body-map__dot {
    left: var(--x);
    top: var(--y);
    pointer-events: auto;
    cursor: pointer;
  }

  /* >= 44px hit area without a visual change (the ring is 22px @1024, 42px @1920) */
  .body-map__dot::before {
    content: "";
    position: absolute;
    inset: min(-1px, calc((var(--bm-dot) - 44px) / 2));
    border-radius: 9999px;
  }

  .body-map__cards {
    grid-area: stack;
    position: relative;
    z-index: 3;
    align-self: stretch;
    display: block;
    pointer-events: none;
  }

  .body-map__card {
    position: absolute;
    left: var(--card-left);
    top: var(--card-top);
    width: 32.381%;                     /* 340 / 1050 */
    background: var(--color-white);     /* D-BM-8 */
    pointer-events: auto;
    display: none;
  }

  .body-map__card.is-active {
    display: flex;
    animation: body-map-card-in 0.2s ease-out;
  }

  .body-map__disclaimer { display: none; }
}

@keyframes body-map-card-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .body-map__card.is-active { animation: none; }
}