/**
 * Card de profissional + grid da vitrine [RF-HOME-04/05] — design v2.
 *
 * Componente `.lisa-pro-card` (template-parts/lisa-professional-card.php) e
 * grade `.lisa-card-grid`, compartilhados pela home, pela página de
 * resultados de busca (Sprint 8) e pelos favoritos (Fase 3) — por isso este
 * arquivo é separado de lisa-home.css: a busca enfileira só ele.
 *
 * Design v2 (identidade da logo): capa decorativa gerada por acento da área
 * (`data-accent` → --acc/--acc-ink/--acc-tint, resolvidos em style.css),
 * avatar de iniciais com anel duplo, hover lift, estado indisponível em P&B
 * e skeleton shimmer para os filtros AJAX (Sprint 9).
 *
 * Consome tokens `--lisa-*` de style.css e reaproveita `.lisa-skill-chip` e
 * `.lisa-availability-badge*` de lisa-forms.css (enfileirado sempre).
 *
 * Mobile-first: 1 coluna; 2 (≥640px); 3 (≥960px); 4 (≥1280px).
 *
 * @package Lisa_Theme
 */

.lisa-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.lisa-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.lisa-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.lisa-card-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.lisa-pro-card {
	margin: 0;
	font-family: var(--lisa-font);
}

.lisa-pro-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--lisa-white);
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius);
	box-shadow: var(--lisa-shadow-sm);
	transition:
		box-shadow var(--lisa-dur-base) var(--lisa-ease-out),
		border-color var(--lisa-dur-base) ease,
		transform var(--lisa-dur-base) var(--lisa-ease-out);
}

.lisa-pro-card--enabled .lisa-pro-card__inner:hover {
	border-color: var(--acc, var(--lisa-primary));
	box-shadow: var(--lisa-shadow-lg);
	transform: translateY(-4px);
}

/* Capa decorativa: gradiente do tint da área + pontos no acento (eco da
   logo). Gerada 100% por CSS — nenhuma imagem. */
.lisa-pro-card__cover {
	height: 76px;
	background:
		radial-gradient(circle at 85% 30%, var(--acc, var(--lisa-primary-light)) 0 6px, transparent 7px),
		radial-gradient(circle at 70% 75%, var(--acc, var(--lisa-primary-light)) 0 4px, transparent 5px),
		radial-gradient(circle at 92% 80%, var(--acc, var(--lisa-primary-light)) 0 3px, transparent 4px),
		linear-gradient(135deg, var(--acc-tint, var(--lisa-primary-tint)) 0%, var(--lisa-white) 100%);
}

/* Avatar de iniciais sobreposto à capa, com anel duplo branco + acento. */
.lisa-pro-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: -40px auto 0;
	position: relative;
	z-index: 1;
	background: var(--acc-tint, var(--lisa-primary-tint));
	color: var(--acc-ink, var(--lisa-primary));
	font-family: var(--lisa-font-display);
	font-size: var(--lisa-text-xl);
	font-weight: 800;
	border-radius: 50%;
	box-shadow:
		0 0 0 3px var(--lisa-white),
		0 0 0 5px var(--acc, var(--lisa-primary-light));
	overflow: hidden;
}

/* Sprint 15: quando o profissional tem foto de perfil, ela ocupa o mesmo
   círculo das iniciais (recorte central, sem distorcer o retrato). */
.lisa-pro-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.lisa-pro-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	padding: 1rem 1.25rem 1.5rem;
	text-align: center;
}

.lisa-pro-card__name {
	margin: 0;
	font-family: var(--lisa-font-display);
	font-size: var(--lisa-text-lg);
	font-weight: 800;
	line-height: 1.3;
}

/* Link "esticado": o nome é o único link real do card e sua área de clique
   cobre o card inteiro via ::after — leitores de tela anunciam UM link. */
.lisa-pro-card__link {
	color: var(--lisa-navy);
	text-decoration: none;
}

.lisa-pro-card__link::after {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: var(--lisa-radius);
}

/* Botão de favorito (estrela) — Sprint 13. z-index acima do link esticado
   (::after) para permanecer clicável; sempre com texto acessível (sr-only). */
.lisa-fav-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--lisa-gray-600);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--lisa-gray-300);
	border-radius: 50%;
	cursor: pointer;
	transition: color var(--lisa-dur-fast) ease, background var(--lisa-dur-fast) ease, transform var(--lisa-dur-fast) ease;
}

.lisa-fav-btn__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.lisa-fav-btn:hover {
	color: var(--lisa-primary);
	transform: scale(1.08);
}

.lisa-fav-btn:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

.lisa-fav-btn.is-favorited {
	color: var(--lisa-primary);
	border-color: var(--lisa-primary);
}

.lisa-fav-btn.is-favorited .lisa-fav-btn__icon {
	fill: currentColor;
}

.lisa-fav-btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: default;
}

.lisa-pro-card__link:hover {
	color: var(--lisa-primary);
	text-decoration: underline;
}

.lisa-pro-card__link:focus-visible {
	outline: none;
}

.lisa-pro-card__link:focus-visible::after {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 2px;
}

.lisa-pro-card__meta {
	margin: 0;
	color: var(--lisa-gray-600);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.lisa-pro-card__skills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.lisa-pro-card__rating {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0.25rem 0 0;
	color: var(--lisa-gray-600);
	font-size: 0.875rem;
}

.lisa-pro-card__star {
	display: inline-flex;
	color: var(--lisa-star);
}

/* Badge de disponibilidade encosta no rodapé do card. */
.lisa-pro-card .lisa-availability-badge {
	margin-top: auto;
	align-self: center;
}

/* Indisponível: card em P&B + CTA sem clique [RF-HOME-05] — a regra do
   design system (nunca só cor: o badge textual "Indisponível no momento"
   permanece legível). */
.lisa-pro-card--disabled .lisa-pro-card__inner {
	filter: grayscale(1);
	opacity: 0.75;
}

/* =========================================================================
 * Skeleton shimmer — placeholder de carregamento para os filtros AJAX da
 * busca (Sprint 9). Marcação esperada: um card com --skeleton e blocos
 * .lisa-skeleton no lugar de texto (aria-hidden; container com aria-busy).
 * ========================================================================= */

.lisa-pro-card--skeleton .lisa-pro-card__inner {
	pointer-events: none;
}

.lisa-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--lisa-gray-uff);
	border-radius: var(--lisa-radius-btn);
	color: transparent !important;
	user-select: none;
}

.lisa-skeleton::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
	content: "";
	transform: translateX(-100%);
	animation: lisa-shimmer 1.4s ease infinite;
}

@keyframes lisa-shimmer {
	to {
		transform: translateX(100%);
	}
}