/**
 * Pulsoweb — Últimos posts. Tarjetas de blog (categoría + tiempo de lectura,
 * título, extracto, autor con foto + fecha, botón "Leer más").
 * Tokens editables como custom properties en .plp-root (Elementor los pisa vía
 * los selectores del panel Estilo).
 */

.plp-root {
	--plp-card-bg: #ffffff;
	--plp-card-border: rgba(10, 20, 40, 0.07);
	--plp-card-radius: 18px;
	--plp-card-pad: clamp(20px, 2vw, 30px);
	--plp-gap: clamp(18px, 1.6vw, 28px);

	--plp-title: #0b1b3f;
	--plp-text: #6b7280;
	--plp-muted: #9aa1ae;

	--plp-badge-bg: #eef1f6;
	--plp-badge-text: #384056;

	--plp-accent: #0b1f44; /* círculo "Leer más" */
	--plp-accent-hover: #ff4f18; /* círculo en hover */
	--plp-arrow: #ffffff;

	--plp-font: inherit;
}

.plp-root *,
.plp-root *::before,
.plp-root *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------- Grid ---- */
.plp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--plp-gap);
	align-items: stretch;
}

/* --------------------------------------------------------------- Card ---- */
.plp-card {
	display: flex;
	flex-direction: column;
	background: var(--plp-card-bg);
	border: 1px solid var(--plp-card-border);
	border-radius: var(--plp-card-radius);
	padding: var(--plp-card-pad);
	box-shadow: 0 14px 40px -24px rgba(11, 27, 63, 0.28);
}

.plp-card__top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.plp-badge {
	display: inline-flex;
	align-items: center;
	background: var(--plp-badge-bg);
	color: var(--plp-badge-text);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	padding: 8px 15px;
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

/* Badge = enlace a la página de la categoría. */
a.plp-badge:hover,
a.plp-badge:focus-visible {
	background: var(--plp-accent);
	color: #ffffff;
	outline: none;
}

.plp-readtime {
	color: var(--plp-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
}

.plp-card__title {
	margin: 0 0 12px;
	font-size: clamp(1.2rem, 1.4vw, 1.45rem);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--plp-title);
	/* máx. 2 líneas */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.plp-card__title a {
	color: inherit;
	text-decoration: none;
}

.plp-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.plp-card__excerpt {
	margin: 0 0 24px;
	color: var(--plp-text);
	font-size: 0.9375rem;
	line-height: 1.6;
	/* máx. 3 líneas */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------- Footer ---- */
.plp-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto; /* pega el footer al fondo → tarjetas de igual altura */
}

.plp-author {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.plp-author__photo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
	/* !important: gana a cualquier regla global de `img` del tema/Elementor que
	   fije border-radius (por eso salía cuadrada). Avatar siempre circular. */
	border-radius: 50% !important;
	object-fit: cover;
	background: #e9ecf1;
}

.plp-author__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.plp-author__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--plp-title);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.plp-author__date {
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--plp-muted);
}

/* ------------------------------------------------- Botón "Leer más" ------ */
/* Misma animación que .vcf-btn (video-carousel-featured): la flecha hace el
   swap diagonal (wrapper rotado -45deg + translateX que recorta el círculo). */
.plp-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	color: var(--plp-title);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.plp-btn__label {
	line-height: 1;
}

.plp-btn__circle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background-color: var(--plp-accent);
	overflow: hidden;
	transition: background-color 0.3s ease;
}

/* En hover/foco el círculo pasa a naranja (#FF4F18 por defecto). */
.plp-btn:hover .plp-btn__circle,
.plp-btn:focus-visible .plp-btn__circle {
	background-color: var(--plp-accent-hover, #ff4f18);
}

.plp-btn__arrows {
	position: relative;
	width: 18px;
	height: 18px;
	transform: rotate(-45deg);
}

.plp-btn__arrow {
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	fill: var(--plp-arrow);
	transition: transform 0.38s ease;
}

/* Flecha 2 en espera, fuera del círculo (abajo-izquierda). */
.plp-btn__arrow:nth-child(2) {
	transform: translateX(-200%);
}

.plp-btn:hover .plp-btn__arrow:nth-child(1),
.plp-btn:focus-visible .plp-btn__arrow:nth-child(1) {
	transform: translateX(200%);
}

.plp-btn:hover .plp-btn__arrow:nth-child(2),
.plp-btn:focus-visible .plp-btn__arrow:nth-child(2) {
	transform: translateX(0);
}

.plp-btn:focus-visible {
	outline: 2px solid var(--plp-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --------------------------------------------------------- Responsive ---- */
@media (max-width: 767px) {
	.plp-card__footer {
		gap: 12px;
	}
	/* En móvil el botón se reduce a solo el círculo (el texto ocuparía
	   demasiado junto al autor en una tarjeta a ancho completo). */
	.plp-btn__label {
		display: none;
	}
	.plp-btn__circle {
		width: 44px;
		height: 44px;
	}
}

/* ------------------------------------------------ Sin movimiento --------- */
@media (prefers-reduced-motion: reduce) {
	.plp-btn__arrow {
		transition: none;
	}
	.plp-btn:hover .plp-btn__arrow:nth-child(1),
	.plp-btn:focus-visible .plp-btn__arrow:nth-child(1) {
		transform: none;
	}
	.plp-btn:hover .plp-btn__arrow:nth-child(2),
	.plp-btn:focus-visible .plp-btn__arrow:nth-child(2) {
		transform: translateX(-200%);
	}
}