/* ============================================
   ARCHITECTURE SECTION
   3-Layer System Visualization
   ============================================ */

.architecture-section {
  background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
}

.architecture-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .architecture-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .architecture-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* Architecture Card */
.architecture-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.architecture-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* Skill Category Boxes */
.skill-categories {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skill-category {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: background var(--duration-base) var(--ease-out);
}

.skill-category:hover {
  background: rgba(255, 255, 255, 0.05);
}

.skill-category-name {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
}

.skill-category-items {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Subagent Workflow Boxes */
.subagent-workflows {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subagent-workflow {
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid;
  transition: all var(--duration-base) var(--ease-out);
}

.subagent-workflow:hover {
  transform: translateX(4px);
}

.subagent-workflow.review {
  background: rgba(139, 92, 246, 0.1);
  border-left-color: #A78BFA;
}

.subagent-workflow.plan {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #60A5FA;
}

.subagent-workflow.build {
  background: rgba(16, 185, 129, 0.1);
  border-left-color: #34D399;
}

.subagent-workflow.debug {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: #FCD34D;
}

.subagent-workflow-name {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
}

.subagent-workflow.review .subagent-workflow-name {
  color: #A78BFA;
}

.subagent-workflow.plan .subagent-workflow-name {
  color: #60A5FA;
}

.subagent-workflow.build .subagent-workflow-name {
  color: #34D399;
}

.subagent-workflow.debug .subagent-workflow-name {
  color: #FCD34D;
}

.subagent-workflow-items {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Orchestrator Feature Boxes */
.orchestrator-features {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.orchestrator-feature {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: background var(--duration-base) var(--ease-out);
}

.orchestrator-feature:hover {
  background: rgba(255, 255, 255, 0.05);
}

.orchestrator-feature-name {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
}

.orchestrator-feature-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Example Flow */
.architecture-example {
  margin-top: 3rem;
  padding: 1.5rem;
  background: rgba(255, 107, 0, 0.1);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--primary);
}

.architecture-example strong {
  color: var(--primary);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
  .architecture-card {
    padding: var(--space-6);
  }
}