/* ─── Legal page layout ─────────────────────────────────────────────────── */

.legal-layout {
    --page-accent: var(--tinkido-primary);
    --page-accent-bg: var(--tinkido-primary-bg);
    max-width: var(--width-fullscreen);
    width: 100%;
    background-color: var(--tinkido-paper);
    background-image: var(--texture-page);
    background-repeat: repeat;
    margin: 0 auto;
    padding: 0 0 3rem;
    flex: 1;
}

/* ─── Body ──────────────────────────────────────────────────────────────── */

.legal-body-image {
    box-sizing: border-box;
    width: min(calc(100% - 2rem), var(--measure-reading));
    margin: 1rem auto;
    text-align: center;
}

.legal-body-image picture {
    display: block;
}

.legal-body-image__img {
    display: block;
    width: 100%;
    max-height: 32rem;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

.legal-body {
    box-sizing: border-box;
    width: min(calc(100% - 2rem), var(--measure-reading));
    margin-inline: auto;
    margin-block: 1rem;
    overflow-wrap: anywhere;
}

.legal-layout > .breadcrumb {
    box-sizing: border-box;
    width: min(calc(100% - 2rem), var(--measure-reading));
    margin-inline: auto;
}

.legal-body .richtext {
    font-size: 1rem;
    line-height: var(--line-height-base);
    color: var(--tinkido-body-text);
}

.legal-body .richtext h2 {
    color: var(--tinkido-brown);
    margin-top: 2rem;
}

.legal-body .richtext h3 {
    color: var(--tinkido-ink);
    margin-top: 1.5rem;
}

.legal-body .richtext a {
    color: var(--tinkido-primary-text);
}

.legal-body__empty {
    color: var(--tinkido-gold-dim);
    font-style: italic;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .legal-body {
        width: min(100%, var(--measure-reading));
        margin-inline: 0;
        padding: 1rem;
    }

    .legal-body-image {
        width: calc(100% - 2rem);
        margin-block: 0.75rem;
    }

    .legal-body-image__img {
        max-height: 20rem;
    }

    .legal-layout > .breadcrumb {
        width: min(100%, var(--measure-reading));
        margin-inline: 0;
    }
}