/*
 * blocks.css — a tela onde os blocos da página são montados.
 *
 * O tema é clássico: `the_content()` devolve os blocos crus, sem o invólucro
 * de layout que um tema de blocos ganharia de graça. Quem dá largura a eles é
 * este arquivo, e os valores são os mesmos declarados no theme.json — se um
 * mudar, o outro tem de mudar junto, senão editor e frente discordam sobre
 * onde a linha começa.
 */

/*
 * As cores do editor apontam para os tokens do tema.
 *
 * O theme.json declara a paleta em hexadecimal, e não em `var()`, porque o
 * seletor de cores do editor vive FORA do iframe da tela: ali as variáveis do
 * tema não existem, e uma paleta em `var()` apareceria sem amostra nenhuma.
 * O hexadecimal resolve o seletor; estas linhas resolvem o resto — na frente,
 * a cor volta a sair do token, e portanto acompanha o modo escuro em vez de
 * ficar presa no valor claro.
 *
 * `:root:root` e não `:root` de propósito: o CSS de estilos globais que o core
 * imprime também mira `:root`, e a ordem entre ele e as folhas do tema não é
 * garantida. Dobrar o seletor ganha por especificidade, sem `!important`.
 */
:root:root {
	--wp--preset--color--accent: var(--mec-color-accent);
	--wp--preset--color--heading: var(--mec-color-heading);
	--wp--preset--color--text: var(--mec-color-text);
	--wp--preset--color--muted: var(--mec-color-muted);
	--wp--preset--color--background: var(--mec-color-bg);
	--wp--preset--color--surface: var(--mec-color-surface);
	--wp--preset--color--surface-alt: var(--mec-color-surface-alt);
	--wp--preset--color--surface-dark: var(--mec-color-surface-dark);
	--wp--preset--color--border: var(--mec-color-border);
	--wp--preset--color--inverse: var(--mec-color-inverse);
}

/* ---------- A tela de blocos ---------- */

.mec_blocks_canvas {
	/*
	 * `--mec-container-width` é a MESMA variável que a `.container` consome, e
	 * por isso o bloco comum acompanha os degraus do site — 750, 970 e 1170 —
	 * em vez de só bater a 1200px para cima. Medido antes de amarrar as duas:
	 * com 1170 fixo, a 768px o bloco saía 18px mais largo que o cabeçalho.
	 *
	 * `alignwide` é o degrau acima; `alignfull` não tem largura nenhuma e
	 * alcança a borda da tela.
	 */
	--mec-blocks-content: var(--mec-container-width);
	--mec-blocks-wide: var(--mec-container-wide);
}

/*
 * `:where()` mantém a especificidade em zero, para o bloco poder sobrescrever
 * qualquer uma destas medidas pelos próprios controles do editor.
 */
.mec_blocks_canvas > :where(:not(.alignfull)) {
	width: var(--mec-container-inline);
	max-width: var(--mec-blocks-content);
	margin-inline: auto;
	padding-inline: var(--mec-container-pad);
}

.mec_blocks_canvas > :where(.alignwide) {
	max-width: var(--mec-blocks-wide);
}

/*
 * O `box-sizing: border-box` do base.css faz o padding caber dentro do
 * max-width, então o bloco cheio só precisa zerar os dois.
 */
.mec_blocks_canvas > :where(.alignfull) {
	max-width: none;
	padding-inline: 0;
}

/*
 * Um bloco cheio encostado no topo ou no fim engole a folga que `.mec_main`
 * cobra — é o que faz um hero de capa colar no cabeçalho, como no modelo.
 */
.mec_blocks_page:first-child .mec_blocks_canvas > .alignfull:first-child {
	margin-block-start: calc(var(--mec-space-xl) * -1);
}

.mec_blocks_canvas > .alignfull:last-child {
	margin-block-end: calc(var(--mec-space-xl) * -1);
}

/*
 * Imagem de bloco nunca estoura a caixa.
 *
 * O `:not(.thumbnail-container *)` não é zelo. Sem ele esta regra vence o
 * `.thumbnail-container img { height: 100% }` do `layout.css` — (0,2,0) contra
 * (0,1,1) —, e toda miniatura da home fica com a altura natural da imagem,
 * escondida só pelo `overflow: hidden` da caixa. Passa despercebido enquanto a
 * proporção da caixa é parecida com a da foto; a capa da revista, que é
 * retrato dentro de um card deitado no celular, deixava 198px de branco num
 * card de 288 com o título branco por cima.
 */
.mec_blocks_canvas :is(img, video):not(.thumbnail-container *) {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Arranjos do bloco de lista
   ========================================================================== */

/*
 * As medidas vieram de MEDIR o modelo renderizado a 1280px, não de ler o CSS
 * dele. A diferença já custou caro neste tema: o corpo do título do post foi
 * copiado do `single.css` como `2.4em` e rendia 5% a mais que o modelo real.
 */

/*
 * `row-gap` no lugar da margem do card: margem não colapsa em item de grid, e
 * `.mec_posts .mec_post { margin-bottom }` (layout.css, a base do card fora do
 * bloco) deixava sobra embaixo da ÚLTIMA fileira — invisível numa lista de
 * coluna única, mas real numa grade de 3-4 colunas. O reset abaixo zera essa
 * margem só aqui, e quem separa as linhas passa a ser o gap do próprio grid.
 */
.mec_bloco_lista_itens {
	display: grid;
	row-gap: var(--mec-space-lg);
}

.mec_posts.mec_bloco_lista_itens .mec_post {
	margin-bottom: 0;
}

/* ---------- Grade ---------- */

/*
 * Medido no modelo: `grid`, colunas iguais e vão de 30px SÓ na horizontal — o
 * vão vertical vem do `row-gap` geral, acima.
 *
 * Colunas em `minmax(0, 1fr)` e não `1fr`: com `1fr` puro, um título longo sem
 * espaço força a coluna a crescer e desalinha a grade inteira.
 */
.mec_bloco_lista--grade .mec_bloco_lista_itens {
	grid-template-columns: repeat(var(--mec-lista-colunas, 3), minmax(0, 1fr));
	column-gap: var(--mec-gutter); /* 30px */
}

/*
 * Na grade o card empilha imagem sobre texto, e não lado a lado.
 *
 * O `post-card.php` é o mesmo das telas de listagem, onde a partir de 768px
 * ele vira duas colunas (`16.5rem 1fr`). Aqui isso não vale: a coluna da grade
 * tem 216px, e uma miniatura de 264px dentro dela estouraria a caixa.
 */
/*
 * `align-content: start`: a grade estica cada `.mec_post` pra altura da
 * fileira (stretch padrão do grid externo), e sem isto o miolo do card
 * — grid de duas linhas, thumb e conteúdo — espalhava o sobra de altura
 * ENTRE as linhas, empurrando o título pra baixo do thumb em vez de manter
 * os dois colados. Com `start`, a sobra vai para o fim do card, e o título
 * fica sempre logo abaixo do thumb, do card mais baixo ou mais alto da
 * fileira.
 */
.mec_bloco_lista--grade .mec_post {
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--mec-space-md);
}

/*
 * 16:9, pedido do PO — e no `.mec_thumb`, não no `.thumbnail-container`: é a
 * mesma correção do combo/destaque, pra badge de categoria (ancorada no
 * `.mec_thumb`, position:relative) não descolar da imagem.
 */
.mec_bloco_lista--grade .mec_thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.mec_bloco_lista--grade .mec_thumb > a,
.mec_bloco_lista--grade .thumbnail-container {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/* ---------- Colapso ---------- */

/*
 * Dois degraus, os dois medidos no modelo — e nenhum deles onde eu tinha
 * suposto na primeira escrita:
 *
 *   1280   3 e 4 colunas, vão de 30px
 *    992   3 e 4 colunas, vão de 20px
 *    768   3 e 4 colunas, vão de 20px
 *    667   coluna única
 *
 * O colapso é em 667, e não em 767: a 768 o modelo ainda mantém as colunas,
 * só apertando o vão. Colapsar antes deixaria a grade em coluna única numa
 * largura em que o modelo ainda mostra quatro.
 */
@media (width <= 1023px) {
	.mec_bloco_lista--grade .mec_bloco_lista_itens {
		column-gap: var(--mec-space-lg); /* 20px */
	}
}

@media (width <= 667px) {
	.mec_bloco_lista--grade .mec_bloco_lista_itens {
		grid-template-columns: minmax(0, 1fr);
		/*
		 * Empilhado, a margem do card sozinha não dá o respiro que o modelo
		 * mostra entre um e outro — daí o `row-gap` entrar só aqui.
		 */
		row-gap: var(--mec-space-lg);
	}
}

/* ---------- Lista ---------- */

/*
 * Dois portes, medidos no modelo da home a 1280px:
 *
 *            miniatura   título        respiro
 *   miúda     120×86     15px / 21px    25px
 *   grande    360×257    22px / 30,8px  30px
 *
 * A miniatura da grande fica nos 264px que o `post-card.php` já usa, e não nos
 * 360 do modelo: é decisão do PO, registrada no partial ("o card fica mais
 * textual"), e vale onde quer que o card apareça. A PROPORÇÃO, essa acompanha
 * o modelo — 7:5, como os outros cortes da home.
 */

.mec_bloco_lista--lista .mec_bloco_lista_itens {
	grid-template-columns: minmax(0, 1fr);
}

/* Mesma correção do combo/destaque/grade: aspect-ratio no .mec_thumb. */
.mec_bloco_lista--lista .mec_thumb {
	aspect-ratio: 7 / 5;
	overflow: hidden;
}

.mec_bloco_lista--lista .mec_thumb > a,
.mec_bloco_lista--lista .thumbnail-container {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/*
 * Porte miúdo: só o respiro entre cards mora aqui — 25px, contra os 30px do
 * `row-gap` geral, então o miúdo precisa do próprio valor.
 *
 * Miniatura e corpo do título ficam com o CARD, em layout.css e
 * responsive.css, e não com o bloco: `.mec_pl_sm` é uma variante do
 * `post-card.php`, e quem a usar depois — relacionados, sidebar — deve herdar
 * as mesmas medidas sem precisar do bloco.
 */
.mec_bloco_lista--miudo .mec_bloco_lista_itens {
	row-gap: 25px;
}

/*
 * Porte grande: com resumo, e o título no corpo de destaque. O respiro entre
 * cards vem do `row-gap` geral — 20px (--mec-space-lg), não os 30px medidos
 * no modelo pra esse porte (tabela acima); pedido explícito do PO foi baixar
 * o gap geral pra --mec-space-lg, e essa divergência é consequência disso.
 */

.mec_bloco_lista--grande .mec_post_title,
.mec_bloco_lista--grande .mec_post_title a {
	font-size: var(--mec-font-size-xl); /* 22px */
	line-height: 1.4;
}

/*
 * Empilha nos mesmos 667 da grade — o modelo trata os dois arranjos igual
 * nesse ponto, e divergir aqui criaria dois degraus para o leitor perceber.
 */
@media (width <= 667px) {
	.mec_bloco_lista--lista .mec_post {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Combo ---------- */

/*
 * Um card de abertura e o resto em lista miúda. Medido no modelo a 1280px:
 *
 *   abertura   360×180 (2:1)   título 20px
 *   demais     120×86  (7:5)   título 15px
 *
 * O arranjo é barato porque não traz componente novo: a abertura usa o corte
 * 2:1 que já existe (`omecanico-2026-related`), e o resto é o MESMO
 * `.mec_pl_sm` da lista miúda, com as medidas já definidas junto do card.
 *
 * As proporções da miniatura, porém, foram unificadas com o "destaque" (16:9
 * na abertura, 4:3 na lista) por pedido do PO — os dois arranjos passaram a
 * compartilhar o mesmo painel "Mostrar no destaque maior", e a regra mora na
 * seção do Destaque, mais abaixo, com o seletor cobrindo os dois.
 */

.mec_bloco_lista--combo .mec_bloco_lista_itens {
	grid-template-columns: minmax(0, 1fr);
}

/* A abertura empilha imagem sobre texto. */
.mec_bloco_lista--combo .mec_combo_abertura {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: var(--mec-space-lg);
}

/*
 * 20px literal: o token `lg` vale 18, e o modelo pede 20 aqui. O seletor
 * carrega `.mec_post` para vencer as regras de título do card em
 * responsive.css, que são de mesma especificidade e vêm depois na fila.
 */
.mec_bloco_lista--combo .mec_post.mec_combo_abertura .mec_post_title,
.mec_bloco_lista--combo .mec_post.mec_combo_abertura .mec_post_title a {
	font-size: 20px;
	line-height: 1.35;
}

/*
 * O modelo é fluido aqui — 20px a 1280, 16 em 992 e 768, 18 em 667, 16 a 390.
 * Dois degraus acertam três das quatro larguras medidas; 667 não é auditada.
 */
@media (width <= 1023px) {
	.mec_bloco_lista--combo .mec_post.mec_combo_abertura .mec_post_title,
	.mec_bloco_lista--combo .mec_post.mec_combo_abertura .mec_post_title a {
		font-size: var(--mec-font-size-md); /* 16px */
	}
}

/* ---------- Destaque (o "Featured Stories" do modelo) ---------- */

/*
 * As mesmas duas peças do combo — o card de abertura e a lista miúda —, só que
 * lado a lado em vez de empilhadas. Medido no modelo a 1280px: duas colunas de
 * 360px com 30px de vão, abertura ocupando a coluna da esquerda em altura
 * cheia e os miúdos empilhados na direita.
 *
 * Por isso o arranjo não traz card novo nem PHP próprio: a variante é a mesma
 * do combo, e o que muda mora aqui.
 */
.mec_bloco_lista--destaque .mec_bloco_lista_itens {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--mec-gutter);
	/* Cada coluna com a sua altura: a abertura não estica a lista ao lado. */
	align-items: start;
}

.mec_bloco_lista--destaque .mec_combo_abertura {
	grid-template-columns: minmax(0, 1fr);
	/* A margem do combo não vale aqui: quem separa as colunas é o vão. */
	margin-bottom: 0;
}

/*
 * Miniaturas do card de abertura ("destaque maior") e da lista ao lado —
 * 16:9 e 4:3, pedido do PO — valem tanto pro "destaque" quanto pro "combo":
 * os dois compartilham a mesma variante de card (`mec_combo_abertura` /
 * `mec_pl_sm`) e o mesmo painel "Mostrar no destaque maior", então o
 * seletor cobre os dois com `:is()` em vez de duplicar a regra.
 *
 * O aspect-ratio mora no `.mec_thumb`, não no `.thumbnail-container` — e o
 * link+thumbnail-container viram uma camada que preenche por posição, não
 * por fluxo. Direto no `.thumbnail-container` a badge de categoria (que
 * ancora no `.mec_thumb`, position:relative) descolava da imagem: como
 * `.mec_pl_lg_2` empilha em grid, `.mec_thumb` esticava para a altura da
 * linha e a badge, presa no fim da CAIXA, sobrava abaixo da imagem em vez de
 * em cima dela.
 *
 * O `align-items: start` que resolve o stretch da lista mora na base de
 * `.mec_post.mec_pl_sm` (layout.css) agora, não mais aqui — é o mesmo card em
 * qualquer contexto (sidebar, relacionados), e o defeito não era exclusivo
 * do destaque/combo.
 */
:is(.mec_bloco_lista--destaque, .mec_bloco_lista--combo) .mec_combo_abertura .mec_thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

:is(.mec_bloco_lista--destaque, .mec_bloco_lista--combo) .mec_post.mec_pl_sm .mec_thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

:is(.mec_bloco_lista--destaque, .mec_bloco_lista--combo) .mec_thumb > a,
:is(.mec_bloco_lista--destaque, .mec_bloco_lista--combo) .thumbnail-container {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/* A coluna da direita: os miúdos empilhados, com o respiro do modelo. */
.mec_destaque_lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--mec-space-lg);
}

.mec_bloco_lista--destaque .mec_post.mec_combo_abertura .mec_post_title,
.mec_bloco_lista--destaque .mec_post.mec_combo_abertura .mec_post_title a {
	font-size: 20px;
	line-height: 1.35;
}

/*
 * Os miúdos ao lado do destaque maior, com medida própria — pedido do PO.
 * `.mec_pl_sm` por padrão é 7:5 e título em 15px literal (layout.css); aqui
 * o título cai para o token `base` (14px), e a data já chega em
 * `--mec-font-size-xs` pelo `.mec_post_meta` global, sem precisar de regra
 * própria. A miniatura (4:3) já foi resolvida acima, junto com o combo.
 */

.mec_bloco_lista--destaque .mec_destaque_lista .mec_post_title,
.mec_bloco_lista--destaque .mec_destaque_lista .mec_post_title a {
	font-size: var(--mec-font-size-base);
}

/*
 * Abaixo de 667 as duas colunas viram uma, e o arranjo passa a ser o combo:
 * a abertura em cima, a lista embaixo. Duas colunas de 180px numa tela de
 * 390 deixariam a abertura menor que os próprios miúdos.
 */
@media (width <= 667px) {
	.mec_bloco_lista--destaque .mec_bloco_lista_itens {
		grid-template-columns: minmax(0, 1fr);
	}

	.mec_bloco_lista--destaque .mec_combo_abertura {
		margin-bottom: var(--mec-space-lg);
	}
}

/* ---------- Médio (o "Trending Stories" do modelo) ---------- */

/*
 * O degrau que faltava entre a grade grande e a lista miúda. Medido no modelo
 * a 1280px: três cards de 216x259, miniatura de 216x154 — a mesma proporção
 * 7:5 da grade — e título de 16px, contra os 22px da grade. Sem resumo.
 */
.mec_bloco_lista--medio .mec_bloco_lista_itens {
	grid-template-columns: repeat(var(--mec-lista-colunas, 3), minmax(0, 1fr));
	column-gap: var(--mec-gutter);
}

/* align-content: start pelo mesmo motivo da grade — ver comentário lá. */
.mec_bloco_lista--medio .mec_post {
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--mec-space-md);
}

/* Mesma correção do combo/destaque/grade/lista: aspect-ratio no .mec_thumb. */
.mec_bloco_lista--medio .mec_thumb {
	aspect-ratio: 7 / 5;
	overflow: hidden;
}

.mec_bloco_lista--medio .mec_thumb > a,
.mec_bloco_lista--medio .thumbnail-container {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/*
 * O seletor carrega `.mec_post` para vencer as regras de título do card em
 * responsive.css, que são de mesma especificidade e vêm depois na fila — o
 * mesmo motivo já registrado na abertura do combo.
 */
.mec_bloco_lista--medio .mec_post .mec_post_title,
.mec_bloco_lista--medio .mec_post .mec_post_title a {
	font-size: var(--mec-font-size-md); /* 16px */
	line-height: 1.4;
}

/* Sem resumo neste porte, mesmo que a seção peça: não cabe em 216px. */
.mec_bloco_lista--medio .mec_post_excerpt {
	display: none;
}

@media (width <= 1023px) {
	.mec_bloco_lista--medio .mec_bloco_lista_itens {
		column-gap: var(--mec-space-lg);
	}
}

@media (width <= 667px) {
	.mec_bloco_lista--medio .mec_bloco_lista_itens {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--mec-space-lg);
	}
}

/* ---------- Abas por assunto ---------- */

/*
 * Medido no modelo: a lista fica à direita do título, com 12px em maiúsculas e
 * altura de 36px — a mesma da linha do cabeçalho, para as abas assentarem no
 * eixo do título e não flutuarem acima dele.
 *
 * As cores saem dos tokens: o modelo usa #7b7b7b, #212121 e o vermelho da demo
 * no hover. O tema usa a paleta da marca, mesma decisão já registrada para o
 * accent nas outras telas.
 */

.mec_block_heading.mec_subcat_right {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mec-space-sm);
}

.mec_subcat_list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mec_subcat_list > li {
	margin: 0;
}

.mec_subcat_list > li > a {
	display: block;
	padding-inline: 7px;
	color: var(--mec-color-meta);
	font-size: var(--mec-font-size-sm); /* 12px */
	font-weight: var(--mec-font-weight-medium);
	line-height: 36px;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.mec_subcat_list > li > a:hover,
.mec_subcat_list > li > a:focus-visible {
	color: var(--mec-color-accent-text);
}

/* A aba corrente escurece, em vez de ganhar fundo — como no modelo. */
.mec_subcat_list > li > a.current {
	color: var(--mec-color-heading);
}

/*
 * Enquanto a troca está em voo, a lista esmaece. Sem isto, trocar de aba num
 * conjunto grande não dá sinal nenhum de que algo está acontecendo.
 */
.mec_bloco_lista_itens[aria-busy='true'] {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* ---------- Seção "boxed" (com "anterior/próximo") ---------- */

/*
 * Mesmo tratamento do `.mec_pb_boxed` do modelo: borda, fundo e respiro em
 * volta do bloco INTEIRO — título, grade de posts e navegação juntos —, não
 * só das setas. No modelo é a única seção com essa moldura, e é também a
 * única com "anterior/próximo"; daí a classe nascer junto com `paginacao` em
 * vez de virar uma segunda opção no painel.
 */
.mec_bloco_lista--boxed {
	border: 1px solid var(--mec-color-border-strong);
	padding: var(--mec-space-lg);
	background-color: var(--mec-color-bg);
}

/* ---------- "Anterior/próximo" da seção ---------- */

/*
 * Mesmo desenho do "Trending Stories" do modelo (`.mec_block_nav`): o par de
 * setas centralizado, com borda cada uma — canto reto, como o `.mec_readmore`
 * (tokens.css: "o template de referência é de canto reto"), e não o botão
 * circular do slider do hero, que é exceção porque flutua sobre foto — e uma
 * linha horizontal na metade vertical do bloco, ladeando o par dos dois
 * lados. No modelo a linha é dois `::before`/`::after` deslocados com
 * posição absoluta; aqui os dois viram ITENS do mesmo flex que os botões —
 * mesmo resultado, sem cálculo de deslocamento. A borda do BLOCO inteiro
 * (`.mec_bloco_lista--boxed`, mais abaixo) é outra — não esta.
 */
.mec_bloco_lista_nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin-top: var(--mec-space-xl);
}

.mec_bloco_lista_nav::before,
.mec_bloco_lista_nav::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--mec-color-border-strong);
}

.mec_bloco_lista_nav_botao {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--mec-color-border-strong);
	background-color: transparent;
	color: var(--mec-color-text);
	transition: var(--mec-transition-fast);
}

.mec_bloco_lista_nav_botao .omec-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.mec_bloco_lista_nav_botao:hover,
.mec_bloco_lista_nav_botao:focus-visible {
	background-color: var(--mec-color-accent-hover);
	border-color: var(--mec-color-accent-hover);
	color: var(--mec-color-surface-dark);
}

/*
 * `disabled`, não uma classe: já sai do tab order e sem clique nenhum — só
 * falta tirar do olho. `pointer-events: none` é redundante com `disabled`
 * pra clique de mouse, mas cobre o caso de o botão ficar focável por engano
 * num navegador que trate `disabled` como estilo, não como estado.
 */
.mec_bloco_lista_nav_botao:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* ---------- "Veja mais" da seção ---------- */

/*
 * Mesmo desenho do botão final do bloco "Destaques Revista Carro"
 * (`.mec_bloco_destaques_carro_cta`/`_botao`, em class-destaques-revista-carro.php):
 * botão sólido, centralizado, no fim da seção. Aqui na cor de marca do
 * próprio tema (`--mec-color-accent`), já que a seção não é de um site
 * convidado.
 */
.mec_bloco_lista_vejamais {
	margin-top: var(--mec-space-xl);
	text-align: center;
}

.mec_bloco_lista_vejamais_botao {
	display: inline-block;
	padding: var(--mec-space-sm) var(--mec-space-xl);
	background-color: var(--mec-color-accent);
	color: var(--mec-color-accent-contrast);
	font-family: var(--mec-font-heading);
	font-weight: var(--mec-font-weight-semibold);
	font-size: var(--mec-font-size-sm);
	letter-spacing: var(--mec-letter-spacing-wide);
	text-transform: uppercase;
	transition: var(--mec-transition-fast);
}

.mec_bloco_lista_vejamais_botao:hover,
.mec_bloco_lista_vejamais_botao:focus-visible {
	background-color: var(--mec-color-accent-hover);
	color: var(--mec-color-accent-contrast);
}

/*
 * Abaixo de 668 as abas vão para a linha de baixo, inteiras: espremê-las ao
 * lado do título deixaria os alvos de toque menores que o mínimo confortável.
 */
@media (width <= 667px) {
	.mec_block_heading.mec_subcat_right {
		justify-content: flex-start;
	}

	.mec_subcat_list {
		width: 100%;
	}
}

/* ==========================================================================
   Blocos do core, estilizados pelo tema
   ========================================================================== */

/*
 * Nem contadores nem espaço de anúncio ganharam bloco próprio: as respostas 3
 * e 4 do PO reduziram os dois ao que o core já entrega.
 *
 * O critério é o mesmo da decisão 1, por outro caminho — funcionalidade do
 * core, apresentação do tema. Escrever `omecanico/contadores` seria
 * reimplementar `core/social-links` com outro nome.
 */

/* ---------- Títulos escritos com core/heading ---------- */

/*
 * Quem monta a página pode abrir uma seção com um bloco de título do core em
 * vez do título embutido no bloco de lista. Quando o faz, o título recebe o
 * mesmo desenho das outras seções — borda de 2px e o detalhe azul de 30px —,
 * para as duas formas de escrever a mesma coisa não saírem diferentes na tela.
 *
 * `h1` fica de fora, por pedido do PO: na home ele é o logo, e onde alguém o
 * usar dentro do conteúdo é título de página, não cabeçalho de seção.
 *
 * O corpo NÃO é uniformizado aqui. O nível do heading é escolha de hierarquia
 * do documento — o que importa para leitor de tela e para busca —, e o
 * `theme.json` já dá a escala de cada nível.
 */
.mec_blocks_canvas :is(h2, h3, h4, h5, h6).wp-block-heading {
	position: relative;
	margin-bottom: var(--mec-space-xl);
	padding-bottom: var(--mec-space-xs);
	border-bottom: 2px solid var(--mec-color-border);
}

.mec_blocks_canvas :is(h2, h3, h4, h5, h6).wp-block-heading::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 30px;
	height: 2px;
	background-color: var(--mec-color-accent);
}

/* ---------- Redes sociais (`core/social-links`) ---------- */

/*
 * Aparência do `core/social-links` (o bloco padrão — o bloco próprio "Redes sociais" foi retirado; é este
 * que vale na home, na sidebar e nos widgets): caixas QUADRADAS de 60px em linha, lacuna de .25rem, cor da
 * marca e ícone branco de 22px.
 * O core desenha cada rede com cor própria e `:where()`, então estas regras (especificidade maior)
 * ganham sem `!important`. O rótulo fica só para leitor de tela (`.screen-reader-text` do base.css).
 */
.wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-social-links .wp-social-link {
	width: 60px;
	height: 60px;
	margin: 0;
	border-radius: 0;
	color: var(--mec-color-inverse);
	background-color: var(--mec-color-heading);
	font-size: inherit;
}

.wp-block-social-links .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	color: inherit;
	transition: filter var(--mec-transition-fast);
}

.wp-block-social-links .wp-social-link a:hover,
.wp-block-social-links .wp-social-link a:focus-visible {
	filter: brightness(1.15);
}

.wp-block-social-links .wp-social-link svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* As cores das marcas (sem token: são delas, não do tema). */
.wp-block-social-links .wp-social-link-facebook { background-color: #1877f2; }
.wp-block-social-links .wp-social-link-instagram { background-color: #c13584; }
.wp-block-social-links .wp-social-link-youtube { background-color: #f00; }
.wp-block-social-links .wp-social-link-linkedin { background-color: #0a66c2; }
.wp-block-social-links .wp-social-link-x { background-color: #000; }
.wp-block-social-links .wp-social-link-tiktok { background-color: #000; }
.wp-block-social-links .wp-social-link-whatsapp { background-color: #25d366; }

/* ---------- Bloco "Instagram" ---------- */

/*
 * Grade em formato "stories": 4 colunas fixas em retrato (3:4), não o quadrado
 * de perfil que o Instagram usa. Mesma geometria e mesmos breakpoints da
 * grade do Youtube (task 007) — 4 → 2 (tablet) → 1 (celular), estática, sem
 * carrossel.
 */
.mec_instagram_grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mec-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mec_instagram_item {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.mec_instagram_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mec-transition-base);
}

.mec_instagram_item a:hover img,
.mec_instagram_item a:focus-visible img {
	transform: scale(1.06);
}

@media (width <= 1023px) {
	.mec_instagram_grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 667px) {
	.mec_instagram_grade {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Só o editor vê este aviso; no site a seção não sai. */
.mec_bloco_instagram_aviso {
	padding: var(--mec-space-lg);
	border: 1px dashed var(--mec-color-border);
	color: var(--mec-color-muted);
	text-align: center;
}

/* ---------- Espaço de anúncio sobre core/html ---------- */

/*
 * `core/html` é literalmente "espaço livre onde se cola qualquer código",
 * inclusive a tag do AdSense — resposta 4 do PO, que também tira o AdRotate do
 * site. O acesso já é limitado pela capacidade `unfiltered_html`, que só
 * administrador tem; o tema não precisa acrescentar controle nenhum.
 *
 * A classe é aplicada à mão pelo editor, em "Classes CSS adicionais".
 */
.mec_ad_espaco {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: var(--mec-space-xl);
	overflow: hidden;
	text-align: center;
}

/*
 * Altura reservada, e é o ponto: anúncio que chega depois do primeiro quadro
 * empurra o conteúdo para baixo e faz o leitor perder a linha que estava
 * lendo. `min-height` segura o espaço antes de o script responder.
 *
 * 90px é a faixa mais comum do AdSense em desktop; o `--mec-ad-altura` deixa
 * cada posição declarar a sua sem precisar de classe nova.
 */
.mec_ad_espaco {
	min-height: var(--mec-ad-altura, 90px);
}

.mec_ad_espaco > * {
	max-width: 100%;
}

/* ---------- Mosaico da home ---------- */

/*
 * O hero da home NÃO tem o mesmo desenho do hero do arquivo, e isso não é
 * detalhe. Medido nos dois modelos a 1280px:
 *
 *   arquivo   1:573×500  2:573×275  3:286×225  4:286×225
 *   home      1:571×430  2:285×430  3:285×215  4:285×215
 *
 * No arquivo o segundo destaque cobre o topo da metade direita; na home ele é
 * uma coluna inteira, e o terceiro e o quarto dividem a QUARTA coluna, não a
 * segunda linha. E a altura do arquivo é fixa em 500px, enquanto a da home
 * acompanha a largura.
 *
 * O tema já acerta o do arquivo — aquela tela passa em 100% na auditoria. Por
 * isso tudo aqui é escopado em `.mec_bloco_mosaico`: mexer na regra genérica
 * quebraria o que já está certo.
 */
@media (width >= 668px) {
	/*
	 * A ALTURA DO BLOCO sai do destaque principal, e é declarada aqui em vez de
	 * emergir da grade.
	 *
	 * Enquanto ela vinha de um `aspect-ratio` no próprio item 1, o bloco só
	 * ficava alinhado por coincidência: com o quadrante 4 em 16:9, a linha de
	 * baixo passou a ter altura própria, a de cima passou a ser medida pelo
	 * conteúdo do quadrante 3, e a soma das duas deixou de bater com a
	 * proporção do item 1. Medido: a 1280 as quatro colunas fechavam juntas,
	 * mas a 1000 o carrossel terminava 21px acima das outras três, e a 768,
	 * 30px.
	 *
	 * Agora a conta é explícita: a largura do item 1 são duas colunas mais uma
	 * calha — metade do bloco menos meia calha —, e a altura é essa largura na
	 * proporção 571:430 do modelo. Quem se ajusta são a revista, que estica, e
	 * o quadrante 3, que fica com o que o 16:9 do quadrante 4 deixar.
	 *
	 * O `cqw` mede a largura do contêiner, e por isso o `container-type` no
	 * `.mec_hero_wrapper` logo acima: um elemento não consulta a própria
	 * largura, consulta a de um ancestral declarado como contêiner.
	 */
	.mec_bloco_mosaico .mec_hero_wrapper {
		container-type: inline-size;
	}

	.mec_bloco_mosaico .mec_heroblock_wrapper {
		/* 571:430, a medida do modelo — e não os 4:3 que ela quase é. */
		--mec-hero-prop: calc(430 / 571);

		height: calc( ( 100cqw - var(--mec-hero-calha) ) / 2 * var(--mec-hero-prop) );
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Sem `aspect-ratio` aqui: a proporção 571:430 do modelo passou para a
	 * altura do bloco, logo acima, e é de lá que este quadrante a recebe.
	 * Declarada nos dois lugares, ela virava duas restrições concorrentes — e
	 * quando discordavam, quem perdia era o alinhamento das colunas.
	 */
	.mec_bloco_mosaico .mec_hero_item_1 {
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}

	/* Coluna inteira, e não só o topo como no arquivo. */
	.mec_bloco_mosaico .mec_hero_item_2 {
		grid-column: 3;
		grid-row: 1 / span 2;
	}

	/*
	 * Sem edição nenhuma cadastrada, o quadrante 2 não sai e a coluna 3 ficaria
	 * vazia — um vão branco no meio do mosaico. O destaque principal cresce e
	 * ocupa o lugar dela.
	 *
	 * Isto não é o caso de desmarcar "mostrar a última edição": aquilo hoje
	 * escolhe QUAL edição, e o quadrante continua saindo. É o caso de o site
	 * ainda não ter nenhuma revista publicada com capa.
	 */
	.mec_bloco_mosaico .mec_heroblock_wrapper:not(:has(.mec_hero_item_2)) .mec_hero_item_1 {
		grid-column: 1 / span 3;
		aspect-ratio: auto;
	}

	.mec_bloco_mosaico .mec_hero_item_3 {
		grid-column: 4;
		grid-row: 1;
	}

	.mec_bloco_mosaico .mec_hero_item_4 {
		grid-column: 4;
		grid-row: 2;
	}
}

/*
 * Entre 668 e 991 o modelo aperta o item 1: 361×300 a 768px, contra os 4:3 que
 * mantém de 992 para cima (471×355 a 1000, 571×430 a 1280). Sem este degrau o
 * hero fica 25px mais baixo que o modelo em toda a faixa do tablet.
 *
 * O degrau muda a PROPORÇÃO DO BLOCO, e não a do quadrante: enquanto estava no
 * quadrante, ele brigava com a altura calculada do bloco e o carrossel saía
 * 28px mais alto que as outras três colunas em toda esta faixa.
 */
@media (668px <= width <= 991px) {
	.mec_bloco_mosaico .mec_heroblock_wrapper {
		--mec-hero-prop: calc(5 / 6);
	}

}

/*
 * Abaixo de 668 o mosaico não tem desenho próprio: o modelo da home e o do
 * arquivo convergem para a mesma faixa rolável, e o tema já a acerta — medido,
 * 627 contra 637 do modelo a 667px, e 360 contra 360 a 390px. Nada a
 * sobrescrever aqui.
 */

/*
 * O título sobre a foto é BRANCO, e o `base.css` põe cor explícita em `h1`–`h6`
 * — cor de elemento vence herança, então o branco do `.mec_postblock_content`
 * não chegava ao `<h3>`. O tema já escreve a regra para o `a` de dentro; aqui
 * ela alcança também o elemento do título.
 */
.mec_bloco_mosaico .mec_post_title,
.mec_bloco_mosaico .mec_post_title a {
	color: var(--mec-color-inverse);
}

/*
 * Recuo zero no heroblock, e a calha fica no envoltório de fora — que é quem a
 * tela de blocos alcança. Medido no modelo: `.mec_heroblock` tem
 * `padding-left: 0` e mesmo assim nasce com a largura do conteúdo.
 */
.mec_bloco_mosaico {
	padding-inline: 0;
}

@media (width <= 667px) {
	/*
	 * Na faixa rolável o card não quebra linha — é o que faz a tira mostrar
	 * quase um card inteiro por vez, em vez de espremer três.
	 */
	.mec_bloco_mosaico .mec_hero_item_2,
	.mec_bloco_mosaico .mec_hero_item_3,
	.mec_bloco_mosaico .mec_hero_item_4 {
		white-space: nowrap;
	}

	/*
	 * E o título volta a quebrar. O `nowrap` acima é da CAIXA — é ele que
	 * mantém os cards em uma linha na faixa rolável —, mas herdado pelo título
	 * ele empurraria a manchete inteira para fora da tela. O modelo faz a
	 * mesma separação: `nowrap` no item, `normal` no título.
	 */
	.mec_bloco_mosaico .mec_post_title,
	.mec_bloco_mosaico .mec_post_title a {
		white-space: normal;
	}

	/*
	 * Entrelinhas do modelo nesta faixa: 25,2px no destaque principal e 20 nos
	 * demais. Ficavam em 24,3 e 20,25 por virem de multiplicador, e não de
	 * valor absoluto.
	 */
	.mec_bloco_mosaico .mec_hero_item_1 .mec_post_title,
	.mec_bloco_mosaico .mec_hero_item_1 .mec_post_title a {
		line-height: 25.2px;
	}

	.mec_bloco_mosaico .mec_hero_item_2 .mec_post_title,
	.mec_bloco_mosaico .mec_hero_item_2 .mec_post_title a,
	.mec_bloco_mosaico .mec_hero_item_3 .mec_post_title,
	.mec_bloco_mosaico .mec_hero_item_3 .mec_post_title a,
	.mec_bloco_mosaico .mec_hero_item_4 .mec_post_title,
	.mec_bloco_mosaico .mec_hero_item_4 .mec_post_title a {
		line-height: 20px;
	}

	/* Folga abaixo do hero: 30px no modelo, contra os 40 que o tema dava. */
	.mec_bloco_mosaico {
		margin-bottom: var(--mec-space-xl);
	}
}

/*
 * A calha entre os quadrantes é a mesma do hero do arquivo — 4px, do
 * `.mec_heroblock_wrapper` no layout.css. Não há regra aqui de propósito: é
 * assim que "o mesmo gap" continua verdadeiro se aquele valor mudar.
 *
 * O modelo da home encosta um quadrante no outro (`gap: normal`), e este
 * arquivo já teve um `gap: 0` por causa disso. O PO preferiu a calha do
 * arquivo, para os dois heros do site ficarem iguais entre si.
 */

/*
 * O corpo do título do destaque principal cai para 20px na faixa do tablet. O
 * tema mantinha os 22 do desktop, herdados do hero do arquivo.
 */
@media (668px <= width <= 991px) {
	.mec_bloco_mosaico .mec_hero_item_1 .mec_post_title,
	.mec_bloco_mosaico .mec_hero_item_1 .mec_post_title a {
		/* 20px literal: o token `lg` vale 18. Segunda vez que caio nessa. */
		font-size: 20px;
		line-height: 27px;
	}
}

/*
 * O `<h1>` do logo na capa não pode herdar o corpo de 36px que o `base.css` dá
 * a `h1`: ele é só o invólucro semântico do logo, e o desenho é o mesmo do
 * `<div>` que ele substitui nas outras telas.
 */
.site-title {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/*
 * Dentro do mosaico o carrossel preenche o quadrante, e não os 16/9 que o
 * `.omec-slider__slide` traz de fábrica.
 *
 * Os 16/9 são o padrão certo para o slider solto, que não tem caixa em volta.
 * Aqui a caixa é o quadrante, e a proporção dela é outra: 570x429 a 1280,
 * 360x165 a 390. Com os 16/9 mandando, o destaque grande ficava 108px mais
 * curto que a coluna ao lado a 1280 — o mosaico saía desalinhado —, e no
 * celular a miniatura passava 38px abaixo do card, levando a tarja do título
 * junto e cortando o texto no corte do `overflow`.
 */
.mec_bloco_mosaico .omec-slider,
.mec_bloco_mosaico .omec-slider__track,
.mec_bloco_mosaico .omec-slider__slide {
	height: 100%;
}

.mec_bloco_mosaico .omec-slider__slide {
	aspect-ratio: auto;
}

/* ---------- Listas de posts da home: zoom da foto ---------- */

/*
 * Zoom de 5% na foto ao passar o mouse (ou focar por teclado) em TODAS as variações do bloco de lista —
 * destaque, combo, grade, lista, médio... — e no "Destaques Revista/Carro" (que é uma lista `--destaque`).
 * A foto cresce DENTRO da caixa e o `overflow: hidden` do `.thumbnail-container` corta o excesso, então nada
 * empurra o layout. Mesma escala e duração (0,35s) do mosaico. O `prefers-reduced-motion` global (base.css)
 * já abrevia a transição.
 */
.mec_bloco_lista .thumbnail-container img {
	transition: transform 0.35s;
}

.mec_bloco_lista .mec_post:hover .thumbnail-container img,
.mec_bloco_lista .mec_post:focus-within .thumbnail-container img {
	transform: scale(1.05);
}

/* ---------- Hero da home: movimento ---------- */

/*
 * Zoom de 5% no rollover em TODOS os quadrantes do mosaico, carrossel incluído — pedido do PO, que
 * substitui a decisão anterior (só o quadrante 3). A regra vem de `layout.css` (`.mec_heroblock .mec_post:hover
 * .mec_thumb`, 0,35s) e basta não desligá-la aqui; quem corta o que passa da borda é o `overflow: hidden`
 * do `.mec_post`.
 */

/*
 * No carrossel o zoom é na FOTO, dentro da caixa, e não na miniatura inteira: ali a `.mec_thumb` de cada slide
 * é maior que o quadro visível, e escalar a miniatura deslocava a imagem para o lado (sobrava uma faixa vazia
 * na borda direita). A foto cresce dentro do `.thumbnail-container` (overflow hidden) e só no slide sob o mouse.
 */
.mec_bloco_mosaico .mec_post:hover .omec-slider .mec_thumb,
.mec_bloco_mosaico .mec_post:focus-within .omec-slider .mec_thumb {
	transform: none;
}

.mec_bloco_mosaico .omec-slider .thumbnail-container img {
	transition: transform 0.35s;
}

.mec_bloco_mosaico .omec-slider__slide:hover .thumbnail-container img,
.mec_bloco_mosaico .omec-slider__slide:focus-within .thumbnail-container img {
	transform: scale(1.05);
}

/*
 * No carrossel o TEXTO não se move no rollover — nem badge, nem título, nem meta (a foto dá o zoom
 * acima, como nos outros quadrantes).
 *
 * O motivo é a transição: o slide inteiro anda na horizontal a cada 5s, e uma
 * animação de entrada disparada por hover corre por cima dela. O texto do
 * mosaico fica sempre visível, como no estado final do rollover.
 */
.mec_bloco_mosaico .omec-slider :is(.mec_post_category, .mec_post_title, .mec_post_meta) {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ---------- Hero da home: carrossel ---------- */

/*
 * Navegação sem fundo, por decisão do PO. O que dá contorno à seta é a sombra
 * — sem ela, seta branca sobre foto clara some.
 */
.mec_bloco_mosaico .omec-slider__control {
	background-color: transparent;
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 60%));
}

.mec_bloco_mosaico .omec-slider__control:hover,
.mec_bloco_mosaico .omec-slider__control:focus-visible {
	background-color: transparent;
	color: var(--mec-color-inverse);
	opacity: 0.75;
}

/* ---------- Hero da home: quadrante do YouTube ---------- */

/*
 * 16:9, a proporção do vídeo. A linha de baixo passa a ter a altura que este
 * quadrante pedir, e a de cima — o quadrante 3 — fica com o que sobra da
 * altura total, que quem dita continua sendo o destaque principal.
 */
@media (width >= 668px) {
	.mec_bloco_mosaico .mec_heroblock_wrapper:has(.mec_hero_item_4) {
		grid-template-rows: minmax(0, 1fr) min-content;
	}

	.mec_bloco_mosaico .mec_hero_item_4 {
		aspect-ratio: 16 / 9;
	}
}

/*
 * A marca do YouTube no centro da miniatura. É um `<span>` decorativo: quem
 * leva ao vídeo é o link em volta, e um botão de verdade aqui daria dois alvos
 * para a mesma ação.
 *
 * O quadrante não tem faixa de texto — nem badge, nem título, nem meta —, por
 * decisão do PO: a miniatura do YouTube já traz o título gravado na imagem, e
 * a marca aqui é o que diz de onde o vídeo vem.
 */
.mec_mosaico_play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.mec_mosaico_play .omec-icon {
	width: 4rem;
	height: 4rem;
	filter: drop-shadow(0 1px 4px rgb(0 0 0 / 45%));
	transition: transform var(--mec-transition-fast);
}

/*
 * O ícone do tema é de contorno, como todos os outros: retângulo em `stroke` e
 * triângulo em `fill`, os dois em `currentColor`. A marca do YouTube é o
 * contrário — caixa vermelha cheia com o triângulo em branco.
 *
 * Pintar as duas partes aqui evita um SVG só para este uso, e mantém o mesmo
 * arquivo servindo a caixa de rede social, onde ele aparece em contorno.
 */
.mec_mosaico_play .omec-icon g {
	fill: #f00;
	stroke: #f00;
}

.mec_mosaico_play .omec-icon path {
	fill: var(--mec-color-inverse);
}

.mec_hero_item_4:hover .mec_mosaico_play .omec-icon,
.mec_hero_item_4:focus-within .mec_mosaico_play .omec-icon {
	transform: scale(1.08);
}

/* ---------- Hero da home: quadrante da revista ---------- */

/*
 * Este quadrante não segue o desenho dos outros três, por decisão do PO: a
 * capa não é fundo recortado, é objeto inteiro sobre um degradê dos dois azuis
 * do site, e o texto é o nome da edição.
 *
 * Cortar uma capa para ela preencher o card tiraria justamente o que ela tem
 * para mostrar — daí `contain` em vez do `cover` dos outros.
 */
/*
 * Aqui o texto NÃO sobrepõe a imagem, ao contrário dos outros três quadrantes:
 * a capa fica em cima e a chamada embaixo, empilhadas. Sobrepor legenda a uma
 * capa de revista cobre o miolo dela, que é o que se quer mostrar.
 *
 * Por isso o `.mec_block_container` vira coluna flex e as duas peças saem do
 * posicionamento absoluto que `layout.css` dá ao hero.
 */
.mec_bloco_mosaico .mec_mosaico_edicao .mec_block_container {
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(160deg, var(--mec-color-accent-hover), var(--mec-color-accent));
}

.mec_bloco_mosaico .mec_mosaico_edicao .mec_thumb {
	position: static;
	flex: 1 1 auto;
	/* `min-height: 0` deixa a capa encolher em card baixo em vez de estourar. */
	min-height: 0;
	padding-top: var(--mec-space-lg);
}

.mec_bloco_mosaico .mec_mosaico_edicao .mec_postblock_content {
	position: static;
	flex: 0 0 auto;
	padding: var(--mec-space-md) var(--mec-space-lg) var(--mec-space-lg);
}

/*
 * 70% da largura, centrada. O quadrante inteiro continua clicável — quem
 * recebe o link é o `.mec_thumb`, e não a caixa da capa.
 */
.mec_bloco_mosaico .mec_mosaico_edicao .thumbnail-container {
	width: 70%;
	height: 100%;
	margin-inline: auto;
	background-color: transparent;
	aspect-ratio: auto;
}

.mec_bloco_mosaico .mec_mosaico_edicao .thumbnail-container img {
	object-fit: contain;
	object-position: center bottom;
}

/*
 * Nada por cima da capa.
 *
 * O hero tem dois pseudo-elementos sobre a miniatura: o `::before` é o véu
 * escuro que segura texto branco sobre foto, e o `::after` é o clarão branco
 * do rollover. Aqui não há texto sobre a imagem — o título e o botão ficam
 * abaixo dela —, e a capa é o que se quer mostrar: escurecê-la em 35% só
 * apaga a arte.
 *
 * A primeira versão desta regra desligava só o `::after`, que era o clarão. O
 * véu continuava lá.
 */
.mec_bloco_mosaico .mec_mosaico_edicao .thumbnail-container::before,
.mec_bloco_mosaico .mec_mosaico_edicao .thumbnail-container::after {
	display: none;
}

/*
 * Nem sombra nem entrada animada aqui.
 *
 * As duas existem para texto sobre foto: a sombra segura o branco onde o véu
 * não escurece o bastante, e o título entra subindo 25px no rollover. Sobre um
 * degradê sólido a sombra só borra a letra, e os 25px desalinhavam o título do
 * resto da caixa, que aqui é empilhada e não sobreposta.
 */
.mec_bloco_mosaico .mec_mosaico_edicao .mec_post_info {
	text-shadow: none;
}

.mec_bloco_mosaico .mec_mosaico_edicao :is(.mec_post_title, .mec_post_category) {
	transform: none;
	transition: none;
}

/*
 * 16px, e não os 18 que o título do hero traz: aqui ele é o nome da edição
 * inteiro — "Revista O Mecânico – Edição 383 – Abril/2026" —, e não um rótulo
 * de duas palavras.
 *
 * O seletor carrega `.mec_post_title` para vencer as regras de título do hero,
 * que são de mesma especificidade e vêm depois na fila.
 */
/*
 * Sem margem embaixo: ela era a folga até o botão, que saiu. O respiro até a
 * borda do card vem do padding do `.mec_postblock_content`.
 */
.mec_post_title.mec_revista_titulo,
.mec_post_title.mec_revista_titulo a {
	margin-bottom: 0;
	font-size: var(--mec-font-size-md); /* 16px */
	line-height: 1.35;
	text-align: center;
}

/*
 * O conteúdo deste quadrante é centrado, e não alinhado à esquerda como o dos
 * outros: aqui não é legenda de foto, é chamada.
 */
.mec_bloco_mosaico .mec_mosaico_edicao .mec_post_info {
	text-align: center;
}

/*
 * Abaixo de 667 o quadrante deita — 288 por 135 — e o empilhamento não cabe:
 * a capa sobrava com 40px de altura, do tamanho de um selo. Aqui a capa vai
 * para a esquerda e a chamada para a direita, que é o arranjo que uma capa em
 * retrato pede dentro de uma caixa deitada.
 */
@media (width <= 667px) {
	.mec_bloco_mosaico .mec_mosaico_edicao .mec_block_container {
		flex-direction: row;
		align-items: center;
	}

	.mec_bloco_mosaico .mec_mosaico_edicao .mec_thumb {
		flex: 0 0 40%;
		height: 100%;
		padding: var(--mec-space-sm) 0 var(--mec-space-sm) var(--mec-space-sm);
	}

	.mec_bloco_mosaico .mec_mosaico_edicao .thumbnail-container {
		width: 100%;
	}

	.mec_bloco_mosaico .mec_mosaico_edicao .thumbnail-container img {
		object-position: center;
	}

	.mec_bloco_mosaico .mec_mosaico_edicao .mec_postblock_content {
		/*
		 * `flex: 1 1 0` com `min-width: 0`, e não o `0 0 auto` que serve à
		 * versão empilhada: numa linha, `auto` deixa a caixa com a largura
		 * natural do texto, e o título saía pela direita do card levando o
		 * botão junto. Item de flex só encolhe abaixo do próprio conteúdo com
		 * o `min-width: 0` explícito.
		 */
		flex: 1 1 0;
		min-width: 0;
		padding: var(--mec-space-sm) var(--mec-space-md);
	}
}

/* ---------- Faixa de conteúdo + sidebar ---------- */

/*
 * A home do modelo NÃO é uma coluna só. Ela alterna faixas, e isto foi o maior
 * erro da primeira montagem — medido no modelo a 1280px:
 *
 *   1170  hero
 *   1170  "Premium Content"
 *   1170  faixa de anúncio
 *    780 + 390   "Featured", "Trending", "Entertainment", "World" + sidebar
 *    780 + 390   "Latest Post" + sidebar
 *
 * A divisão é 2/3 e 1/3, sem vão entre as colunas — o respiro vem do padding
 * de cada uma, como no resto do tema. Abaixo de 768 as duas empilham.
 *
 * A faixa é um `core/columns` comum. A coluna larga não precisa mais de
 * classe adicional nenhuma: o CSS parte direto de `.wp-block-column`, a
 * classe que o próprio Gutenberg já bota em qualquer coluna — só a estreita
 * continua exigindo `mec_sidebar` pelo campo de classes adicionais, porque
 * é ela que foge do padrão (33% em vez de 66%, recuo assimétrico). Como as
 * duas regras têm a mesma especificidade (uma classe) e `.mec_sidebar` vem
 * DEPOIS no arquivo, ela sobrescreve `.wp-block-column` só na coluna que
 * também leva `mec_sidebar` — a larga fica só com o padrão.
 *
 * ATENÇÃO: `tools/audit-diff.py` escopava a auditoria em `.mec_main_content`
 * pra achar "o conteúdo da home" — com a classe deixando de ser posta pelo
 * editor, o script precisa passar a procurar `.wp-block-column` (excluindo
 * `.mec_sidebar`) ou coisa equivalente. Não mudei o script.
 *
 * `gap: 0` continua — quem separa a coluna larga da estreita é o padding de
 * cada uma, não a faixa. `margin-bottom`, porém, sai do zero: é o respiro
 * vertical ENTRE UMA FAIXA E A PRÓXIMA (hero, "Premium Content", anúncio,
 * os dois pares de coluna+sidebar da tabela acima) — mesmo valor do gutter
 * horizontal que já separa as colunas de qualquer arranjo.
 */
.mec_blocks_canvas .wp-block-columns {
	gap: 0;
	margin-bottom: var(--mec-gutter);
}

.mec_blocks_canvas .wp-block-columns > .wp-block-column {
	flex-basis: 66.6667%;
	padding-inline: var(--mec-container-pad);
}

/*
 * O recuo da sidebar é assimétrico: 30px do lado do conteúdo e 15 do lado de
 * fora, como no `layout.css` para as páginas clássicas e como no modelo. Aqui
 * precisa ser repetido porque lá os seletores partem de `.row >` e
 * `.mec_cat_content >`, e a faixa da home é um `wp-block-columns`.
 */
.mec_blocks_canvas .wp-block-columns > .mec_sidebar {
	flex-basis: 33.3333%;
	padding-right: var(--mec-container-pad);
	padding-left: 30px;
}

/* Abaixo de 1024 o recuo maior some, também como no modelo. */
@media (width <= 1024px) {
	.mec_blocks_canvas .wp-block-columns > .mec_sidebar {
		padding-left: var(--mec-container-pad);
	}
}

/*
 * As colunas da faixa cancelam a calha da tela de blocos, porque cada uma já
 * traz a sua. Sem isto o recuo dobra na borda externa.
 */
.mec_blocks_canvas > .wp-block-columns {
	padding-inline: 0;
}

/*
 * A seção dentro da coluna não recebe calha própria: quem a dá é a coluna.
 * `.wp-block-column` já cobre as duas colunas (a larga e a `.mec_sidebar`,
 * que também carrega essa classe por ser uma coluna do Gutenberg) — os dois
 * seletores da sidebar continuam explícitos porque `.wp-block-social-links`/
 * `.wp-block-categories` não são `.mec_bloco_lista` e não têm equivalente
 * na coluna larga.
 */
.wp-block-column > .mec_bloco_lista,
.mec_sidebar > .wp-block-social-links,
.mec_sidebar > .wp-block-categories {
	padding-inline: 0;
}

/*
 * Exceção: o "boxed" (`.mec_bloco_lista--boxed`) tem borda própria, e essa
 * borda precisa de respiro dos dois lados — sem isto o texto e as setas
 * encostavam nela quando a seção cai dentro de uma coluna. Mesma
 * especificidade da regra acima (duas classes); ganha por vir depois.
 */
.wp-block-column > .mec_bloco_lista--boxed {
	padding-inline: var(--mec-space-lg);
}

/*
 * Empilha em 767, e não em 781 como o `core/columns` faria sozinho: o modelo
 * troca em 768, e o padrão do core é 782px — 15px de diferença que deixariam
 * uma faixa estranha onde o modelo já mostra duas colunas.
 */
@media (width <= 767px) {
	.mec_blocks_canvas .wp-block-columns {
		flex-wrap: wrap;
	}

	.mec_blocks_canvas .wp-block-columns > .wp-block-column {
		flex-basis: 100%;
	}

	/*
	 * Empilhado, a coluna larga e a sidebar se tocam sem o padding-inline
	 * assimétrico pra separar (isso é recuo horizontal, não serve de respiro
	 * vertical). Mesmo valor do gutter que já separa uma faixa da próxima —
	 * só entre as colunas (`:not(:last-child)`): a última já tem esse
	 * respiro por conta do `margin-bottom` da própria `.wp-block-columns`, e
	 * flex não colapsa margem — duplicaria o vão depois da sidebar.
	 */
	.mec_blocks_canvas .wp-block-columns > .wp-block-column:not(:last-child) {
		margin-bottom: var(--mec-gutter);
	}
}

@media (width >= 768px) {
	.mec_blocks_canvas .wp-block-columns {
		flex-wrap: nowrap;
	}
}

/*
 * Os 14px em que o core e o modelo discordam. Entre 768 e 781 o
 * `wp-block-columns` do core ainda manda `flex-basis: 100% !important` nas
 * colunas, e sem o `!important` daqui a faixa empilha justamente onde o modelo
 * ainda mostra 500 + 250. É a única regra do arquivo que precisa dele, e só
 * porque do outro lado também há um.
 */
@media (768px <= width <= 781px) {
	.mec_blocks_canvas .wp-block-columns > .wp-block-column {
		flex-basis: 66.6667% !important;
	}

	.mec_blocks_canvas .wp-block-columns > .mec_sidebar {
		flex-basis: 33.3333% !important;
	}
}

/* ---------- Destaques Revista Carro ---------- */

/*
 * Bloco convidado: puxa posts de outro site (Revista Carro, via feed) e usa
 * a cor de marca DELE — `--mec-color-revistacarro` (tokens.css), não
 * `--mec-color-accent`. A estrutura reaproveita TODO o CSS do arranjo
 * "destaque" do bloco de lista (grid, thumb, aspect-ratio, align-items): o
 * PHP deste bloco escreve as MESMAS classes (`.mec_bloco_lista--destaque`,
 * `.mec_combo_abertura`, `.mec_destaque_lista`) por fora daquele bloco, e
 * `.mec_bloco_destaques_carro` só entra pra escopar a cor.
 */
.mec_bloco_destaques_carro .mec_block_heading::after {
	background-color: var(--mec-color-revistacarro);
}

.mec_bloco_destaques_carro .mec_post_category a {
	background-color: var(--mec-color-revistacarro);
}

/*
 * Título da matéria e data ficam de fora de propósito — pedido do PO: cor
 * padrão do card comum, igual a qualquer outro bloco. O vermelho fica só no
 * selo, no "Leia mais" e no botão final.
 */
.mec_bloco_destaques_carro .mec_readmore {
	border-color: var(--mec-color-revistacarro);
	color: var(--mec-color-revistacarro);
}

.mec_bloco_destaques_carro .mec_readmore:hover {
	background-color: var(--mec-color-revistacarro);
	border-color: var(--mec-color-revistacarro);
	color: #fff;
}

/*
 * O botão do fim da listagem — link pra Revista Carro, texto e URL editáveis
 * no bloco. Canto reto, como o resto do tema (tokens.css: "o template de
 * referência é de canto reto").
 */
.mec_bloco_destaques_carro_cta {
	margin-top: var(--mec-space-xl);
	text-align: center;
}

.mec_bloco_destaques_carro_botao {
	display: inline-block;
	padding: var(--mec-space-sm) var(--mec-space-xl);
	background-color: var(--mec-color-revistacarro);
	color: #fff;
	font-family: var(--mec-font-heading);
	font-weight: var(--mec-font-weight-semibold);
	font-size: var(--mec-font-size-sm);
	letter-spacing: var(--mec-letter-spacing-wide);
	text-transform: uppercase;
	transition: var(--mec-transition-fast);
}

/*
 * `background-color` literal, e não `filter: brightness()`: filter escurece
 * a CAIXA inteira depois de renderizada, texto branco incluso — o hover
 * ficava com um branco baço em vez de branco puro. Com a cor direta, o
 * `color: #fff` do estado base continua valendo sem interferência.
 */
.mec_bloco_destaques_carro_botao:hover {
	background-color: #b8241a; /* --mec-color-revistacarro (#e02b20), ~12% mais escuro */
	color: #fff;
}

/* ---------- Título com subtítulo (Youtube/Instagram) ---------- */

/*
 * Segunda linha, menor, embaixo do título — pedido da cliente como "destaque"
 * dos blocos Youtube e Instagram. Diferente de `.mec_block_title strong`
 * (`layout.css`), que colore uma palavra DENTRO da mesma linha, isto é uma
 * linha própria, dentro do `.mec_block_heading` que já existe (borda
 * inferior + barra de 30×2px via `::after`, reaproveitada por todo bloco).
 *
 * O texto em si não é fixo aqui — é o atributo `subtitulo` de cada bloco,
 * preenchido pelo admin (ver class-youtube.php e class-instagram.php).
 */
.mec_block_subtitulo {
	display: block;
	font-size: var(--mec-font-size-sm);
	font-weight: var(--mec-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--mec-letter-spacing-wide);
}

/*
 * Cor de marca do Instagram só AQUI, nunca no `<h2>` do título principal —
 * correção explícita da cliente depois de ver a primeira proposta.
 *
 * O Youtube não usa mais esta linha: o destaque de marca dele saiu do
 * subtítulo e foi para a barra do `.mec_block_heading::after` (abaixo) e
 * para o botão "Ver mais" — o `subtitulo` do bloco virou o rótulo do botão
 * (`class-youtube.php`), não mais uma segunda linha sob o título.
 */
.mec_bloco_instagram .mec_block_subtitulo {
	color: var(--mec-color-instagram);
}

/*
 * A barrinha de 30×2px do `.mec_block_heading` (`layout.css:1959`) sai da
 * cor genérica do tema e vai para o vermelho de marca do Youtube — é o
 * destaque pedido pela cliente para este bloco.
 */
.mec_bloco_youtube .mec_block_heading::after {
	background-color: var(--mec-color-youtube);
}

/*
 * `--mec-color-inverse` (branco fixo), e não `--mec-color-heading`: esse
 * token muda de valor no modo escuro do SITE (vira quase branco, `#f5f5f5`),
 * e os dois blocos têm fundo escuro FIXO, independente do tema — exatamente
 * o bug corrigido no rodapé em 17/09 (`omecanico@9a54771`, "rodapé não fica
 * mais claro no modo escuro do site"). Com o token errado, o título viraria
 * quase invisível sobre o próprio fundo quando o site está no modo escuro.
 */
.mec_bloco_youtube .mec_block_title,
.mec_bloco_instagram .mec_block_title {
	color: var(--mec-color-inverse);
}

/* ---------- Faixa full-width (Youtube/Instagram) ---------- */

/*
 * Primeiro bloco do tema a pintar um `background-color` numa faixa
 * esticada — até aqui, "largura total" só mexia em layout (destaques-carro,
 * mosaico), nunca em cor de fundo.
 *
 * "Full width" é só o FUNDO — confirmado pela cliente — e é FIXO, não uma
 * opção do controle de alinhamento do bloco. Duas tentativas anteriores não
 * bastaram:
 *
 * 1. Depender da classe `alignfull` (`.mec_blocks_canvas > :where(.alignfull)`,
 *    `blocks.css:58`) exige que quem monta a página selecione "Largura
 *    total" no editor. Na home real (`page 127875`) ninguém selecionou.
 * 2. Forçar via `.mec_blocks_canvas > .mec_bloco_youtube` (filho direto)
 *    ainda falha se o bloco estiver aninhado — na mesma home ele está
 *    dentro de um `wp:columns`, então o pai imediato é `.wp-block-column`,
 *    não `.mec_blocks_canvas`.
 *
 * Por isso o estouro aqui é relativo à VIEWPORT (100vw + margem negativa),
 * não ao ancestral — funciona não importa a que profundidade o bloco esteja
 * aninhado. `.mec_viewport` já tem `overflow: hidden` (`base.css:66`) para
 * cobrir a barra de rolagem que o cálculo de `100vw` inclui em alguns
 * navegadores; sem ele sobraria 1-2px de rolagem horizontal.
 */
.mec_bloco_youtube,
.mec_bloco_instagram {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: 0;
	background-color: var(--mec-color-surface-dark);
}

.mec_bloco_youtube_inner,
.mec_bloco_instagram_inner {
	max-width: var(--mec-blocks-content);
	margin-inline: auto;
	padding-block: var(--mec-space-xl);
	padding-inline: var(--mec-container-pad);
}

/*
 * Texto de apoio, entre o título e a grade — opcional (`chamada`, vazio por
 * padrão). `--mec-color-inverse` com opacidade reduzida, e não um token novo:
 * continua fixo (não muda no modo escuro do site), só menos contrastante que
 * o título, pra marcar a hierarquia sem precisar de outra variável de cor.
 */
.mec_bloco_youtube_chamada {
	margin-bottom: var(--mec-space-lg);
	color: var(--mec-color-inverse);
	opacity: 0.85;
	font-size: var(--mec-font-size-base);
	line-height: 1.5;
}

/*
 * Botão "Ver mais" do Youtube na cor de marca, e não no accent genérico do
 * `.mec_bloco_lista_vejamais_botao` compartilhado — é aqui que a chamada
 * para se inscrever no canal mora agora (ver `class-youtube.php`).
 *
 * `background-color` literal no hover, e não `filter`/`color-mix`: mesmo
 * motivo do botão do destaques-carro (`blocks.css:1610`) — filter escurece
 * a caixa inteira renderizada, texto branco incluso.
 */
.mec_bloco_youtube .mec_bloco_lista_vejamais_botao {
	background-color: var(--mec-color-youtube);
	color: var(--mec-color-inverse);
}

.mec_bloco_youtube .mec_bloco_lista_vejamais_botao:hover,
.mec_bloco_youtube .mec_bloco_lista_vejamais_botao:focus-visible {
	background-color: #e00000; /* --mec-color-youtube (#ff0000), ~12% mais escuro */
	color: var(--mec-color-inverse);
}

/* ---------- Grade do bloco Youtube ---------- */

/*
 * 4 colunas fixas, e não o `repeat` responsivo do Instagram (6→3→2): a
 * grade quebra linha sozinha com `quantidade` > 4 — comportamento nativo
 * do CSS Grid com `repeat()`, sem lógica extra.
 *
 * Os dois degraus (1023px, 667px) são os mesmos já medidos e usados no
 * arranjo "grade" do `lista-posts` (`.mec_bloco_lista--grade`, mais acima
 * neste arquivo) — não valores novos.
 */
.mec_bloco_youtube_grade {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mec-gutter);
	margin-top: var(--mec-space-lg);
}

@media (width <= 1023px) {
	.mec_bloco_youtube_grade {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (width <= 667px) {
	.mec_bloco_youtube_grade {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mec_bloco_youtube_item a {
	display: block;
	color: inherit;
}

/* 16:9, mesma proporção do `.mec_bloco_lista--grade .mec_thumb` — vídeo do Youtube é 16:9. */
.mec_bloco_youtube_item .mec_thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.mec_bloco_youtube_item .mec_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * `--mec-color-inverse`/`--mec-color-youtube`, os dois fixos — mesmo cuidado
 * do título do bloco (ver comentário acima): o card vive sobre um fundo
 * escuro que não muda com o tema do site. O hover vai na cor de marca
 * (vermelho YT), não no accent genérico do tema.
 */
.mec_bloco_youtube_item .mec_post_title {
	margin-top: var(--mec-space-sm);
	color: var(--mec-color-inverse);
	font-size: var(--mec-font-size-base);
	line-height: 1.4;
}

.mec_bloco_youtube_item a:hover .mec_post_title {
	color: var(--mec-color-youtube);
}