/**
 * CSS da página de perfil público do professor(a)/pesquisador(a) — rota
 * `/perfil/{user_nicename}/` [RF-PERF-01/02/03], Sprint 6.
 *
 * Consome os tokens `--lisa-*` definidos em `lisa-theme/style.css` (NÃO
 * redefinir tokens aqui) e reaproveita classes genéricas já existentes em
 * `assets/css/lisa-forms.css` (`.lisa-form-card`, `.lisa-form-heading`,
 * `.lisa-form-notice*`, `.lisa-skill-chip*`, `.lisa-skill-card__header`,
 * `.lisa-availability-badge*`) — ambos os arquivos são sempre enfileirados
 * juntos (`lisa-theme-forms` carrega em toda página; `lisa-theme-profile`
 * só na rota de perfil, ver `lisa_theme_enqueue_profile_scripts()` em
 * functions.php), então essas regras não são duplicadas aqui.
 *
 * Cabeçalho/rodapé/skip link: desde a Sprint 7 (segunda página clássica —
 * a home), os blocos `.lisa-site-header*`/`.lisa-site-footer*`/
 * `.lisa-skip-link` vivem em assets/css/lisa-layout.css (handle
 * `lisa-theme-layout`, enfileirado sempre) — exatamente a migração prevista
 * no docblock original deste arquivo.
 *
 * EDITÁVEL VIA WP: nenhum texto vive neste arquivo — apenas apresentação.
 * Textos ficam em page-templates/lisa-professional-profile.php,
 * header.php e footer.php via __()/esc_html_e() com o text domain
 * `lisa-theme`.
 *
 * @package Lisa_Theme
 */

/* =========================================================================
 * Contêiner geral da página de perfil
 * ========================================================================= */

.lisa-profile-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	font-family: var(--lisa-font);
	color: var(--lisa-gray-900);
}

.lisa-profile-wrap *,
.lisa-profile-wrap *::before,
.lisa-profile-wrap *::after {
	box-sizing: border-box;
}

/* =========================================================================
 * Cabeçalho do perfil (avatar + identificação + disponibilidade)
 * ========================================================================= */

.lisa-profile-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

@media (min-width: 640px) {
	.lisa-profile-header {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}
}

.lisa-profile-header__avatar img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 3px solid var(--lisa-primary-tint);
	object-fit: cover;
}

/* Sprint 15: sem foto de perfil, o mesmo círculo exibe as iniciais (nunca
   Gravatar — nenhum hash de e-mail sai do servidor). */
.lisa-profile-avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 3px solid var(--lisa-primary-tint);
	background: var(--lisa-primary-tint);
	color: var(--lisa-primary);
	font-family: var(--lisa-font-display);
	font-size: var(--lisa-text-2xl);
	font-weight: 800;
	letter-spacing: 0.02em;
}

@media (min-width: 640px) {
	.lisa-profile-header__avatar img,
	.lisa-profile-avatar--initials {
		width: 128px;
		height: 128px;
	}
}

.lisa-profile-header__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.lisa-profile-header__info {
		align-items: flex-start;
	}
}

.lisa-profile-header__name {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--lisa-primary-darker);
}

.lisa-profile-header__meta {
	margin: 0;
	color: var(--lisa-gray-600);
	line-height: 1.5;
}

.lisa-profile-header__area {
	margin: 0;
}

/* =========================================================================
 * Biografia
 * ========================================================================= */

.lisa-profile-bio__content {
	line-height: 1.6;
	overflow-wrap: break-word;
}

.lisa-profile-bio__content > :first-child {
	margin-top: 0;
}

.lisa-profile-bio__content > :last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * Habilidades (reaproveita .lisa-skill-card*/.lisa-skill-chip* de
 * lisa-forms.css — só o que ainda não existia entra aqui)
 * ========================================================================= */

.lisa-skill-card__description {
	line-height: 1.6;
	color: var(--lisa-gray-900);
	overflow-wrap: break-word;
}

.lisa-skill-card__description > :first-child {
	margin-top: 0;
}

.lisa-skill-card__description > :last-child {
	margin-bottom: 0;
}

.lisa-skill-card__subheading {
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--lisa-primary-darker);
}

.lisa-skill-card__projects p {
	margin: 0;
	color: var(--lisa-gray-600);
	line-height: 1.5;
}

.lisa-skill-card__portfolio {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* =========================================================================
 * Carrossel de portfólio acessível [RF-PERF-02]
 *
 * Lista horizontal com scroll nativo + scroll-snap: navegável por teclado
 * (o contêiner é focável via tabindex="0" no HTML e responde às setas
 * ←/→ do navegador quando focado — comportamento nativo de qualquer
 * contêiner com overflow, sem nenhum JS), mouse (arraste/roda) e toque.
 * As setas visuais (`.lisa-carousel__controls`) são um enhancement
 * progressivo injetado por assets/js/lisa-profile-carousel.js — nunca um
 * elemento obrigatório para a navegação funcionar.
 * ========================================================================= */

.lisa-carousel {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	padding-bottom: 0.375rem;
	scrollbar-width: thin;
}

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

.lisa-carousel__track {
	display: flex;
	gap: 0.875rem;
	margin: 0;
	padding: 0.125rem;
	list-style: none;
}

.lisa-carousel__item {
	flex: 0 0 auto;
	width: 160px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.lisa-carousel__image {
	display: block;
	width: 160px;
	height: 160px;
	object-fit: cover;
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
	background: var(--lisa-gray-100);
}

/* Miniatura de imagem ampliável: o <a> envolve a <img>. Sem JS o link abre a
   imagem ampliada em nova guia; com JS, assets/js/lisa-profile-lightbox.js
   abre o <dialog> .lisa-lightbox.

   A pista de que a miniatura é clicável é só o cursor de lupa + um leve
   destaque no hover — deliberadamente SEM ícone sobreposto, que polui a
   vitrine quando há vários itens lado a lado. */
.lisa-carousel__zoom {
	position: relative;
	display: block;
	width: 160px;
	border-radius: var(--lisa-radius-btn);
	line-height: 0;
	cursor: zoom-in;
	transition: transform 0.18s var(--lisa-ease-out), box-shadow 0.18s var(--lisa-ease-out);
}

.lisa-carousel__zoom:hover,
.lisa-carousel__zoom:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--lisa-shadow-lg);
}

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

/* -------------------------------------------------------------------------
   Miniatura de documento
   A prévia da 1ª página vem (a) do próprio WordPress, como tamanho derivado
   do PDF, quando o servidor tem Imagick, ou (b) de pdf.js no navegador
   (assets/js/lisa-pdf-thumb.js). Enquanto nenhuma das duas chega — ou se
   ambas falharem — o slot exibe o cartão com ícone + extensão, que é o que o
   PHP renderiza. Por isso a caixa tem tamanho fixo: o layout não muda quando
   a prévia entra.
   ------------------------------------------------------------------------- */
.lisa-carousel__doc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	width: 160px;
	color: var(--lisa-primary);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}

.lisa-carousel__doc:hover {
	color: var(--lisa-primary-dark);
}

.lisa-carousel__doc:hover .lisa-carousel__doc-label {
	text-decoration: underline;
}

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

.lisa-carousel__doc-page {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 160px;
	overflow: hidden;
	background: var(--lisa-white);
	border: 1px solid var(--lisa-gray-300);
	border-radius: var(--lisa-radius-btn);
}

/* Alinha a prévia pelo topo da página (é lá que está o título/cabeçalho do
   documento, o que ajuda a identificá-lo) em vez de centralizar o recorte. */
.lisa-carousel__doc-thumb,
.lisa-carousel__doc-canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.lisa-carousel__doc-canvas {
	height: auto;
	max-height: none;
	align-self: flex-start;
}

/* Fita superior sutil sugerindo "folha de papel" e separando a prévia da
   borda do cartão. */
.lisa-carousel__doc-page::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1.5rem;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.lisa-carousel__doc-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	color: var(--lisa-gray-600);
	background: var(--lisa-gray-100);
	width: 100%;
	height: 100%;
	justify-content: center;
}

.lisa-carousel__doc-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.lisa-carousel__doc-ext {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.lisa-carousel__doc-label {
	display: block;
	width: 100%;
	overflow-wrap: break-word;
}

/* Item de LINK EXTERNO no carrossel (Sprint 21): reaproveita inteiro o
   cartão de documento (.lisa-carousel__doc*) e só ajusta o host, que é uma
   URL e não uma extensão de arquivo — precisa de caixa normal, quebra de
   linha e um respiro lateral. */
.lisa-carousel__link-host {
	max-width: 100%;
	padding: 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
	text-align: center;
	overflow-wrap: anywhere;
}

.lisa-carousel__caption {
	margin: 0;
	width: 160px;
	font-size: 0.8125rem;
	color: var(--lisa-gray-600);
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* Setas de navegação — enhancement progressivo via JS (ver docblock acima). */
.lisa-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.lisa-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--lisa-primary);
	background: var(--lisa-white);
	border: 1px solid var(--lisa-primary);
	border-radius: 999px;
	cursor: pointer;
}

.lisa-carousel__btn:hover {
	background: var(--lisa-primary-tint);
}

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

/* =========================================================================
 * Lightbox do portfólio (<dialog id="lisa-portfolio-lightbox">)
 *
 * <dialog> nativo, aberto por assets/js/lisa-profile-lightbox.js: backdrop,
 * foco preso e Esc são do navegador — aqui só a aparência. Enquanto fechado
 * o elemento não é exibido (`display: none` padrão do <dialog>), então
 * nenhuma regra precisa escondê-lo.
 * ========================================================================= */

/* O dialog ocupa a viewport inteira e é apenas o "palco": nada de moldura,
   fundo ou sombra próprios — só a imagem tem corpo visual. É isso que separa
   um lightbox de um modal comum, e é o que põe o X no canto da tela e as
   setas nas bordas, e não coladas na foto. */
.lisa-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	/* dvh acompanha a barra de endereços recolhível dos navegadores móveis;
	   a linha vh acima é o fallback para quem não suporta a unidade. */
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
	color: var(--lisa-white);
	font-family: var(--lisa-font);
}

.lisa-lightbox::backdrop {
	background: rgba(13, 27, 51, 0.82);
	/* Desfoque do conteúdo atrás: separa a imagem da página sem precisar de
	   um preto opaco. Navegador sem suporte simplesmente mostra o véu navy. */
	backdrop-filter: blur(10px) saturate(1.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Entrada suave (o <dialog> não anima sozinho). Fica fora do
   prefers-reduced-motion global do style.css para deixar explícito que o
   modal é utilizável sem nenhuma animação. */
@media (prefers-reduced-motion: no-preference) {
	.lisa-lightbox[open] {
		animation: lisa-lightbox-rise 0.24s var(--lisa-ease-out);
	}

	.lisa-lightbox[open]::backdrop {
		animation: lisa-lightbox-veil 0.24s ease-out;
	}
}

@keyframes lisa-lightbox-rise {
	from {
		opacity: 0;
		transform: scale(0.97);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes lisa-lightbox-veil {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Trava a rolagem do documento enquanto o modal está aberto (o <dialog>
   nativo não faz isso). A classe é posta/removida pelo JS no <html>. */
.lisa-lightbox-open {
	overflow: hidden;
}

.lisa-lightbox__inner {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	width: 100%;
	height: 100%;
	padding: clamp(1rem, 3vw, 2.5rem);
}

/* Colunas explícitas: com uma única imagem no carrossel de origem as setas
   ficam `display: none` e o posicionamento automático jogaria a figura para
   a primeira coluna, desalinhando a imagem para a esquerda da tela. */
.lisa-lightbox__nav--prev {
	grid-column: 1;
}

.lisa-lightbox__figure {
	grid-column: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-width: 0;
	height: 100%;
}

.lisa-lightbox__nav--next {
	grid-column: 3;
}

.lisa-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* Reserva a faixa da legenda + contador abaixo da imagem. */
	max-height: calc(100dvh - 12rem);
	object-fit: contain;
	border-radius: var(--lisa-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	/* Enquanto a imagem carrega, um retângulo translúcido em vez de um
	   buraco preto. */
	background: rgba(255, 255, 255, 0.06);
}

.lisa-lightbox__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	max-width: 68ch;
	line-height: 1.4;
	text-align: center;
}

.lisa-lightbox__caption-text {
	font-size: 0.9375rem;
	font-weight: 600;
}

.lisa-lightbox__counter {
	padding: 0.125rem 0.625rem;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--lisa-radius-full);
}

.lisa-lightbox__open {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.8125rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.lisa-lightbox__open:hover,
.lisa-lightbox__open:focus-visible {
	color: var(--lisa-white);
	border-bottom-color: var(--lisa-accent-teal);
}

/* Controles "de vidro": legíveis sobre qualquer imagem, sem competir com
   ela. Tamanho mínimo de alvo 44x44 (WCAG 2.1 AA). */
.lisa-lightbox__close,
.lisa-lightbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	color: var(--lisa-white);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--lisa-radius-full);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s var(--lisa-ease-out);
}

.lisa-lightbox__close:hover,
.lisa-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: scale(1.06);
}

.lisa-lightbox__close:active,
.lisa-lightbox__nav:active {
	transform: scale(0.96);
}

.lisa-lightbox__close:focus-visible,
.lisa-lightbox__nav:focus-visible,
.lisa-lightbox__open:focus-visible {
	outline: 3px solid var(--lisa-primary-light);
	outline-offset: 3px;
}

.lisa-lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 1;
}

.lisa-lightbox__close svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* `hidden` precisa vencer o display dos controles quando há uma única
   imagem no carrossel de origem. */
.lisa-lightbox__nav[hidden],
.lisa-lightbox__counter[hidden],
.lisa-lightbox__caption-text[hidden] {
	display: none;
}

@media (max-width: 640px) {
	/* Telas estreitas: as setas descem para baixo da imagem, para a foto
	   ocupar toda a largura disponível. */
	.lisa-lightbox__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		grid-template-areas:
			"figure figure"
			"prev   next";
		padding: 3.5rem 1rem 1.25rem;
	}

	.lisa-lightbox__figure {
		grid-area: figure;
	}

	.lisa-lightbox__nav--prev {
		grid-area: prev;
		justify-self: start;
	}

	.lisa-lightbox__nav--next {
		grid-area: next;
		justify-self: end;
	}

	.lisa-lightbox__image {
		max-height: calc(100dvh - 17rem);
	}
}

/* =========================================================================
 * Avaliações (placeholder até a Fase 3)
 * ========================================================================= */

.lisa-profile-reviews__empty {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--lisa-gray-600);
	line-height: 1.5;
}

.lisa-profile-reviews__empty-icon {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--lisa-gray-300);
}