/* Shared responsive foundation for the four flagship case studies. */
html,
body { overflow-x: clip; }
body { min-width: 0; }
main, section, .container { min-width: 0; }
img, video, svg { max-width: 100%; }
:is(h1, h2, h3, p, li) { overflow-wrap: break-word; }

@media (max-width: 1024px) {
  .container { padding-inline: clamp(24px, 5vw, 52px); }
  :is(.challenge-layout, .shift-grid, .intro-inner, .conv-inner) {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 7vw, 72px);
  }
  :is(.challenge-layout, .shift-grid, .intro-inner, .conv-inner) > * { min-width: 0; }
}

@media (max-width: 700px) {
  .container { padding-inline: clamp(16px, 5vw, 24px); }
  .portfolio-return { min-height: 44px; }
  :is(a, button, [role="button"]) { touch-action: manipulation; }

  .coverflow-dot {
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent;
  }
  .coverflow-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--gray-200);
    transform: translate(-50%, -50%);
  }
  .coverflow-dot.active { width: 44px; background: transparent; }
  .coverflow-dot.active::after { width: 22px; background: var(--sym-blue); }

  /* Symphony: retain the coverflow composition without leaking off-canvas. */
  .hero-collage { width: 100vw; max-width: 100vw; overflow: clip; }
  .coverflow-card { width: min(470px, calc(100vw - 40px)); height: auto; aspect-ratio: 47 / 31; }
  .coverflow-card-inner { padding: clamp(16px, 5vw, 26px); }
  .stack-card { min-height: 0; padding: 32px 24px; }
  .stack-inner { grid-template-columns: 1fr; gap: 20px; }
  .stack-num { font-size: clamp(58px, 22vw, 78px); }
  .workflow-layout { grid-template-columns: 1fr; gap: 36px; }
  .workflow-rail { position: static; overflow-x: auto; }
  .rail-wrap { display: flex; gap: 18px; min-width: max-content; padding-bottom: 8px; }
  .rail-line, .rail-line-fill { display: none; }
  .rail-item { min-height: 44px; }

  /* Amazon and NGA: stack evidence grids and constrain decorative canvases. */
  :is(.impact-grid, .by-grid) { grid-template-columns: minmax(0, 1fr); }
  :is(.im-item, .by-item),
  :is(.im-item, .by-item):nth-child(odd),
  :is(.im-item, .by-item):nth-child(even) {
    min-width: 0;
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  :is(.im-item, .by-item):last-child { border-bottom: 0; }
  .hero-orb { max-width: 120vw; max-height: 120vw; }

  .jr-path { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .jr-stage { width: 100%; padding: 18px 0; }
  .jr-dot { margin: 0; justify-self: center; transform: rotate(90deg); }
  .closing-inner { width: 100%; padding-inline: clamp(20px, 7vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}