/* Next case band (docs/cs1-spec.md §8, Figma `Next case band`). Shared by the case studies.
   Needs tokens.css, shell.css, story.css (the knot). One link; the thread runs behind it. */

.band {
  display: flex;
  align-items: center;
  column-gap: var(--grid-gutter);
  margin: 0 var(--in-page-x);
  padding: var(--rh-block) var(--in-l-x) var(--rh-block) 0;
  background: var(--color-bg-surface);
  color: inherit;
  text-decoration: none;
}
.band :where(p) { margin: 0; }

/* Knot column: the knot centred on --thread-x */
.band__knot-col {
  display: flex;
  justify-content: center;
  align-self: center;
  flex: none;
  width: var(--knot-column);
}

.band__body {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  flex: 1;
  min-width: 0;
}
.band__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  flex: 1;
  min-width: 0;
}
.band__tags { color: var(--color-text-secondary); }
.band__title { color: var(--color-text-primary); }

/* Thumbnail: Home's CS2 drawing (home-spec §5), Rest and Resolved */
.band__thumb {
  display: block;
  flex: none;
  width: 320px;
  height: 240px;
  overflow: hidden;
  border-radius: var(--radius-screen);
  background: var(--color-bg-surface); /* Figma: the same as the band, so only the drawing shows */
}
.band__thumb svg { display: block; width: 100%; height: 100%; }
.band__thumb svg * { vector-effect: non-scaling-stroke; }
.band__rest { stroke: var(--color-line-guide); stroke-width: var(--stroke-guide); }
.band__res {
  opacity: 0;
  stroke: var(--color-line-exact);
  stroke-width: var(--stroke-exact);
  transition: opacity 0.7s ease 0.2s; /* Home's row timing (home-spec §9.3), the same both ways (cs1-spec §12.6) */
}
.band__color { fill: var(--case); stroke: none; }

/* Reached (the line arrived): the knot fills (story.css). Hover and keyboard focus: the knot fills,
   the thumbnail shows Resolved, the button lifts and grows, the arrow opens (shell). Stage A: at once. */
.band:focus-visible .knot {
  --ol-line: var(--case);
  --ol-fill: var(--case);
  --ol-scale: 1.15;
}
.band:focus-visible .band__res { opacity: 1; }
.band:focus-visible .band__btn { transform: translateY(-2px) scale(1.05); }
@media (hover: hover) {
  .band:hover .knot {
    --ol-line: var(--case);
    --ol-fill: var(--case);
    --ol-scale: 1.15;
  }
  .band:hover .band__res { opacity: 1; }
  .band:hover .band__btn { transform: translateY(-2px) scale(1.05); }
}

/* Tablet */
@media (max-width: 900px) {
  .band { column-gap: 24px; }
  .band__thumb { width: 218px; height: 164px; border-radius: 15px; }
}

/* Mobile: the knot at the top, no thumbnail */
@media (max-width: 600px) {
  .band { align-items: flex-start; column-gap: var(--grid-gutter); }
  .band__knot-col { align-self: flex-start; }
  .band__thumb { display: none; }
}

[data-thread-static] .band__res { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .band__res { transition: none; }
  .band:focus-visible .band__btn,
  .band:hover .band__btn { transform: none; }
}