/*
 * Hero section — text-left + system-diagram-right layout.
 * Source: brief.json > design_system > components > hero
 */

.hero {
  background-color: var(--color-bg);
  padding: var(--section-padding);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}

/* Content (left) */
.hero__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero__eyebrow {
  /* inherits .eyebrow */
}

.hero__headline {
  /* inherits .display */
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--color-orange);
  padding-left: 1.25rem;
}

.hero__headline-line {
  display: block;
}

.hero__headline-line--accent {
  color: var(--color-teal);
}

.hero__subline {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 480px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Visual (right) */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__diagram-img {
  width: 100%;
  max-width: 540px;
}

/* ── Flow diagram (code fallback) ─────────────────────── */

.flow-diagram {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
}

.flow-diagram__node {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-card);
}

.flow-diagram__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 0.625rem;
}

.flow-diagram__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.flow-diagram__examples li {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.6em;
}

.flow-diagram__connector {
  width: 1px;
  height: 2rem;
  background: repeating-linear-gradient(
    to bottom,
    rgba(89, 240, 210, 0.4) 0,
    rgba(89, 240, 210, 0.4) 4px,
    transparent 4px,
    transparent 8px
  );
  margin-inline: auto;
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }


  .flow-diagram {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: var(--section-padding-mobile);
  }
}