/* ===========================================================================
 * text_paragraph_widget — atomic paragraph (Tier 1, WP `core/paragraph`)
 *
 * Shape:
 *   .text-paragraph-widget                  — root shell (carries modifiers)
 *     > .tpw-text                           — editable region (design panel attaches here)
 *
 * Modifier classes ride on the shell — they cascade through to .tpw-text
 * and onward to whatever inline tags the user typed (<strong>, <em>, …).
 * ========================================================================= */

.text-paragraph-widget {
  margin: 0;
  padding: 0.5rem 0;
  font-family: var(--mc-theme-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  line-height: 1.55;
  word-wrap: break-word;
  color: inherit;
}

/* Editable region; rules also attach via the design panel. */
.text-paragraph-widget > .tpw-text {
  font-family: inherit;
}

/* ── Alignment modifiers ─────────────────────────────────────────────────── */
.text-paragraph-widget.tpw-align-left    { text-align: left;    }
.text-paragraph-widget.tpw-align-center  { text-align: center;  }
.text-paragraph-widget.tpw-align-right   { text-align: right;   }
.text-paragraph-widget.tpw-align-justify { text-align: justify; }

/* ── Font-size scale ─────────────────────────────────────────────────────── */
.text-paragraph-widget.tpw-size-small  { font-size: 0.875rem; }
.text-paragraph-widget.tpw-size-medium { font-size: 1rem;     }
.text-paragraph-widget.tpw-size-large  { font-size: 1.25rem;  }
.text-paragraph-widget.tpw-size-xlarge { font-size: 1.5rem;   }

/* ── Weight ──────────────────────────────────────────────────────────────── */
.text-paragraph-widget.tpw-weight-bold { font-weight: 700; }

/* ── Empty-state placeholder (design mode) ───────────────────────────────── */
.text-paragraph-widget > .tpw-text:empty::before {
  content: "Empty paragraph — click to edit";
  color: #a3a3a3;
  font-style: italic;
}