/* ==========================================================
   Capa Dinâmica — estilos do card
   Usado tanto no front-end (widget) quanto no preview do popup admin,
   pra garantir que o que você vê no popup é o que vai pro site.
   ========================================================== */

.cd-card {
	display: block;
	position: relative;
	width: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border-radius: 6px;
}

.cd-foto {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Modo padrão: quadrado, como no print enviado */
.cd-modo-padrao .cd-foto {
	aspect-ratio: 1 / 1;
}

.cd-gradiente {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.cd-gradiente-padrao {
	height: 65%;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}

.cd-logo-autor {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	z-index: 3;
	border: 2px solid rgba(255,255,255,0.85);
}

.cd-conteudo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px;
	z-index: 2;
}

/* ---- Categoria (fixo, não editável por post) ---- */
.cd-categoria {
	display: inline-block;
	background: #e63946; /* aproximado do vermelho do print — ajustar pela cor real da marca */
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 3px 8px;
	margin-bottom: 8px;
	border-radius: 2px;
}

/* ---- Título ---- */
.cd-titulo {
	margin: 0;
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
	font-size: 22px;
}

.cd-titulo span {
	display: inline;
}

/* Fundo "abraçando" o texto, linha a linha — sem precisar duplicar o elemento.
   box-decoration-break: clone replica o padding/background em cada linha quebrada. */
.cd-titulo-fundo span {
	background-color: rgba(0,0,0,0.75);
	padding: 4px 8px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---- Resumo ---- */
.cd-resumo {
	margin: 8px 0 0;
	font-size: 14px;
	color: #f0f0f0;
	line-height: 1.4;
}

/* ==========================================================
   Grid masonry (aplicar no container do Loop Grid do Elementor)
   Ajustar o seletor conforme a classe real gerada pelo Elementor
   ========================================================== */
.cd-grid-masonry {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: start; /* essencial: impede estirar os cards pra bater a maior altura */
}

@media (max-width: 768px) {
	.cd-grid-masonry {
		grid-template-columns: repeat(2, 1fr);
	}
}