/* ======================================================
   BC — components.css
   ====================================================== */

/* ── Dark / surface utilities ── */
.bg-dark    { background: var(--primary); }
.bg-surface { background: var(--surface); }
.bg-surface-alt { background: var(--surface-alt); }

/* ── Section rule ── */
.section-rule { width: 2.5rem; height: 1px; background: var(--gold); display: block; }

/* ── Micro text ── */
.micro-text { font-size: .75rem; color: var(--muted); line-height: 1.6; }

/* ── Divider with text ── */
.divider-text { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── HR gold ── */
.hr-gold { border: none; border-top: 1px solid var(--border-gold); margin: 2rem 0; }

/* ── Image placeholder ── */
.img-placeholder { width: 100%; height: 100%; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem; min-height: 240px; }
.img-placeholder span { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

/* ── Spec table ── */
.spec-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.spec-table th { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 500; width: 38%; }
.spec-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }