/* ==========================================================================
   Saltava · Trending Topics
   ========================================================================== */

.saltava-tt {
	--saltava-tt-accent: var(--wp--preset--color--accent);
	--saltava-tt-rule: currentColor;
	--saltava-tt-soft: color-mix(in srgb, currentColor 22%, transparent);
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.saltava-tt a {
	color: inherit;
	text-decoration: none;
}

/* Cabecera ------------------------------------------------------------- */
.saltava-tt .saltava-tt__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
}

.saltava-tt .saltava-tt__heading {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-family: var(--wp--custom--font--label);
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
}

.saltava-tt .saltava-tt__slash {
	flex: none;
	width: 0.6em;
	height: 0.6em;
	border-radius: 3px;
	background: var(--saltava-tt-accent);
}

/* Línea fina que completa la cabecera. */
.saltava-tt .saltava-tt__header::after {
	content: "";
	order: 1;
	flex: 1 1 4rem;
	height: 1px;
	align-self: center;
	background: var(--saltava-tt-soft);
}

.saltava-tt .saltava-tt__more {
	order: 2;
}

.saltava-tt .saltava-tt__more {
	font-family: var(--wp--custom--font--label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	border-bottom: 2px solid var(--saltava-tt-accent);
	padding-block-end: 2px;
}

.saltava-tt .saltava-tt__more span {
	display: inline-block;
	transition: transform var(--wp--custom--transition, 180ms ease);
}

.saltava-tt .saltava-tt__more:hover span,
.saltava-tt .saltava-tt__more:focus-visible span {
	transform: translateX(4px);
}

/* Marquesina de temas -------------------------------------------------- */
.saltava-tt .saltava-tt__marquee {
	border-block: 1px solid var(--saltava-tt-soft);
	margin-block-end: var(--wp--preset--spacing--40);
	--saltava-marquee-speed: 38s;
}

.saltava-tt .saltava-tt__marquee .saltava-marquee__track li {
	font-family: var(--wp--custom--font--display);
	font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.25;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1.5px currentColor;
	padding-inline: 0.5em;
}

.saltava-tt .saltava-tt__marquee .saltava-marquee__track li:nth-child(odd) {
	-webkit-text-fill-color: currentColor;
	-webkit-text-stroke: 0;
}

.saltava-tt .saltava-tt__marquee .saltava-marquee__track li::after {
	content: "●";
	display: inline-block;
	margin-inline-start: 1em;
	color: var(--saltava-tt-accent);
	-webkit-text-fill-color: var(--saltava-tt-accent);
	-webkit-text-stroke: 0;
	font-style: normal;
	font-size: 0.6em;
	vertical-align: middle;
}

.saltava-tt .saltava-tt__marquee .saltava-tt__count {
	font-family: var(--wp--custom--font--label);
	font-size: 0.4em;
	font-style: normal;
	vertical-align: super;
	-webkit-text-stroke: 0;
	-webkit-text-fill-color: currentColor;
}

/* Grilla --------------------------------------------------------------- */
.saltava-tt .saltava-tt__grid {
	display: grid;
	grid-template-columns: repeat(var(--saltava-tt-cols, 4), minmax(0, 1fr));
	gap: 0;
}

@container (max-width: 960px) {
	.saltava-tt .saltava-tt__grid {
		grid-template-columns: repeat(min(var(--saltava-tt-cols, 4), 2), minmax(0, 1fr));
	}

	.saltava-tt:not(.is-style-cards) .saltava-tt__topic:nth-child(odd) {
		border-inline-start-color: transparent;
	}
}

@container (max-width: 560px) {
	.saltava-tt .saltava-tt__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.saltava-tt:not(.is-style-cards) .saltava-tt__topic {
		border-inline-start-color: transparent;
		padding-inline: 0;
	}
}

.saltava-tt .saltava-tt__topic {
	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-inline-start: 1px solid var(--saltava-tt-soft);
	isolation: isolate;
}

.saltava-tt .saltava-tt__topic:first-child {
	border-inline-start-color: transparent;
}

/* Barra superior que se llena al pasar o al enfocar. */
.saltava-tt .saltava-tt__topic::before {
	content: "";
	position: absolute;
	inset: -1px 0 auto 0;
	height: 6px;
	background: var(--saltava-tt-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
	z-index: 1;
}

.saltava-tt .saltava-tt__topic:hover::before,
.saltava-tt .saltava-tt__topic:focus-within::before {
	transform: scaleX(1);
}

.saltava-tt .saltava-tt__topic-head {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--30);
}

.saltava-tt .saltava-tt__num {
	font-family: var(--wp--custom--font--display);
	font-size: clamp(2.75rem, 2rem + 2vw, 4rem);
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: -0.04em;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1.5px currentColor;
	transition: color var(--wp--custom--transition, 180ms ease), -webkit-text-stroke-color var(--wp--custom--transition, 180ms ease), transform 420ms cubic-bezier(.2, .7, .2, 1);
}

.saltava-tt .saltava-tt__topic:hover .saltava-tt__num,
.saltava-tt .saltava-tt__topic:focus-within .saltava-tt__num {
	color: var(--saltava-tt-accent);
	-webkit-text-fill-color: var(--saltava-tt-accent);
	transform: translateY(-4px);
}

.saltava-tt .saltava-tt__topic-title {
	margin: 0;
	font-family: var(--wp--custom--font--label);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.25;
	text-transform: uppercase;
}

.saltava-tt .saltava-tt__topic-title a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
}

.saltava-tt .saltava-tt__count {
	font-weight: 500;
	opacity: 0.85;
}

.saltava-tt .saltava-tt__arrow {
	display: inline-block;
	color: var(--saltava-tt-accent);
	transition: transform var(--wp--custom--transition, 180ms ease);
}

.saltava-tt .saltava-tt__topic-title a:hover .saltava-tt__arrow,
.saltava-tt .saltava-tt__topic-title a:focus-visible .saltava-tt__arrow {
	transform: translate(3px, -3px);
}

/* Lista de notas ------------------------------------------------------- */
.saltava-tt .saltava-tt__posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.saltava-tt .saltava-tt__post {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: start;
	padding-block: 0.8rem;
	border-top: 1px solid var(--saltava-tt-soft);
}

.saltava-tt.has-thumbnails .saltava-tt__post {
	grid-template-columns: 64px minmax(0, 1fr);
}

.saltava-tt.has-thumbnails .saltava-tt__post:not(:has(.saltava-thumb)) {
	grid-template-columns: minmax(0, 1fr);
}

.saltava-tt .saltava-tt__post .saltava-thumb {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm, 6px);
	filter: grayscale(1) contrast(1.1);
	transition: filter var(--wp--custom--transition, 180ms ease);
}

.saltava-tt .saltava-tt__post:hover .saltava-thumb,
.saltava-tt .saltava-tt__post:focus-within .saltava-thumb {
	filter: none;
}

.saltava-tt .saltava-tt__post-link {
	display: block;
}

.saltava-tt .saltava-tt__post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--saltava-tt-lines, 2);
	line-clamp: var(--saltava-tt-lines, 2);
	overflow: hidden;
	font-family: var(--wp--custom--font--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}

/* Efecto resaltador en el título. */
.saltava-tt .saltava-tt__post-title {
	background-image: linear-gradient(var(--wp--preset--color--highlight), var(--wp--preset--color--highlight));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 0% var(--wp--custom--mark-size, 0.42em);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 380ms cubic-bezier(.2, .7, .2, 1), color var(--wp--custom--transition, 180ms ease);
}

.saltava-tt .saltava-tt__post-link:hover .saltava-tt__post-title,
.saltava-tt .saltava-tt__post-link:focus-visible .saltava-tt__post-title {
	background-size: 100% var(--wp--custom--mark-size, 0.42em);
	color: var(--wp--custom--mark-text, inherit);
}

.saltava-tt .saltava-tt__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0.35rem 0 0;
	font-family: var(--wp--custom--font--label);
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.85;
}

.saltava-tt .saltava-tt__empty {
	font-family: var(--wp--custom--font--label);
	font-size: var(--wp--preset--font-size--small);
}

/* Aparición al hacer scroll (solo si el navegador lo soporta y no se pidió reducir movimiento). */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.saltava-tt .saltava-tt__topic {
			animation: saltava-tt-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
	}
}

@keyframes saltava-tt-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Variante: Invertido -------------------------------------------------- */
.saltava-tt.is-style-inverted {
	--saltava-tt-accent: var(--wp--custom--inverse-accent, var(--wp--preset--color--highlight));
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.saltava-tt.is-style-inverted:not(.alignfull) {
	border-radius: var(--wp--custom--radius--lg, 20px);
}

.saltava-tt.is-style-inverted .saltava-tt__post-link:hover .saltava-tt__post-title,
.saltava-tt.is-style-inverted .saltava-tt__post-link:focus-visible .saltava-tt__post-title {
	color: #111;
	background-size: 100% 100%;
}

.saltava-tt.is-style-inverted .saltava-tt__post-title {
	background-position: 0 100%;
}

/* Variante: Tarjetas --------------------------------------------------- */
.saltava-tt.is-style-cards .saltava-tt__grid {
	gap: var(--wp--preset--spacing--40);
}

.saltava-tt.is-style-cards .saltava-tt__topic {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg, 20px);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform 220ms cubic-bezier(.2, .7, .2, 1), box-shadow 220ms cubic-bezier(.2, .7, .2, 1);
}

.saltava-tt.is-style-cards .saltava-tt__topic:hover,
.saltava-tt.is-style-cards .saltava-tt__topic:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--hard);
}

.saltava-tt.is-style-cards .saltava-tt__topic::before {
	inset: 0 0 auto 0;
}

/* Variante: Lista compacta (barras laterales) -------------------------- */
.saltava-tt.is-style-compact .saltava-tt__grid {
	grid-template-columns: minmax(0, 1fr);
}

.saltava-tt.is-style-compact .saltava-tt__topic {
	border-inline-start: 0;
	border-top: 1px solid var(--saltava-tt-soft);
	padding-inline: 0;
}

.saltava-tt.is-style-compact .saltava-tt__topic:first-child {
	border-top: 0;
}

.saltava-tt.is-style-compact .saltava-tt__num {
	font-size: 2rem;
}

.saltava-tt.is-style-compact .saltava-tt__post-title {
	font-size: var(--wp--preset--font-size--small);
}

.saltava-tt.is-style-compact .saltava-tt__marquee .saltava-marquee__track li {
	font-size: 1.5rem;
}

@media (forced-colors: active) {
	.saltava-tt .saltava-tt__num,
	.saltava-tt .saltava-tt__marquee .saltava-marquee__track li {
		-webkit-text-fill-color: CanvasText;
		-webkit-text-stroke: 0;
	}
}