/**
 * @layer components — grilla de cards de profesional (card-profesional.php).
 * Se usa en el home, en "profesionales a cargo" de cada área y en el
 * archive de profesionales (Fase 5) — mismo componente en los tres lugares.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.profesionales__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

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

	.profesionales__card {
		display: block;
		text-decoration: none !important;
		color: inherit !important;
	}

	.profesionales__retrato {
		margin-bottom: var(--space-4);
	}

	.profesionales__foto {
		width: 100%;
		max-height: 392px;
		aspect-ratio: 3 / 4;
		object-fit: cover;
		filter: grayscale(1);
	}

	.profesionales__foto--placeholder {
		background: var(--c-ink-100);
	}

	.profesionales__nombre {
		font-size: var(--text-lg) !important;
		margin: 0 0 var(--space-1);
	}

	/* Home (template-parts/home/profesionales.php): !important tiene que
	   ganarle acá, en la misma capa @layer components — un !important en
	   pages/front-page.css (@layer utilities, declarada después) pierde
	   contra uno de acá, ver la nota de @layer en buttons.css. */
	.profesionales .profesionales__nombre {
		font-size: 24px !important;
	}

	.profesionales__cargo {
		margin: 0;
		font-size: var(--text-sm);
		color: var(--c-ink-500);
	}
}