/**
 * @layer components — grilla de áreas de práctica (card-area.php). Se usa
 * en el home (5×2) y en el archive de áreas — mismo componente. Estilo
 * tomado de la referencia del cliente (areas.JPG): título en mayúsculas,
 * sin bajada, flecha siempre alineada al piso de la card (mismo alto para
 * las 10), filete horizontal debajo de cada card (sin filetes verticales
 * entre columnas).
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.areas__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-5);
		row-gap: var(--space-6);
	}

	@media (width < 768px) {
		.areas__grid {
			grid-template-columns: 1fr;
		}
	}

	@media (width >= 768px) {
		.areas__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (width >= 1280px) {
		.areas__grid {
			grid-template-columns: repeat(5, 1fr);
		}
	}

	@media (width >= 768px) {
		.areas__item {
			min-height: 194px;
		}
	}

	.areas__item {
		display: flex;
		flex-direction: column;
		padding: var(--space-5);
		background: #4a4a3c21;
		border-bottom: 1px solid var(--c-ink-200);
		text-decoration: none !important;
		color: inherit !important;
	}

	.areas__icono {
		width: 40px;
		height: 40px;
		margin-bottom: var(--space-4);
		color: var(--c-accent-600);
		transition: color var(--dur-2) var(--ease-glide);
	}

	.areas__titulo {
		font-size: 20px !important;
		font-family: "Cormorant Garamond";
		font-weight: 700 !important;
		letter-spacing: .01em;
		line-height: 1.6;
		color: var(--c-accent-700) !important;
		margin-bottom: var(--space-3);
		transition: color var(--dur-2) var(--ease-glide);
		line-height: 24px !important;
	}

	.areas__flecha {
		display: inline-flex;
		color: var(--c-ink-700);
	}

	.areas__flecha .icono {
		width: 20px;
		height: 20px;
		transition: transform var(--dur-2) var(--ease-glide);
	}

	.areas__item:hover .areas__icono,
	.areas__item:focus-visible .areas__icono {
		color: var(--c-accent-400);
	}

	.areas__item:hover .areas__titulo,
	.areas__item:focus-visible .areas__titulo {
		color: var(--c-accent-400) !important;
	}

	.areas__item:hover .areas__flecha .icono,
	.areas__item:focus-visible .areas__flecha .icono {
		transform: translateX(4px);
		color: var(--c-accent-600);
	}

	@media (width < 768px) {
		.areas__item {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: var(--space-4);
		}

		.areas__icono {
			margin-bottom: 0;
		}

		.areas__titulo {
			margin-bottom: 0;
		}

		.areas__flecha {
			display: none;
		}
	}
}