/* ═══════════════════════════════════════════════════════════════════════
   TERRA FORM§ — METABOLISE PAGE (U of A·U·M)
   ═══════════════════════════════════════════════════════════════════════
   Page-scoped layout normalisation for /metabolise/index.html.

   Text colour for dark/light sections is handled centrally in
   terraforms.css under "SURFACE-TONE TEXT FORMULA". This file is
   purely layout + spacing + alignment.
   ═══════════════════════════════════════════════════════════════════════ */

/* Opening statement: force left text-align so prose reads as a paragraph,
   not a centred poster. */
.metabolise-page .opening-statement__inner {
    text-align: left;
}

/* Section titles and labels in evidence-section blocks left-align
   to match the reading rhythm. */
.metabolise-page .evidence-section .section-title,
.metabolise-page .evidence-section .section-label {
    display: block;
    text-align: left;
}
/* section-label defaults to burgundy — invisible on dark backgrounds */
.metabolise-page .evidence-section:not(.evidence-section--ivory):not(.evidence-section--cream) .section-label {
    color: var(--gold);
}

/* Reading column: evidence-content + thesis-content share the same
   max-width so prose paragraphs hold a single left edge across sections. */
.metabolise-page .evidence-content {
    max-width: 720px;
    text-align: left;
}
.metabolise-page .evidence-content p {
    margin-left: 0;
}
.metabolise-page .thesis-content {
    max-width: 720px;
}
.metabolise-page .thesis-content p {
    margin: 0 0 1rem 0;
}

/* mechanism-card list: breathing room between title and teacher list. */
.metabolise-page .mechanism-card h3 {
    margin-bottom: 1rem;
}
.metabolise-page .mechanism-card p:last-child {
    margin-top: 0.75rem;
}

/* ── SURFACE COLOUR FIX ─────────────────────────────────────────────────
   failure-card: has background: var(--ivory) but hardcoded element
   colours (var(--black) h3, var(--earth) p) are at specificity (0,1,1)
   and lose to body.theme-dark.theme-dark rules at (0,2,2), which resolve
   to var(--ivory). Ivory text on ivory card = invisible.
   Fix: set the custom properties on the card so the body rule resolves
   to the correct light-surface values. */

.metabolise-page .failure-card {
    --text-body:   var(--earth);
    --text-h3:     var(--black);
    --text-strong: var(--burgundy);
}

/* Teacher-flow bridge: centred close-out transition. */
.metabolise-page .teacher-flow {
    text-align: center;
}
.metabolise-page .teacher-flow__text,
.metabolise-page .teacher-flow__link {
    text-align: left;
}

@media (max-width: 768px) {
    .metabolise-page .evidence-content {
        max-width: 100%;
    }
    .metabolise-page .thesis-content {
        max-width: 100%;
    }
}