/* =========================================================
   R45 Equipa — grelha de membros
   Variáveis: podes fazer override no style.css do child theme
   ========================================================= */

.eq-wrap {
	--eq-cols: 4;
	--eq-gap: 20px;
	--eq-radius: 18px;
	--eq-azul: var(--nectar-accent-color, #1B32E0);
	--eq-vermelho: #E2231A;
	--eq-cinza: #E9E9E9;
	--eq-texto: #6B6B6B;
	--eq-ratio: 4 / 5;   /* proporção da foto (retrato, mostra mais da pessoa) */
	--eq-foto-max: 400px; /* altura máxima da foto */
}

/* ---------- Grelha ---------- */

.eq-grid {
	display: grid;
	grid-template-columns: repeat(var(--eq-cols), minmax(0, 1fr));
	gap: var(--eq-gap);
}

@media (max-width: 1000px) {
	.eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 690px) {
	.eq-grid { grid-template-columns: 1fr; }
}

/* ---------- Card ---------- */

.eq-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--eq-radius);
	overflow: hidden;
	background: var(--eq-cinza);
}

.eq-media {
	position: relative;
	/* largura fixada: com aspect-ratio + max-height, o WebKit encolhia a
	   largura para manter a proporção e sobrava uma nesga do card à direita */
	width: 100%;
	flex: 0 0 auto;
	align-self: stretch;
	aspect-ratio: var(--eq-ratio);
	max-height: var(--eq-foto-max);
	background: var(--eq-azul);
	border-radius: var(--eq-radius);
	overflow: hidden;
}

/* a foto é um background e não um <img>: o WebKit (iOS) e as regras
   img { height:auto } do tema estragavam o preenchimento do card */
.eq-media .eq-foto {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1);
	transition: transform .6s cubic-bezier(.25,.8,.25,1);
}

.eq-foto--placeholder {
	background: var(--eq-azul);
}

.eq-card:hover .eq-media .eq-foto {
	transform: scale(1.04);
}

/* bolinha vermelha */
.eq-dot {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--eq-vermelho);
	transition: transform .4s cubic-bezier(.25,.8,.25,1);
	pointer-events: none;
}

.eq-card:hover .eq-dot {
	transform: scale(2);
}

/* ---------- Info ---------- */

.eq-info {
	padding: 16px 18px 18px;
	background: var(--eq-cinza);
	flex: 1 1 auto;
}

.eq-nome {
	margin: 0 0 4px !important;
	text-transform: uppercase;
	color: var(--eq-azul);
}

.eq-campo {
	margin: 0 0 2px !important;
	color: var(--eq-texto);
}

.eq-campo:last-child { margin-bottom: 0 !important; }

/* o email/telefone/linkedin ficam ligeiramente separados da função */
.eq-email,
.eq-telefone,
.eq-linkedin {
	margin-top: 6px !important;
}

.eq-email + .eq-telefone,
.eq-telefone + .eq-linkedin,
.eq-email + .eq-linkedin {
	margin-top: 0 !important;
}

.eq-email a,
.eq-telefone a,
.eq-linkedin a {
	color: var(--eq-azul);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease;
}

.eq-email a:hover,
.eq-telefone a:hover,
.eq-linkedin a:hover {
	border-bottom-color: currentColor;
}

.eq-bio {
	margin-top: 8px;
}

/* ---------- Botão load more (usa o CTA do Salient) ---------- */

.eq-more-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.eq-more-wrap .is-hidden {
	display: none !important;
}

.eq-more,
.eq-less {
	cursor: pointer;
	transition: opacity .25s ease;
}

.eq-more .link_text,
.eq-less .link_text {
	cursor: pointer;
}

.eq-more.is-loading {
	opacity: .5;
	pointer-events: none;
}

/* ---------- Entrada dos cards do load more ---------- */

.eq-in {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}

.eq-in--on {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.eq-card *, .eq-more *, .eq-in { transition: none !important; animation: none !important; }
}