/* Minimal clinical galleries: full images, overlay arrows and small dots. */
.case-carousel { position: relative; touch-action: pan-y; }
.case-carousel .case-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s ease; pointer-events: none; }
.case-carousel .case-image.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.case-controls { position: absolute; inset: 0; pointer-events: none; }
.case-controls[hidden] { display: none; }
.case-controls button { pointer-events: auto; cursor: pointer; border: 0; }
.case-arrow, .case-play { position: absolute; display: grid; place-items: center; padding: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.85); color: #242424; box-shadow: 0 1px 5px #0002; opacity: 0; transition: opacity .2s; }
.case-arrow { top: 50%; transform: translateY(-50%); line-height: 1; }
.case-controls .case-arrow svg { display: block; position: static; width: 16px; height: 16px; margin: 0; padding: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.case-prev { left: 10px; } .case-next { right: 10px; }
.case-play { top: 10px; right: 10px; font-size: 12px; }
.case-controls .case-arrow, .case-controls .case-play { opacity: 0; pointer-events: none; }
.case-controls .case-arrow:focus-visible, .case-controls .case-play:focus-visible { opacity: 1; pointer-events: auto; }
.case-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }
.case-controls .case-dot { width: 20px; height: 28px; padding: 0; background: transparent; display: grid; place-items: center; }
.case-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fffa; box-shadow: 0 1px 3px #0008; transition: transform .2s, background .2s; }
.case-dot[aria-current="true"]::after { background: #fff; transform: scale(1.35); }
.case-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .case-carousel .case-image, .case-dot::after { transition: none; } }

/* Desktop controls only; mobile keeps dots and swipe navigation. */
@media (min-width: 992px) {
 .case-carousel:hover .case-arrow, .case-carousel:hover .case-play,
 .case-carousel:focus-within .case-arrow, .case-carousel:focus-within .case-play { opacity: 1; pointer-events: auto; }
}
@media (max-width: 991.98px) {
 .case-controls .case-arrow, .case-controls .case-play { display: none; }
}