/* Revista Lontras 65 Anos — ajustes visuais específicos deste projeto.
   Carregado depois do chb-base do plugin, então vence o cascade sem
   precisar editar o plugin canônico pra regras só deste site. */

/* Cantos retos em todo o site (briefing: "bordas retas e finas, sem
   cantos arredondados ou sombra colorida"). */
:root { --chb-radius: 0; --chb-radius-lg: 0; }
.chb-ticket__btn, .chb-ticket__badge { border-radius: 0; }

/* Gradiente da seção hero. */
.chb-hero--plain { background: linear-gradient(135deg, #0B2039, #113254); }

/* Rótulo "REVISTA ESPECIAL": linha dourada fina em vez do chip/pílula
   padrão do componente — igual ao print de referência. */
.chb-hero__eyebrow {
	display: flex; align-items: center; gap: 14px;
	background: none; padding: 0; border-radius: 0;
	font-weight: 500; letter-spacing: 3px; color: rgba(255, 255, 255, .78);
}
.chb-hero__eyebrow::before {
	content: ''; display: inline-block; width: 40px; height: 1px;
	background: var(--chb-accent); flex-shrink: 0;
}
.chb-hero--split .chb-hero__eyebrow::before { order: -1; }

/* Subtítulo em itálico (Playfair) — a frase de destaque logo abaixo do
   título; o parágrafo (campo "text") continua na fonte de texto normal. */
.chb-hero__sub {
	font-family: var(--chb-font-display); font-style: italic; font-weight: 500;
	color: #fff; opacity: 1; font-size: var(--chb-text-2xl);
}

/* Moldura dourada deslocada atrás da capa (efeito de contorno). */
.chb-hero--split .chb-hero__media { position: relative; }
.chb-hero--split .chb-hero__media::before {
	content: ''; position: absolute; top: -18px; right: -18px; bottom: 18px; left: 18px;
	border: 1px solid var(--chb-accent); z-index: 0; pointer-events: none;
}
.chb-hero--split .chb-hero__media img { position: relative; z-index: 1; }

/* Mesma moldura dourada deslocada nas seções Texto + Imagem em fundo
   escuro (ex.: "A nova edição"), pra manter a linguagem visual da capa. */
.chb-text-image.chb-section--invert .chb-text-image__media { position: relative; }
.chb-text-image.chb-section--invert .chb-text-image__media::before {
	content: ''; position: absolute; top: -18px; right: -18px; bottom: 18px; left: 18px;
	border: 1px solid var(--chb-accent); z-index: 0; pointer-events: none;
}
.chb-text-image.chb-section--invert .chb-text-image__media img { position: relative; z-index: 1; }

/* Botão "Quero anunciar" (CTA final): dourado com texto azul, em vez do
   branco padrão que o componente usa em CTAs de fundo sólido. No hover,
   fica branco em vez de escurecer o dourado (ficava murcho sobre o navy). */
.chb-cta .chb-btn--primary { background: var(--chb-primary); color: var(--chb-secondary); }
.chb-cta .chb-btn--primary:hover { background: #fff; color: var(--chb-secondary); }

/* Botões "Quero patrocinar" / "Concurso Cultural" (mesma seção, estilo
   contorno): sem esta regra eles saem em dourado (herdado do botão
   padrão), inconsistente com os equivalentes do hero, que já são brancos
   sobre o mesmo fundo navy. Iguala aos do hero — branco, com leve fundo
   translúcido branco no hover. */
.chb-cta .chb-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.chb-cta .chb-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* Rodapé em fundo claro (mesmo tom do Cronograma) com texto azul —
   o componente padrão assume rodapé escuro com texto branco. */
.chb-footer { color: var(--chb-secondary); }
.chb-footer a { color: var(--chb-secondary); }
.chb-footer__bottom { border-top-color: rgba(11, 32, 57, .15); }

/* Hover dos itens do menu: dourado (cor primária, mais vivo que o dourado
   escuro/accent que o componente usa por padrão — esse ficava apagado
   demais sobre o azul do cabeçalho). */
.chb-nav__list a:hover,
.chb-nav__list a[aria-current] {
	color: var(--chb-primary);
}

/* Links dentro de cards em seções invertidas (ex.: Concurso Cultural): o
   hover padrão do componente escurece o dourado até ficar ilegível sobre
   o fundo navy — mantém branco aqui. */
.chb-section--invert .chb-card__link:hover {
	color: #fff;
}

/* Rodapé no mobile: logo + descrição alinhados à esquerda em vez do
   centralizado padrão do componente (mesmo breakpoint que o resto do
   plugin usa pra mobile). */
@media (max-width: 768px) {
	.chb-footer__brand,
	.chb-footer__grid--cols-1 .chb-footer__brand {
		text-align: left;
	}
	.chb-footer__logo img { margin-inline: 0; }
}