/**
 * Bloque Info Links Grid
 * 
 * Grilla 2x2 con tarjetas de información (título, descripción, botón con flecha).
 * Diseño similar a Linear.app - minimalista con fondo oscuro.
 * 
 * @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
 * Mismo ancho y márgenes que contact-cards
 */
.vitruve-info-links-grid {
	background-color: var(--bg-primary);
	padding: var(--space-20) 0;
	width: 100%;
}

/**
 * CONTAINER INTERNO
 * Alineado con contact-cards usando container-max-width
 */
.vitruve-info-links-grid__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding-lg);
}

/**
 * GRID DE TARJETAS
 * 2 columnas en desktop, 1 en mobile
 */
.vitruve-info-links-grid__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-16) var(--space-24);
}

/**
 * TARJETA INDIVIDUAL
 * Estado inicial para animación fade-in
 */
.vitruve-info-links-grid__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	/* Estado inicial para animación */
	opacity: 0;
	transform: translateY(30px);
}

/**
 * ANIMACIÓN ESCALONADA DE TARJETAS
 * Cada tarjeta aparece con un pequeño delay basado en su índice
 */
.vitruve-info-links-grid.is-visible .vitruve-info-links-grid__card {
	animation: fadeInUp 0.8s var(--ease-apple) forwards;
	animation-delay: calc(var(--card-index, 0) * 0.1s);
}

/**
 * TÍTULO DE LA TARJETA
 */
.vitruve-info-links-grid__card-title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--text-primary);
	margin: 0;
	line-height: 1.3;
}

/**
 * DESCRIPCIÓN DE LA TARJETA
 */
.vitruve-info-links-grid__card-description {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-normal);
	color: var(--text-muted);
	margin: 0;
	line-height: 1.6;
	max-width: 400px;
}

/**
 * BOTÓN CON FLECHA
 * Estilo consistente con main-page-feature-video-split
 */
.vitruve-info-links-grid__card-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
	text-decoration: none;
	margin-top: var(--space-3);
	transition: transform 0.2s ease, opacity 0.2s ease;
	width: fit-content;
}

.vitruve-info-links-grid__card-button:hover {
	opacity: 0.8;
	transform: translateX(4px);
}

/**
 * FLECHA DEL LINK
 */
.vitruve-info-links-grid__button-arrow {
	font-size: var(--text-lg);
	transition: transform 0.2s ease;
}

.vitruve-info-links-grid__card-button:hover .vitruve-info-links-grid__button-arrow {
	transform: translateX(4px);
}

/**
 * FOCUS VISIBLE (ACCESIBILIDAD)
 */
.vitruve-info-links-grid__card-button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/**
 * RESPONSIVE - TABLETS
 */
@media (max-width: 1024px) {
	.vitruve-info-links-grid {
		padding: var(--space-16) 0;
	}

	.vitruve-info-links-grid__container {
		padding: 0 var(--container-padding);
	}

	.vitruve-info-links-grid__grid {
		gap: var(--space-12) var(--space-16);
	}

	.vitruve-info-links-grid__card-title {
		font-size: var(--text-lg);
	}

	.vitruve-info-links-grid__card-description {
		font-size: var(--text-sm);
	}
}

/**
 * RESPONSIVE - MOBILE
 */
@media (max-width: 640px) {
	.vitruve-info-links-grid {
		padding: var(--space-12) 0;
	}

	.vitruve-info-links-grid__container {
		padding: 0 var(--space-5);
	}

	.vitruve-info-links-grid__grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.vitruve-info-links-grid__card {
		gap: var(--space-3);
	}

	.vitruve-info-links-grid__card-title {
		font-size: var(--text-lg);
	}

	.vitruve-info-links-grid__card-description {
		font-size: var(--text-sm);
		max-width: none;
	}

	.vitruve-info-links-grid__card-button {
		font-size: var(--text-sm);
	}
}

/**
 * VARIANTES POR NÚMERO DE TARJETAS
 * Ajustar layout cuando hay menos de 4 tarjetas
 */

/* 1 tarjeta: centrada */
.vitruve-info-links-grid--cards-1 .vitruve-info-links-grid__grid {
	grid-template-columns: 1fr;
	max-width: 500px;
}

/* 2 tarjetas: 2 columnas */
.vitruve-info-links-grid--cards-2 .vitruve-info-links-grid__grid {
	grid-template-columns: repeat(2, 1fr);
}

/* 3 tarjetas: primera fila 2 columnas, segunda fila centrada */
.vitruve-info-links-grid--cards-3 .vitruve-info-links-grid__grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
	.vitruve-info-links-grid--cards-1 .vitruve-info-links-grid__grid,
	.vitruve-info-links-grid--cards-2 .vitruve-info-links-grid__grid,
	.vitruve-info-links-grid--cards-3 .vitruve-info-links-grid__grid {
		grid-template-columns: 1fr;
		max-width: none;
	}
}

/**
 * ACCESIBILIDAD - Desactivar animaciones si el usuario lo prefiere
 */
@media (prefers-reduced-motion: reduce) {
	.vitruve-info-links-grid__card {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.vitruve-info-links-grid__card-button:hover .vitruve-info-links-grid__button-arrow,
	.vitruve-info-links-grid__card-button:hover .vitruve-info-links-grid__button-chevron {
		transform: none;
	}
}