/* ════════════════════════════════════════════════════════════════════════
   cnp-praxis-system.css  -  Sistema de design transversal (Praxis)
   29 jun 2026 · costandprofitability.com · coachfocus-child (body.praxis)

   4 frentes (faseável):
     FASE 1 · Rail de largura único (1240) alinhado header ↔ conteúdo
     FASE 2 · Escala tipográfica única (h1/h2/h3/lede tokens)  + cânone de títulos
     FASE 3 · Ritmo vertical sóbrio
     FASE 4 · Related → cartões

   Escopado em .praxis (site) e .cnpnp (newpages). Aditivo. Carregar DEPOIS
   de cnp-praxis.css. Nada aqui inventa cores novas; usa os tokens da marca.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* largura mestra - a MESMA aresta para header, faixas e conteúdo */
  --rail: 1240px;
  --rail-pad: 40px;          /* recuo lateral; conteúdo vai de calc((100%-rail)/2 + pad) */
  --read-max: 78ch;          /* medida de leitura GENEROSA (não estreitar abaixo disto) */

  /* escala tipográfica fluida única (afinada com olho de design) */
  --t-h1: clamp(40px, 5.0vw, 60px);
  --t-h2: clamp(29px, 3.2vw, 40px);
  --t-h3: clamp(20px, 1.7vw, 23px);
  --t-lede: clamp(18px, 1.5vw, 21px);
  --t-eyebrow: 0.72rem;

  --lh-title: 1.12;
  --lh-h3: 1.22;
  --lh-body: 1.65;

  /* ritmo vertical SÓBRIO (Miguel achou o anterior exagerado) */
  --sec-pad: clamp(48px, 4.5vw, 64px);     /* secção padrão */
  --sec-pad-zone: clamp(60px, 5.5vw, 80px);/* abertura de zona temática (pouco maior) */
  --sec-pad-tight: clamp(32px, 3vw, 44px); /* faixas finas (proof, eyebrow) */
}

/* ════════════════════════════════════════════════════════════════════════
   FASE 1 - RAIL DE LARGURA ÚNICO
   ════════════════════════════════════════════════════════════════════════ */

/* O container canónico passa a derivar da largura mestra. Mantém 1240/40
   como hoje, mas agora é a ÚNICA fonte de verdade. */
.praxis .container,
.cnpnp .container{
  max-width: var(--rail);
  margin-inline: auto;
  padding-inline: var(--rail-pad);
  width: 100%;
}

/* Helper para qualquer wrapper que NÃO use .container (mu-plugins, faixas). */
.praxis .cnp-rail,
.cnpnp .cnp-rail{
  max-width: var(--rail);
  margin-inline: auto;
  padding-inline: var(--rail-pad);
  width: 100%;
}

/* ── HEADER: alinhar o rail do header à mesma aresta do conteúdo ──
   No live o header útil era ~1160 (mais estreito 40px de cada lado).
   Trazemos o inner do header para 1240/40 = mesma borda do .container. */
.praxis .site-header > .container,
.praxis .site-header__inner,
.praxis .cnp-header__inner,
.praxis header.praxis-header .inner,
.praxis .nav-praxis__inner{
  max-width: var(--rail) !important;
  margin-inline: auto !important;
  padding-inline: var(--rail-pad) !important;
  width: 100%;
}

/* ── BARRA "Proven where it counts" (mu-plugin cnp-home-proof.php, .cc-proof) ──
   Wrapper é full-width; o inner ficava < 1240 e parecia curto. Forçar rail. */
.praxis .cc-proof,
.praxis .cc-proof__inner,
.praxis .cc-proof .cc-proof__wrap{
  max-width: none;
}
.praxis .cc-proof__inner,
.praxis .cc-proof__wrap{
  max-width: var(--rail) !important;
  margin-inline: auto !important;
  padding-inline: var(--rail-pad) !important;
  width: 100%;
}

/* ── "Work with us" (home) - wrapper próprio, não usava .container ──
   Selector defensivo: qualquer secção .cnp-work / [data-section="work-with-us"]. */
.praxis .cnp-work > div,
.praxis .cnp-work__inner,
.praxis [data-section="work-with-us"] > div:first-child{
  max-width: var(--rail) !important;
  margin-inline: auto !important;
  padding-inline: var(--rail-pad) !important;
  width: 100%;
}

/* GLOSSARIO (cnp-glossary-praxis): wrappers proprios .g-* nao usavam .container.
   Alinhar hero/tools/sections ao mesmo rail 1240/40 do resto do site. */
.praxis .g-hero > div,
.praxis .g-tools > div,
.praxis .g-body > .g-section{
  max-width: var(--rail) !important;
  margin-inline: auto !important;
  padding-inline: var(--rail-pad) !important;
  width: 100%;
  box-sizing: border-box;
}
/* filhos diretos da section ja herdam o recuo do pai: sem padding duplo */
.praxis .g-section > .g-sechead,
.praxis .g-section > .g-grid{ padding-inline: 0 !important; max-width: none !important; }

/* GUIA (cnp-guide-praxis): wrappers .gd-* proprios. Alinhar TODO o layout ao rail. */
.praxis .gd-hero > div{
  max-width: var(--rail) !important;
  margin-inline: auto !important;
  padding-inline: var(--rail-pad) !important;
  width: 100%; box-sizing: border-box;
}
/* layout 2 colunas (indice dos passos + corpo): conter no rail, alinhar a sidebar,
   e deixar a coluna de leitura usar o espaco (sem vazio grande a direita). */
.praxis .gd-layout{
  max-width: var(--rail) !important;
  margin-inline: auto !important;
  padding-inline: var(--rail-pad) !important;
  box-sizing: border-box;
  grid-template-columns: 220px minmax(0,1fr) !important;
  column-gap: 64px !important;
}
.praxis .gd-body{ max-width: none !important; }
@media (max-width: 900px){
  .praxis .gd-layout{ grid-template-columns: 1fr !important; }
}

/* DASHBOARD (cnp-dashboard-praxis): header .p-h proprio. Alinhar ao rail. */
.praxis .p-h{
  max-width: var(--rail) !important;
  margin-inline: auto !important;
  padding-inline: var(--rail-pad) !important;
  width: 100%; box-sizing: border-box;
}

/* Medida de leitura: larga por defeito. .narrow alinha à leitura generosa,
   nunca abaixo do atual. (Miguel rejeita 760/62ch.) */
.praxis .narrow,
.praxis .container-narrow,
.cnpnp .narrow{
  max-width: var(--read-max);
  margin-inline: auto;
  padding-inline: var(--rail-pad);
}

/* ════════════════════════════════════════════════════════════════════════
   FASE 2 - ESCALA TIPOGRÁFICA ÚNICA
   O mesmo nível de título tem SEMPRE o mesmo tamanho, em todos os templates.
   ════════════════════════════════════════════════════════════════════════ */
.praxis h1, .cnpnp h1,
.praxis .h1, .cnpnp .h1,
.praxis .h1-hero{
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-title);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.praxis h2, .cnpnp h2,
.praxis .h2, .cnpnp .h2,
.praxis .h2-section{
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-title);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.praxis h3, .cnpnp h3,
.praxis .h3, .cnpnp .h3{
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.01em;
}

/* lede / subtítulos - uniformes e a USAR a largura (ver Fase 2-bis) */
.praxis .lede, .cnpnp .lede,
.praxis .ph-def, .cnpnp .ph-def,
.praxis .section-lede{
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink-2, #4A4138);
}

/* eyebrows uniformes */
.praxis .eyebrow, .cnpnp .eyebrow,
.praxis .section-num,
.praxis .kicker, .cnpnp .kicker{
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── ALVOS ESPECÍFICOS que estavam fora de escala (medições do Miguel) ──
   "Work with us" h2 estava a 24px, "In short" a 28px. Sobem ao nível h2. */
.praxis .cnp-work h2,
.praxis [data-section="work-with-us"] h2,
.praxis .cnp-inshort h2,
.praxis .in-short h2{
  font-size: var(--t-h2) !important;
  line-height: var(--lh-title) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   FASE 2-bis - TEXTO USA A LARGURA (não partir frases curtas)
   ════════════════════════════════════════════════════════════════════════ */
/* ledes e parágrafos de apoio usam a largura disponível; só leitura longa
   tem medida-máxima confortável (generosa). NUNCA 62ch. */
.praxis .lede, .cnpnp .lede,
.praxis .section-lede,
.praxis .cnp-work .lede,
.praxis [data-section="work-with-us"] .lede{
  max-width: none;       /* usa a largura do rail; frases curtas não quebram */
  text-wrap: pretty;
}
/* corpo de leitura longo (artigos, definições) - medida generosa */
.praxis .prose, .cnpnp .prose,
.praxis .article-body, .cnpnp .article-body,
.praxis .rich-text p{
  max-width: var(--read-max);
  text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════════════════
   FASE 2-ter - CÂNONE DE QUEBRA DE TÍTULO + KEYWORD
   Regra (codificada):
   · Afirmação sóbria + reviravolta/tese → quebra deliberada na fronteira,
     keyword colorida SÓ na 2ª unidade (em-orange). Um destaque por título.
   · Afirmação única e direta → linha única, sem cor.
   Markup: <h_ class="title-turn">Sober part.<br class="title-br">
            <em class="em-orange">The turn.</em></h_>
   A quebra de impacto só acima de 720px; em mobile reflui naturalmente.
   ════════════════════════════════════════════════════════════════════════ */
.praxis .em-orange, .cnpnp .em-orange{
  font-style: italic;
  color: var(--orange, #C75B22);
}
.praxis .title-turn, .cnpnp .title-turn{ text-wrap: balance; }
/* a quebra controlada: visível só em ecrã largo */
.praxis .title-br, .cnpnp .title-br{ display: none; }
@media (min-width: 720px){
  .praxis .title-turn .title-br,
  .cnpnp .title-turn .title-br{ display: inline; }
  /* quando há quebra de impacto, não deixar o balance reflowar contra ela */
  .praxis .title-turn, .cnpnp .title-turn{ text-wrap: pretty; }
}
/* keyword-only (1-3 palavras-âncora dentro de uma frase, sem quebra) */
.praxis .kw, .cnpnp .kw{ color: var(--orange, #C75B22); font-style: italic; }

/* ════════════════════════════════════════════════════════════════════════
   FASE 3 - RITMO VERTICAL SÓBRIO
   ════════════════════════════════════════════════════════════════════════ */
.praxis .section,
.praxis .sec,
.cnpnp .sec,
.cnpnp .section{
  padding-top: var(--sec-pad);
  padding-bottom: var(--sec-pad);
}
/* abertura de zona temática - só ligeiramente maior */
.praxis .section--zone,
.praxis .sec--zone,
.cnpnp .sec--zone,
.praxis [data-zone-start]{
  padding-top: var(--sec-pad-zone);
}
/* faixas finas */
.praxis .sec--tight,
.cnpnp .sec--tight,
.praxis .cc-proof,
.praxis .cnp-eyebrow-band{
  padding-top: var(--sec-pad-tight);
  padding-bottom: var(--sec-pad-tight);
}
/* secções coladas: sem dupla folga (a de baixo de uma + a de cima da seguinte) */
.praxis .sec + .sec,
.cnpnp .sec + .sec,
.praxis .section + .section{
  padding-top: 0;
}
/* remate antes do footer */
.praxis .cta-band + footer,
.praxis .section:last-of-type{
  /* nada extra; o CTA band já tem o seu padding. Evita folga dupla. */
}

/* ════════════════════════════════════════════════════════════════════════
   FASE 4 - RELATED → CARTÕES (uniformizar para todo o site)
   Cânone único; substitui listas simples e variações de .rcard.
   ════════════════════════════════════════════════════════════════════════ */
.praxis .related-grid,
.cnpnp .related-grid,
.praxis .rgrid,
.praxis .keep-exploring__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.praxis .rcard,
.cnpnp .rcard,
.praxis .related-grid > a,
.praxis .keep-exploring__grid > a{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface, #FBF9F3);
  border: 1px solid var(--line, #DCD3C2);
  border-radius: 8px;
  padding: 24px 24px 22px;
  text-decoration: none;
  color: var(--ink, #1A1714);
  overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.praxis .rcard::before,
.praxis .related-grid > a::before,
.praxis .keep-exploring__grid > a::before{
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange, #C75B22);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.praxis .rcard:hover,
.praxis .related-grid > a:hover,
.praxis .keep-exploring__grid > a:hover{
  border-color: var(--line-2, #C9BEAA);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -22px rgba(26,23,20,0.3);
}
.praxis .rcard:hover::before,
.praxis .related-grid > a:hover::before,
.praxis .keep-exploring__grid > a:hover::before{ transform: scaleX(1); }
.praxis .rcard .rk,
.praxis .rcard .r-kicker{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-text, #A8481A);
}
.praxis .rcard h3,
.praxis .rcard h4,
.praxis .rcard .r-title{
  font-family: 'Newsreader', serif; font-weight: 500;
  font-size: 20px; line-height: 1.2; margin: 2px 0 0;
}
.praxis .rcard p,
.praxis .rcard .r-desc{
  font-size: 14px; line-height: 1.55; color: var(--ink-2, #4A4138); margin: 0;
}
.praxis .rcard .r-more{
  margin-top: auto; padding-top: 12px;
  font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 13.5px;
  color: var(--orange-text, #A8481A);
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE (validado a 360px) - frases PT/ES mais longas não devem partir layout
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px){
  :root{ --rail-pad: 22px; }
  .praxis .related-grid,
  .cnpnp .related-grid{ grid-template-columns: 1fr; }
}