/*
 * sidebar.css — sidebar fixa (sticky) em CSS nativo.
 *
 * Substitui o theia-sticky-sidebar.js do template de referência: nenhum JS é
 * usado nem enfileirado para esse comportamento. Os wrappers .mecStickyHolder
 * e .theiaStickySidebar continuam no markup convertido apenas como pontos de
 * ancoragem — aqui eles são estilizados, não manipulados por script.
 *
 * Duas condições precisam valer ao mesmo tempo:
 *
 * 1. Nenhum ancestral pode criar scroll container. Por isso .mec_viewport usa
 *    `overflow-x: clip` (em layout.css) e não `overflow: hidden` — clip
 *    recorta sem tornar o elemento rolável.
 * 2. A coluna da sidebar precisa ter a altura da linha do grid. O grid usa
 *    `align-items: start` para o conteúdo não esticar, o que dava à sidebar
 *    apenas a altura do próprio conteúdo — e sticky sem folga no pai não anda.
 *    Daí o `align-self: stretch` abaixo, com o holder ocupando 100%.
 *
 * Depende de tokens.css e layout.css.
 */

/*
 * Altura de referência para o deslocamento superior: a barra sticky do
 * cabeçalho (task 018) sobrepõe o topo da viewport, então a sidebar para
 * logo abaixo dela.
 */
:root {
	--mec-sticky-offset: 5rem;
}

/* Sticky só onde a sidebar fica ao lado do conteúdo (>= 992px). */
@media (width >= 992px) {
	.mec_sidebar .theiaStickySidebar {
		position: sticky;
		inset-block-start: var(--mec-sticky-offset);
	}

	/*
	 * A coluna estica até a altura da linha e o holder acompanha: é essa folga
	 * que o sticky percorre enquanto a página rola.
	 */
	.mec_sidebar {
		align-self: stretch;
	}

	.mec_sidebar .mecStickyHolder {
		height: 100%;
		overflow: visible;
	}
}

/* Abaixo de 992px o layout empilha e o sticky é desnecessário. */
@media (width <= 992px) {
	.mec_sidebar .theiaStickySidebar {
		position: static;
	}
}

/* Respeita quem pediu menos movimento (reforçado na task 025). */
@media (prefers-reduced-motion: reduce) {
	.mec_sidebar .theiaStickySidebar {
		transition: none;
	}
}