/**
 * Tarjetas públicas de TQP Dynamic Cards.
 */

/* =========================================================
   VARIABLES GENERALES
   ========================================================= */

.tqp-dynamic-cards {
	/*
	 * TIPOGRAFÍAS
	 *
	 * Fecha y etiqueta:
	 * Montserrat
	 *
	 * Título:
	 * Poppins
	 *
	 * Extracto:
	 * Montserrat
	 *
	 * Las fuentes deben estar cargadas previamente por el tema,
	 * Elementor, Oxygen o WordPress.
	 */
	--tqp-dc-meta-font-family: "Montserrat", sans-serif;
	--tqp-dc-title-font-family: "Poppins", sans-serif;
	--tqp-dc-excerpt-font-family: "Montserrat", sans-serif;

	/*
	 * DISTRIBUCIÓN
	 */
	--tqp-dc-columns: 4;
	--tqp-dc-gap: 24px;

	/*
	 * TAMAÑO DE CADA TARJETA EN ESCRITORIO
	 *
	 * 270px = más pequeño
	 * 285px = equilibrado
	 * 300px = más grande
	 */
	--tqp-dc-card-width: 285px;

	/*
	 * APARIENCIA
	 */
	--tqp-dc-radius: 16px;
	--tqp-dc-meta-color: #facc15;

	/*
	 * COLOR DEL TÍTULO COMPACTO
	 */
	--tqp-dc-title-color: #008bcf;

	--tqp-dc-excerpt-color: rgba(255, 255, 255, 0.96);

	display: grid;
	grid-template-columns: repeat(
		var(--tqp-dc-columns),
		minmax(0, var(--tqp-dc-card-width))
	);
	justify-content: center;
	align-items: stretch;
	gap: var(--tqp-dc-gap);
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* =========================================================
   TARJETA BASE
   ========================================================= */

.tqp-dynamic-cards__card {
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	border-radius: var(--tqp-dc-radius);
}

/* =========================================================
   TARJETA COMPACTA
   ========================================================= */

.tqp-dynamic-cards__card--compact {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	/*
	 * Tarjeta completamente cuadrada.
	 *
	 * Para hacerla ligeramente vertical:
	 * aspect-ratio: 0.92 / 1;
	 */
	aspect-ratio: 1 / 1;

	width: 100%;
	height: auto;
	min-height: 0;
	overflow: hidden;
	background-color: #1f2937;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
	transform: translateZ(0);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease;
}

.tqp-dynamic-cards__card--compact:hover,
.tqp-dynamic-cards__card--compact:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(15, 23, 42, 0.2);
}

/* =========================================================
   CAPAS OSCURAS
   ========================================================= */

.tqp-dynamic-cards__card--compact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.96) 0%,
			rgba(0, 0, 0, 0.78) 27%,
			rgba(0, 0, 0, 0.28) 57%,
			rgba(0, 0, 0, 0.02) 100%
		);
	transition: background 0.35s ease;
}

.tqp-dynamic-cards__card--compact:hover::before,
.tqp-dynamic-cards__card--compact:focus-within::before {
	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.98) 0%,
			rgba(0, 0, 0, 0.9) 43%,
			rgba(0, 0, 0, 0.4) 72%,
			rgba(0, 0, 0, 0.06) 100%
		);
}

.tqp-dynamic-cards__card--compact::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 60%;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.48),
			rgba(0, 0, 0, 0)
		);
}

/* =========================================================
   CUERPO SUPERPUESTO
   ========================================================= */

.tqp-dynamic-cards__card--compact
	.tqp-dynamic-cards__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-width: 0;
	min-height: 100%;

	/*
	 * POSICIÓN VERTICAL DEL TEXTO
	 *
	 * El último valor controla el espacio inferior:
	 *
	 * 22px = más abajo
	 * 28px = recomendado
	 * 34px = más arriba
	 */
	padding: 14px 14px 28px;

	box-sizing: border-box;
	color: #fff;
	pointer-events: none;
	transform: translateY(0);
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tqp-dynamic-cards__card--compact:hover
	.tqp-dynamic-cards__body,
.tqp-dynamic-cards__card--compact:focus-within
	.tqp-dynamic-cards__body {
	transform: translateY(0);
}

/* =========================================================
   FECHA Y ETIQUETA — MONTSERRAT
   ========================================================= */

.tqp-dynamic-cards__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin: 0 0 7px;
	font-family: var(--tqp-dc-meta-font-family);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
}

.tqp-dynamic-cards__card--compact
	.tqp-dynamic-cards__meta {
	color: var(--tqp-dc-meta-color);
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.78),
		0 0 6px rgba(0, 0, 0, 0.35);
}

.tqp-dynamic-cards__date,
.tqp-dynamic-cards__label,
.tqp-dynamic-cards__separator {
	color: inherit;
	font-family: var(--tqp-dc-meta-font-family);
}

.tqp-dynamic-cards__separator {
	opacity: 0.95;
}

/* =========================================================
   TÍTULO — POPPINS
   ========================================================= */

.tqp-dynamic-cards__title {
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	font-family: var(--tqp-dc-title-font-family);
	font-size: clamp(16px, 1.1vw, 18px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
}

/*
 * El título permanece completo en el HTML.
 *
 * CSS lo limita visualmente a dos líneas y agrega puntos
 * suspensivos cuando supera el espacio disponible.
 */
.tqp-dynamic-cards__card--compact
	.tqp-dynamic-cards__title,
.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__title {
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.tqp-dynamic-cards__card--compact
	.tqp-dynamic-cards__title {
	color: var(--tqp-dc-title-color);
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.72),
		0 0 8px rgba(0, 0, 0, 0.28);
}

/*
 * Enlace del título.
 *
 * Se aumenta la especificidad y se utiliza !important para evitar
 * que Oxygen sobrescriba el color mediante reglas como:
 *
 * .ct-shortcode a {
 *     color: ...;
 * }
 */
.tqp-dynamic-cards
	.tqp-dynamic-cards__title-link {
	position: relative;
	z-index: 4;
	display: inline;
	color: var(--tqp-dc-title-color) !important;
	font-family: var(--tqp-dc-title-font-family);
	text-decoration: none !important;
	pointer-events: auto;
}

.tqp-dynamic-cards
	.tqp-dynamic-cards__title-link:hover,
.tqp-dynamic-cards
	.tqp-dynamic-cards__title-link:focus,
.tqp-dynamic-cards
	.tqp-dynamic-cards__title-link:active,
.tqp-dynamic-cards
	.tqp-dynamic-cards__title-link:visited {
	color: var(--tqp-dc-title-color) !important;
	text-decoration: none !important;
}

.tqp-dynamic-cards
	.tqp-dynamic-cards__title-link:focus-visible {
	border-radius: 3px;
	outline: 2px solid rgba(255, 255, 255, 0.95);
	outline-offset: 3px;
}

/* =========================================================
   EXTRACTO EN HOVER — MONTSERRAT
   ========================================================= */

.tqp-dynamic-cards__excerpt-reveal {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition:
		grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.22s ease,
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.38s;
}

.tqp-dynamic-cards__excerpt-reveal > * {
	min-height: 0;
	overflow: hidden;
}

.tqp-dynamic-cards__card--compact:hover
	.tqp-dynamic-cards__excerpt-reveal,
.tqp-dynamic-cards__card--compact:focus-within
	.tqp-dynamic-cards__excerpt-reveal {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition:
		grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.26s ease 0.08s,
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0s;
}

.tqp-dynamic-cards__excerpt {
	margin: 11px 0 0;
	font-family: var(--tqp-dc-excerpt-font-family);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.42;
}

.tqp-dynamic-cards__card--compact
	.tqp-dynamic-cards__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--tqp-dc-excerpt-color);
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.85),
		0 0 6px rgba(0, 0, 0, 0.25);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* =========================================================
   ENLACE SOBRE TODA LA TARJETA
   ========================================================= */

.tqp-dynamic-cards__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	border-radius: inherit;
	background: transparent;
	color: transparent !important;
	text-decoration: none !important;
}

.tqp-dynamic-cards__overlay-link:hover,
.tqp-dynamic-cards__overlay-link:focus,
.tqp-dynamic-cards__overlay-link:active,
.tqp-dynamic-cards__overlay-link:visited {
	background: transparent;
	color: transparent !important;
	text-decoration: none !important;
}

.tqp-dynamic-cards__overlay-link:focus {
	outline: none;
}

.tqp-dynamic-cards__overlay-link:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.95);
	outline-offset: -6px;
}

/* =========================================================
   TARJETA DESTACADA
   ========================================================= */

.tqp-dynamic-cards__card--featured {
	box-shadow:
		0 10px 30px rgba(15, 23, 42, 0.18),
		0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* =========================================================
   TARJETA DETALLADA
   ========================================================= */

.tqp-dynamic-cards__card--detailed {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.tqp-dynamic-cards__card--detailed:hover,
.tqp-dynamic-cards__card--detailed:focus-within {
	transform: translateY(-4px);
	border-color: rgba(15, 23, 42, 0.17);
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #e5e7eb;
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__image,
.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__image {
	object-fit: cover;
	transition: transform 0.45s ease;
}

.tqp-dynamic-cards__card--detailed:hover
	.tqp-dynamic-cards__image,
.tqp-dynamic-cards__card--detailed:focus-within
	.tqp-dynamic-cards__image {
	transform: scale(1.04);
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__image-placeholder {
	background:
		linear-gradient(
			135deg,
			rgba(71, 85, 105, 0.35),
			rgba(15, 23, 42, 0.65)
		);
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(15, 23, 42, 0.22),
			rgba(15, 23, 42, 0) 60%
		);
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px;
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__meta {
	color: #64748b;
	font-family: var(--tqp-dc-meta-font-family);
	font-size: 12px;
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__title {
	color: #0f172a;
	font-family: var(--tqp-dc-title-font-family);
	font-size: 18px;
	text-shadow: none;
}

/*
 * El título de la tarjeta detallada utiliza su propio color.
 */
.tqp-dynamic-cards
	.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__title-link,
.tqp-dynamic-cards
	.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__title-link:hover,
.tqp-dynamic-cards
	.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__title-link:focus,
.tqp-dynamic-cards
	.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__title-link:active,
.tqp-dynamic-cards
	.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__title-link:visited {
	color: #0f172a !important;
	text-decoration: none !important;
}

.tqp-dynamic-cards__card--detailed
	.tqp-dynamic-cards__excerpt {
	color: #475569;
	font-family: var(--tqp-dc-excerpt-font-family);
	font-size: 13px;
	text-shadow: none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {
	.tqp-dynamic-cards {
		--tqp-dc-card-width: 280px;
		--tqp-dc-gap: 22px;

		grid-template-columns: repeat(
			2,
			minmax(0, var(--tqp-dc-card-width))
		);
	}

	.tqp-dynamic-cards__title {
		font-size: 17px;
	}

	.tqp-dynamic-cards__card--compact
		.tqp-dynamic-cards__body {
		padding: 14px 14px 26px;
	}
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 640px) {
	.tqp-dynamic-cards {
		--tqp-dc-card-width: min(100%, 340px);
		--tqp-dc-gap: 18px;

		grid-template-columns: minmax(
			0,
			var(--tqp-dc-card-width)
		);
		justify-content: center;
		width: 100%;
		padding-right: 14px;
		padding-left: 14px;
		box-sizing: border-box;
	}

	.tqp-dynamic-cards__card--compact {
		aspect-ratio: 1 / 1;
		width: 100%;
		max-width: 340px;
	}

	.tqp-dynamic-cards__card--compact
		.tqp-dynamic-cards__body {
		/*
		 * El último valor controla la posición vertical
		 * del texto específicamente en móvil.
		 */
		padding: 15px 14px 24px;
		transform: none;
	}

	.tqp-dynamic-cards__meta {
		margin-bottom: 7px;
		font-size: 11px;
	}

	.tqp-dynamic-cards__title {
		font-size: 18px;
		line-height: 1.18;
	}

	.tqp-dynamic-cards__excerpt {
		font-size: 12px;
		line-height: 1.45;
	}

	.tqp-dynamic-cards__card--detailed
		.tqp-dynamic-cards__content {
		padding: 16px;
	}
}

/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

/**
 * En móviles y dispositivos táctiles no existe un hover permanente.
 *
 * Por ello:
 * - se muestran fecha, etiqueta y título;
 * - el extracto permanece oculto;
 * - la tarjeta no se desplaza verticalmente.
 */
@media (hover: none), (pointer: coarse) {
	.tqp-dynamic-cards__card--compact:hover,
	.tqp-dynamic-cards__card--compact:focus-within {
		transform: none;
	}

	.tqp-dynamic-cards__card--compact
		.tqp-dynamic-cards__excerpt-reveal {
		display: none;
	}

	.tqp-dynamic-cards__card--compact
		.tqp-dynamic-cards__body {
		transform: none;
	}

	.tqp-dynamic-cards__card--compact:hover::before,
	.tqp-dynamic-cards__card--compact:focus-within::before {
		background:
			linear-gradient(
				to top,
				rgba(0, 0, 0, 0.96) 0%,
				rgba(0, 0, 0, 0.78) 27%,
				rgba(0, 0, 0, 0.28) 57%,
				rgba(0, 0, 0, 0.02) 100%
			);
	}
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.tqp-dynamic-cards__card,
	.tqp-dynamic-cards__card--compact::before,
	.tqp-dynamic-cards__body,
	.tqp-dynamic-cards__excerpt-reveal,
	.tqp-dynamic-cards__image {
		transition: none;
	}
}