/* ──────────────────────────────────────────────────────────────
   Spinal Fusion CAD — page-specific styles
   All rules scoped under .spinal-fusion-page
   ────────────────────────────────────────────────────────────── */

.spinal-fusion-page img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ── Top preview row ── */
.spinal-fusion-page .sf-hero-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}

/* Source images differ in aspect ratio — crop to a common one so the
   preview strip reads as a single band rather than a ragged row. */
.spinal-fusion-page .sf-hero-row img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── Table of contents (mirrors .rr-toc on realrehab2.html) ── */
.spinal-fusion-page .sf-toc {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.spinal-fusion-page .sf-toc-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.spinal-fusion-page .sf-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: sftoc;
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: var(--space-5);
  align-items: start;
}

.spinal-fusion-page .sf-toc li {
  counter-increment: sftoc;
  margin-bottom: 10px;
}

.spinal-fusion-page .sf-toc a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.spinal-fusion-page .sf-toc a::before {
  content: counter(sftoc, decimal-leading-zero);
  font-size: 0.68rem;
  color: var(--accent);
  opacity: 0.75;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.spinal-fusion-page .sf-toc a:hover {
  color: var(--accent);
}

/* ── Image grids ── */
.spinal-fusion-page .sf-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}

/* Pairs are captures at different ratios (1.01 to 1.99), which left their
   bottoms out of line. Each pair now shares one frame and is fitted inside it,
   so the two sit level with nothing cropped. The backdrop is set to the
   capture's own canvas colour, so the fitted edges don't read as bars. */
.spinal-fusion-page .sf-two img {
  aspect-ratio: 8 / 7;
  object-fit: contain;
  object-position: center;
  background: #e6e6e6;
}

/* 3D Slicer captures — dark canvas rather than the SolidWorks grey. */
.spinal-fusion-page .sf-two--slicer img {
  aspect-ratio: 6 / 5;
  background: #242424;
}

/* Wide fixation-hole captures (1.88 / 1.99). */
.spinal-fusion-page .sf-two--wide img {
  aspect-ratio: 27 / 14;
}

/* These rows mix landscape and portrait captures (ratios from 0.45 to 1.87).
   A fixed band with object-fit: contain keeps every image whole, lines the
   row up, and lets the captions underneath sit on a common baseline. */
.spinal-fusion-page .sf-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
  align-items: start;
}

.spinal-fusion-page .sf-three img {
  height: 300px;
  object-fit: contain;
  object-position: center;
}

.spinal-fusion-page .sf-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}

/* Four views of the same assembly at slightly different ratios (1.08–1.19),
   evened out so the row bottoms line up. */
.spinal-fusion-page .sf-four img {
  aspect-ratio: 8 / 7;
  object-fit: cover;
}

/* The final renders are wider (1.47–1.60), so this row gets its own ratio
   rather than being cropped down to the assembly row's. */
.spinal-fusion-page .sf-four-renders img {
  aspect-ratio: 3 / 2;
}

/* Assembly renders run 1.16–1.29. */
.spinal-fusion-page .sf-four-assembly img {
  aspect-ratio: 6 / 5;
}

.spinal-fusion-page .sf-full {
  margin: var(--space-3) 0 var(--space-4);
}

.spinal-fusion-page figure {
  margin: 0;
}

.spinal-fusion-page figcaption {
  font-size: var(--fs-pill-sub);
  color: var(--text-muted);
  margin-top: var(--space-1);
  line-height: 1.45;
}

/* ── Text beside image ──
   The image keeps its own proportions and the shorter
   column centres against the taller one, so the row reads as one band. */
.spinal-fusion-page .sf-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  align-items: center;
}

.spinal-fusion-page .sf-split .sf-split-text > :first-child { margin-top: 0; }
.spinal-fusion-page .sf-split .sf-split-text > :last-child { margin-bottom: 0; }

/* Capped so a tall portrait capture (the screw sketch is 0.54) doesn't
   tower over the text it sits beside. */
.spinal-fusion-page .sf-split .sf-split-media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  margin: 0 auto;
}

/* Media column first in the source, used where the image sits left */
.spinal-fusion-page .sf-split.media-left .sf-split-media { order: 1; }
.spinal-fusion-page .sf-split.media-left .sf-split-text { order: 2; }

/* ── Bullet lists (matches the • style used on misc.html) ── */
.spinal-fusion-page ul.sf-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}

.spinal-fusion-page ul.sf-bullets li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-2);
}

.spinal-fusion-page ul.sf-bullets li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--text);
}

/* ── Slideshow (matches the Remnants button treatment) ── */
.spinal-fusion-page .sf-slideshow-wrap {
  margin: var(--space-4) 0;
}

.spinal-fusion-page .sf-slideshow {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.spinal-fusion-page .sf-slide {
  display: none;
  width: 100%;
}

.spinal-fusion-page .sf-slide.active {
  display: block;
}

/* The captures run 1.26–1.46, so every slide sits in an identical box and is
   fitted inside it — the frame stays put instead of jumping as you step
   through, and no measurement callout gets cropped at the edges. */
.spinal-fusion-page .sf-slide img {
  aspect-ratio: 27 / 20;
  object-fit: contain;
  object-position: center;
  background: #f4f4f4;
}

.spinal-fusion-page .sf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.spinal-fusion-page .sf-nav button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: border-color 0.2s, color 0.2s;
}

.spinal-fusion-page .sf-nav button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.spinal-fusion-page .sf-counter {
  font-size: var(--fs-pill-sub);
  color: var(--text-muted);
}

/* ── Animation video ──
   Sits beside the Project Overview text as the page's opening hook. */
.spinal-fusion-page .sf-split .sf-split-media video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* 1920x1080 source; reserves the box before metadata loads */
  display: block;
  border-radius: 4px;
  background: #000;
}

/* ── Interactive 3D viewers ── */
.spinal-fusion-page .sf-viewers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}

.spinal-fusion-page model-viewer {
  width: 100%;
  height: 420px;
  display: block;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  --poster-color: transparent;
}

.spinal-fusion-page .sf-viewer-hint {
  font-size: var(--fs-pill-sub);
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Hands point up at the two viewers and bob out of sync, so the pair reads
   as a gesture rather than a pulse. */
.spinal-fusion-page .sf-hand {
  width: 21px;
  height: 22px;
  flex-shrink: 0;
  fill: var(--accent);
  animation: sf-hand-point 2.4s ease-in-out infinite;
}

.spinal-fusion-page .sf-hand-right {
  animation-name: sf-hand-point-right;
  animation-delay: 1.2s;
}

@keyframes sf-hand-point {
  0%, 100% { transform: translateY(2px); }
  50%      { transform: translateY(-5px); }
}

@keyframes sf-hand-point-right {
  0%, 100% { transform: scaleX(-1) translateY(2px); }
  50%      { transform: scaleX(-1) translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .spinal-fusion-page .sf-hand { animation: none; }
  .spinal-fusion-page .sf-hand-right { transform: scaleX(-1); }
}

@media (max-width: 560px) {
  .spinal-fusion-page .sf-viewer-hint { gap: var(--space-1); }
}

/* ── Engineering drawing ── */
.spinal-fusion-page .sf-drawing {
  margin: var(--space-3) 0 var(--space-2);
  background: #fff;
  border-radius: 4px;
  padding: var(--space-2);
}

.spinal-fusion-page .sf-drawing img {
  border-radius: 0;
}

.spinal-fusion-page .sf-drawing-link {
  display: inline-block;
  margin: 0 0 var(--space-4);
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.spinal-fusion-page .sf-drawing-link:hover {
  color: var(--accent);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .spinal-fusion-page .sf-viewers { grid-template-columns: 1fr; }
  .spinal-fusion-page model-viewer { height: 340px; }
}

@media (max-width: 768px) {
  .spinal-fusion-page .sf-hero-row,
  .spinal-fusion-page .sf-two,
  .spinal-fusion-page .sf-three,
  .spinal-fusion-page .sf-split { grid-template-columns: 1fr; }
  .spinal-fusion-page .sf-four { grid-template-columns: repeat(2, 1fr); }
  .spinal-fusion-page .sf-split .sf-split-media { order: 0; }
  .spinal-fusion-page .sf-split .sf-split-text { order: 0; }
}

@media (max-width: 700px) {
  .spinal-fusion-page .sf-toc ol {
    grid-template-rows: none;
    grid-auto-flow: row;
    column-gap: 0;
  }
}