/*
 * Manchete ABAIXO da foto, em grade de cards iguais.
 *
 * O tema "News Magazine X" monta os destaques como MOSAICO de altura fixa:
 *   .newsx-magazine-layout     { display:grid; min-height:300px }
 *   .newsx-fp-row-extra ...    { min-height:500px }
 *   .newsx-magazine-layout-1-3 { grid-template-rows: 1fr 1fr;
 *                                grid-template-areas: "main main2 main2"
 *                                                     "main box1  box2" }
 *   .newsx-grid-item           { overflow:hidden }
 * e dentro de cada peça a foto é um background esticado com o texto absoluto
 * por cima, em branco.
 *
 * Isso só fecha enquanto o texto mora DENTRO da foto: as peças têm altura
 * imposta pela linha da grade, não pelo conteúdo. Ao tirar o texto de cima da
 * imagem, cada card passa a ter altura própria (foto + título + resumo), o
 * mosaico não acomoda mais, e o `overflow:hidden` corta o título no meio.
 *
 * Por isso aqui o mosaico é desmontado e trocado por uma grade de cards de
 * tamanho igual, que é como a imprensa esportiva faz: foto, categoria, título,
 * resumo — cada card do tamanho do seu conteúdo, e a grade reflui sozinha no
 * celular. Nada disso altera o tema (que recebe atualização) nem o HTML.
 */

/* ------------------------------------------------------------------ *
 * 1. Desmonta o mosaico
 * ------------------------------------------------------------------ */
.newsx-magazine-layout {
	grid-template-areas: none !important;
	grid-template-rows: auto !important;
	grid-auto-rows: max-content;
	align-items: start;
	min-height: 0 !important;
	grid-gap: 26px 20px;
}
.newsx-fp-row-extra .newsx-magazine-layout {
	min-height: 0 !important;
}
/* As peças tinham lugar marcado ("main", "box1"...) e altura da linha. */
.newsx-magazine-layout .newsx-grid-item {
	grid-area: auto !important;
	overflow: visible;
	height: auto;
	min-width: 0;   /* sem isto o título longo empurra a coluna e estoura a grade */
}

/* Larguras: 4 cards no monitor, 2 no tablet, 1 no celular.
 *
 * Com !important porque o tema imprime as regras da grade em <style> INLINE no
 * <head>, depois desta folha — por exemplo
 *   @media screen and (max-width:768px){ .newsx-magazine-layout-1-3{grid-template-columns:1fr 1fr} }
 * Mesma especificidade (uma classe), e quem vem depois vence: sem !important o
 * celular ficava preso em duas colunas por mais que a regra aqui dissesse uma.
 */
.newsx-magazine-layout {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
	.newsx-magazine-layout {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	.newsx-magazine-layout {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-gap: 30px;
	}
}

/* ------------------------------------------------------------------ *
 * 2. A foto vira um bloco com proporção fixa
 * ------------------------------------------------------------------ */
.newsx-magazine-layout .newsx-grid-item .newsx-grid-media {
	position: relative;
	display: block;
	height: auto;
	overflow: visible;
}
.newsx-magazine-layout .newsx-grid-item .newsx-grid-image.newsx-full-stretch {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;   /* a mesma proporção em que as capas são geradas */
	display: block;
	border-radius: 8px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 3. O texto sai de cima da foto e passa a fluir embaixo
 * ------------------------------------------------------------------ */
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media.newsx-full-stretch {
	position: relative;
	width: 100%;
	height: auto;
	padding: 12px 0 0;
	background-image: none;
	background-color: transparent;
	justify-content: flex-start;
	color: inherit;
}
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media,
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media .newsx-grid-title a,
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media .newsx-grid-excerpt,
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media .newsx-grid-excerpt p {
	color: var(--newsx-dark-color, #15181c);
}
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media .newsx-grid-post-meta,
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media .newsx-grid-post-meta a,
.newsx-magazine-layout .newsx-grid-item .newsx-grid-over-media .newsx-grid-date-time {
	color: var(--newsx-meta-color, #6b7280);
}

/* Título: tamanho igual em todos os cards, com limite de linhas para nenhum
   card ficar muito mais alto que o vizinho. */
.newsx-magazine-layout .newsx-grid-item .newsx-grid-title {
	max-width: 100%;
}
.newsx-magazine-layout .newsx-grid-item .newsx-grid-title > * {
	font-size: 19px;
	line-height: 1.32;
}
.newsx-magazine-layout .newsx-grid-item .newsx-grid-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 6px;
}

/* ------------------------------------------------------------------ *
 * 4. Detalhes herdados do formato antigo
 * ------------------------------------------------------------------ */
/* O link invisível cobria o card inteiro; agora cobriria o título e mataria o
   clique nele. Fica só a foto clicável, que já é um <a>. */
.newsx-magazine-layout .newsx-grid-item .newsx-media-hover-link {
	display: none;
}
/* O zoom no hover escapava da moldura agora que a foto tem altura própria. */
.newsx-magazine-layout .newsx-grid-item .newsx-grid-media:hover .newsx-grid-image {
	transform: none;
}
.newsx-magazine-layout .newsx-grid-item .newsx-grid-image.newsx-full-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	transition: background-color .25s ease;
}
.newsx-magazine-layout .newsx-grid-item .newsx-grid-media:hover .newsx-grid-image::after {
	background-color: rgba(0, 0, 0, .06);
}

/* A categoria era um selo sobre a foto; vira etiqueta acima do título. */
.newsx-magazine-layout .newsx-grid-item .newsx-grid-categories {
	margin-bottom: 3px;
}
.newsx-magazine-layout .newsx-grid-item .post-categories a {
	color: #16a34a;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: none;
	padding: 0;
}

/* No celular o card inteiro cabe na tela: título um pouco maior, sem resumo
   cortado pela metade. */
@media (max-width: 600px) {
	.newsx-magazine-layout .newsx-grid-item .newsx-grid-title > * {
		font-size: 21px;
	}
	.newsx-magazine-layout .newsx-grid-item .newsx-grid-excerpt {
		-webkit-line-clamp: 2;
	}
}