/* Voiceitt app case study — page-specific pieces (shared layout in case-study-voiceitt.css) */

/* Our Impact video (16:9, rounded) */
.voiceitt-app .cs-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.voiceitt-app .cs-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Prototypes & user testing */
.voiceitt-app .cs-testing img { width: 100%; flex: 0 1 auto; }
.voiceitt-app .cs-caption { text-align: center; color: var(--c-text); }
.voiceitt-app .cs-caption p { margin-bottom: 22.4px; }
.voiceitt-app .cs-caption p:last-child { margin-bottom: 1.4px; }

/* Final user flow: GIF + features */
.voiceitt-app .cs-flow { display: flex; gap: 24px; }
.voiceitt-app .cs-flow > * { flex: 0 1 auto; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.voiceitt-app .cs-flow__media { width: 35%; gap: 24px; }
.voiceitt-app .cs-flow__media img { border-radius: 8px; }
.voiceitt-app .cs-flow__content { width: 100%; gap: 16px; }
.voiceitt-app .cs-features--flow { gap: 80px; width: 100%; }

/* More projects backgrounds */
.voiceitt-app .cs-project--ds { background-image: url("/assets/uploads/2024/02/DS.jpg"); }
.voiceitt-app .cs-project--support { background-image: url("/assets/uploads/2024/02/Customer-support-home-page.jpg"); }

/* Tablet polish: two roomier feature columns next to the GIF */
@media (min-width: 768px) and (max-width: 1024px) {
  .voiceitt-app .cs-features--flow { gap: 24px; }
  .voiceitt-app .cs-features--flow .cs-feature { width: 50%; }
}

@media (max-width: 767px) {
  .voiceitt-app .cs-flow { flex-direction: column; }
  .voiceitt-app .cs-flow > * { width: 100%; }
}