/*
 * Acabamento da pagina de links. Roda so nesta pagina (body.pll-pagina-links).
 *
 * Regra da casa: este arquivo cuida de MOLDURA e LAYOUT — divisao das colunas,
 * ordem no celular, hover, recorte da foto do canto. Ele nao define familia de
 * fonte nem cor de texto de titulo/paragrafo, porque isso vive nos settings do
 * Elementor: se o CSS vencesse, editar no painel deixaria de ter efeito e a
 * pagina viraria uma casca.
 *
 * A unica excecao e o <em> dos titulos (o trecho em italico destacado), que o
 * painel do Elementor nao alcanca — o campo controla o titulo inteiro, nao um
 * pedaco. As cores estao logo abaixo, uma por tipo de card. Ver CLASSES.md.
 */

/* ── fundo da pagina ─────────────────────────────────────────────────── */
body.pll-pagina-links {
	background: #f0e9e1;
}

/* ── mosaico de 3 colunas ────────────────────────────────────────────── */
/*
 * As tres colunas dividem a sobra em partes iguais depois de descontar os gaps
 * — o mesmo flex-[1_0_0] do Figma. Com width:33.33% no painel, os dois gaps de
 * 17px estourariam os 100% e a terceira coluna cairia de linha.
 *
 * Duas sutilezas que custaram uma rodada de teste:
 *
 * 1. Mexe nas VARIAVEIS, nao no `flex`. O Elementor declara
 *    `.e-con.e-flex{flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}`;
 *    redefinir as tres variaveis deixa o shorthand dele resolver para 1 1 0 e
 *    mantem o comportamento previsivel se ele mudar a regra.
 * 2. O seletor precisa do `.e-con` no fim. `.e-con.e-flex` tem especificidade
 *    (0,2,0), igual a `.pll-pagina .pll-coluna` — e em empate vence quem vem
 *    depois no <head>, que e sempre o frontend.min.css do Elementor. Com o
 *    `.e-con` somado, viram (0,3,0) e a regra passa a valer.
 *
 * min-width:0 impede que um titulo longo empurre a coluna alem da parte dela.
 */
.pll-pagina .pll-coluna.e-con {
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: 0%;
	min-width: 0;
}

/* ── cards ───────────────────────────────────────────────────────────── */
.pll-pagina .pll-card {
	position: relative;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}

.pll-pagina .pll-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(58, 42, 34, .06), 0 16px 38px rgba(58, 42, 34, .14);
}

/* O container inteiro e o link: o cursor precisa dizer isso na area toda. */
.pll-pagina .pll-card > a.elementor-element-overlay,
.pll-pagina .pll-card {
	cursor: pointer;
}

/* Sem sublinhado nos textos dentro de um card clicavel. */
.pll-pagina .pll-card a {
	text-decoration: none;
}

/* ── o trecho em italico dos titulos ─────────────────────────────────── */
/*
 * Unico lugar onde o CSS define cor de texto, e so para o <em>. Trocar o
 * destaque de um card e trocar a cor aqui — o resto do titulo continua sendo
 * o campo "Cor do titulo" do painel.
 */
.pll-pagina .pll-h em {
	font-style: italic;
	color: #8a5a3b;             /* cards claros */
}

.pll-pagina .pll-card-hero .pll-h em {
	color: #e3be83;             /* hero, sobre foto escura */
}

.pll-pagina .pll-card-agendar .pll-h em {
	color: #ebc48b;             /* card marrom do WhatsApp */
}

.pll-pagina .pll-card-formacao .pll-h em {
	color: #cbb98a;             /* card da formacao */
}

/* ── foto redonda que encosta no canto ───────────────────────────────── */
/*
 * A foto ja vem recortada em circulo, com fundo transparente. O overflow:hidden
 * do card e que corta os 16px/18px que ela avanca para fora — e o que da o
 * efeito de foto apoiada no canto. Sem pointer-events ela roubaria o clique do
 * card inteiro.
 */
.pll-pagina .pll-foto-canto {
	pointer-events: none;
	z-index: 1;
}

.pll-pagina .pll-foto-canto img {
	display: block;
	width: 100%;
	height: auto;
}

/* O texto precisa ficar por cima da foto onde os dois se encontram. */
.pll-pagina .pll-card-claro .pll-h,
.pll-pagina .pll-card-claro .pll-p,
.pll-pagina .pll-card-claro .pll-rodape-card {
	position: relative;
	z-index: 2;
}

/* ── etiqueta (pilula) ───────────────────────────────────────────────── */
.pll-pagina .pll-tag {
	flex: 0 0 auto;
	width: auto;
}

.pll-pagina .pll-tag .pll-tag-texto {
	white-space: nowrap;
}

/* ── bolinhas de rede social ─────────────────────────────────────────── */
.pll-pagina .pll-redes {
	width: auto;
}

.pll-pagina .pll-rede .elementor-icon {
	transition: background-color .25s ease, transform .2s ease;
	box-shadow: inset 0 0 0 1px rgba(247, 242, 236, .2);
}

.pll-pagina .pll-rede .elementor-icon:hover {
	transform: translateY(-2px);
}

/* ── rodape do card: chamada a esquerda, etiqueta a direita ──────────── */
.pll-pagina .pll-rodape-card {
	margin-top: auto;
	width: 100%;
}

.pll-pagina .pll-chamada {
	flex: 0 0 auto;
	width: auto;
}

.pll-pagina .pll-chamada,
.pll-pagina .pll-tag {
	transition: transform .25s ease;
}

.pll-pagina .pll-card:hover .pll-chamada {
	transform: translateX(2px);
}

/* ── celular ─────────────────────────────────────────────────────────── */
/*
 * No Figma o celular nao empilha as colunas na ordem em que elas aparecem no
 * desktop: a Formacao sobe para logo depois do hero, antes do card de agendar.
 * display:contents dissolve as tres colunas, os sete cards viram filhos diretos
 * do mosaico e a ordem passa a ser decidida por `order`.
 */
@media (max-width: 767px) {
	/*
	 * A direcao do mosaico no celular NAO esta aqui de proposito: e o controle
	 * responsivo `flex_direction_mobile` do proprio Elementor, no gerador. O CSS
	 * dele sai com tres classes e sempre empata com o que eu escrever, ganhando
	 * por ordem no <head>.
	 *
	 * Ja o display:contents e seguro: o Elementor declara `display:var(--display)`
	 * num seletor de uma classe so, entao este aqui vence com folga. E o que
	 * dissolve as tres colunas e deixa os sete cards virarem filhos diretos do
	 * mosaico, para o `order` abaixo poder reorganiza-los.
	 */
	.pll-pagina .pll-coluna.e-con {
		display: contents;
	}

	.pll-pagina .pll-card-hero              { order: 1 }
	.pll-pagina .pll-card-formacao          { order: 2 }
	.pll-pagina .pll-card-agendar           { order: 3 }
	.pll-pagina .pll-card-rejuvenescimento  { order: 4 }
	.pll-pagina .pll-card-micropigmentacao  { order: 5 }
	.pll-pagina .pll-card-harmonizacao      { order: 6 }
	.pll-pagina .pll-card-site              { order: 7 }

	/* A foto do canto encolhe junto com o card, senao come a coluna do texto. */
	.pll-pagina .pll-foto-canto {
		width: 138px !important;
	}
}

/* Telas bem estreitas: a foto sai de cena e o texto ocupa o card inteiro. */
@media (max-width: 360px) {
	.pll-pagina .pll-foto-canto {
		display: none;
	}

	.pll-pagina .pll-card-claro {
		padding-right: 20px !important;
	}
}

/* ── acessibilidade ──────────────────────────────────────────────────── */
.pll-pagina .pll-card:focus-within {
	outline: 2px solid #8a5a3b;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.pll-pagina .pll-card,
	.pll-pagina .pll-chamada,
	.pll-pagina .pll-rede .elementor-icon {
		transition: none;
	}
}