/* ReasonHub — estilos da Home (front-page).
   Componentes especificos da home, derivados do prototipo aprovado (index.html).
   Carrega sobre components.css (base compartilhada com as verticais) e ANTES do
   acervo.css (o bloco do acervo na home) — onde ambos definem a mesma classe
   (.grid-3, .chip, .bookcard), o acervo.css vence porque carrega depois.
   Ver functions.php. Os globais vivem em theme.css. */

/* Override-web da home: display um pouco maior que o padrao do acervo. */
:root{ --fs-display:clamp(38px,4.6vw,60px); }

/* Grid — na home o acervo.css redefine .grid-3 (gap maior; 2 colunas no tablet) e vence. */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}

/* Verticais */
.vcard{background:var(--off-white);border:1px solid var(--dust-grey);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2)}
.section--tint .vcard{background:#fff}
.vcard:hover{border-color:var(--dim-grey);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.vcard .f-icon{width:32px;height:32px;stroke:var(--reddish-brown);fill:none;margin-bottom:var(--space-5)}
.vcard h3{margin:0 0 var(--space-2)}
.vcard .v-sub{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--reddish-brown);margin-bottom:var(--space-4)}
.vcard p{font-size:var(--fs-small);color:var(--dim-grey);margin-bottom:var(--space-5)}

/* Fill cards (a terceira habilidade) — PROMOVIDO para components.css (2026-07-03),
   para as verticais tambem usarem o padrao multi-superficie + badge solido da home. */

/* Chips — o acervo.css redefine .chips/.chip na home (carrega depois) e vence;
   destas regras sobrevive no cascade o margin-bottom do .chips. */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-10)}
.chip{font-size:var(--fs-caption);font-weight:500;color:var(--dim-grey);border:1px solid var(--dust-grey);background:transparent;border-radius:var(--radius-pill);padding:6px 14px;cursor:pointer}
.chip--active{background:var(--gunmetal);color:var(--off-white);border-color:var(--gunmetal)}

/* Sobre o Fernando (extras da home; a base .about vive em components.css) */
.prova-divider{margin-top:var(--space-16);border-top:1px solid var(--dust-grey);padding-top:var(--space-16)}
.quote{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-h3);line-height:var(--lh-snug);color:var(--gunmetal);margin:var(--space-6) 0 var(--space-4);border-left:3px solid var(--reddish-brown);padding-left:var(--space-5)}
.quote-sign{display:block;padding-left:var(--space-5);font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.02em;color:var(--dim-grey)}
.quote-sign a{color:var(--reddish-brown);font-weight:600}

/* Banda de conversao (fecho da prova) */
.cta-band{margin-top:var(--space-16);border-top:1px solid var(--dust-grey);padding-top:var(--space-12);text-align:center}
.cta-band h3{margin-bottom:var(--space-3)}
.cta-band .lede{max-width:60ch;margin:0 auto var(--space-8)}

/* Livros na home — o markup usa .books/.bookcard do acervo.css; estas duas regras
   sobrevivem no cascade (align-items do card e o tamanho dos <p>). Nao remover sem testar. */
.bookcard{display:grid;grid-template-columns:96px 1fr;gap:var(--space-6);align-items:center}
.bookcard p{font-size:var(--fs-caption);color:var(--dim-grey);margin:0 0 var(--space-3);line-height:var(--lh-snug)}

/* Responsivo (o de hero/about vive em components.css) */
@media (max-width:980px){
	.grid-3{grid-template-columns:1fr}
}