/**
 * LeaderEduca Tools — grade / carrossel de posts
 *
 * Grade e carrossel compartilham o mesmo card; muda só o container. O número
 * de colunas vem da variável --le-cols, trocada por media query no CSS gerado
 * por instância.
 */

.le-posts {
	position: relative;
}

.le-posts__viewport {
	overflow: hidden;
}

/* ------------------------------------------------------------------ grade */

.le-posts--grid .le-posts__track {
	display: grid;
	grid-template-columns: repeat( var( --le-cols, 3 ), minmax( 0, 1fr ) );
	column-gap: var( --le-gap-x, 30px );
	row-gap: var( --le-gap-y, 30px );
}

/* ------------------------------------------------------------------ lista */

.le-posts--list .le-posts__track {
	display: flex;
	flex-direction: column;
	gap: var( --le-gap-y, 30px );
}

.le-posts--list .le-post {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.le-posts--list .le-post__thumb {
	overflow: hidden;
}

.le-posts--list .le-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.le-posts--list .le-post__content {
	flex: 1;
}

@media ( max-width: 767px ) {
	.le-posts--list .le-post {
		flex-direction: column;
	}

	.le-posts--list .le-post__thumb {
		flex-basis: auto !important;
	}
}

/* -------------------------------------------------------------- carrossel */

.le-posts--carousel .le-posts__track {
	display: flex;
	gap: var( --le-gap-x, 30px );
	transition: transform 450ms cubic-bezier( 0.4, 0, 0.2, 1 );
	will-change: transform;
}

.le-posts--carousel .le-post {
	flex: 0 0 calc(
		( 100% - var( --le-gap-x, 30px ) * ( var( --le-cols, 3 ) - 1 ) ) / var( --le-cols, 3 )
	);
}

.le-posts--equal .le-posts__track {
	align-items: stretch;
}

.le-posts--equal .le-post {
	display: flex;
	flex-direction: column;
}

.le-posts--equal .le-post__content {
	flex: 1;
}

/* ------------------------------------------------------------------- card */

.le-post {
	min-width: 0;
	overflow: hidden;
}

.le-post__thumb {
	line-height: 0;
}

.le-post__thumb a {
	display: block;
}

.le-post__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.le-post__title {
	line-height: 1.3;
}

.le-post__title a {
	color: inherit;
	text-decoration: none;
}

.le-post__title a:hover {
	text-decoration: underline;
}

.le-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.85em;
	opacity: 0.75;
}

.le-post__excerpt {
	line-height: 1.42;
}

.le-post__excerpt p {
	margin: 0 0 20px;
}

.le-post__button {
	display: inline-block;
	text-decoration: none;
}

/* --------------------------------------------------------------- navegação */

.le-posts__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	padding: 0;
	transform: translateY( -50% );
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: opacity 200ms ease;
}

.le-posts__arrow svg {
	width: 100%;
	height: 100%;
}

.le-posts__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.le-posts__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.le-posts__dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
}

.le-posts__dots button.is-active {
	background: rgba( 0, 0, 0, 0.7 );
}

.le-posts__pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

.le-posts__pagination .page-numbers {
	text-decoration: none;
}

.le-posts__empty {
	margin: 0;
	opacity: 0.7;
}

@media ( prefers-reduced-motion: reduce ) {
	.le-posts--carousel .le-posts__track {
		transition: none;
	}
}