/**
 * Bloque Grid Testimonial Clientes
 * 
 * Grid 4x4 de clientes con videos y fotos testimoniales.
 * Videos ocupan 2 filas, fotos ocupan 1 fila.
 * 
 * @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-clients-testimonial-grid {
	position: relative;
	padding: var(--space-16) 0;
	background-color: var(--bg-primary, var(--color-neutral-800));
}

/* Fade a negro charcoal desde abajo */
.vitruve-clients-testimonial-grid::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 250px;
	background: linear-gradient(to top, 
		rgba(16, 15, 17, 1) 0%, 
		rgba(16, 15, 17, 0.95) 15%,
		rgba(16, 15, 17, 0.7) 40%,
		rgba(16, 15, 17, 0) 100%
	);
	pointer-events: none;
	z-index: 10;
}

/**
 * HEADER (TÍTULO Y SUBTÍTULO)
 */
.vitruve-clients-testimonial-grid__header {
	max-width: var(--container-max-width);
	margin: 0 auto var(--space-12);
	text-align: start;
	position: relative;
	z-index: 2;
}

@media (min-width: 1024px) {
	.vitruve-clients-testimonial-grid__header {
		margin-bottom: var(--space-16);
	}
}

.vitruve-clients-testimonial-grid__title {
	font-family: var(--font-heading);
	font-size: var(--text-5xl);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 var(--space-4);
	line-height: 1.2;
    max-width: 600px;
	/* Animación de entrada */
	opacity: 0;
	transform: translateY(30px);
}

.vitruve-clients-testimonial-grid.is-visible .vitruve-clients-testimonial-grid__title {
	animation: fadeInUp 1s var(--ease-apple) forwards;
}

@media (min-width: 768px) {
	.vitruve-clients-testimonial-grid__title {
		font-size: var(--text-4xl);
	}
}

@media (min-width: 1024px) {
	.vitruve-clients-testimonial-grid__title {
		font-size: var(--text-5xl);
	}
}

.vitruve-clients-testimonial-grid__subtitle {
	font-size: var(--text-base);
	color: var(--text-secondary);
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.vitruve-clients-testimonial-grid__subtitle {
		font-size: var(--text-lg);
	}
}

/**
 * GRID PRINCIPAL
 */
.vitruve-clients-testimonial-grid__grid {
	max-width: var(--container-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	gap: var(--space-4);
	position: relative;
	z-index: 2;
	/* Animación de entrada */
	opacity: 0;
}

.vitruve-clients-testimonial-grid.is-visible .vitruve-clients-testimonial-grid__grid {
	animation: fadeIn 1.2s var(--ease-apple) 0.3s forwards;
}

@media (min-width: 1024px) {
	.vitruve-clients-testimonial-grid__grid {
		gap: var(--space-6);
	}
}

/* Posicionamiento específico de elementos en la grid */
.vitruve-clients-testimonial-grid__item--video-1 {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.vitruve-clients-testimonial-grid__item--video-2 {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.vitruve-clients-testimonial-grid__item--photo-3 {
	grid-column: 3;
	grid-row: 1;
}

.vitruve-clients-testimonial-grid__item--photo-4 {
	grid-column: 4;
	grid-row: 1;
}

.vitruve-clients-testimonial-grid__item--photo-5 {
	grid-column: 3;
	grid-row: 2;
}

.vitruve-clients-testimonial-grid__item--photo-6 {
	grid-column: 4;
	grid-row: 2;
}

.vitruve-clients-testimonial-grid__item--video-7 {
	grid-column: 3;
	grid-row: 3 / span 2;
}

.vitruve-clients-testimonial-grid__item--video-8 {
	grid-column: 4;
	grid-row: 3 / span 2;
}

.vitruve-clients-testimonial-grid__item--photo-9 {
	grid-column: 1;
	grid-row: 3;
}

.vitruve-clients-testimonial-grid__item--photo-10 {
	grid-column: 2;
	grid-row: 3;
}

.vitruve-clients-testimonial-grid__item--photo-11 {
	grid-column: 1;
	grid-row: 4;
}

.vitruve-clients-testimonial-grid__item--photo-12 {
	grid-column: 2;
	grid-row: 4;
}

/**
 * ITEMS (VIDEOS Y FOTOS)
 */
.vitruve-clients-testimonial-grid__item {
	position: relative;
	border-radius: var(--radius-3xl);
	overflow: hidden;
	background-color: var(--color-neutral-700);
}

.vitruve-clients-testimonial-grid__item--photo {
	aspect-ratio: 1 / 1;
}

.vitruve-clients-testimonial-grid__item--video {
	cursor: pointer;
	transition: transform var(--transition-base) var(--ease-in-out);
}

.vitruve-clients-testimonial-grid__item--video:hover {
	transform: scale(1.02);
}

/**
 * VIDEO WRAPPER
 */
.vitruve-clients-testimonial-grid__video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Overlay negro ligero sobre el thumbnail del video */
.vitruve-clients-testimonial-grid__video-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 1;
	pointer-events: none;
}

.vitruve-clients-testimonial-grid__video-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vitruve-clients-testimonial-grid__play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-neutral-500);
	transition: transform var(--transition-base) var(--ease-in-out),
	            opacity var(--transition-base) var(--ease-in-out);
	z-index: 2;
	padding: 0;
	width: 64px;
	height: 64px;
}

.vitruve-clients-testimonial-grid__play-button:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.vitruve-clients-testimonial-grid__play-button:active {
	transform: translate(-50%, -50%) scale(0.95);
}

@media (min-width: 768px) {
	.vitruve-clients-testimonial-grid__play-button {
		width: 80px;
		height: 80px;
	}
}

/**
 * PHOTO WRAPPER
 */
.vitruve-clients-testimonial-grid__photo-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Overlay negro ligero sobre la foto */
.vitruve-clients-testimonial-grid__photo-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 1;
	pointer-events: none;
}

.vitruve-clients-testimonial-grid__photo-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/**
 * INFO (NOMBRE Y TÍTULO)
 */
.vitruve-clients-testimonial-grid__info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-4);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
	color: var(--color-white);
	z-index: 2;
}

@media (min-width: 768px) {
	.vitruve-clients-testimonial-grid__info {
		padding: var(--space-6);
	}
}

.vitruve-clients-testimonial-grid__name {
	font-size: var(--text-sm);
	font-weight: 600;
	margin-bottom: var(--space-1);
	line-height: 1.3;
}

@media (min-width: 768px) {
	.vitruve-clients-testimonial-grid__name {
		font-size: var(--text-base);
	}
}

.vitruve-clients-testimonial-grid__role {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.4;
}

@media (min-width: 768px) {
	.vitruve-clients-testimonial-grid__role {
		font-size: var(--text-sm);
	}
}

/**
 * MODAL DE VIDEO
 */
.vitruve-video-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-slow) var(--ease-in-out);
}

.vitruve-video-modal.is-open {
	opacity: 1;
	pointer-events: all;
}

.vitruve-video-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.95);
	cursor: pointer;
}

.vitruve-video-modal__content {
	position: relative;
	width: 90%;
	max-width: 1200px;
	z-index: 10;
	transform: scale(0.9);
	transition: transform var(--transition-slow) var(--ease-in-out);
}

.vitruve-video-modal.is-open .vitruve-video-modal__content {
	transform: scale(1);
}

.vitruve-video-modal__close {
	position: absolute;
	top: -50px;
	right: 0;
	background: none;
	border: none;
	color: var(--color-white);
	cursor: pointer;
	padding: var(--space-2);
	transition: opacity var(--transition-base) var(--ease-in-out);
	z-index: 11;
}

.vitruve-video-modal__close:hover {
	opacity: 0.7;
}

@media (max-width: 640px) {
	.vitruve-video-modal__close {
		top: -40px;
		right: 10px;
	}
}

.vitruve-video-modal__video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* Aspect ratio 16:9 */
	background-color: #000;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.vitruve-video-modal__video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/**
 * RESPONSIVE - TABLETS
 */
@media (max-width: 1024px) {
	.vitruve-clients-testimonial-grid__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	
	/* Reorganizar posiciones en tablet */
	.vitruve-clients-testimonial-grid__item--video-1 {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	
	.vitruve-clients-testimonial-grid__item--video-2 {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-3 {
		grid-column: 1;
		grid-row: 3;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-4 {
		grid-column: 2;
		grid-row: 3;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-5 {
		grid-column: 1;
		grid-row: 4;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-6 {
		grid-column: 2;
		grid-row: 4;
	}
	
	.vitruve-clients-testimonial-grid__item--video-7 {
		grid-column: 1;
		grid-row: 5 / span 2;
	}
	
	.vitruve-clients-testimonial-grid__item--video-8 {
		grid-column: 2;
		grid-row: 5 / span 2;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-9 {
		grid-column: 1;
		grid-row: 7;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-10 {
		grid-column: 2;
		grid-row: 7;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-11 {
		grid-column: 1;
		grid-row: 8;
	}
	
	.vitruve-clients-testimonial-grid__item--photo-12 {
		grid-column: 2;
		grid-row: 8;
	}
}

/**
 * RESPONSIVE - MOBILE
 */
@media (max-width: 640px) {
	.vitruve-clients-testimonial-grid {
		padding: var(--space-12) 0;
	}
	
	.vitruve-clients-testimonial-grid__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}
	
	/* Reorganizar items en 2 columnas */
	.vitruve-clients-testimonial-grid__item--video-1,
	.vitruve-clients-testimonial-grid__item--video-2,
	.vitruve-clients-testimonial-grid__item--video-7,
	.vitruve-clients-testimonial-grid__item--video-8,
	.vitruve-clients-testimonial-grid__item--photo-3,
	.vitruve-clients-testimonial-grid__item--photo-4,
	.vitruve-clients-testimonial-grid__item--photo-5,
	.vitruve-clients-testimonial-grid__item--photo-6,
	.vitruve-clients-testimonial-grid__item--photo-9,
	.vitruve-clients-testimonial-grid__item--photo-10,
	.vitruve-clients-testimonial-grid__item--photo-11,
	.vitruve-clients-testimonial-grid__item--photo-12 {
		grid-column: auto;
		grid-row: auto;
	}
	
	.vitruve-video-modal__content {
		width: 95%;
	}
}

/**
 * VARIANTES DE ALINEACIÓN (WordPress Align)
 */
.vitruve-clients-testimonial-grid.alignwide .vitruve-clients-testimonial-grid__grid {
	max-width: 1400px;
}

.vitruve-clients-testimonial-grid.alignfull {
	max-width: 100%;
}

.vitruve-clients-testimonial-grid.alignfull .vitruve-clients-testimonial-grid__grid {
	max-width: 100%;
}

/**
 * ACCESIBILIDAD
 */
@media (prefers-reduced-motion: reduce) {
	.vitruve-clients-testimonial-grid__item--video,
	.vitruve-clients-testimonial-grid__play-button,
	.vitruve-video-modal,
	.vitruve-video-modal__content {
		transition: none;
	}
	
	.vitruve-clients-testimonial-grid__item--video:hover {
		transform: none;
	}
	
	.vitruve-clients-testimonial-grid__title,
	.vitruve-clients-testimonial-grid__grid {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Focus visible para accesibilidad de teclado */
.vitruve-clients-testimonial-grid__item--video:focus-visible,
.vitruve-clients-testimonial-grid__play-button:focus-visible,
.vitruve-video-modal__close:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}