/**
 * Estilos para Predicciones - Diseño Clásico y Elegante
 * Contenido como protagonista - Cabecera elegante pero sobria
 * UI/UX de alta calidad - Responsive Mobile & Desktop
 * Accesibilidad WCAG 2.1 AA - Contraste y navegación por teclado
 *
 * @package Mi_Arcano
 */

/*--------------------------------------------------------------
# Estilos de Enlaces - Color consistente con el texto
--------------------------------------------------------------*/
.predicciones-wrapper a,
.prediccion-single-wrapper a {
	color: var(--color-text);
	text-decoration: none;
}

.predicciones-wrapper a:visited,
.prediccion-single-wrapper a:visited {
	color: var(--color-text);
}

.predicciones-wrapper a:hover,
.predicciones-wrapper a:focus,
.prediccion-single-wrapper a:hover,
.prediccion-single-wrapper a:focus {
	color: var(--color-gold);
}

/*--------------------------------------------------------------
# Archive Predicciones
--------------------------------------------------------------*/
.predicciones-wrapper {
	padding: 0;
}

.predicciones-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
}

.predicciones-header {
	text-align: center;
	margin-bottom: calc(var(--spacing-unit) * 3);
	padding: calc(var(--spacing-unit) * 1.5) 0;
}

.predicciones-header .page-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin-bottom: 0.5rem;
	color: var(--color-text);
	font-family: var(--font-serif);
}

.predicciones-header .archive-description {
	font-size: 1rem;
	color: var(--color-text-light);
	margin-top: calc(var(--spacing-unit) * 0.5);
}

.predicciones-filters {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacing-unit) * 1.5);
	margin-top: calc(var(--spacing-unit) * 2);
	justify-content: center;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 0.75);
	flex-wrap: wrap;
}

.filter-group label {
	font-weight: 600;
	color: var(--color-text);
	margin-right: calc(var(--spacing-unit) * 0.5);
}

.filter-link {
	padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
	border-radius: 4px;
	font-size: 0.9rem;
	color: var(--color-text-light);
	background: rgba(15, 15, 15, 0.3);
	border: 1px solid rgba(201, 169, 97, 0.2);
}

.filter-link:hover,
.filter-link:focus,
.filter-link.active {
	color: var(--color-gold);
	border-color: var(--color-gold);
	background: rgba(201, 169, 97, 0.1);
}

.predicciones-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: calc(var(--spacing-unit) * 1.5);
	margin: calc(var(--spacing-unit) * 2) 0;
	padding: 0;
}

.prediccion-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.prediccion-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--color-text);
	width: 100%;
	height: 100%;
}

.prediccion-card-link:visited {
	color: var(--color-text);
}

.prediccion-card-link:hover,
.prediccion-card-link:focus {
	color: var(--color-gold);
}

.prediccion-thumbnail {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: calc(var(--spacing-unit) * 1);
}

.prediccion-thumbnail img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-gold);
	display: block;
}

.prediccion-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.prediccion-content .entry-header {
	margin-bottom: calc(var(--spacing-unit) * 1);
}

.prediccion-content .entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacing-unit) * 0.75);
	margin-bottom: calc(var(--spacing-unit) * 0.75);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.prediccion-content .posted-on {
	font-weight: 500;
}

.arcano-tag {
	padding: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 0.75);
	background: rgba(201, 169, 97, 0.15);
	border-radius: 4px;
	font-size: 0.8rem;
}

.arcano-tag a {
	color: var(--color-gold);
	text-decoration: none;
}

.prediccion-content .entry-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text);
	margin: 0 0 calc(var(--spacing-unit) * 1) 0;
	line-height: 1.4;
	font-family: var(--font-serif);
	text-align: left;
}

.prediccion-card-link:hover .entry-title,
.prediccion-card-link:focus .entry-title {
	color: var(--color-gold);
}

.prediccion-content .entry-title a {
	color: inherit;
	text-decoration: none;
}

.prediccion-content .entry-summary {
	font-size: 0.95rem;
	color: var(--color-text-light);
	line-height: 1.6;
	margin-top: calc(var(--spacing-unit) * 0.5);
}

.predicciones-pagination {
	margin-top: calc(var(--spacing-unit) * 3);
	text-align: center;
}

/*--------------------------------------------------------------
# Single Predicción
--------------------------------------------------------------*/
.prediccion-single-wrapper {
	padding: 0;
}

.prediccion-single-article {
	max-width: 900px;
	margin: 0 auto;
	padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
}

.prediccion-single-hero {
	position: relative;
	margin-bottom: calc(var(--spacing-unit) * 3);
	text-align: center;
}

.prediccion-hero-background {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: calc(var(--spacing-unit) * 2);
}

.prediccion-hero-background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
}

.prediccion-hero-content {
	position: relative;
	z-index: 1;
}

.prediccion-badge {
	display: inline-block;
	margin-bottom: calc(var(--spacing-unit) * 1);
}

.badge-tipo {
	display: inline-block;
	padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
	background: var(--color-gold);
	color: var(--color-bg-dark);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 4px;
}

.prediccion-single-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin-bottom: calc(var(--spacing-unit) * 1.5);
	color: var(--color-text);
	font-family: var(--font-serif);
	line-height: 1.3;
}

.prediccion-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacing-unit) * 1);
	justify-content: center;
	margin-bottom: calc(var(--spacing-unit) * 2);
	font-size: 0.9rem;
	color: var(--color-text-light);
}

.prediccion-single-meta .posted-on {
	font-weight: 500;
}

.prediccion-single-meta .arcano-tag,
.prediccion-single-meta .signo-tag {
	padding: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 0.75);
	background: rgba(201, 169, 97, 0.15);
	border-radius: 4px;
	font-size: 0.85rem;
}

.prediccion-single-meta .arcano-tag a,
.prediccion-single-meta .signo-tag a {
	color: var(--color-gold);
	text-decoration: none;
}

.prediccion-single-content {
	font-size: 1.1rem;
	line-height: 1.9;
	color: var(--color-text-light);
}

.prediccion-single-content p {
	margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.prediccion-single-content p:first-of-type {
	font-size: 1.2rem;
	color: var(--color-text);
	font-weight: 500;
	margin-bottom: calc(var(--spacing-unit) * 2);
}

.prediccion-related {
	margin-top: calc(var(--spacing-unit) * 3);
	padding: calc(var(--spacing-unit) * 2);
	background: rgba(15, 15, 15, 0.3);
	border-left: 3px solid var(--color-gold);
	border-radius: 4px;
}

.prediccion-related h3 {
	font-size: 1.25rem;
	margin-bottom: calc(var(--spacing-unit) * 1);
	color: var(--color-text);
	font-family: var(--font-serif);
}

.prediccion-related ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.prediccion-related li {
	margin-bottom: calc(var(--spacing-unit) * 0.75);
}

.prediccion-related a {
	color: var(--color-gold);
	text-decoration: none;
}

.prediccion-related a:hover,
.prediccion-related a:focus {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 768px) {
	.predicciones-container {
		padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);
	}
	
	.predicciones-grid {
		grid-template-columns: 1fr;
		gap: calc(var(--spacing-unit) * 1.5);
	}
	
	.predicciones-filters {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.filter-group {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.prediccion-single-article {
		padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);
	}
	
	.prediccion-hero-background {
		height: 200px;
	}
	
	.prediccion-single-content {
		font-size: 1rem;
	}
	
	.prediccion-single-content p:first-of-type {
		font-size: 1.1rem;
	}
}

@media (max-width: 480px) {
	.prediccion-thumbnail img {
		width: 70px;
		height: 70px;
	}
	
	.prediccion-hero-background {
		height: 150px;
	}
	
	.prediccion-single-title {
		font-size: 1.75rem;
	}
}