/**
 * @layer utilities — ficha de un profesional.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer utilities {
	.profesional-layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);
		padding-block: var(--space-8);
	}

	@media (width >= 768px) {
		.profesional-layout {
			grid-template-columns: 4fr 8fr;
			align-items: start;
			gap: var(--space-9);
		}
	}

	.profesional-sidebar {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	@media (width >= 768px) {
		.profesional-sidebar {
			position: sticky;
			top: calc(var(--header-height) + var(--space-6));
		}
	}

	.profesional-sidebar__foto {
		width: 100%;
		aspect-ratio: 3 / 4;
		object-fit: cover;
		filter: grayscale(1);
		margin-bottom: var(--space-4);
	}

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

	.profesional-sidebar__nombre {
		margin: 0;
		font-size: var(--text-xl) !important;
	}

	.profesional-sidebar__cargo {
		margin: 0 0 var(--space-4);
		color: var(--c-ink-500);
	}

	.profesional-sidebar__datos {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin: 0 0 var(--space-5);
		font-size: var(--text-sm);
	}

	.profesional-sidebar__datos a {
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
	}

	.profesional-sidebar__datos a:hover {
		color: var(--c-accent-600) !important;
	}

	.profesional-seccion {
		padding-block: var(--space-7);
		border-top: 1px solid var(--c-ink-200);
	}

	.profesional-seccion:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.profesional-seccion h2 {
		font-size: var(--text-xl) !important;
		margin-bottom: var(--space-5);
	}

	.profesional-seccion--editor :where(p, ul, ol, blockquote) {
		max-width: var(--measure-max);
	}

	.profesional-contenido h5 {
		font-size: 26px !important;
	}

	.profesional-contenido li {
		font-size: 16px;
	}

	.profesional-contenido p.wp-block-paragraph {
		font-size: 16px;
	}

	.profesional-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.profesional-chips a {
		display: inline-block;
		padding: var(--space-2) var(--space-4);
		border: 1px solid var(--c-ink-200);
		font-size: var(--text-sm);
		color: var(--c-ink-700) !important;
		text-decoration: none !important;
	}

	.profesional-chips a:hover {
		border-color: var(--c-accent-600);
		color: var(--c-accent-600) !important;
	}
}