/*
 * responsive.css — pontos de quebra do tema "O Mecânico 2026".
 *
 * Os breakpoints replicam os do template de referência
 * (templates/assets/css/responsive.css e main.css), que trabalha com
 * 1281 / 1024 / 992 / 768 / 667 / 568 / 480 / 320px. As regras foram
 * reescritas: layout.css já entrega o comportamento desktop em grid, e aqui
 * ficam apenas os ajustes por faixa de viewport.
 *
 * Depende de tokens.css e layout.css.
 */

/*
 * Não há mais ajuste em >= 1281px: o `.container` zerava o padding ali para
 * compensar a falta da margem negativa em `.row`, o que só acertava a largura
 * acima desse ponto. Com a margem negativa em layout.css o padding vale em
 * qualquer viewport, como no modelo.
 */

/* ---------- Até 1024px: navegação passa para o modo mobile ---------- */

@media (width <= 1024px) {
	/*
	 * O primeiro degrau do hero é só embaixo: 20px em vez de 25px. Os lados só
	 * mudam a 768, e o topo só a 480 — três degraus independentes, medidos um
	 * a um no modelo.
	 */
	.mec_heroblock .mec_postblock_content {
		padding-bottom: 20px;
	}

	/*
	 * A partir daqui o modelo encolhe o texto do card e o bloco de destaques —
	 * medidas que só apareceram quando a auditoria passou a rodar também a
	 * 1000px. Antes, com uma medição só a 1280, toda esta faixa ficava sem
	 * comparação.
	 */
	.mec_post.mec_pl_lg_2 .mec_post_title {
		font-size: 1.125rem; /* 18px */
	}

	/* O card médio (busca, 404) tem degrau próprio no modelo. */
	.mec_post.mec_pl_md_2 .mec_post_title {
		font-size: 1rem; /* 16px */
	}

	/* Título do post em 2.4em, medida do `single.css`. */
	.mec_singlepage .entry-header .mec_post_title {
		font-size: 2.4em;
	}

	.mec_heroblock_wrapper {
		height: 412px;
	}

	/* Os dois cards da base ficam num quarto da largura: título menor. */
	.mec_hero_item_3 .mec_post_title,
	.mec_hero_item_4 .mec_post_title {
		font-size: 1rem; /* 16px */
	}

	/* A sidebar perde o recuo maior: 15px dos dois lados, como no modelo. */
	.row > .mec_sidebar,
	.mec_cat_content > .mec_sidebar {
		padding-inline: 15px;
	}

	/*
	 * Colunas do rodapé empilham e ganham respiro entre si.
	 *
	 * 40px vale só desta faixa até 1023: medido no modelo, abaixo de 768 ele
	 * volta para 20px, e o degrau de baixo está em `@media (width <= 768px)`.
	 */
	.footer_column {
		margin-bottom: var(--mec-space-2xl); /* 40px */
	}

	/*
	 * O modelo limita a imagem flutuada conforme a coluna encolhe: 300px aqui,
	 * 265px no tablet retrato, e abaixo de 568px o float sai de cena.
	 */
	.alignleft,
	.alignright {
		max-width: 18.75rem; /* 300px */
	}

	/*
	 * A TOPBAR CONTINUA no celular, e as outras duas não.
	 *
	 * Ela saía junto com a midbar e a bottombar, como no modelo, onde a barra
	 * só tinha redes sociais e login — coisas que o menu off-canvas já dá. Agora
	 * ela carrega a régua de destaques, que é conteúdo editorial e o único lugar
	 * do cabeçalho onde a última notícia aparece sem o leitor procurar.
	 */
	.mec_header .mec_midbar,
	.mec_header .mec_bottombar {
		display: none;
	}

	/*
	 * A DATA SAI. A barra tem 35px e a coluna do celular é estreita: com a data
	 * ao lado, sobrariam menos de 200px para a régua, o que corta o título no
	 * meio e faz a manchete passar rápido demais para ser lida.
	 *
	 * É também a informação que o leitor obtém em qualquer outro canto do
	 * aparelho — ao contrário da manchete.
	 */
	.topbar_widget.omecanico_data {
		display: none;
	}

	/* Sozinha na barra, a régua não precisa de traço nem de recuo à esquerda. */
	.topbar_widget + .topbar_widget {
		padding-left: 0;
		border-left: 0;
	}

	/*
	 * AS REDES SOCIAIS SAEM DA TOPBAR, mesma lógica da data acima: a régua já
	 * disputa os 35px de barra com o alternador de tema, e as redes continuam
	 * alcançáveis no menu off-canvas e no rodapé.
	 */
	.mec_nav_socials {
		display: none;
	}

	.mec_navbar_mobile_wrapper {
		display: block;
	}

	/* Sem midbar, o cabeçalho gruda direto no topo. */
	.mec_header_wrapper {
		inset-block-start: 0;
	}

	/*
	 * A partir daqui quem aparece é a navbar mobile, de 60px.
	 *
	 * Os 24px casam a LARGURA com a do modelo, não a altura: lá o logo mede
	 * 144x40, aqui a marca é bem mais larga, e em 24px ela dá 143px — os mesmos
	 * 144. Cheguei a subir para 40px, para casar a altura, e medi: a marca ia a
	 * 238px de largura numa barra de 390 e passava a dominar o cabeçalho.
	 *
	 * Quando as duas marcas têm proporções diferentes, é a largura que precisa
	 * bater — é ela que disputa espaço com o botão do menu e o da busca.
	 */
	.site-title img,
	.mec_logo_img {
		max-height: 1.5rem;
	}

	/* A barra do celular acompanha a do desktop: azul da marca, pedido da cliente. */
	.mec_navbar_mobile {
		background-color: var(--mec-color-accent);
	}

	.mec_navbar_mobile .mec_nav_row {
		min-height: 3.75rem;
	}

	.mec_navbar_mobile a,
	.mec_navbar_mobile button {
		color: var(--mec-color-inverse);
	}

	.mec_navbar_mobile .mec_search_form {
		display: none;
	}

	/*
	 * O CAMPO DE BUSCA OCUPA A LARGURA DA TELA, como no modelo, onde ele sangra
	 * de `-15px` a `-15px` do contêiner e vira uma faixa sob o cabeçalho.
	 *
	 * O `inset-inline: 0` abaixo já existia e fazia exatamente o que pede — só
	 * que dentro de 38px. `position: absolute` resolve contra o ancestral
	 * POSICIONADO mais próximo, e era o próprio `.mec_search_wrapper`, do
	 * tamanho da lupa. Medido: o campo abria em x=350 com 162px de largura numa
	 * tela de 390, terminando 122px fora dela — sobravam uns 40px visíveis.
	 *
	 * Estas duas linhas movem o bloco de contenção para a barra inteira: a lupa
	 * deixa de ser referência e a navbar passa a ser.
	 */
	.mec_navbar_mobile {
		position: relative;
	}

	/*
	 * A COLUNA DA BUSCA ESTICA ATÉ A ALTURA DA BARRA.
	 *
	 * A `.mec_nav_row` centraliza os filhos, então a coluna ficava com a altura
	 * do conteúdo — 28px numa barra de 60 — e o botão herdava isso. Como o bico
	 * do balão é ancorado no botão, ele flutuava 16px acima do painel.
	 *
	 * Só a coluna da direita, e só na navbar mobile: o logo e o hambúrguer
	 * continuam centrados. O ícone também, porque o botão é flex com
	 * `align-items: center` por dentro.
	 */
	.mec_navbar_mobile .mec_nav_col.mec_nav_right,
	.mec_navbar_mobile .mec_nav_col.mec_nav_right .item_wrap {
		align-self: stretch;
		align-items: stretch;
	}

	.mec_navbar_mobile .mec_search_wrapper {
		position: static;
		/*
		 * O envoltório também estica, senão o `align-self` do botão não tem o que
		 * esticar: ele é filho DESTE, que é `display: block`, e `align-self` só
		 * vale para item de flex. Medido, o botão ficava com 28px numa barra de
		 * 60 e o bico do balão flutuava 16px acima do painel.
		 */
		align-self: stretch;
		display: flex;
		align-items: stretch;
	}

	/*
	 * O campo cresce para preencher a faixa. Sem isto ele fica na largura
	 * natural do `input` — medido, 162px numa faixa de 390 — e a faixa larga não
	 * serve para nada: o modelo tem 350px de campo em 390 de barra.
	 */
	.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_form input {
		flex: 1 1 auto;
		min-width: 0;
		/*
		 * E as cores são as MESMAS da busca do desktop, por pedido do PO — as
		 * três saem da paleta declarada no `.mec_search_wrapper`, no layout.css.
		 *
		 * A regra de `.mec_navbar_mobile .mec_search_wrapper input` pinta o
		 * campo para BARRA ESCURA — texto #fafafa sobre branco a 10% —, o que
		 * servia enquanto ele vivia dentro da navbar. Na faixa aberta, que tem
		 * fundo claro, o texto digitado ficava branco no branco: invisível.
		 */
		width: auto;
		border: 1px solid var(--mec-busca-borda);
		background-color: var(--mec-busca-fundo);
		color: var(--mec-busca-texto);
	}

	/* A lupa vira X quando a busca está aberta, como no modelo. */
	.mec_navbar_mobile .mec_search_toggle .omec-icon--fechar,
	.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_toggle .omec-icon--busca {
		display: none;
	}

	.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_toggle .omec-icon--fechar {
		display: inline-block;
	}

	/*
	 * A seta que aponta do X para a faixa. É o triângulo por borda, medido no
	 * modelo: `0 8px 8px`, transparente nos lados e da cor do painel embaixo,
	 * ancorado em `bottom: -1px` para encostar na faixa sem deixar fresta.
	 */
	/*
	 * O BOTÃO OCUPA A ALTURA INTEIRA DA BARRA, como no modelo, onde ele mede
	 * 19x60 numa navbar de 60px.
	 *
	 * Não é capricho: a seta é ancorada nele, e é isso que a faz encostar no
	 * painel. Com o botão de 34px, a base ficava em y=82 e o painel começava em
	 * y=95 — a seta flutuava 13px acima do balão, o que lê como um triângulo
	 * solto na barra, não como bico de balão.
	 */
	.mec_navbar_mobile .mec_search_toggle {
		position: relative;
		align-self: stretch;
		display: flex;
		align-items: center;
	}

	/*
	 * O BICO DO BALÃO. Triângulo por borda, `0 8px 8px`, transparente nos lados
	 * e da cor do painel embaixo — assim ele parece a mesma superfície saindo
	 * do X, e não uma peça colada.
	 *
	 * Centrado no botão, e não encostado à direita como no modelo: lá o botão
	 * tem 19px e dá no mesmo, aqui tem 38px e o bico ficava 11px ao lado do X.
	 * Centrando, ele segue o ícone sem número mágico.
	 *
	 * `-1px` sobrepõe a divisa e evita a fresta de subpixel entre bico e painel.
	 */
	.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_toggle::before {
		content: '';
		position: absolute;
		inset-block-end: -1px;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		border-style: solid;
		border-width: 0 8px 8px;
		border-color: transparent transparent var(--mec-color-bg);
	}

	.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_form input::placeholder {
		color: var(--mec-color-muted);
	}

	/*
	 * O botão da lupa acompanha o texto, e recua os 20px do padding.
	 *
	 * Ele é absoluto contra o FORMULÁRIO, que agora vai de borda a borda — sem o
	 * recuo ele encostava no limite da tela, fora do campo, e aparecia cortado
	 * pela metade.
	 */
	.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_form .mec_search_button {
		inset-inline-end: var(--mec-space-lg);
		color: var(--mec-color-text);
	}

	.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_form {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		display: flex;
		/* Os 20px são os do modelo. */
		padding: var(--mec-space-lg);
		background-color: var(--mec-color-bg);
		box-shadow: var(--mec-shadow-md);
	}
}

/* ---------- Tablet (<= 992px): sidebar abaixo do conteúdo ---------- */

/*
 * Card miúdo: o modelo encolhe a miniatura de 120 para 80px abaixo de 1024, e
 * o corpo do título de 15 para 13. O tema só encolhia em 480, e para 72px.
 *
 * Medido no modelo em sete larguras: 120×86 a 1280, e 80×57 de 992 para baixo.
 */
@media (width <= 1023px) {
	.mec_post.mec_pl_sm {
		grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); /* 80px */
	}

	.mec_post.mec_pl_sm .mec_post_title,
	.mec_post.mec_pl_sm .mec_post_title a {
		font-size: 13px;
		line-height: 1.4;
	}
}

/*
 * E volta a 14px abaixo de 668. O modelo é fluido nesta faixa — 13px em 992 e
 * 768, 14 em 667, 480 e 390, 13 de novo em 320 —, e o tema resolve em degraus.
 * Estes dois acertam as quatro larguras que a auditoria mede.
 */
@media (width <= 667px) {
	.mec_post.mec_pl_sm .mec_post_title,
	.mec_post.mec_pl_sm .mec_post_title a {
		font-size: var(--mec-font-size-base); /* 14px */
	}
}

@media (width <= 992px) {
	.mec_main {
		padding-block: var(--mec-space-lg);
	}

	/*
	 * Sem folga própria: medido no modelo, `.mec_sidebar` tem margin-top 0 em
	 * TODA largura, inclusive empilhada. Quem separa a sidebar do conteúdo é a
	 * margem inferior do último card (`.mec_posts .mec_post`, 30px), e não uma
	 * margem da coluna — somar as duas dava 60px onde o modelo tem 30.
	 */
	.mec_sidebar {
		margin-top: 0;
	}

	.mec_singlepage .mec_post_title {
		font-size: var(--mec-font-size-2xl);
	}
}

/* ---------- Faixa do meio (768 a 1023px) ---------- */

/*
 * O modelo tem um degrau próprio aqui, mais apertado que o de 1024: título de
 * card em 16px, meta em 10 e resumo em 12. Sem ele o tema ficava com a
 * tipografia do desktop numa coluna bem mais estreita.
 */
@media (768px <= width <= 1023px) {
	.mec_post.mec_pl_lg_2 .mec_post_title {
		font-size: 1rem; /* 16px */
	}

	.mec_post.mec_pl_md_2 .mec_post_title {
		font-size: 0.875rem; /* 14px */
	}

	/* Relacionados: título menor e respiro acima da miniatura. */
	.mec_related_post_container .mec_post_title {
		margin-top: var(--mec-space-sm);
		font-size: 0.8125rem; /* 13px */
	}

	.mec_related_post_container .mec_thumb {
		margin-bottom: var(--mec-space-sm);
	}

	.mec_post_meta {
		font-size: 0.625rem; /* 10px */
	}

	.mec_post_excerpt {
		font-size: 0.75rem; /* 12px */
	}

	.mec_block_heading {
		margin-bottom: var(--mec-space-lg); /* 20px */
	}
}

/* ---------- Hero: degrau de 768px, ainda em mosaico ---------- */

/*
 * O modelo mantém os quatro destaques em mosaico até 667px — só encolhe a
 * caixa e a tipografia. O tema empilhava tudo numa coluna já em 768.
 */
/*
 * Teto em 768 de propósito. O modelo troca o corpo do título do hero em algum
 * ponto desta faixa — 22px em 668, 20px em 768 —, mas estreitar o teto para
 * 767 tira o bloco INTEIRO de 768, e o hero perde geometria, badge e meta
 * junto. Medido: a troca do teto corrigia 2 divergências e criava 10.
 *
 * O degrau do título fica pendente; ele precisa de regra própria, não de um
 * teto diferente para todo o bloco.
 */
@media (736px <= width <= 768px) {
	/*
	 * Só nestes 32px os lados do hero valem 20px. O modelo abre a regra em
	 * `min-width: 736px`; abaixo disso volta a 25 até o degrau de 480. Copiar
	 * a faixa inteira de 668 a 768 daria 20px onde o modelo ainda dá 25.
	 */
	.mec_heroblock .mec_postblock_content {
		padding-inline: 20px;
	}
}

@media (668px <= width <= 768px) {
	.mec_heroblock_wrapper {
		height: 350px;
	}

	.mec_heroblock .mec_post_title {
		font-size: 0.875rem; /* 14px */
	}

	.mec_hero_item_1 .mec_post_title {
		font-size: 1.375rem; /* 22px */
	}

	.mec_hero_item_3 .mec_post_title,
	.mec_hero_item_4 .mec_post_title {
		font-size: 0.75rem; /* 12px */
	}

	/*
	 * É a faixa mais apertada do mosaico: card de 158px de altura por 181 de
	 * largura, onde um nome de editoria como "Conteúdo Exclusivo" já ocupa duas
	 * linhas de badge. Com três linhas de título sobravam 6px acima do
	 * conteúdo — perto demais de cortar o badge. Duas linhas devolvem 22px.
	 */
	.mec_hero_item_3 .mec_post_title a,
	.mec_hero_item_4 .mec_post_title a {
		-webkit-line-clamp: 2;
	}

	.mec_heroblock .mec_post_category,
	.mec_heroblock .mec_post_meta {
		font-size: 0.625rem; /* 10px */
	}
}

/* ---------- Hero: abaixo de 667px o mosaico vira faixa de rolagem ---------- */

/*
 * É o que o modelo faz nesta largura: o destaque principal ocupa a linha
 * inteira e os outros três viram uma tira que rola na horizontal. Aqui o
 * `.mec_heroblock_scroller` deixa de ser `display: contents` e volta a ser a
 * caixa que embrulha os cards 2 a 4.
 */
@media (width <= 667px) {
	/*
	 * `fr` e não porcentagem: com o `gap` do wrapper, duas linhas de 60% e 40%
	 * somariam 100% mais a calha e estourariam os 440px.
	 */
	.mec_heroblock_wrapper {
		grid-template-rows: minmax(0, 60fr) minmax(0, 40fr);
		height: 440px;
	}

	/*
	 * Flex, e não os `inline-block` do modelo: entre caixas em linha o espaço em
	 * branco do HTML vira uma calha de largura imprevisível, que muda com o
	 * corpo do texto. Com flex a calha é o mesmo `gap` de 4px do mosaico.
	 */
	.mec_heroblock_scroller {
		display: flex;
		gap: 0.25rem; /* 4px */
		height: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * `flex-grow: 1` cobre o arquivo com poucos posts: com três cards a soma das
	 * bases passa de 100% e eles ficam nos 45%, rolando; com um ou dois sobra
	 * espaço e eles crescem para preencher a tira, em vez de deixar metade dela
	 * em branco.
	 */
	.mec_heroblock_scroller .mec_post {
		flex: 1 0 45%;
		height: 100%;
		margin-bottom: 0;
	}

	.mec_hero_item_1 .mec_post_title {
		font-size: 1.5rem; /* 24px */
	}

	.mec_heroblock_scroller .mec_post_title {
		font-size: 1rem; /* 16px */
		margin-bottom: 0;
	}

	.mec_heroblock_scroller .mec_post_meta {
		display: none;
	}

	/*
	 * Sem ponteiro não há rollover: o modelo desliga a animação aqui e deixa
	 * tudo no estado final. A imagem continua recuada, como lá.
	 */
	.mec_heroblock .mec_post_category,
	.mec_heroblock .mec_post_title,
	.mec_heroblock .mec_post_meta {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Tablet retrato / mobile grande (<= 768px) ---------- */

@media (width <= 768px) {
	.alignleft,
	.alignright {
		max-width: 16.5625rem; /* 265px */
	}

	.mec_posts {
		gap: var(--mec-space-lg);
	}

	.mec_post.mec_pl_lg_2,
	.mec_post.mec_pl_md_2 {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Subtítulo do post: 18px e encostado no título, medido no modelo. O
	 * `margin-top` negativo é do modelo — ele puxa o subtítulo para junto do
	 * título, e o tema empurrava 16,6px para baixo.
	 */
	.mec_post_subtitle {
		font-size: var(--mec-font-size-lg); /* 18px */
		line-height: 1.4;
		margin-top: -5px;
		margin-bottom: var(--mec-space-md); /* 15px */
	}

	/*
	 * Cabeçalho e imagem de destaque encolhem o respiro de 30 para 20px, e o
	 * degrau seguinte (15px) está em `<= 480px`.
	 */
	.entry-header,
	.mec_featured {
		margin-bottom: var(--mec-space-lg); /* 20px */
	}

	/*
	 * No post o caminho de migalhas tem folga menor que no arquivo: 15px aqui
	 * contra os 20 do arquivo. Por isso o seletor é escopado — silenciar no
	 * `.mec_breadcrumbs` solto trocaria uma divergência por outra.
	 */
	.mec_singlepage .mec_breadcrumbs {
		margin-bottom: var(--mec-space-md); /* 15px */
	}

	/*
	 * O recuo superior é ZERO no modelo, em qualquer largura — a folga acima do
	 * rodapé vem da margem, que fica. Os 40px de padding aqui empurravam o
	 * conteúdo do rodapé para baixo e somavam à margem.
	 */
	.mec_footer {
		margin-top: var(--mec-space-2xl);
		padding-block: 0 var(--mec-space-md);
	}

	/* No modelo as colunas do rodapé encolhem o respiro de 40 para 20px. */
	.footer_column {
		margin-bottom: var(--mec-space-lg); /* 20px */
	}

	/*
	 * A linha de copyright ganha folga própria abaixo de 768, onde o rodapé
	 * empilha. Acima disso o modelo zera, e o tema já zerava.
	 */
	.copyright {
		margin-block: 6px;
	}

	.mec_footer_bottom .container {
		flex-direction: column;
		text-align: center;
	}

	.mec_prevnext_post .next-post {
		text-align: left;
	}

	/* O modelo encolhe o avatar do comentário e a calha junto. */
	.comment-body:has(.avatar) {
		padding-left: 55px;
	}

	.comment-list .avatar {
		inset-inline-start: -55px;
		width: 40px;
	}
}

/* ---------- Mobile (<= 667px) ---------- */

@media (width <= 667px) {
	h1 {
		font-size: var(--mec-font-size-2xl);
	}

	/*
	 * Medido no modelo: a folga abaixo do caminho de migalhas cai de 20 para
	 * 10px aqui, e volta a 20 a partir de 768. O tema mantinha 20 em toda
	 * largura.
	 */
	.mec_breadcrumbs {
		margin-bottom: var(--mec-space-sm); /* 10px */
	}

	/*
	 * A meta do CARD cai para 10px — o tema subia para 11px abaixo de 668.
	 *
	 * O `:not(.mec_singlepage)` não é zelo: no post o modelo faz o contrário e
	 * pede 13px, maior que os 11 do tema. A primeira versão desta regra veio
	 * sem escopo e trocou quatro divergências do card por quatro do post.
	 *
	 * Não tente escapar o hero daqui com um `:not(.mec_heroblock)`: além de
	 * não excluir nada — qualquer outro ancestral satisfaz o passo —, ele sobe
	 * a especificidade desta regra de (0,3,1) para (0,4,1) e passa a vencer o
	 * degrau de 8px do card em `<= 480px`, que hoje ganha por empate e ordem.
	 * Medido: o hero da home melhorava em 6 propriedades e archive e author
	 * pioravam em 11. Quem precisa de escape é o hero, com regra própria.
	 */
	.mec_content:not(.mec_singlepage) :not(.mec_heroblock) :is(
		.mec_post_meta,
		.mec_meta_author,
		.mec_meta_author a,
		.mec_meta_date,
		.mec_meta_date a,
		.mec_meta_comment,
		.mec_meta_comment a
	) {
		/* 10px literal: o token `xs` vale 11px, e o modelo pede 10 aqui. */
		font-size: 10px;
	}

	/*
	 * O badge de editoria do CARD encolhe: 10px daqui até 768, e 8px abaixo de
	 * 480. Escopado pelo mesmo motivo da meta acima — no post o modelo mantém
	 * o badge grande, em 14px na caixa e 11 no link.
	 */
	.mec_content:not(.mec_singlepage) :is(.mec_post_category, .mec_post_category a) {
		font-size: 10px;
		line-height: 10px;
	}

	/* Cabeçalho de seção: 20px no modelo em qualquer largura. */
	.mec_block_heading {
		margin-bottom: var(--mec-space-lg); /* 20px */
	}

	.mec_singlepage .mec_post_title {
		font-size: var(--mec-font-size-xl);
	}

	/*
	 * O título do post cai para 32px aqui — o `2.4em` herdado do `single.css`
	 * do modelo rende 33,6px sobre o corpo de 14px, e vale só de 768 para
	 * cima. Medido no modelo: 32px até 667, 33,6 de 768 a 1024, 42 acima.
	 *
	 * É a armadilha que o cabeçalho da auditoria descreve: o valor foi lido do
	 * CSS do modelo em vez de medido no modelo renderizado, e os 5% de
	 * diferença viajaram para corpo, entrelinha, espaçamento e margem — quatro
	 * divergências de um valor só.
	 */
	.mec_singlepage .entry-header .mec_post_title {
		font-size: 2rem; /* 32px */
	}

	.mec_author_wrap {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.mec_post_meta_1 {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Mobile pequeno (<= 568px) ---------- */

@media (width <= 568px) {
	/* Largura de sobra não existe mais: a imagem ocupa a linha inteira. */
	.alignleft,
	.alignright {
		float: none;
		max-width: 100%;
		margin-inline: auto;
	}
}

/* ---------- Mobile estreito (<= 480px) ---------- */

@media (width <= 480px) {
	/* Degrau de baixo do cabeçalho e do destaque: 15px no modelo. */
	.entry-header,
	.mec_featured {
		margin-bottom: var(--mec-space-md); /* 15px */
	}

	/* E o das migalhas do post, que cai para 7px. */
	.mec_singlepage .mec_breadcrumbs {
		margin-bottom: 7px;
	}

	/*
	 * Título da página, e cada tela tem o seu.
	 *
	 * O arquivo de categoria SOBE para 27px aqui — é a única tela em que o
	 * título cresce no celular, porque ele é a única âncora da página. A busca
	 * faz o contrário e cai para 20px, já que o termo buscado repete logo
	 * abaixo. Os dois medidos no modelo; o tema dava 26px nos dois.
	 */
	.mec_cat_title {
		font-size: 27px;
		line-height: 1.3;
		margin-bottom: var(--mec-space-sm); /* 10px */
	}

	.mec_archive_title {
		font-size: var(--mec-font-size-lg); /* 20px */
		line-height: 1.3;
	}

	/*
	 * Corpo do título do card, medido tela a tela.
	 *
	 * Arquivo e autor pedem 16px; a busca pede 15px e peso 400, e não os 600
	 * que o PO fixou para o resto (D14) — lá o título compete com o trecho
	 * destacado da busca, e o modelo o alivia. Por isso duas regras e não uma.
	 */
	.mec_posts .mec_post :is(.mec_post_title, .mec_post_title a) {
		font-size: var(--mec-font-size-md); /* 16px */
		line-height: 1.4;
	}

	.mec_pl_md_2 :is(.mec_post_title, .mec_post_title a),
	.mec_pl_md_2.mec_post :is(.mec_post_title, .mec_post_title a) {
		font-size: 15px;
		font-weight: var(--mec-font-weight-regular);
		line-height: 1.4;
	}

	/*
	 * Último degrau do badge do card: 8px na medição escopada da auditoria.
	 *
	 * O escopo é `.mec_posts .mec_post`, e não `.mec_content`: o hero mora no
	 * mesmo `.mec_content` e tem degraus próprios — 9px aqui, contra os 8 do
	 * card. A primeira versão desta regra pegava os dois e trocava divergência
	 * de card por divergência de hero.
	 */
	.mec_posts .mec_post :is(.mec_post_category, .mec_post_category a) {
		font-size: 8px;
		line-height: 8px;
	}

	/*
	 * O card volta a 15px de respiro entre si — o tema mantinha os 30 do
	 * desktop, que numa coluna estreita empurram metade da lista para fora da
	 * dobra.
	 */
	.mec_posts .mec_post {
		margin-bottom: var(--mec-space-md); /* 15px */
	}

	/* O "Leia mais" encosta no resumo: 10px aqui, 15 de 481 para cima. */
	.mec_readmore {
		margin-top: var(--mec-space-sm); /* 10px */
	}

	/*
	 * Medido no modelo: o resumo encosta no título aqui, com 5px em vez dos
	 * 14 que valem de 568 para cima. Numa coluna estreita os 14px empurravam
	 * o resumo para fora da dobra.
	 */
	.mec_post_excerpt {
		margin-top: var(--mec-space-2xs); /* 5px */
	}

	/*
	 * A calha NÃO encolhe aqui, e isto já foi as duas coisas.
	 *
	 * O tema reduzia para 10px abaixo de 480, com um comentário chamando isso
	 * de decisão registrada — mas a decisão não estava em lugar nenhum, nem na
	 * lista do `audit-diff.py`. Sondado o modelo em oito larguras, de 320 a
	 * 1280: ele usa **15px em todas**, e nunca encolhe. Não era decisão, era
	 * divergência sem dono.
	 *
	 * O PO decidiu voltar para o valor do modelo em 27/08. A variável fica com
	 * o valor do `:root`, e a linha do celular passa a começar onde o modelo
	 * começa — na `.container` e, pela mesma variável, na tela de blocos.
	 */

	/*
	 * Último degrau do hero no modelo: a caixa encolhe, a tira mostra quase um
	 * card inteiro de cada vez e a meta sai de cena.
	 */
	.mec_heroblock_wrapper {
		grid-template-rows: minmax(0, 55fr) minmax(0, 45fr);
		height: 300px;
	}

	.mec_heroblock_scroller .mec_post {
		flex-basis: 80%;
	}

	.mec_hero_item_1 .mec_post_title {
		font-size: 1.125rem; /* 18px */
	}

	.mec_heroblock_scroller .mec_post_title {
		font-size: 0.9375rem; /* 15px */
	}

	/*
	 * 9px no hero, contra os 8 do card. Escrito com `.mec_post` no meio para
	 * chegar a (0,4,1) — a regra do card em `<= 667px` vale (0,3,1) e vem
	 * antes; sem esse peso o hero herdava os 10px dela.
	 */
	.mec_heroblock .mec_post :is(.mec_post_category, .mec_post_category a) {
		font-size: 0.5625rem; /* 9px */
		/* A regra do card fixa `line-height: 10px`; sem repor aqui, a caixa do
		   badge do hero ficava um pixel mais alta que a letra dentro dela. */
		line-height: 1;
	}

	/* Último degrau do hero: a tarja encosta no texto e aperta dos lados. */
	.mec_heroblock .mec_postblock_content {
		padding: 5px 15px 10px;
	}

	.mec_heroblock .mec_post_meta {
		display: none;
	}

	/*
	 * O modelo desmonta o mosaico de relacionados exatamente aqui: um card por
	 * linha, sem a calha de 30px, e o respiro entre eles cai para 20px. Acima
	 * de 480px ele mantém as duas linhas, por mais apertadas que fiquem.
	 */
	.mec_related_post_container .mec_posts {
		margin-inline-end: 0;
	}

	.mec_related_post_container .mec_post,
	.mec_related_post_container .mec_post:nth-child(-n + 2) {
		width: 100%;
		margin-bottom: var(--mec-space-lg);
		padding-inline-end: 0;
	}

	/*
	 * Abaixo de 480px o modelo abre mão do avatar e da calha: o comentário
	 * ocupa a largura inteira.
	 */
	.comment-list {
		margin-bottom: var(--mec-space-sm);
	}

	.comment-body,
	.comment-body:has(.avatar) {
		padding: var(--mec-space-sm) 0 0;
	}

	.comment-author {
		margin-bottom: 5px;
	}

	.comment-list .avatar {
		display: none;
	}

	.mec_post.mec_pl_sm {
		grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); /* 80px */
	}

	.jscroll-to-top {
		inset-block-end: var(--mec-space-sm);
		inset-inline-end: var(--mec-space-sm);
	}
}

/* ---------- Piso de 320px ---------- */

@media (width <= 320px) {
	.mec_search_input {
		min-width: 0;
	}

	.mec_post.mec_pl_sm {
		grid-template-columns: minmax(0, 1fr);
	}
}