/* ============================================================
   WORKFLOW.CSS — Design Workflow with Claude + Cursor
   ============================================================ */

/* Hero image zone — mirrors cs-hero-screens-zone sizing */
.cs-hero-img-zone {
  position: relative;
  flex: 1;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-hero-workflow-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Project overview — single-column statement (replaces two-col ps) */
.cs-hero-overview {
  flex-shrink: 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Two stacked images for Section 4 */
.cs-stacked-imgs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

@media (max-width: 768px) {
  .cs-hero-img-zone { min-height: 200px; }
}

/* (Montserrat experiment removed — tiemposText serif applied via core.css) */