.act-post-loop-empty {
	text-align: center;
	padding: var(--spacing-lg) 0;
	color: var(--cor-texto-secundario, var(--cor-texto));
}

/* Editor: placeholder de imagem (preview usa dados fictícios, sem imagem real) */
.act-post-loop-thumb--placeholder {
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(45deg, #e5e5e5, #e5e5e5 10px, #f0f0f0 10px, #f0f0f0 20px);
}

.act-post-loop-editor-note {
	margin-top: var(--spacing-sm);
	font-size: 12px;
	font-style: italic;
	color: #757575;
	text-align: center;
}

/* Grade */
.act-post-loop--grid .act-post-loop-items {
	display: grid;
	grid-template-columns: repeat(var(--act-loop-columns, 3), 1fr);
	gap: var(--spacing-lg);
}

/* Lista */
.act-post-loop--list .act-post-loop-items {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.act-post-loop--list .act-post-loop-item {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--spacing-md);
}

.act-post-loop--list .act-post-loop-thumb {
	aspect-ratio: 4 / 3;
}

/* Carrossel — no frontend o ActSwiper (assets/js/swiper-helper.js) troca
   essa marcação por .swiper/.swiper-wrapper/.swiper-slide de verdade, com
   setas e paginação (preset "cards"). Essas regras aqui só valem: (a) como
   fallback caso o JS não carregue, e (b) no editor, que nunca roda Swiper
   de propósito — mostra uma tira com scroll horizontal simples. */
.act-post-loop--carousel .act-post-loop-items {
	display: flex;
	gap: var(--spacing-lg);
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-sm);
}

.act-post-loop--carousel .act-post-loop-items>.swiper {
	width: 100%;
	padding-bottom: var(--spacing-lg);
}

.act-post-loop--carousel .act-post-loop-items .swiper-button {
	color: var(--cor-destaque, #40659d);
	background: transparent;
	box-shadow: 0 0 0 1px rgba(9, 11, 15, 0.1);
}

.act-post-loop--carousel .act-post-loop-items .swiper-button.swiper-button-prev {
	left: -80px;
}

.act-post-loop--carousel .act-post-loop-items .swiper-button.swiper-button-next {
	right: -80px;
}

.act-post-loop--carousel .act-post-loop-item {
	flex: 0 0 clamp(240px, 30vw, 320px);
	scroll-snap-align: start;
}

/* Card */
.act-post-loop-item {
	display: flex;
	flex-direction: column;
	background: var(--cor-branco, #fff);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 100%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.act-post-loop-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.act-post-loop-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.act-post-loop-body {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	flex-grow: 1;
	height: auto;
}

.act-post-loop-meta {
	font-size: var(--fs-7);
	color: var(--cor-texto-secundario, #777);
}

.act-post-loop-title {
	font-size: var(--fs-4);
	margin-bottom: 0;
}

.act-post-loop-title a {
	color: var(--cor-principal, var(--cor-texto));
}

.act-post-loop-excerpt {
	color: var(--cor-texto, var(--cor-texto));
	flex-grow: 1;
}

.act-post-loop-link {
	margin-top: var(--spacing-xs);
	font-weight: 700;
	color: var(--cor-principal);
}

.act-post-loop-pagination {
	margin-top: var(--spacing-lg);
}

@media (max-width: 1536px) {
	.act-post-loop--carousel .act-post-loop-items .swiper-button.swiper-button-prev {
		left: 0;
	}

	.act-post-loop--carousel .act-post-loop-items .swiper-button.swiper-button-next {
		right: 0;
	}
}

@media (max-width: 767px) {
	.act-post-loop--grid .act-post-loop-items {
		grid-template-columns: 1fr;
	}

	.act-post-loop--list .act-post-loop-item {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.act-post-loop--grid .act-post-loop-items {
		grid-template-columns: repeat(min(var(--act-loop-columns, 3), 2), 1fr);
	}
}