/*
 * Prohall — componentes compartilhados
 *
 * Duas partes neste arquivo:
 *
 * 1) BASE — classes extraídas de style="" inline que se repetem em mais de
 *    uma página (wrappers de seção, hero, tipografia de corpo, botões, grids
 *    utilitários). Ficam aqui em vez de prohall.css para não mexer no CSS já
 *    aprovado; prohall.css continua intocado (só tem as regras :hover/estado
 *    de .ph-btn-solid/.ph-btn-line/.ph-card etc. — a base agora está aqui).
 *
 * 2) RESPONSIVO — os mesmos @media (max-width:860px / 540px) já existentes,
 *    sobrescrevendo com !important as classes acima (mesmo padrão que
 *    prohall.css já usa para .ph-heroh1/.ph-gN: a classe carrega o valor de
 *    desktop e o @media só encolhe em telas menores).
 *
 * Breakpoints: ver assets/css/tokens.css (860px tablet / 540px mobile).
 */

/* ── BASE ──────────────────────────────────────────────────────────────── */

/* rede de segurança de imagens — hoje também existe em style.css (legado);
   duplicada aqui para não depender do legado continuar carregado */
img{max-width:100%;height:auto}

/* layout de página */
.ph-page-root{width:100%;overflow-x:hidden}
.ph-container{max-width:var(--ph-container-max);margin:0 auto}
.ph-container-narrow{max-width:900px;margin:0 auto}
.ph-text-center{text-align:center}

/* wrappers de seção (padding vertical/horizontal) */
.ph-section{padding:82px var(--ph-gutter)}
.ph-section--sm{padding:64px var(--ph-gutter)}
.ph-section--lg{padding:88px var(--ph-gutter)}
.ph-section-hero{position:relative;padding:110px var(--ph-gutter) 104px}

/* fundos de seção alternados */
.ph-bg-white{background:#fff}
.ph-bg-soft{background:#f7f7f8;border-top:1px solid rgba(0,0,0,.06)}
.ph-bg-dark{background:#101010;color:#fff}

/* hero (banner de abertura) */
.ph-hero{position:relative;background:#101010;color:#fff;overflow:hidden}
.ph-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ph-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.72) 45%,rgba(10,10,10,.45) 100%)}
.ph-badge{display:inline-block;font:700 11px 'Manrope',sans-serif;letter-spacing:2.5px;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.32);padding:7px 14px;border-radius:100px}
.ph-hero-lead{font:400 17px/1.65 'Manrope',sans-serif;color:rgba(255,255,255,.82);max-width:600px;margin:24px 0 0}

/* rótulos "eyebrow" (texto pequeno em maiúsculas acima de um título) */
.ph-eyebrow{font:700 11px 'Manrope',sans-serif;letter-spacing:2px;color:#8a8a8a}
.ph-eyebrow-sm{font:700 11px 'Manrope',sans-serif;letter-spacing:1.5px;color:#8a8a8a}

/* tipografia de corpo */
.ph-body{font:400 16px/1.75 'Manrope',sans-serif;color:#555;margin:0}
.ph-strong{color:#141414}
.ph-stack{display:flex;flex-direction:column;gap:18px}

/* botões — base (estado :hover continua em prohall.css) */
.ph-btn-solid{display:inline-flex;align-items:center;font:700 13.5px 'Manrope',sans-serif;color:#fff;background:#141414;padding:15px 28px;border-radius:9px;text-decoration:none}
.ph-btn-line{display:inline-block;font:700 13.5px 'Manrope',sans-serif;color:#141414;padding:15px 28px;border:1.5px solid rgba(0,0,0,.2);border-radius:9px;text-decoration:none}
.ph-btnrow{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* grids utilitários — base (o @media que colapsa em mobile já existe abaixo) */
.ph-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ph-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* imagem que preenche o container mantendo proporção (galerias, cards, mídia) —
   consolidado a partir de 6 classes de página idênticas (index/produtos/
   produto-detalhe/blog/blog-post/prohall-pro) */
.ph-img-cover{width:100%;height:100%;object-fit:cover;display:block}

/* <picture> não tem display/altura próprios por padrão, então um
   .ph-img-cover dentro dele não conseguia calcular height:100% (100% de
   quê?) e caía para a proporção natural da foto — sobrava fundo visível
   nos cards com altura fixa (ex.: cards de blog). Escopado só para picture
   com .ph-img-cover dentro (cards/galerias) — preenche o pai normalmente.
   NÃO aplicar isso a heros: ali o <picture> vira filho de um .ph-hero/
   .home-hero/.pro-hero com display:flex, e um <picture> width:100% ali
   dentro passa a competir por espaço com o irmão que tem o texto (empurra
   o conteúdo pra direita/quebra o layout) — mesmo a imagem em si sendo
   position:absolute e ignorando a própria caixa do <picture>. */
picture:has(> .ph-img-cover){display:block;width:100%;height:100%}

/* MVV (missão/visão/valores) — cards */
.ph-mvv-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:32px}
.ph-mvv-text{font:600 18px/1.5 'Manrope',sans-serif;margin:14px 0 0;letter-spacing:-.3px}
.ph-mvv-list{font:400 15px/1.9 'Manrope',sans-serif;color:#444;margin:14px 0 0;padding-left:18px}

/* ── RESPONSIVO ────────────────────────────────────────────────────────── */

@media (max-width:860px){
  .ph-section,.ph-section--sm,.ph-section--lg{padding:56px 24px !important}
  .ph-section-hero{padding:64px 24px !important}
  .ph-h2{font-size:28px !important}
  .ph-footer-inner{padding:40px 24px 28px !important}
  .ph-split{gap:28px !important}

  /* alvo de toque confortável (~44px) para controles pequenos */
  .ph-page{min-width:44px;height:44px}
  .ph-iconbtn{width:44px;height:44px}
}

@media (max-width:540px){
  .ph-section,.ph-section--sm,.ph-section--lg{padding:44px 24px !important}
  .ph-section-hero{padding:48px 24px !important}
  .ph-h2{font-size:24px !important}
  .ph-footer-inner{padding:32px 24px 24px !important}
}