/* ==========================================================================
   Shared Scoped Rich-Text Typography (.rich-text)
   Restores semantic prose styles (lists, quotes, code, headings, links,
   inline formatting, paragraph rhythm) for Backoffice rich-text HTML
   containers without leaking to custom design lists outside .rich-text.
   ========================================================================== */

.rich-text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Paragraph & block rhythm (supports both <p> and Trix <div> blocks) */
.rich-text p {
  margin-block-start: 0;
  margin-block-end: var(--space-4, 1rem);
}

.rich-text > div + div,
.rich-text > p + div,
.rich-text > div + p {
  margin-block-start: var(--space-3, 0.75rem);
}

.rich-text p:last-child,
.rich-text > div:last-child {
  margin-block-end: 0;
}

/* Unordered & ordered lists */
.rich-text ul,
.rich-text ol {
  margin-block-start: 0;
  margin-block-end: var(--space-4, 1rem);
  padding-inline-start: var(--space-5, 1.5rem);
  text-align: start;
}

.rich-text ul {
  list-style: disc;
  list-style-type: disc;
}

.rich-text ol {
  list-style: decimal;
  list-style-type: decimal;
}

.rich-text ul ul,
.rich-text ol ul {
  list-style-type: circle;
  margin-block-start: var(--space-2, 0.5rem);
  margin-block-end: var(--space-2, 0.5rem);
}

.rich-text ul ul ul,
.rich-text ol ul ul,
.rich-text ol ol ul {
  list-style-type: square;
}

.rich-text ol ol,
.rich-text ul ol {
  list-style-type: lower-alpha;
  margin-block-start: var(--space-2, 0.5rem);
  margin-block-end: var(--space-2, 0.5rem);
}

.rich-text ol ol ol,
.rich-text ul ol ol {
  list-style-type: lower-roman;
}

.rich-text li {
  display: list-item;
  margin-block-end: var(--space-2, 0.5rem);
  padding-inline-start: var(--space-1, 0.25rem);
  line-height: var(--lh-prose, 1.6);
}

.rich-text li:last-child {
  margin-block-end: 0;
}

.rich-text li::marker {
  color: var(--color-muted);
}

.rich-text ul:last-child,
.rich-text ol:last-child {
  margin-block-end: 0;
}

/* Blockquote */
.rich-text blockquote {
  margin-block: var(--space-5, 1.5rem);
  margin-inline: 0;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
  border-inline-start: 3px solid var(--color-ink);
  background-color: var(--color-surface-alt);
  color: var(--color-text-soft);
  font-style: italic;
  border-radius: 0 var(--radius-sm, 5px) var(--radius-sm, 5px) 0;
  text-align: start;
}

.rich-text blockquote:first-child {
  margin-block-start: 0;
}

.rich-text blockquote:last-child,
.rich-text blockquote > :last-child {
  margin-block-end: 0;
}

/* Code & preformatted blocks */
.rich-text code,
.rich-text pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.rich-text :not(pre) > code {
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background-color: var(--color-surface-alt);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm, 5px);
  overflow-wrap: break-word;
}

.rich-text pre {
  font-size: var(--fs-label, 0.875rem);
  line-height: var(--lh-normal, 1.5);
  margin-block-start: 0;
  margin-block-end: var(--space-4, 1rem);
  margin-inline: 0;
  padding: var(--space-4, 1rem);
  background-color: var(--color-surface-alt);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm, 5px);
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
  text-align: start;
}

.rich-text pre:last-child {
  margin-block-end: 0;
}

.rich-text pre code {
  padding: 0;
  background: transparent;
  border: 0;
  font-size: inherit;
  color: inherit;
}

/* Headings scale (h2-h4 + Trix heading1 h1) */
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4 {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: -0.01em;
  margin-block-end: var(--space-3, 0.75rem);
}

.rich-text h1,
.rich-text h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: var(--lh-title, 1.15);
  margin-block-start: var(--space-6, 2rem);
}

.rich-text h3 {
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: var(--lh-card, 1.25);
  margin-block-start: var(--space-5, 1.5rem);
}

.rich-text h4 {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: var(--lh-card, 1.25);
  margin-block-start: var(--space-4, 1rem);
}

.rich-text h1:first-child,
.rich-text h2:first-child,
.rich-text h3:first-child,
.rich-text h4:first-child {
  margin-block-start: 0;
}

/* Inline formatting */
.rich-text strong,
.rich-text b {
  font-weight: var(--fw-semibold, 600);
}

.rich-text em,
.rich-text i {
  font-style: italic;
}

.rich-text s,
.rich-text del {
  text-decoration: line-through;
}

/* Links */
.rich-text a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition, 200ms ease), text-decoration-color var(--transition, 200ms ease), opacity var(--transition, 200ms ease);
}

.rich-text a:hover {
  color: var(--color-muted);
  text-decoration-color: var(--color-muted);
  opacity: 0.85;
}

/* Dark / inverted surface adaptation */
.about-faculty .rich-text h1,
.about-faculty .rich-text h2,
.about-faculty .rich-text h3,
.about-faculty .rich-text h4,
.about-faculty .rich-text a,
.testimonios .rich-text h1,
.testimonios .rich-text h2,
.testimonios .rich-text h3,
.testimonios .rich-text h4,
.testimonios .rich-text a,
.razon .rich-text h1,
.razon .rich-text h2,
.razon .rich-text h3,
.razon .rich-text h4,
.razon .rich-text a {
  color: var(--color-on-dark);
}

.about-faculty .rich-text blockquote,
.testimonios .rich-text blockquote,
.razon .rich-text blockquote {
  border-inline-start-color: var(--color-on-dark);
  background-color: var(--color-dark-soft);
  color: var(--color-on-dark-muted);
}

.about-faculty .rich-text :not(pre) > code,
.about-faculty .rich-text pre,
.testimonios .rich-text :not(pre) > code,
.testimonios .rich-text pre,
.razon .rich-text :not(pre) > code,
.razon .rich-text pre {
  background-color: var(--color-dark-soft);
  color: var(--color-on-dark);
  border-color: var(--color-muted);
}

/* Responsive mobile step (<=640px, Rule 09) */
@media (max-width: 40rem) {
  .rich-text h1,
  .rich-text h2 {
    font-size: clamp(1.1875rem, 4.5vw, 1.35rem);
    margin-block-start: var(--space-5, 1.5rem);
  }

  .rich-text h3 {
    font-size: clamp(1.0625rem, 4vw, 1.1875rem);
    margin-block-start: var(--space-4, 1rem);
  }

  .rich-text h4 {
    font-size: 1rem;
    margin-block-start: var(--space-3, 0.75rem);
  }

  .rich-text ul,
  .rich-text ol {
    padding-inline-start: 1.25rem;
  }

  .rich-text blockquote {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    margin-block: var(--space-4, 1rem);
  }

  .rich-text pre {
    padding: var(--space-3, 0.75rem);
    font-size: var(--fs-sm, 0.8125rem);
  }
}