/* process.css — inherits site theme; override per-page if needed */
@import url("styles.css");

/* ---- Process page (cards + gates + toolchain) ---- */
.proc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}
.int-card.proc-card { padding: 26px; }
.proc-sub { color: var(--muted); font-weight: 700; margin: 0 0 10px; }
.proc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.proc-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.proc-list { list-style: none; padding: 0; margin: 0; }
.proc-list li { position: relative; padding-left: 16px; margin: 6px 0; }
.proc-list li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

.gate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.gate-card { padding: 20px; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.tool-card { padding: 20px; }

@media (max-width: 1100px) {
  .proc-grid { grid-template-columns: 1fr; }
  .proc-columns { grid-template-columns: 1fr; }
  .gate-grid { grid-template-columns: 1fr 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
}