/* =========================================================
   R45 Áreas de Atividade — cards com hover
   ========================================================= */

.ar-wrap {
	--ar-cols: 3;
	--ar-gap: 20px;
	--ar-radius: 16px;
	--ar-azul: #204EE9;        /* azul do card / gradiente */
	--ar-azul-escuro: #001E62; /* botão */
	--ar-min-altura: 330px;   /* altura mínima; cresce se o texto for maior */
	--ar-padding: 24px;
}

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

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

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

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

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

.ar-card {
	position: relative;
	display: block;
	min-height: var(--ar-min-altura);
	border-radius: var(--ar-radius);
	overflow: hidden;
	text-decoration: none !important;
	color: #fff !important;
	isolation: isolate;
}

/* fundo azul: só entra no hover, por baixo da foto */
.ar-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ar-azul);
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}

.ar-card:hover::before,
.ar-card:focus-within::before,
.ar-card.is-open::before {
	opacity: 1;
}

.ar-media {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1);
	transition: transform .6s cubic-bezier(.25,.8,.25,1), opacity .45s ease;
}

.ar-card:hover .ar-media,
.ar-card:focus-within .ar-media,
.ar-card.is-open .ar-media {
	transform: scale(1.05);
	opacity: 0;
}

/* ---------- Conteúdo ---------- */

.ar-content {
	position: relative;
	z-index: 4; /* acima do link que cobre o card */
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--ar-min-altura);
	height: 100%;
	padding: var(--ar-padding);
	box-sizing: border-box;
}

.ar-content .ar-cta {
	pointer-events: auto;
}

.ar-text {
	display: grid;
	align-items: end;
	margin-bottom: 18px;
}

.ar-text > * {
	grid-area: 1 / 1;
	margin: 0 !important;
}

.ar-titulo {
	color: #fff;
	transition: opacity .35s ease, transform .35s ease;
}

.ar-desc {
	color: #fff;
	overflow-wrap: break-word;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s ease, transform .4s ease;
	pointer-events: none;
}

/* hover: esconde o título, mostra a descrição */
.ar-card:hover .ar-titulo,
.ar-card:focus-within .ar-titulo,
.ar-card.is-open .ar-titulo {
	opacity: 0;
	transform: translateY(-8px);
}

.ar-card:hover .ar-desc,
.ar-card:focus-within .ar-desc,
.ar-card.is-open .ar-desc {
	opacity: 1;
	transform: none;
}

/* variante: manter o título visível no hover */
.ar-wrap.ar-keep-titulo .ar-card:hover .ar-titulo,
.ar-wrap.ar-keep-titulo .ar-card:focus-within .ar-titulo,
.ar-wrap.ar-keep-titulo .ar-card.is-open .ar-titulo {
	opacity: 1;
	transform: none;
}

/* ---------- Botão (CTA do Salient) dentro do card ---------- */

.ar-cta {
	align-self: flex-start;
	position: relative;
	z-index: 3;
	margin: 0 !important;
}

/* a bolinha do botão cresce também no hover do card */
.ar-card:hover .ar-cta.btn-circle .nectar-button-type .link_wrap::after,
.ar-card.is-open .ar-cta.btn-circle .nectar-button-type .link_wrap::after {
	transform: scale(2);
}

/* link invisível que torna o card todo clicável */
.ar-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
}

/* ---------- Mobile: mostra tudo, sem hover ---------- */

@media (max-width: 690px) {

	.ar-wrap {
		--ar-min-altura: 260px;
	}
}

/* ---------- Load more ---------- */

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

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

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

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

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

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

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