/* ==========================================================================
   Class 11 Biology — supplementary styles (Chapters 1-4 diagram support)
   Additive only: reuses design tokens (--green, --green-deep, --surface,
   --ink-soft, --line-soft, --radius, --shadow-card, --font-display) already
   defined in the shared css/style.css. Does not override any existing rule.
   ========================================================================== */

.diagram-section { margin: 18px 0 6px; }

.diagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.diagram-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

.diagram-svg-wrap { width: 100%; }
.diagram-svg-wrap svg { width: 100%; height: auto; display: block; }

.diagram-title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--green-deep);
  text-align: center;
}
[data-theme="dark"] .diagram-title { color: var(--green); }

.diagram-caption {
  margin-top: 4px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.4;
}

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