/*
 * Responsividade — Blog / conteúdo WP (index, home, single, archive, page, 404, search).
 * Seletores próprios: .mer-posts, .mer-post-card, .mer-entry-*, .mer-post-nav, .mer-pagination,
 * .mer-page-header, .mer-search-form*, .mer-entry-content--narrow, .mer-entry-header--narrow.
 * Carregado depois de main.css. Breakpoints: xl 1200 · lg 1024 · md 768 · sm 480.
 * NÃO tocar em seletores da Foundation (_base.css).
 */

/* bp-md */
@media (max-width: 768px) {
	/* Títulos de artigo grandes (single/page) — reduzir de 42px. */
	.mer-entry-header .mer-entry-title,
	.mer-entry-header--narrow .mer-entry-title {
		font-size: var(--mer-fs-4xl);
	}

	/* Cabeçalho de prose estreitada — menos respiro vertical no topo. */
	.mer-entry-header--narrow {
		padding: var(--mer-space-6) 0 var(--mer-space-5);
	}

	/* Subtítulos da prose acompanham a redução. */
	.mer-entry-content--narrow h2 {
		font-size: var(--mer-fs-3xl);
	}
}

/* bp-sm */
@media (max-width: 480px) {
	/* Títulos de artigo — passo final para telas de telefone. */
	.mer-entry-header .mer-entry-title,
	.mer-entry-header--narrow .mer-entry-title {
		font-size: var(--mer-fs-3xl);
	}

	/* Título do card na listagem — ligeiramente menor. */
	.mer-post-card .mer-entry-title {
		font-size: var(--mer-fs-xl);
	}

	/* Card com padding reduzido para ganhar largura útil. */
	.mer-post-card {
		padding: var(--mer-space-5);
	}

	/* Navegação prev/next — empilhar para não espremer os links. */
	.mer-post-nav {
		flex-direction: column;
		gap: var(--mer-space-4);
	}

	/* Prose: quebrar links/código longos para evitar scroll horizontal. */
	.mer-entry-content--narrow {
		overflow-wrap: break-word;
		word-break: break-word;
	}
	.mer-entry-content--narrow pre,
	.mer-entry-content--narrow table {
		overflow-x: auto;
		max-width: 100%;
	}

	/* Busca: garantir que o input encolha e o formulário não estoure em 320. */
	.mer-search-form {
		flex-wrap: wrap;
	}
	.mer-search-form__input {
		min-width: 0;
	}

	/* Paginação: alvos de toque confortáveis já em min 40px; manter centralizada. */
	.mer-pagination {
		gap: var(--mer-space-2);
	}
}