/* ReasonHub — componentes compartilhados entre a Home e as paginas verticais
   (Escola, Consultoria, Mentoria): hero, estatisticas, logowall, sobre e
   placeholders. Base de home.css e verticais.css via dependencia de enqueue
   (functions.php). NAO carrega em acervo/artigos/busca/post — nessas paginas
   valem o theme.css (ex.: .section-head estreito) e as folhas proprias. */

/* Cabecalho de secao em largura cheia (Home e verticais nao usam a medida estreita do theme.css). */
.section-head{max-width:none;margin-bottom:var(--space-8)}
.section-head h2{margin:0 0 var(--space-4)}
.section-head .lede{max-width:none}
.section--prussian .arrow-link{color:var(--sky-blue)}

/* Placeholders de imagem */
.ph{position:relative;background:var(--dust-grey);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-lg)}
.ph::after{content:attr(data-label);font-family:var(--font-mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--dim-grey)}
.ph--dark{background:var(--gunmetal)} .ph--dark::after{color:var(--dust-grey)}
.ph--blue{background:#13314a} .ph--blue::after{color:var(--sky-blue)}

/* Hero */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-16);align-items:center;padding-top:var(--space-12);padding-bottom:var(--space-12)}
.hero>*{min-width:0}
.statement{font-family:var(--font-sans);font-weight:300;font-size:var(--fs-display);line-height:1.12;letter-spacing:-.02em;color:var(--off-white);margin:0 0 var(--space-6)}
.statement b{font-weight:600}
.hero .lede{font-size:19px;margin-bottom:var(--space-8);max-width:46ch}
.hero-cta{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)}
.hero-art{height:440px}
.hero-art--img{margin:0;overflow:hidden;border-radius:var(--radius-lg)}
.hero-art--img img{width:100%;height:100%;object-fit:cover;display:block}

/* Estatisticas */
.stat{border-radius:var(--radius-lg);padding:var(--space-8);display:flex;flex-direction:column;min-height:300px}
.stat-icon{width:24px;height:24px;fill:none;align-self:flex-end;opacity:.85}
.stat-num{font-family:var(--font-serif);font-weight:600;font-size:clamp(48px,6vw,76px);line-height:1;margin:var(--space-6) 0 var(--space-5)}
.stat p{font-size:var(--fs-small);margin:0 0 auto}
.stat-src{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:var(--space-6)}
.b-prussian{background:var(--prussian-blue)} .b-sky{background:var(--sky-tint-solid)} .b-warm{background:var(--dust-grey-light)}
.stat--compact{min-height:0;padding:var(--space-6)}
.stat--compact .stat-num{font-size:clamp(34px,3.6vw,50px);margin:var(--space-4) 0 var(--space-3)}
.stat--compact .stat p{font-size:var(--fs-caption)}

/* Mural de logos — silhueta monocromatica uniforme (o arquivo original, colorido ou branco,
   e neutralizado no CSS). Home: cinza escuro sobre fundo claro. Education (Prussian): branco.
   Isso da unidade "clientes que confiam", resolve logos que so existem em versao branca e
   dispensa versao por fundo. Os originais coloridos ficam preservados no acervo. */
.logowall{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-10);align-items:center;margin-top:var(--space-8)}
.logo-item{display:inline-flex;align-items:center;justify-content:center;height:44px}
/* altura optica por logo vem inline (style) do template-part; aqui ficam os limites e o tratamento */
.logo-item img{height:34px;width:auto;max-height:44px;max-width:150px;object-fit:contain;display:block;filter:brightness(0);opacity:.62;transition:opacity .2s ease}
.logo-item img:hover{opacity:.9}
/* Fallback: item ainda em texto (cliente sem arquivo de logo) */
.logo-item:not(:has(img)){font-family:var(--font-sans);font-weight:600;font-size:18px;color:var(--dim-grey);padding:10px 18px;border:1px solid var(--dust-grey);border-radius:var(--radius-md);background:var(--off-white)}
/* Logos-selo (forma preenchida com texto interno, ex. Resorts Brasil): a silhueta chapada
   engoliria o desenho interno; grayscale preserva o contraste interno mantendo o mural mono. */
.logo-item--badge img{filter:grayscale(1)}
/* Sobre fundo escuro (Prussian, §12.1): mesma silhueta, em branco solido. */
.section--prussian .logo-item img{filter:brightness(0) invert(1);opacity:.82}
.section--prussian .logo-item--badge img{filter:grayscale(1) invert(1)}
.section--prussian .logo-item img:hover{opacity:1}
.section--prussian .logo-item:not(:has(img)){background:transparent;border-color:rgba(139,187,228,.35);color:var(--off-white)}

/* Fill cards (multi-superficie + badge solido) — o padrao "Hard/Soft/Reasoning" da home,
   PROMOVIDO de home.css (2026-07-03) para as verticais tambem usarem. Ver DESIGN-SYSTEM §12.2/§12.4.
   .f-tag e o badge SOLIDO do card (nivel 4): vermelho sobre card claro, Sky sobre card escuro. */
.fill{border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);border:1px solid transparent;display:flex;flex-direction:column}
.fill .f-icon{width:30px;height:30px;fill:none;margin-bottom:var(--space-5)}
.fill h3,.fill h4{margin:0 0 var(--space-3)}
.fill h4{font-size:var(--fs-h3)}
.fill p{margin:0;font-size:var(--fs-small);line-height:var(--lh-normal)}
.fill .f-tag{display:inline-block;align-self:flex-start;margin-top:var(--space-5);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-pill)}
.fill--prussian{background:var(--prussian-blue);color:var(--off-white)} .fill--prussian h3,.fill--prussian h4{color:var(--off-white)} .fill--prussian p{color:var(--sky-blue)} .fill--prussian .f-icon{stroke:var(--sky-blue)} .fill--prussian .f-tag{background:var(--sky-blue);color:var(--prussian-blue)}
.fill--sky{background:var(--sky-tint-solid);color:var(--gunmetal)} .fill--sky h3,.fill--sky h4{color:var(--prussian-blue)} .fill--sky p{color:var(--gunmetal)} .fill--sky .f-icon{stroke:var(--reddish-brown)} .fill--sky .f-tag{background:var(--reddish-brown);color:var(--off-white)}
.fill--warm{background:var(--dust-grey-light);color:var(--gunmetal)} .fill--warm h3,.fill--warm h4{color:var(--gunmetal)} .fill--warm p{color:var(--dim-grey)} .fill--warm .f-icon{stroke:var(--reddish-brown)} .fill--warm .f-tag{background:var(--reddish-brown);color:var(--off-white)}
.fill--featured{box-shadow:0 0 0 2px var(--reddish-brown)}

/* Escada de formatos — degraus de profundidade crescente (Home + Education).
   Cards brancos que sobem em altura da esquerda (descoberta) a direita (transformacao).
   Cartoes claros: funcionam sobre qualquer fundo de secao (prussian, tint, branco). */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);align-items:end;margin-top:var(--space-8)}
.ladder .rung{background:#fff;border:1px solid var(--dust-grey);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.ladder .rung .step{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--reddish-brown);margin-bottom:var(--space-3)}
.ladder .rung h4{margin:0 0 var(--space-2);font-size:var(--fs-small);line-height:var(--lh-snug);color:var(--gunmetal)}
.ladder .rung p{margin:0;font-size:var(--fs-caption);color:var(--dim-grey);line-height:var(--lh-snug)}
.ladder .rung:nth-child(1){min-height:180px}
.ladder .rung:nth-child(2){min-height:216px}
.ladder .rung:nth-child(3){min-height:252px}
.ladder .rung:nth-child(4){min-height:288px}
.ladder .rung--peak{min-height:324px;border-color:transparent;box-shadow:0 0 0 2px var(--reddish-brown)}
.ladder .rung--peak .step{color:var(--reddish-brown)}
/* Variante v2 (education2): step vira pill no topo; degraus com aumento menor */
.ladder--v2 .rung{justify-content:space-between}
.ladder--v2 .rung .step{align-self:flex-start;background:var(--reddish-brown);color:var(--off-white);border-radius:var(--radius-pill);padding:4px 11px;margin:0}
.ladder--v2 .rung:nth-child(1){min-height:210px}
.ladder--v2 .rung:nth-child(2){min-height:230px}
.ladder--v2 .rung:nth-child(3){min-height:250px}
.ladder--v2 .rung:nth-child(4){min-height:270px}
.ladder--v2 .rung--peak{min-height:290px}
@media(max-width:860px){
	.ladder{grid-template-columns:1fr;gap:var(--space-3)}
	.ladder .rung{min-height:0!important;justify-content:flex-start}
	.ladder .rung--peak{box-shadow:0 0 0 2px var(--reddish-brown)}
}

/* Sobre (Fernando / quem ensina) */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-16);align-items:center}
.about .ph{height:380px}
.about-photo{margin:0;height:380px;overflow:hidden;border-radius:var(--radius-lg)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.about .creds{font-family:var(--font-mono);font-size:13px;color:var(--dim-grey);margin:var(--space-5) 0;letter-spacing:.02em;line-height:1.9}

/* Responsivo compartilhado */
@media (max-width:980px){
	.hero{grid-template-columns:1fr;gap:var(--space-10)} .hero-art{height:280px;order:-1}
	.about{grid-template-columns:1fr;gap:var(--space-10)} .about .ph,.about .about-photo{height:260px!important;order:-1}
}
@media (max-width:680px){
	.hero{padding-top:var(--space-10);padding-bottom:var(--space-10)}
	.statement{font-size:clamp(30px,8.5vw,40px)}
}