/* ════════════════════════════════════════════════════════════
   05-components.css — The Compositor's Garden
   Self-contained document elements: figures, callouts,
   the planting calendar, the teacher's sayings block.
   Each component is independent — adding or removing a
   component type touches only this file.
   ════════════════════════════════════════════════════════════ */

/* ── Figure + caption ────────────────────────────────────────── */
figure {
  margin:       var(--space-lg) 0;
  break-inside: avoid;
}

figcaption {
  font-family:  var(--font-ui);
  font-size:    var(--text-xs);
  color:        var(--ink-faint);
  line-height:  var(--lh-caption);
  margin-top:   var(--space-sm);
  padding-top:  var(--space-xs);
  border-top:   1px solid var(--rule);
}

/* ── Callout box ─────────────────────────────────────────────── */
.callout {
  margin:        var(--space-lg) 0;
  padding:       var(--space-md) var(--space-lg);
  background:    var(--highlight);
  border-left:   3px solid var(--accent);
  border-radius: 0 3px 3px 0;
  break-inside:  avoid;

  /* Ensure tinted background prints                            */
  print-color-adjust:         exact;
  -webkit-print-color-adjust: exact;
}

.callout-label {
  font-family:    var(--font-ui);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  var(--space-xs);
}

.callout p {
  font-family:  var(--font-body);
  font-size:    1.05rem;
  line-height:  1.65;
  color:        var(--ink-mid);
  text-indent:  0 !important;
}

.callout p + p {
  margin-top:  var(--space-xs);
  text-indent: 0 !important;
}

/* ── Teacher's sayings collection (ch. 4) ───────────────────── */
.teachers-sayings {
  margin: var(--space-xl) 0;
}

/* individual .saying defined in 03-typography.css             */

/* ── Planting calendar ───────────────────────────────────────── */
/* multicol defined in 04-layout.css; plant-entry, plant-name,
   plant-note also in 04-layout.css                            */

/* ── Horizontal rule ─────────────────────────────────────────── */
hr {
  border:       none;
  border-top:   1px solid var(--rule);
  margin:       var(--space-lg) 0;
}