/* =====================================================================
   Campaign framework diagram (seasonal-campaign-system)
   Inputs list -> central framework panel -> outputs list, plus a footer
   outcomes row. Source PNG repeats real "Spring Campaign" lifestyle
   photography on the output side — dropped for the same reason as
   image-management-system (no real asset, case studies stay
   anonymised); the output list stands on its own instead.
   ===================================================================== */

.cfdiagram {
  --cf-bg: #1a1810;
  --cf-card: #221f16;
  --cf-text: #f4efe3;
  --cf-muted: #948d7c;
  --cf-border: #3a3527;
  --cf-radius: 16px;

  position: relative;
  background: var(--cf-bg);
  color: var(--cf-text);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: var(--space-6);
  margin: var(--space-4) 0;
}

@media (min-width: 48rem) {
  .cfdiagram { padding: var(--space-8); }
}

@media (min-width: 64rem) {
  .cfdiagram { padding: var(--space-12); }
}

.cfdiagram .diagram-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

.cf-section-head {
  margin-bottom: var(--space-6);
}

.cf-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-muted);
  margin: 0 0 var(--space-2);
}

.cfdiagram h2 {
  font-family: var(--font-display);
  color: var(--cf-text);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

@media (min-width: 48rem) {
  .cfdiagram h2 { font-size: var(--fs-xl); }
}

@media (min-width: 64rem) {
  .cfdiagram h2 { font-size: var(--fs-2xl); }
}

.cf-subtitle {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--cf-muted);
  margin: 0;
  max-width: 42rem;
}

/* Body: inputs / framework / outputs ---------------------------------- */

.cf-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cf-io-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cf-muted);
  margin: 0 0 var(--space-3);
}

.cf-io-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cf-io;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cf-io-list li {
  counter-increment: cf-io;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--cf-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
}

.cf-io-list li::before {
  content: counter(cf-io);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--cf-muted);
  flex-shrink: 0;
}

.cf-io-list .diagram-icon {
  color: var(--cf-text);
}

.cf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cf-muted);
  padding: var(--space-1) 0;
}

.cf-arrow .diagram-icon {
  transform: rotate(90deg);
}

/* Framework panel -------------------------------------------------------- */

.cf-framework {
  background: var(--cf-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  padding: var(--space-6);
}

.cf-framework h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  margin: 0 0 var(--space-4);
  text-align: center;
}

.cf-framework-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 30rem) {
  .cf-framework-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cf-framework-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.cf-framework-card .diagram-icon {
  color: var(--cf-text);
}

.cf-framework-card span {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.cf-customer-types {
  border-top: 1px solid var(--cf-border);
  padding-top: var(--space-4);
  text-align: center;
}

.cf-type-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.cf-type-list li {
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--cf-muted);
}

/* Footer outcomes row ----------------------------------------------------- */

.cf-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--cf-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.cf-footer-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.cf-footer-item .diagram-icon {
  color: var(--cf-text);
}

@media (min-width: 48rem) {
  .cf-footer {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Desktop — three-column row, same container-cap-safe breakpoint as the
   other diagrams (see project memory on the 1024–1151px pinch zone) */

@media (min-width: 78rem) {
  .cf-body {
    flex-direction: row;
    align-items: stretch;
  }

  .cf-io {
    flex: 0 1 14rem;
    min-width: 0;
  }

  .cf-framework {
    flex: 1;
    min-width: 0;
  }

  .cf-arrow {
    padding: 0;
  }

  .cf-arrow .diagram-icon {
    transform: none;
  }
}