/* ========================================
   BIODYN , Impact
   Who the work is for, one audience at a time,
   in the same idiom as the About page. Tokens
   come from about-core.css via .ab-scope.
   ======================================== */

.im-section {
  padding: var(--section-padding);
  background: var(--bg-secondary);
}

.im-shell {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-padding);
}

.im-head {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  column-gap: clamp(30px, 4vw, 66px);
  align-items: end;
}

.im-title {
  font-family: var(--ab-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw + 0.3rem, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ab-bone);
}

.im-title em {
  font-style: italic;
  color: var(--ab-ch);
  transition: color 0.6s ease;
}

.im-lede {
  font-size: clamp(0.92rem, 0.42vw + 0.8rem, 1.02rem);
  line-height: 1.75;
  color: var(--ab-dim);
  max-width: 44ch;
  padding-bottom: 0.4em;
}

/* ---------------------------------------
   Audience selector
   --------------------------------------- */

.im-rail {
  display: flex;
  margin-top: clamp(26px, 4vh, 44px);
  border-bottom: 1px solid var(--ab-line);
}

.im-rail-item {
  position: relative;
  flex: 1 1 0;
  padding: 14px 18px 16px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ab-faint);
  font-family: var(--ab-font-display);
  font-size: clamp(0.98rem, 0.6vw + 0.82rem, 1.26rem);
  line-height: 1.2;
  transition: color var(--transition-medium);
}

.im-rail-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 12px;
  bottom: -1px;
  height: 1px;
  background: var(--im-c);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.im-rail-item.is-active::after { transform: scaleX(1); }
.im-rail-item.is-active,
.im-rail-item:hover { color: var(--ab-bone); }

.im-rail-item[data-channel="1"] { --im-c: var(--ab-ch1); }
.im-rail-item[data-channel="2"] { --im-c: var(--ab-ch2); }
.im-rail-item[data-channel="3"] { --im-c: var(--ab-ch3); }
.im-rail-item[data-channel="4"] { --im-c: var(--ab-ch4); }

/* ---------------------------------------
   Figure beside the answer
   --------------------------------------- */

.im-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: start;
  margin-top: clamp(24px, 3.5vh, 40px);
}

.im-chamber {
  position: relative;
  width: 100%;
  height: clamp(260px, 34vw, 420px);
}

.im-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.im-canvas.is-dragging { cursor: grabbing; }
.im-canvas:focus-visible { outline: 2px solid var(--ab-ch); outline-offset: 3px; }

.im-panel { min-width: 0; }

.im-panel.is-entering {
  animation: im-panel-in 0.6s cubic-bezier(0.22, 0.7, 0.2, 1);
}

@keyframes im-panel-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.im-panel-title {
  font-family: var(--ab-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.5vw + 0.8rem, 2.1rem);
  line-height: 1.14;
  color: var(--ab-bone);
  margin-bottom: 14px;
  max-width: 24ch;
}

.im-panel-body {
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--ab-dim);
  max-width: 58ch;
  margin-bottom: clamp(18px, 2.6vh, 28px);
}

.im-panel .ab-refs {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px 30px;
  padding-top: 18px;
  border-top: 1px solid var(--ab-line);
}

/* ---------------------------------------
   Responsive
   --------------------------------------- */

@media (max-width: 1000px) {
  .im-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  .im-lede { max-width: 60ch; padding-bottom: 0; }

  .im-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .im-chamber { height: min(340px, 70vw); }
}

@media (max-width: 760px) {
  .im-rail { flex-direction: column; }
  .im-rail-item {
    padding: 12px 0;
    border-top: 1px solid var(--ab-line);
  }
  .im-rail-item:first-child { border-top: 0; }
  .im-rail-item::after { bottom: auto; top: 0; right: 0; }
  .im-panel .ab-refs { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .im-rail-item::after { transition: none; }
  .im-panel.is-entering { animation: none; }
}