/* Cases section — only what inline styles can't do: scrollbars, dialog, focus, media queries */

.cases-viewport { position: relative; overflow: hidden; }
.cases-viewport.cases-plain-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cases-strip {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 24px;
  will-change: transform;
}
.cases-plain-scroll .cases-strip {
  scroll-snap-type: x mandatory;
}
.case-card-wrap { flex: 0 0 auto; scroll-snap-align: center; }

.case-card {
  display: block;
  width: 340px;
  padding: 0;
  margin: 0;
  border: 1px solid #1E2229;
  background: #0D0F13;
  cursor: pointer;
  position: relative;
  text-align: left;
  transition: border-color 0.25s ease;
}
.case-card img { display: block; width: 100%; height: 220px; object-fit: cover; filter: grayscale(20%) contrast(1.1) brightness(0.92); }
.case-card-index {
  position: absolute; top: 12px; left: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  color: #E8B25C; background: rgba(10,12,15,0.7); padding: 4px 8px;
}
.case-card-meta { display: block; padding: 16px; }
.case-card-meta strong {
  display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 20px; color: #F5F1E8; margin-bottom: 6px;
}
.case-card-meta em {
  display: block; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A9099;
}
.case-card.is-focus {
  border: 1px dashed #E8B25C;
  outline-offset: 4px;
}
.case-card.is-focus::after {
  content: ''; position: absolute; top: -5px; right: -5px; width: 8px; height: 8px; border-radius: 50%; background: #E8B25C;
}
.case-card:focus-visible { outline: 2px solid #4FD1E0; outline-offset: 2px; }

.cases-nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px; }
.cases-prev, .cases-next {
  width: 40px; height: 40px; border: 1px solid #1E2229; background: #0D0F13; color: #F5F1E8; cursor: pointer; font-size: 16px;
}
.cases-prev:hover, .cases-next:hover { border-color: #E8B25C; color: #E8B25C; }

/* fallback list is visually hidden once JS has built the interactive strip */
.js .cases-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cases-fallback { border-top: 1px solid #1E2229; padding-top: 24px; }

/* ---- detail dialog ---- */
.case-dialog {
  position: fixed; inset: 0; z-index: 200; background: rgba(6,7,9,0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.case-dialog[hidden] { display: none; }
.case-dialog-inner {
  background: #0A0C0F; border: 1px solid #1E2229; max-width: 1280px; width: 100%; max-height: 92vh; overflow: auto; position: relative;
}
.case-dialog-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px;
  border: 1px solid #1E2229; background: #0D0F13; color: #F5F1E8; cursor: pointer;
}
.case-dialog-close:hover { border-color: #E8B25C; color: #E8B25C; }
.case-dialog-grid { display: grid; grid-template-columns: 36% 64%; min-height: 480px; }
.case-dialog-panel { padding: 56px 36px 36px; border-right: 1px solid #1E2229; }
.case-dialog-type { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #4FD1E0; margin: 0 0 14px; }
.case-dialog-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 32px; line-height: 1.15; color: #F5F1E8; margin: 0 0 24px; }
.case-dialog-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A9099; margin: 20px 0 10px; }
.case-dialog-findings { margin: 0; padding-left: 18px; color: #A8AEB6; font-size: 14px; line-height: 1.6; display: grid; gap: 8px; }
.case-dialog-dx { color: #E8E4DC; font-size: 15px; line-height: 1.6; margin: 0; }
.case-dialog-technique, .case-dialog-source {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: #8A9099; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #1E2229;
}
.case-dialog-viewer { position: relative; padding: 24px; background: #06070A; }
.case-viewer-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; min-height: 420px; }
.case-viewer-grid.count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.case-viewer-grid.count-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.case-viewer-grid.count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.case-panel { position: relative; border: 1px solid #1E2229; background: #0A0C0F; overflow: hidden; touch-action: none; }
.case-panel canvas { width: 100%; height: 100%; display: block; cursor: ns-resize; }
.case-panel-tag {
  position: absolute; top: 8px; left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: #E8B25C; background: rgba(10,12,15,0.7); padding: 3px 7px; pointer-events: none;
}
.case-panel:focus-visible { outline: 2px solid #4FD1E0; outline-offset: -2px; }
.case-viewer-rail { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.case-rail-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 1px solid #1E2229; background: #0A0C0F; cursor: pointer; }
.case-rail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.case-viewer-readout {
  position: absolute; bottom: 12px; right: 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; color: #8A9099; margin: 0;
}

@media (max-width: 900px) {
  .case-dialog-grid { grid-template-columns: 1fr; }
  .case-dialog-panel { border-right: none; border-bottom: 1px solid #1E2229; padding: 48px 24px 24px; }
  .case-viewer-grid { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-card { transition: none; }
}