/* ==========================================================================
   Páginas institucionais — institucional.php / inc/institucional.php
   Sem Figma próprio: segue a grade, os tokens e a tipografia das demais páginas.
   Desktop: menu 240 px à esquerda + texto com até 72 caracteres por linha.
   Celular (≤ 782 px): menu vira uma faixa rolável acima do texto.
   ========================================================================== */

.cdw-inst {
	padding-block: var(--wp--preset--spacing--space-48) var(--wp--preset--spacing--space-96);
}

/* ---------- Faixa (Figma: título em destaque sobre fundo da marca) ---------- */

.cdw-inst__faixa {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--space-48);
	padding: var(--wp--preset--spacing--space-48);
	border-radius: var(--wp--custom--radius--container);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
	text-align: center;
}

.cdw-inst__faixa .cdw-inst__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: var(--wp--custom--weight--heavy);
	letter-spacing: -0.02em;
	line-height: 1;
}

.cdw-inst__faixa .cdw-inst__frase,
.cdw-inst__faixa .cdw-inst__data {
	max-width: 60ch;
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--body);
	opacity: 0.9;
}

.cdw-inst__grade {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--space-48);
	align-items: start;
}

.cdw-inst__grade:not(:has(.cdw-inst__menu)) {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------- Menu entre as páginas ---------- */

.cdw-inst__menu {
	position: sticky;
	top: var(--wp--preset--spacing--space-24);
	padding: var(--wp--preset--spacing--space-16);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.cdw-inst__menu-titulo {
	margin: 0 0 var(--wp--preset--spacing--space-8);
	padding-inline: var(--wp--preset--spacing--space-8);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-inst__menu ul {
	display: grid;
	gap: var(--wp--preset--spacing--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-inst__menu a {
	display: block;
	padding: var(--wp--preset--spacing--space-8);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	text-decoration: none;
}

.cdw-inst__menu a:hover,
.cdw-inst__menu a:focus-visible {
	background: var(--wp--preset--color--surface-hover);
}

.cdw-inst__menu a[aria-current="page"] {
	background: var(--wp--preset--color--brand-subtle);
	color: var(--wp--preset--color--brand-text);
	font-weight: var(--wp--custom--weight--bold);
}

/* ---------- Em resumo (Figma "Institucional/Em resumo" 313:2658) ---------- */

.cdw-inst__resumo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-12, 12px);
	max-width: 72ch;
	margin-bottom: var(--wp--preset--spacing--space-24);
	padding: var(--wp--preset--spacing--space-24);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--brand-subtle);
}

.cdw-inst__resumo-titulo {
	margin: 0;
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-inst__resumo-lista {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-inst__resumo-lista li {
	display: flex;
	gap: var(--wp--preset--spacing--space-8, 10px);
	align-items: flex-start;
}

.cdw-inst__resumo-icone {
	flex-shrink: 0;
	width: 16px;
	margin-top: 0.2em;
	color: var(--wp--preset--color--brand-text);
	font-size: 16px;
}

.cdw-inst__resumo-lista span {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
}

/* ---------- Texto ---------- */

.cdw-inst__conteudo {
	max-width: 72ch;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
}

.cdw-inst__conteudo > :first-child {
	margin-top: 0;
}

.cdw-inst__conteudo h2 {
	margin: var(--wp--preset--spacing--space-32) 0 var(--wp--preset--spacing--space-8);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.3;
}

.cdw-inst__conteudo h3 {
	margin: var(--wp--preset--spacing--space-24) 0 var(--wp--preset--spacing--space-8);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-inst__conteudo p,
.cdw-inst__conteudo ul,
.cdw-inst__conteudo ol {
	margin: 0 0 var(--wp--preset--spacing--space-16);
}

.cdw-inst__conteudo ul,
.cdw-inst__conteudo ol {
	padding-left: var(--wp--preset--spacing--space-24);
}

.cdw-inst__conteudo li + li {
	margin-top: var(--wp--preset--spacing--space-8);
}

.cdw-inst__conteudo a {
	color: var(--wp--preset--color--brand-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cdw-inst__conteudo img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
}

/* ---------- Quadro automático (contato / condições da loja) ---------- */

.cdw-inst__quadro {
	max-width: 72ch;
	margin-top: var(--wp--preset--spacing--space-32);
	padding: var(--wp--preset--spacing--space-24);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

.cdw-inst__quadro-titulo {
	margin: 0 0 var(--wp--preset--spacing--space-16);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-inst__quadro-lista {
	display: grid;
	gap: var(--wp--preset--spacing--space-8);
	margin: 0;
}

.cdw-inst__quadro-lista > div {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-inst__quadro-lista dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--label);
}

.cdw-inst__quadro-lista dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-inst__quadro-lista a {
	color: var(--wp--preset--color--brand-text);
}

/* ---------- Celular ---------- */

@media (max-width: 782px) {
	.cdw-inst {
		padding-block: var(--wp--preset--spacing--space-24) var(--wp--preset--spacing--space-64);
	}

	.cdw-inst__faixa {
		margin-bottom: var(--wp--preset--spacing--space-24);
		padding: var(--wp--preset--spacing--space-24);
	}

	.cdw-inst__faixa .cdw-inst__titulo {
		font-size: var(--wp--preset--font-size--heading-lg);
	}

	.cdw-inst__grade {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--space-24);
	}

	.cdw-inst__menu {
		position: static;
		padding: 0;
		border: 0;
		background: none;
	}

	.cdw-inst__menu-titulo {
		display: none;
	}

	.cdw-inst__menu ul {
		display: flex;
		gap: var(--wp--preset--spacing--space-8);
		overflow-x: auto;
		padding-bottom: var(--wp--preset--spacing--space-4);
	}

	.cdw-inst__menu a {
		padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--full);
		white-space: nowrap;
	}

	.cdw-inst__quadro-lista > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}