/* Job Application Pipeline case-study page — page-specific component styles.
   Shared section/button/prose/card rules live in core.css's SHARED section.
   3-way-split sections (Control boundaries, Ownership) reuse the same 3-color
   triad (--cat-resume / --cat-coverletter / --cat-subcard) for visual
   consistency across the page, not because the semantics are identical. */

.hero h1 {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.diagram-placeholder {
  background: var(--code-bg);
  border-radius: var(--radius-lg);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  text-align: center;
  padding: var(--space-5);
}

.results-block {
  max-width: var(--reading-width);
  margin: 0 auto;
}

.result-item {
  margin-bottom: var(--space-6);
}

/* Diagram carousel: shared carousel/card/overlay rules live in core.css's
   SHARED section. This section only holds the SVG-diagram-specific wrapper
   and the divider card, both unique to this page. */

.card-svg-wrap {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.card-svg-wrap svg {
  width: 100%;
  height: auto;
  max-height: 100%;
}

@media (max-width: 640px) {
  .card-svg-wrap {
    height: 340px;
  }
}

.divider-card {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.divider-card .divider-icon {
  width: 40px;
  height: 40px;
  stroke: var(--accent);
  margin-bottom: var(--space-4);
}

.divider-card h3 {
  min-height: 0;
}

.divider-card p {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 260px;
}