/*
╔══════════════════════════════════════════════════════════════════════════════════════════════════════════╗
╟────────────────────────────────────────────────────────────────────────────────────┤ 20260817 1720  ├────╢
║                     GIRO FILANTROPIA — página de edição (estilos)
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════╝

# Descrição: estilos da landing page padrão de cada edição do Giro. Porte do
#            css/landing_page_padrao.css do tema WordPress do Diálogo Social.
#            Depende de filantropia_cores.css (.p1–.p7, .laranja, .laranja2,
#            .preto_bg, .laranja_degrade3, .parallax) e do Bootstrap 5.

# Diferença proposital em relação ao original: lá as regras de tipografia do
# programa (p, h5, h6, li, ul, blockquote) eram GLOBAIS e com !important — o que
# vazava para qualquer página que carregasse o arquivo. Aqui elas estão escopadas
# dentro de .edg-programa, onde o texto rico do editor de fato mora.
*/


/* ════════════════════════════════════════════════════════════════════
   1. CABEÇALHO DA EDIÇÃO — imagem geométrica escura, título e data
   ════════════════════════════════════════════════════════════════════ */
.edg-head {
	min-height: 420px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
	O .parallax do projeto usa background-attachment:fixed. No iOS isso trava e
	renderiza errado, então o efeito fica só onde o ponteiro é um mouse.
*/
@media (hover: none), (max-width: 991px) {
	.edg-head.parallax,
	.edg-inscricao.parallax { background-attachment: scroll !important; }
}

/* Miniatura do tema do treinamento */
.edg-head-thumb {
	max-width: 100%;
	height: auto;
	display: block;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 4px;
	background-color: #fff;
}

.edg-head h1 {
	font-size: 51px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 16px;
}

/* Etiqueta "Curso Presencial - Cidade" — o HTML vem pronto do JSON */
.edg-head h3 {
	font-size: 26px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 12px;
}

.edg-head .etiqueta_local_head { white-space: normal !important; }

.edg-head .data { margin-bottom: 6px; }

@media (max-width: 767px) {
	.edg-head { min-height: 0; }
	.edg-head h1 { font-size: 30px; }
	.edg-head h3 { font-size: 20px; }
}




/* ════════════════════════════════════════════════════════════════════
   2. CHAMADA — faixa laranja com a frase de impacto
   ════════════════════════════════════════════════════════════════════ */
.edg-chamada { padding: 50px 0; }

/*
	Lato, não Raleway: o reset "* { font-family: Raleway }" do style.css pega
	esta span, mas na página original a chamada é Lato. Medido lá, reposto aqui.
*/
.edg-chamada .p2 { font-family: var(--ff-body, 'Lato', sans-serif); }

@media (max-width: 767px) {
	.edg-chamada { padding: 30px 0; }
	.edg-chamada .p2 { font-size: 24px !important; }
}




/* ════════════════════════════════════════════════════════════════════
   3. PROGRAMA — texto rico (conteúdo programático da edição)
   Regras escopadas: valem só dentro deste bloco, nunca na página toda.
   ════════════════════════════════════════════════════════════════════ */
.edg-programa { padding: 50px 0 10px; }

/*
	Sobre o :where(.edg-programa) usado abaixo.

	No original estas regras eram seletores de elemento puro e globais — "p{}",
	"li>strong{}", "h6{}". Isso importa por causa da cascata: "li>strong" tem
	especificidade (0,0,2) e PERDE para as classes do conteúdo, como .p5 (24px) e
	.laranja (#ff8200), que valem (0,1,0). É assim que o título de cada palestra
	sai em 24px laranja, e não nos 20px vermelhos da regra genérica.

	Escopar com ".edg-programa li > strong" quebraria isso: viraria (0,1,2) e
	passaria a vencer as classes — foi exatamente o que aconteceu na primeira
	versão. O :where() envolve o escopo sem somar especificidade, então o seletor
	continua valendo (0,0,2), como no original, mas as regras seguem confinadas
	ao bloco do programa em vez de vazarem para a página toda.
*/

:where(.edg-programa) p {
	font-size: 20px !important;
	line-height: 1.4 !important;
}

:where(.edg-programa) li {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

:where(.edg-programa) ul { margin-bottom: 20px !important; }

:where(.edg-programa) li > strong,
:where(.edg-programa) li > b {
	font-size: 20px !important;
	color: #e15500 !important;
}

/* Subtítulo da palestra: o editor usa <em>, mas aqui ele não é itálico */
:where(.edg-programa) li > em {
	font-style: initial !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #818895 !important;
}

/* Caixa de destaque laranja (o editor usa h6 ou pre para isso) */
:where(.edg-programa) h6,
:where(.edg-programa) pre {
	font-family: Raleway, sans-serif !important;
	font-size: 28px !important;
	line-height: 1.3 !important;
	color: #e15500 !important;
	text-align: center !important;
	border: 1px solid !important;
	padding: 30px 10px !important;
	font-weight: 600 !important;
	margin: 30px 10% !important;
}

/* Caixa de destaque cinza (h5 ou citação) */
:where(.edg-programa) h5,
:where(.edg-programa) blockquote {
	font-family: Raleway, sans-serif !important;
	font-size: 24px !important;
	color: #71878e !important;
	text-align: center !important;
	border: 1px #71878e solid !important;
	padding: 10px !important;
	font-weight: 600 !important;
	margin: 30px 10% !important;
	font-style: normal !important;
}

@media (max-width: 767px) {
	:where(.edg-programa) h6,
	:where(.edg-programa) pre,
	:where(.edg-programa) h5,
	:where(.edg-programa) blockquote { margin: 24px 0 !important; font-size: 20px !important; }
}


/* ── Espaço reservado enquanto o programa da edição não chega ── */
.edg-programa-reservado {
	border: 1px dashed #c9d1d4;
	border-radius: 6px;
	padding: 48px 24px;
	text-align: center;
	color: #71878e;
	font-family: var(--ff-body, 'Lato', sans-serif);
	font-size: 18px;
}




/* ════════════════════════════════════════════════════════════════════
   4. PALESTRANTES — dois formatos, conforme a quantidade
   Até 3: currículo completo ao lado da foto. De 4 em diante: cartões
   com foto redonda e o currículo dentro de um popover.
   ════════════════════════════════════════════════════════════════════ */
.edg-palestrantes { padding: 50px 0; }

/* Foto redonda dos cartões */
.palestrante_img {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	background-color: #0d1420;
}

.edg-palestrantes h4 {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}

/* Currículo (formato lista) — o .branco de filantropia_cores já dá a cor */
.edg-palestrante-curriculo p {
	font-size: 16px;
	line-height: 1.5;
}

.edg-palestrante-foto-lista {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

@media (max-width: 767px) {
	.palestrante_img { width: 130px; height: 130px; }
}




/* ════════════════════════════════════════════════════════════════════
   5. LOCAL — endereço da edição (HTML pronto vindo do JSON)
   ════════════════════════════════════════════════════════════════════ */
.edg-local { padding: 50px 0; }

.edg-local h4 { font-size: 22px; font-weight: 600; line-height: 1.4; }

.edg-local p { font-size: 18px; line-height: 1.5; margin-bottom: 6px; }




/* ════════════════════════════════════════════════════════════════════
   6. INSCRIÇÃO — cartões de valores sobre fundo escuro
   ════════════════════════════════════════════════════════════════════ */
/*
	O scroll-margin-top compensa o cabeçalho fixo (64px): sem ele, o salto do
	link "Inscreva-se" pararia com o topo da seção escondido atrás da barra.
	Hoje o padding da seção já dava conta por 4px de folga — isto deixa a
	intenção explícita e resistente a mudanças de padding.
*/
.edg-inscricao {
	scroll-margin-top: 74px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 50px 0;
}

/* Caixa translúcida dos avisos de desconto */
.lente_branca { background-color: #ffffff2b !important; }

.edg-inscricao .card { border: none; }

.edg-inscricao .card h2 { font-size: 28px; line-height: 1.3; }

.edg-inscricao .card h3 { line-height: 1.3; }




/* ════════════════════════════════════════════════════════════════════
   7. PERGUNTAS E RESPOSTAS (accordion do Bootstrap)
   ════════════════════════════════════════════════════════════════════ */
.edg-faq { padding: 30px 0 50px; }

.titulo_faq {
	padding: 0 !important;
	font-size: 1rem;
	color: #FF8200;
	font-weight: 600;
	text-align: left;
}

.edg-faq .accordion-body { text-align: left; font-size: 16px; line-height: 1.5; }




/* ════════════════════════════════════════════════════════════════════
   8. DÚVIDAS, APOIOS E CÓDIGO DA TURMA
   ════════════════════════════════════════════════════════════════════ */
.edg-duvidas { padding: 30px 0; }

.edg-apoios { padding: 20px 0 50px; }

.edg-apoios img { max-width: 100%; height: auto; }

.edg-apoios-logo { max-height: 70px; width: auto; }

.edg-codigo {
	padding: 30px 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}