/**
 * Hero das páginas de silo.
 *
 * Replica o hero do template Single 497 do Elementor Theme Builder, que só
 * roda em post_type=post. As páginas de silo (post_type=page, criadas pelo
 * botão "Criar páginas faltantes") não recebem esse template e caem no
 * fallback pelado do Hello Elementor — este CSS devolve o visual.
 *
 * Valores extraídos do CSS ao vivo do template 497 (não chutados).
 */

/* Full-bleed: o .site-main do Hello Elementor tem max-width:1140px centrado.
   Margens negativas laterais esticam a faixa até a borda da viewport sem usar
   100vw (que somaria a largura da barra de rolagem e criaria scroll horizontal). */
.dts-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 30px;
	background-color: #d1d1d1;
	position: relative;
	overflow: hidden;
}

.dts-hero__inner {
	display: flex;
	align-items: stretch;
	min-height: 400px; /* @media(min-width:768px) no original */
}

.dts-hero__media {
	flex: 0 0 40.057%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/**
 * A coluna existe por um motivo específico, não é wrapper decorativo.
 *
 * No Elementor as margens do painel ficam no .elementor-element-populated, que
 * é filho da COLUNA — então -5% e 24% resolvem contra a largura da coluna
 * (59,943% da viewport), não contra a linha inteira. Aplicar as mesmas
 * porcentagens direto no item flex da linha deixa o painel ~120px mais estreito
 * e deslocado para a esquerda. Percentagem de margin sempre resolve contra a
 * largura do bloco contentor, então o contentor precisa ser a coluna.
 */
.dts-hero__col {
	flex: 0 0 59.943%;
	max-width: 59.943%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dts-hero__panel {
	background-color: #07405b;
	margin: 8% 24% 8% -5%;
	padding: 50px 60px 50px 50px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Breadcrumb — mesma marcação/classe do Rank Math, para herdar o resto.
 * ------------------------------------------------------------------------- */
.dts-hero__crumbs {
	margin: 0 0 20px;
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
	opacity: .7;
	text-align: center;
}

.dts-hero__crumbs p {
	margin: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

.dts-hero__crumbs a {
	color: #fff;
	font-weight: 600;
	opacity: 1;
	text-decoration: none;
	box-shadow: none;
}

.dts-hero__crumbs a:hover {
	text-decoration: underline;
}

.dts-hero__crumbs .separator {
	opacity: .7;
}

/* ---------------------------------------------------------------------------
 * Título
 * ------------------------------------------------------------------------- */
.dts-hero__title {
	margin: 0;
	padding: 0;
	font-family: "Ruwudu", Sans-serif;
	font-size: 52px;
	line-height: 58px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
 * Blindagem contra o CSS do tema.
 *
 * Estes seletores rodam dentro de .page-content, então o tema/Elementor kit
 * estiliza h1/a/p "pelados" e sobrescreve as cores. Mesma dor já documentada
 * no linktree.css. Só o mínimo necessário — cor, fundo e fonte.
 * ------------------------------------------------------------------------- */
.dts-hero .dts-hero__panel {
	background-color: #07405b !important;
}

.dts-hero h1.dts-hero__title {
	font-family: "Ruwudu", Sans-serif !important;
	color: #fff !important;
	margin: 0 !important;
}

.dts-hero .dts-hero__crumbs,
.dts-hero .dts-hero__crumbs p,
.dts-hero .dts-hero__crumbs a,
.dts-hero .dts-hero__crumbs span {
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * Responsivo — breakpoints e valores do próprio template 497.
 * ------------------------------------------------------------------------- */
/* O template 497 não tem breakpoint de tablet: vai de min-width:768px direto
   para max-width:767px. Não inventar um aqui — divergiria do resto do site. */
@media (max-width: 767px) {
	/* O template original usa elementor-reverse-mobile: no mobile a caixa de
	   texto vem primeiro e a foto embaixo. O margin-top negativo (-13px) encosta
	   a caixa no elemento acima, como no original. */
	.dts-hero__inner {
		flex-direction: column-reverse;
		min-height: 0;
	}

	.dts-hero__media {
		flex: none;
		min-height: 156px;
	}

	.dts-hero__col {
		flex: none;
		max-width: 100%;
	}

	.dts-hero__panel {
		margin: -13px 0 0;
		padding: 40px 27px;
	}

	.dts-hero__title {
		font-size: 32px;
		line-height: 1em;
	}
}