/**
 * Pulsoweb — Blog. Estilos de los tres widgets: mosaico de destacados, filtro
 * de categorías y listado paginado.
 *
 * Los tokens son custom properties en .pwb-root; los controles del panel
 * Estilo de cada widget las sobrescriben, así que no hay colores hardcodeados
 * que el usuario no pueda cambiar desde Elementor.
 */

.pwb-root {
	--pwb-card-bg: #ffffff;
	--pwb-card-border: rgba(10, 20, 40, 0.07);
	--pwb-radius: 16px;
	--pwb-pad: clamp(20px, 1.9vw, 28px);
	--pwb-gap: clamp(16px, 1.5vw, 24px);

	--pwb-title: #00101f;
	--pwb-text: #5b6472;
	--pwb-muted: #8a93a3;
	--pwb-border: #cdd3dd;

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

	--pwb-accent: #001d3f; /* círculo "Leer más" y píldora activa */
	--pwb-accent-hover: #ff4f18;
	--pwb-arrow: #ffffff;
}

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

/* ============================================================== Tarjetas === */
.pwb-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--pwb-card-bg);
	border: 1px solid var(--pwb-card-border);
	border-radius: var(--pwb-radius);
	box-shadow: 0 14px 40px -26px rgba(0, 29, 63, 0.3);
}

.pwb-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--pwb-pad);
}

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

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

a.pwb-badge:hover,
a.pwb-badge:focus-visible {
	background: var(--pwb-accent);
	color: #ffffff;
	outline: none;
}

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

.pwb-card__title {
	margin: 0 0 12px;
	font-size: clamp(1.15rem, 1.35vw, 1.375rem);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pwb-title);
	/* máx. 2 líneas: mantiene la rejilla alineada con títulos de distinto largo */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

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

.pwb-card__excerpt {
	margin: 0 0 24px;
	color: var(--pwb-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;
}

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

/* --------------------------------------------------------------- Autor ---- */
.pwb-author {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.pwb-author__photo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
	/* !important: gana a las reglas globales de `img` del tema que fijan
	   border-radius; el avatar tiene que quedar siempre circular. */
	border-radius: 50% !important;
	object-fit: cover;
	background: #e9ecf1;
}

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

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

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

/* -------------------------------------------------- Botón "Leer más" ------ */
/* Mismo swap diagonal que .vcf-btn / .plp-btn: el wrapper va rotado -45deg y
   las dos flechas se desplazan en X, recortadas por el overflow del círculo. */
.pwb-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	color: var(--pwb-title);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

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

.pwb-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(--pwb-accent);
	overflow: hidden;
	transition: background-color 0.3s ease;
}

.pwb-btn:hover .pwb-btn__circle,
.pwb-btn:focus-visible .pwb-btn__circle {
	background-color: var(--pwb-accent-hover);
}

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

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

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

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

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

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

/* ========================================================== Miniaturas === */
/* La imagen va en absoluto dentro del hueco: así rellena siempre la caja sin
   depender de que el alto en % se resuelva (dentro del flex de la tarjeta
   pequeña no lo hacía y quedaba un hueco blanco bajo la foto). */
.pwb-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: #dfe4ec;
	line-height: 0;
}

.pwb-thumb__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.pwb-thumb__img--empty {
	background: linear-gradient(135deg, #dfe4ec 0%, #c9d2e0 100%);
}

.pwb-thumb--hero {
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
}

.pwb-thumb--mini {
	flex: 0 0 30%;
	align-self: stretch;
}

/* ======================================================== Destacados ====== */
.pwb-featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pwb-gap);
	align-items: stretch;
}

.pwb-featured__hero,
.pwb-featured__list {
	min-width: 0;
}

.pwb-featured__hero .pwb-card {
	height: 100%;
}

/* Las filas se reparten la altura de la tarjeta grande, así las dos columnas
   acaban exactamente a la misma altura (como en el diseño). */
.pwb-featured__list {
	display: grid;
	grid-template-rows: repeat(var(--pwb-featured-rows, 4), minmax(0, 1fr));
	gap: var(--pwb-gap);
}

.pwb-card--mini {
	flex-direction: row;
	align-items: stretch;
	min-height: 0;
}

.pwb-card--mini .pwb-card__body {
	justify-content: center;
	padding: clamp(14px, 1.3vw, 20px) clamp(16px, 1.5vw, 24px);
}

.pwb-card--mini .pwb-card__top {
	margin-bottom: 12px;
}

.pwb-card__title--mini {
	margin-bottom: 0;
	font-size: clamp(1rem, 1.1vw, 1.125rem);
}

.pwb-card--hero .pwb-card__title {
	font-size: clamp(1.35rem, 1.7vw, 1.75rem);
	margin-bottom: 14px;
}

/* ============================================================= Filtro ===== */
.pwb-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.pwb-pill {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	border: 1px solid var(--pwb-border);
	border-radius: 999px;
	background: #ffffff;
	color: var(--pwb-title);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.pwb-pill:hover,
.pwb-pill:focus-visible {
	border-color: var(--pwb-accent);
	outline: none;
}

.pwb-pill.is-active {
	background: var(--pwb-accent);
	border-color: var(--pwb-accent);
	color: #ffffff;
}

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

.pwb-empty {
	margin: 0;
	padding: 40px 0;
	color: var(--pwb-text);
	font-size: 1rem;
}

/* ========================================================= Paginación ===== */
.pwb-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(36px, 4vw, 56px);
}

.pwb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	border-radius: 999px;
	color: var(--pwb-title);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.pwb-pagination a.page-numbers:hover,
.pwb-pagination a.page-numbers:focus-visible {
	background: #e3e7ef;
	outline: none;
}

.pwb-pagination .page-numbers.current {
	background: #dfe3ec;
	font-weight: 600;
}

.pwb-pagination .page-numbers.dots {
	min-width: 28px;
	color: var(--pwb-muted);
}

.pwb-pagination .prev,
.pwb-pagination .next {
	padding: 0;
}

.pwb-pagination svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ========================================================== Responsive ==== */
/* Tablet: el mosaico pasa a una columna y las mini-cards dejan de estirarse. */
@media (max-width: 1024px) {
	.pwb-featured {
		grid-template-columns: 1fr;
	}

	.pwb-featured__list {
		grid-template-rows: none;
		grid-auto-rows: minmax(120px, auto);
	}

	.pwb-thumb--mini {
		flex-basis: 34%;
	}
}

@media (max-width: 767px) {
	.pwb-card--mini {
		flex-direction: column;
	}

	.pwb-thumb--mini {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.pwb-card__footer {
		gap: 12px;
	}

	/* El texto del botón junto al autor no cabe a ancho completo: se queda
	   solo el círculo. */
	.pwb-btn__label {
		display: none;
	}

	.pwb-btn__circle {
		width: 44px;
		height: 44px;
	}

	.pwb-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
	}
}

/* ------------------------------------------------- Sin movimiento --------- */
@media (prefers-reduced-motion: reduce) {
	.pwb-btn__arrow {
		transition: none;
	}

	.pwb-btn:hover .pwb-btn__arrow:nth-child(1),
	.pwb-btn:focus-visible .pwb-btn__arrow:nth-child(1) {
		transform: none;
	}

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