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

   Legibility / contrast fixes for light sections nested in dark pages
   live centrally in terraforms.css under "SURFACE-TONE TEXT FORMULA",
   not here. Anything that touches text colour on the basis of background
   tone belongs in that central rule, not in a page module.

   This file is purely layout + spacing + alignment.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────────
   Treatment: museum-tier devotional header. Generous vertical space,
   sacred horizontal rules around the phase label, gold halo + inner
   ring around the icon (medallion / aureole effect), soft radial glow
   suggesting candlelight in the centre of the cream gradient.
   Container loses its horizontal padding so all elements sit on the
   same central axis. */

.mother-page .mother-hero {
    min-height: 72vh;
    padding-top: 8rem;
    padding-bottom: 6rem;
    background:
        radial-gradient(
            ellipse at center 38%,
            rgba(212, 184, 114, 0.12) 0%,
            transparent 55%
        ),
        linear-gradient(180deg, #F8F5F0 0%, #F0EBE3 40%, #E8E0D8 100%);
    position: relative;
}

.mother-page .mother-hero .container {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* Phase label: thin gold rule on each side, like a museum caption.
   Uses inline-flex so the rules stay attached to the text. */
.mother-page .mother-hero__order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 2.75rem;
}
.mother-page .mother-hero__order::before,
.mother-page .mother-hero__order::after {
    content: '';
    flex: 0 0 42px;
    height: 1px;
    background: var(--gold-deep);
    opacity: 0.45;
}

/* Icon: a 7rem circular medallion with two concentric gold rings
   (aureole) and a soft inner glow. The symbol sits centred. */
.mother-page .mother-hero__icon {
    position: relative;
    width: 7rem;
    height: 7rem;
    margin: 0 auto 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: var(--gold-deep);
    line-height: 1;
}
.mother-page .mother-hero__icon::before {
    /* Outer halo ring */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--gold-deep);
    opacity: 0.45;
}
.mother-page .mother-hero__icon::after {
    /* Inner concentric ring */
    content: '';
    position: absolute;
    inset: 0.65rem;
    border-radius: 50%;
    border: 1px solid var(--gold-deep);
    opacity: 0.18;
}

/* Title: more presence, finer tracking, deeper colour weight. */
.mother-page .mother-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--charcoal);
    line-height: 1.05;
    margin: 0 0 1.75rem;
}

/* Subtitle: museum caption — mono uppercase with wide tracking, gold-deep,
   anchored by a small dot above. Replaces the previous Inter prose subtitle
   for a more iconographic feel. */
.mother-page .mother-hero__subtitle {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 auto;
    max-width: none;
    opacity: 0.85;
    position: relative;
    padding-top: 1.5rem;
}
.mother-page .mother-hero__subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-deep);
    opacity: 0.55;
}

@media (max-width: 768px) {
    .mother-page .mother-hero {
        min-height: 60vh;
        padding-top: 6rem;
        padding-bottom: 4.5rem;
    }
    .mother-page .mother-hero__icon {
        width: 5.5rem;
        height: 5.5rem;
        font-size: 2.75rem;
    }
    .mother-page .mother-hero__order {
        font-size: 0.65rem;
        letter-spacing: 0.28em;
        gap: 0.6rem;
    }
    .mother-page .mother-hero__order::before,
    .mother-page .mother-hero__order::after {
        flex-basis: 28px;
    }
    .mother-page .mother-hero__subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.32em;
    }
}

/* Opening statement: inner has max-width: 800px and is centred via margin
   auto. Force left text-align so the prose reads as a paragraph, not as a
   centred poster. */
.mother-page .opening-statement__inner {
    text-align: left;
}

/* Section titles and labels in the dark teachers-grid-section / evidence-
   section blocks were inheriting centred alignment from homepage-style
   section-title. Left-align to match the reading rhythm. */
.mother-page .teachers-grid-section .section-title,
.mother-page .evidence-section .section-title {
    text-align: left;
}
.mother-page .teachers-grid-section .section-label,
.mother-page .evidence-section .section-label {
    display: block;
    text-align: left;
}

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

/* Teacher-full-card: __details should sit directly under __desc with even
   spacing, not get pushed apart by flex-grow on __desc. */
.mother-page .teacher-full-card__details {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gold-15, rgba(212,184,114,0.15));
}
.mother-page .teacher-full-card__details p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 0.5rem 0;
    text-align: left;
}
.mother-page .teacher-full-card__details p:last-child {
    margin-bottom: 0;
}

/* The teacher-full-card is a DARK card — text-strong inside it inherits
   the dark-surface formula (ivory). For the __details "Refuses:" /
   "Mechanism:" labels we want gold instead, so use the surface-dark
   formula's gold token via the central system. */
.mother-page .teacher-full-card__details strong {
    color: var(--text-h4);   /* gold on dark surface, per the formula */
}

/* Essence pill — keep inline with the essence text rather than wrapping. */
.mother-page .teacher-full-card__phase {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-h4);
    opacity: 0.7;
    white-space: nowrap;
}

/* tradition-cards grid: equal-height cards, body paragraph drops to the
   same baseline so the eight cards line up at the bottom. */
.mother-page .tradition-cards {
    align-items: stretch;
}
.mother-page .tradition-card {
    display: flex;
    flex-direction: column;
}
.mother-page .tradition-card p:last-child {
    margin-top: auto;
}

/* mechanism-card list: breathing room between title and bullets, list
   aligns with the title's left edge. Colour comes from the surface-light
   formula (mechanism-card is a cream card on a dark page). */
.mother-page .mechanism-card h3 {
    margin-bottom: 1rem;
}
.mother-page .mechanism-card ul {
    margin: 0;
    padding-left: 1.25rem;
}
.mother-page .mechanism-card li {
    line-height: 1.7;
    margin-bottom: 0.6rem;
}
.mother-page .mechanism-card li:last-child {
    margin-bottom: 0;
}

/* Teacher-flow bridge: centred close-out transition. */
.mother-page .teacher-flow {
    text-align: center;
}

/* ── CLOSING CRESCENDO ─────────────────────────────────────────────
   The blockquote at the end of "What Transformation Produces" was a
   single <p> with <br><br> separators — visually noisy, no hierarchy.
   Rebuilt as a 3-part figure: thesis (display line), triad (centred
   list with rhythm markers), close (small-caps inscription). Reads as
   a chord that resolves rather than a wall of prose. */

.mother-page .mother-closing {
    margin: 4rem 0 1rem;
    padding: 3rem 1.5rem 3.5rem;
    text-align: center;
    border-top: 1px solid var(--gold-25, rgba(212,184,114,0.25));
    border-bottom: 1px solid var(--gold-25, rgba(212,184,114,0.25));
    position: relative;
    background:
        radial-gradient(
            ellipse at center,
            rgba(212, 184, 114, 0.04) 0%,
            transparent 70%
        );
}

/* THESIS — the crown formulation "Terror becomes terra becomes form" */
.mother-page .mother-closing__thesis {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    color: var(--burgundy);
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 0 0 2.5rem;
}

/* TRIAD — the three lines of what M produces. Unstyled list with a
   thin gold diamond between items rather than bullets. Centered,
   even rhythm, mid-weight prose colour. */
.mother-page .mother-closing__triad {
    list-style: none;
    margin: 0 auto 2.5rem;
    padding: 0;
    max-width: 56ch;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.mother-page .mother-closing__triad li {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    font-weight: 400;
    color: var(--earth);
    line-height: 1.6;
    position: relative;
}
/* Diamond separator between items (not on the last) */
.mother-page .mother-closing__triad li:not(:last-child)::after {
    content: '◆';
    display: block;
    margin: 1.25rem auto 0;
    font-size: 0.5rem;
    color: var(--gold-deep);
    opacity: 0.5;
    line-height: 1;
}

/* CLOSE — the resolution. Small-caps mono inscription, gold-deep,
   wide-tracked. Reads as the final chord. */
.mother-page .mother-closing__close {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0;
    padding-top: 1.5rem;
    position: relative;
}
/* Tiny dot above the close line — picks up the same separator language
   used in the hero subtitle */
.mother-page .mother-closing__close::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-deep);
    opacity: 0.55;
}

@media (max-width: 600px) {
    .mother-page .mother-closing {
        margin: 3rem 0 0.5rem;
        padding: 2.25rem 1rem 2.5rem;
    }
    .mother-page .mother-closing__thesis {
        margin-bottom: 1.75rem;
    }
    .mother-page .mother-closing__triad {
        gap: 0.9rem;
    }
    .mother-page .mother-closing__triad li:not(:last-child)::after {
        margin-top: 0.9rem;
    }
    .mother-page .mother-closing__close {
        letter-spacing: 0.3em;
        font-size: 0.72rem;
    }
}