/**
 * Estilos del Bloque Static Logos
 * 
 * Grid estático de logos de clientes en escala de grises.
 * Sin animaciones, sin hover effects, completamente estático.
 * 
 * @package Vitruve_Custom_Theme
 */

@import '../styles/design-tokens.css';

/**
 * ANIMACIONES DE ENTRADA (estilo Apple)
 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

:root {
	--ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ==========================================
 * CONTENEDOR PRINCIPAL
 * ========================================== */

.vitruve-static-logos {
	position: relative;
	padding: var(--space-16) 0;
	background-color: var(--bg-primary, var(--color-neutral-800));
}

/* ==========================================
 * CONTAINER
 * ========================================== */

.vitruve-static-logos__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

@media (min-width: 1024px) {
	.vitruve-static-logos__container {
		padding: 0 var(--container-padding-lg);
	}
}

/* ==========================================
 * TÍTULO Y SUBTÍTULO
 * ========================================== */

.vitruve-static-logos__title {
	color: var(--color-white, #ffffff);
	text-align: center;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 auto var(--space-2);
	/* Animación de entrada */
	opacity: 0;
	transform: translateY(30px);
}

.vitruve-static-logos.is-visible .vitruve-static-logos__title {
	animation: fadeInUp 1s var(--ease-apple) forwards;
}

.vitruve-static-logos__subtitle {
	color: var(--color-neutral-400, #9ca3af);
	text-align: center;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 auto var(--space-12);
}

@media (min-width: 768px) {
	.vitruve-static-logos__title {
		font-size: 1.25rem;
		margin-bottom: var(--space-3);
	}
	
	.vitruve-static-logos__subtitle {
		font-size: 1.25rem;
		margin-bottom: var(--space-16);
	}
}

@media (min-width: 1024px) {
	.vitruve-static-logos__title {
		font-size: 1.25rem;
	}
	
	.vitruve-static-logos__subtitle {
		font-size: 1.25rem;
	}
}

/* ==========================================
 * GRID DE LOGOS
 * ========================================== */

.vitruve-static-logos__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-12);
	align-items: center;
	justify-items: center;
	margin: 0 auto;
	/* Animación de entrada */
	opacity: 0;
}

.vitruve-static-logos.is-visible .vitruve-static-logos__grid {
	animation: fadeIn 1.2s var(--ease-apple) 0.3s forwards;
}

@media (max-width: 1024px) {
	.vitruve-static-logos__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-10);
	}
}

@media (max-width: 640px) {
	.vitruve-static-logos__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
	}
}

/* ==========================================
 * ITEMS DE LOGO
 * ========================================== */

.vitruve-static-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
}

@media (max-width: 768px) {
	.vitruve-static-logos__item {
		height: 60px;
	}
}

@media (max-width: 640px) {
	.vitruve-static-logos__item {
		height: 50px;
	}
}

/* ==========================================
 * IMÁGENES (ESCALA DE GRISES - SIN HOVER)
 * ========================================== */

.vitruve-static-logos__image {
	max-height: 100%;
	width: auto;
	max-width: 180px;
	height: auto;
	object-fit: contain;
	
	/* Efecto escala de grises permanente */
	filter: grayscale(100%) brightness(0.8);
	opacity: 0.7;
}

@media (max-width: 768px) {
	.vitruve-static-logos__image {
		max-width: 140px;
	}
}

@media (max-width: 640px) {
	.vitruve-static-logos__image {
		max-width: 120px;
	}
}

/* ==========================================
 * VARIANTES DE ALINEACIÓN (WordPress Align)
 * ========================================== */

.vitruve-static-logos.alignwide .vitruve-static-logos__container {
	max-width: 1400px;
}

.vitruve-static-logos.alignfull {
	max-width: 100%;
}

.vitruve-static-logos.alignfull .vitruve-static-logos__container {
	max-width: 100%;
	padding-left: var(--space-6);
	padding-right: var(--space-6);
}

/* ==========================================
 * ACCESIBILIDAD
 * ========================================== */

/* Asegurar buen contraste y legibilidad */
@media (prefers-contrast: high) {
	.vitruve-static-logos__image {
		filter: grayscale(100%) brightness(1);
		opacity: 1;
	}
}

/* Reducir movimiento para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
	.vitruve-static-logos__title,
	.vitruve-static-logos__grid {
		opacity: 1;
		transform: none;
		animation: none;
	}
}