/* ==========================================================================
   Cúpula em Saúde — Hero de PÁGINAS INTERNAS
   Substitui a barra de título padrão do Astra por uma hero clean e moderna.
   Namespace: .cupula-hi  ·  variáveis inline: --chi-*
   ========================================================================== */

/* Oculta o título/barra padrão do tema quando a hero está ativa (reforço do
   filtro astra_the_title_enabled e também cobre o título do Elementor Builder). */
.cupula-has-hero-interna .ast-single-post .entry-header,
.cupula-has-hero-interna .ast-archive-description,
.cupula-has-hero-interna .ast-single-entry-banner {
	display: none !important;
}

.cupula-hi {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--chi-h, 420px);
	margin: 0;
	padding: clamp(96px, 15vh, 170px) 0 clamp(38px, 7vh, 72px);
	overflow: hidden;
	isolation: isolate;
	background: rgba(var(--chi-overlay-rgb, 2, 6, 95), 1); /* fundo-base caso não haja imagem */
	color: var(--chi-text, #ffffff);
}

/* ---- Mídia de fundo (imagem) + zoom-out suave no load -------------------- */
.cupula-hi__media {
	position: absolute;
	inset: -1px; /* evita linhas de 1px nas bordas durante o parallax */
	z-index: 0;
	overflow: hidden;
	will-change: transform;
}

.cupula-hi__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.14);
	transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.cupula-hi.is-ready .cupula-hi__img {
	transform: scale(1);
}

/* ---- Máscara de proteção do topo/menu ----------------------------------- */
/* Escurece suavemente o topo da imagem para o cabeçalho/menu nunca sumir,
   sem "sujar" o restante da foto. Cor e opacidade vêm do painel. */
.cupula-hi__mask {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(var(--chi-mask-rgb, 2, 6, 95), var(--chi-mask-op, 0.4)) 0%,
		rgba(var(--chi-mask-rgb, 2, 6, 95), calc(var(--chi-mask-op, 0.4) * 0.45)) 28%,
		rgba(var(--chi-mask-rgb, 2, 6, 95), 0) 58%
	);
}

/* ---- Overlay (gradiente clean — nada de barra chapada) ------------------- */
.cupula-hi__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			to top,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), var(--chi-overlay-op, 0.6)) 0%,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), calc(var(--chi-overlay-op, 0.6) * 0.3)) 55%,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), 95%) 100%
		),
		linear-gradient(
			to right,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), calc(var(--chi-overlay-op, 0.6) * 0.7)) 0%,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), 0) 72%
		);
}

/* Centralizado: overlay simétrico, sem o reforço lateral. */
.cupula-hi--center .cupula-hi__overlay {
	background:
		linear-gradient(
			to top,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), var(--chi-overlay-op, 0.6)) 0%,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), calc(var(--chi-overlay-op, 0.6) * 0.45)) 60%,
			rgba(var(--chi-overlay-rgb, 2, 6, 95), calc(var(--chi-overlay-op, 0.6) * 0.25)) 100%
		);
}

/* ---- Conteúdo ------------------------------------------------------------ */
.cupula-hi__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.cupula-hi__content {
	max-width: 860px;
}

.cupula-hi--center .cupula-hi__content {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

/* Eyebrow: filete de destaque + texto mono em caixa-alta. */
.cupula-hi__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: clamp(0.72rem, 0.68rem + 0.3vw, 0.86rem);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--chi-accent, #00a0cc);
}

.cupula-hi__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

.cupula-hi--center .cupula-hi__eyebrow {
	justify-content: center;
}

.cupula-hi__title {
	margin: 0;
	font-family: "Anton", "Geist", sans-serif;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: 0.01em;
	font-size: clamp(2.1rem, 1.3rem + 4vw, 4.4rem);
	color: var(--chi-text, #ffffff);
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
}

/* ---- Entrada em cascata (revelada por JS: .is-ready) --------------------- */
.cupula-hi__eyebrow,
.cupula-hi__title {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cupula-hi.is-ready .cupula-hi__eyebrow {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.12s;
}

.cupula-hi.is-ready .cupula-hi__title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.22s;
}

/* Sem JS: garante o conteúdo visível (progressive enhancement). */
.no-js .cupula-hi__eyebrow,
.no-js .cupula-hi__title {
	opacity: 1;
	transform: none;
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 768px) {
	.cupula-hi {
		min-height: var(--chi-h-mobile, 300px);
		padding: clamp(84px, 16vh, 120px) 0 clamp(28px, 6vh, 44px);
		align-items: flex-end;
	}

	.cupula-hi__content,
	.cupula-hi--center .cupula-hi__content {
		max-width: 100%;
	}

	.cupula-hi__eyebrow {
		margin-bottom: 10px;
		letter-spacing: 0.14em;
	}
}

/* ---- Acessibilidade: reduz movimento ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cupula-hi__img {
		transform: scale(1) !important;
		transition: none;
	}
	.cupula-hi__media {
		transform: none !important;
	}
	.cupula-hi__eyebrow,
	.cupula-hi__title {
		opacity: 1;
		transform: none;
		transition: none;
	}
}