/*
 * Vitrine das edições. Usa os tokens do tema quando existem, com valor de
 * reserva para o caso de o plugin rodar sob outro tema.
 */

.omec-edicoes {
	padding-block: var(--mec-space-xl, 30px);
}

.omec-edicoes__cabecalho {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mec-space-md, 15px);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mec-space-xl, 30px);
}

.omec-edicoes__busca {
	display: flex;
	gap: var(--mec-space-xs, 8px);
}

.omec-edicoes__busca input {
	min-width: 14rem;
}

/* ---------- Destaque da última edição ---------- */

.omec-destaque {
	display: grid;
	gap: var(--mec-space-lg, 20px);
	align-items: start;
	margin-bottom: var(--mec-space-2xl, 40px);
	padding-bottom: var(--mec-space-2xl, 40px);
	border-bottom: 1px solid var(--mec-color-border, #eeeeee);
}

@media (width >= 768px) {
	/*
	 * A capa ocupa uma coluna do mesmo tamanho das da grade abaixo, para o
	 * destaque não parecer um bloco de outra tela.
	 */
	.omec-destaque {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: var(--mec-space-xl, 30px);
	}
}

.omec-destaque__capa {
	display: block;
	background-color: var(--mec-color-surface-alt, #f5f5f5);
}

.omec-destaque__imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 150 / 228;
	object-fit: cover;
}

.omec-destaque__rotulo {
	margin: 0 0 var(--mec-space-xs, 8px);
	/*
	 * `accent-text` e não `accent`: é o token que troca no modo escuro, onde o
	 * azul do site sobre o fundo escuro dá razão 1,84. Para FUNDO o accent
	 * continua servindo — o branco por cima dele tem contraste nos dois temas.
	 */
	color: var(--mec-color-accent-text, #004489);
	font-size: var(--mec-font-size-xs, 0.6875rem);
	font-weight: 600;
	letter-spacing: var(--mec-letter-spacing-wide, 0.05em);
	text-transform: uppercase;
}

.omec-destaque__titulo {
	margin: 0 0 var(--mec-space-sm, 10px);
	font-size: var(--mec-font-size-2xl, 1.625rem);
	line-height: 1.3;
}

.omec-destaque__resumo {
	margin: 0 0 var(--mec-space-lg, 20px);
}

/* Agora é o texto inteiro, então pode ter mais de um parágrafo. */
.omec-destaque__resumo > :first-child {
	margin-top: 0;
}

.omec-destaque__resumo > :last-child {
	margin-bottom: 0;
}

.omec-destaque__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mec-space-sm, 10px);
	margin: 0;
}

/* O "Ler a edição" é o mesmo botão do PDF, com o fundo invertido. */
.omec-destaque__ler {
	display: inline-flex;
	align-items: center;
	/* Mesmo padding do botão de PDF, para os dois terem a mesma altura. */
	padding: var(--mec-space-md, 15px) var(--mec-space-lg, 20px);
	border: 1px solid var(--mec-color-accent-text, #004489);
	background-color: transparent;
	color: var(--mec-color-accent-text, #004489);
	font-size: var(--mec-font-size-xs, 0.6875rem);
	font-weight: 600;
	letter-spacing: var(--mec-letter-spacing-wide, 0.05em);
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--mec-transition-fast, 0.15s), color var(--mec-transition-fast, 0.15s);
}

.omec-destaque__ler:hover,
.omec-destaque__ler:focus-visible {
	background-color: var(--mec-color-accent, #004489);
	color: var(--mec-color-accent-contrast, #fff);
}

/*
 * Quatro capas por linha, por decisão do PO. Em vez de `auto-fill`, que dava 6
 * na tela larga, a contagem é fixa e cai em degraus: 4, 3, 2.
 */
.omec-edicoes__grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mec-space-xl, 30px) var(--mec-space-lg, 20px);
	/* Folga entre a última linha de capas e a paginação. */
	margin: 0 0 var(--mec-space-xl, 30px);
	padding: 0;
	list-style: none;
}

@media (width >= 568px) {
	.omec-edicoes__grade {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (width >= 768px) {
	.omec-edicoes__grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Coluna flex com o botão empurrado para a base: com resumos de tamanhos
 * diferentes — e há edição sem resumo nenhum — os botões ficariam em alturas
 * diferentes na mesma linha da grade.
 */
.omec-edicao {
	display: flex;
	flex-direction: column;
}

.omec-edicao__pdf {
	margin-top: auto;
}

.omec-edicao__capa {
	display: block;
	margin-bottom: var(--mec-space-sm, 10px);
	background-color: var(--mec-color-surface-alt, #f5f5f5);
}

/*
 * A proporção é a dos três cortes (150:228). Fixá-la mantém a grade alinhada
 * mesmo nas 41 capas que não geram o corte grande e caem para o tamanho cheio.
 */
.omec-edicao__imagem,
.omec-edicao__sem-capa {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 150 / 228;
	object-fit: cover;
}

.omec-edicao__sem-capa {
	background-color: var(--mec-color-surface-alt, #f5f5f5);
}

.omec-edicao__titulo {
	margin: 0 0 var(--mec-space-xs, 8px);
	font-size: var(--mec-font-size-base, 0.875rem);
	line-height: 1.35;
}

/*
 * Botão, e não link solto. Reaproveita a geometria do `input[type=submit]` do
 * tema — 13px em caixa alta, com espaçamento de letra —, que é o mesmo desenho
 * do botão de ação do resto do site.
 */
.omec-edicao__pdf {
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--mec-space-md, 15px) var(--mec-space-lg, 20px);
	border: 0;
	border-radius: 0;
	background-color: var(--mec-color-accent, #004489);
	color: var(--mec-color-accent-contrast, #fff);
	font-size: var(--mec-font-size-xs, 0.6875rem);
	font-weight: 600;
	letter-spacing: var(--mec-letter-spacing-wide, 0.05em);
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--mec-transition-fast, 0.15s);
}

.omec-edicao__pdf:hover,
.omec-edicao__pdf:focus-visible {
	background-color: var(--mec-color-accent-hover, #2ea3f2);
	color: var(--mec-color-surface-dark, #1b2228);
}

.omec-edicao__icone {
	flex: 0 0 auto;
}

/*
 * No destaque o botão divide a linha com o "Ler a edição", então ali ele volta
 * à largura natural. O 100% vale onde ele está sozinho na coluna — no card da
 * grade e embaixo da capa no post.
 */
.omec-destaque__acoes .omec-edicao__pdf {
	width: auto;
}

.omec-edicoes__vazio {
	padding-block: var(--mec-space-2xl, 40px);
}


/* ---------- Post de edição: capa à esquerda, texto à direita ---------- */

/*
 * A capa sai do lugar do destacado e vem para dentro do conteúdo. O espaço do
 * `.mec_featured` é pensado para paisagem, e a capa é retrato: ali ela ocupava
 * 750x1140 e empurrava o resto para baixo da dobra.
 *
 * O seletor usa a classe que o `post_class()` já põe no article.
 */
.category-edicoes .mec_featured {
	display: none;
}

.omec-edicao-single {
	display: grid;
	gap: var(--mec-space-lg, 20px);
	align-items: start;
	margin-bottom: var(--mec-space-xl, 30px);
}

@media (width >= 568px) {
	.omec-edicao-single {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--mec-space-xl, 30px);
	}
}

/*
 * A capa só gruda onde existem duas colunas. Empilhada, no mobile, o sticky
 * fazia a capa ficar presa no topo enquanto o texto passava por baixo — ali ela
 * tem de rolar com a página.
 */
@media (width >= 568px) {
	.omec-edicao-single__capa {
		position: sticky;
		/*
		 * 60px é a altura da barra fixa do tema, mais um respiro. Valor direto
		 * porque o tema NÃO tem token para isso — `--mec-header-altura` não
		 * existe, e escrever `var()` com um nome inventado dava a impressão de
		 * estar seguindo o design system quando só a reserva valia.
		 */
		top: calc(60px + var(--mec-space-md, 15px));
	}
}

.omec-edicao-single__imagem {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 150 / 228;
	object-fit: cover;
	background-color: var(--mec-color-surface-alt, #f5f5f5);
}

.omec-edicao-single__acao {
	margin: var(--mec-space-md, 15px) 0 0;
}

/* O texto já vem com os próprios parágrafos; o primeiro não precisa de folga. */
.omec-edicao-single__texto > :first-child {
	margin-top: 0;
}

/* O bloco fixo fica abaixo das duas colunas, ocupando a largura toda. */
.omec-edicao-single__chamadas {
	clear: both;
	/* Folga até o que vem depois no post — tags e barra de compartilhamento. */
	margin-bottom: var(--mec-space-xl, 30px);
}

.omec-edicao-single__chamadas > :first-child {
	margin-top: 0;
}

/* ---------- "Últimas edições" no fim do post ---------- */

.omec-ultimas {
	margin-top: var(--mec-space-2xl, 40px);
}

/*
 * São três capas, não trinta e seis: a grade da vitrine cai em degraus até 4
 * colunas, e aqui isso deixaria a terceira sozinha numa linha estranha.
 */
.omec-ultimas__grade {
	margin-bottom: 0;
}

@media (width >= 568px) {
	.omec-ultimas__grade {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}