/* Páginas legais: figuras temáticas por bloco. Não interferem no legal-nav sticky nem na leitura. */
/* Hero legal: coluna da arte >=480px no desktop. */
@media (min-width: 769px) {
    .page-hero__grid:has(.legal-hero-art) { grid-template-columns: minmax(0, 1fr) minmax(30rem, 38rem); }
    .legal-hero-art img { width: 100%; max-width: 38rem; max-height: none; height: auto; }
}

/* L1 (docs/design/FX.md): barra de leitura e índice ativo (js/fx-legal.js). Decorativos, nada cobre o texto.
   Com animation-timeline o CSS anda sozinho; sem ele, readingBar() escreve --fx-p. Sem JS e sem suporte: barra vazia. */
.legal-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-nav) + 1);
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ff9d00, var(--primary));
    pointer-events: none;
    transform: scaleX(var(--fx-p, 0));
    transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
    .legal-progress { animation: legal-progress linear both; animation-timeline: scroll(root); }
}
@keyframes legal-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.legal-nav a.is-active { border-left-color: var(--primary-ink); color: var(--ink); }
@media print { .legal-progress { display: none; } }

.legal-content section { display: flow-root; }
.legal-figure { margin: 0; }
.legal-figure img { display: block; width: 100%; height: auto; }

/* Bloco com figura: 2 colunas (texto + arte ~18rem), alternando o lado. */
@media (min-width: 769px) {
    .legal-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 18rem;
        column-gap: clamp(1.5rem, 4vw, 3rem);
        row-gap: 0;
        align-items: start;
    }
    .legal-row > * { grid-column: 1; }
    .legal-row > .legal-figure {
        grid-column: 2;
        grid-row: 1 / span 20;
        align-self: center;
    }
    .legal-row--left { grid-template-columns: 18rem minmax(0, 1fr); }
    .legal-row--left > * { grid-column: 2; }
    .legal-row--left > .legal-figure { grid-column: 1; }
}

@media (max-width: 768px) {
    .legal-hero-art img { width: min(100%, 20rem); max-height: none; height: auto; margin-inline: auto; }
    .legal-figure {
        width: min(100%, 14rem);
        margin: 0 auto var(--space-4);
    }
}
/* Hero legal: arte transparente sem o painel arredondado de .page-hero__art. */
.legal-hero-art {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Desktop: o grid de 2 colunas de .legal-row perdia para `.legal-content section { display: flow-root }`. */
@media (min-width: 769px) {
    .legal-content .legal-row { display: grid; align-items: center; }
}