/* =========================================================
   R45 Hover Box
   ========================================================= */

.hb-card {
	--hb-cor: #204EE9;
	--hb-rgb: 32, 78, 233;
	--hb-texto: #fff;
	--hb-altura: 420px;
	--hb-raio: 16px;
	--hb-padding: 40px;
	--hb-tint: 35%;
	--hb-pos: center center;

	position: relative;
	display: block;
	min-height: var(--hb-altura);
	border-radius: var(--hb-raio);
	overflow: hidden;
	background: var(--hb-cor);
	isolation: isolate;
}

/* ---------- Imagem ---------- */

.hb-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hb-img, none);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: var(--hb-pos);
	transition: opacity .5s ease, transform .7s cubic-bezier(.25,.8,.25,1);
}

/* tinta de cor por cima da imagem */
.hb-tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(var(--hb-rgb), calc(var(--hb-tint) / 100)) 0%,
		rgba(var(--hb-rgb), 1) 100%
	);
	transition: opacity .5s ease;
	pointer-events: none;
}

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

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

.hb-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
}

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

.hb-titulo {
	margin: 0 !important;
	color: var(--hb-texto);
}

/* a descrição abre com animação e empurra o título para cima */
.hb-desc-wrap {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	transition: grid-template-rows .5s cubic-bezier(.25,.8,.25,1);
}

.hb-desc-wrap > div {
	overflow: hidden;
}

.hb-desc {
	margin: 18px 0 0 !important;
	color: var(--hb-texto);
	opacity: 0;
	transition: opacity .4s ease .1s;
}

.hb-card:hover .hb-desc-wrap,
.hb-card:focus-within .hb-desc-wrap,
.hb-card.is-open .hb-desc-wrap {
	grid-template-rows: 1fr;
}

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

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

.hb-cta {
	margin-top: 26px;
	pointer-events: auto;
	position: relative;
	z-index: 3;
}

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

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

@media (max-width: 690px) {
	.hb-card {
		--hb-padding: 26px;
	}
}