/* Guide Prose — coluna de leitura, callout e imagem-faixa.
   Auto-contido: as regras .gd-prose sao repetidas nos modules guide/* que tambem
   renderizam prosa (split, prev-tabs), porque cada module carrega so o proprio CSS. */

/* --- empilhamento de blocos dentro da mesma "secao visual" --- */
/* flow-root: sem isto as margens dos filhos ESCAPAM da section (margin
   collapsing) e viram faixa branca por fora, em vez de espaco por dentro. */
.gd-sec { display: flow-root; }
.gd-flush-top    { padding-top: 1.25rem !important; }
.gd-flush-bottom { padding-bottom: 1.25rem !important; }

/* --- coluna de leitura --- */
.gd-prose--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.gd-prose h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.2rem); color: var(--text-1);
  letter-spacing: -0.5px; margin: 2.5rem 0 0.75rem; line-height: 1.15;
}
.gd-prose h2:first-child { margin-top: 0; }
.gd-prose h3 {
  font-family: var(--sans); font-size: 1.15rem; font-weight: 700; color: var(--text-1);
  letter-spacing: -0.3px; margin: 2rem 0 0.5rem; line-height: 1.3;
}
.gd-prose h3:first-child { margin-top: 0; }
.gd-prose h4 {
  font-family: var(--sans); font-size: 0.975rem; font-weight: 700; color: var(--brand);
  letter-spacing: -0.1px; margin: 1.5rem 0 0.4rem;
}
.gd-prose p { color: var(--text-body); margin-bottom: 0.85rem; line-height: 1.72; }
.gd-prose p:last-child { margin-bottom: 0; }
/* O richtext do design agrupa sub-blocos em `<div class="rv dN">` (wrappers de
   reveal). O ultimo <p> de cada wrapper e um `:last-child` e caia no reset acima,
   perdendo o margin-bottom; como o <h3> que abre o wrapper seguinte ja tem
   `margin-top: 0` (regra logo abaixo), os dois se somavam em ZERO e o titulo
   colava no texto de cima. O wrapper e agrupamento do design, nao o fim da prosa
   — aqui o paragrafo mantem o respiro normal. No design esse gap e de ~14px, que
   e exatamente este 0.85rem. */
.gd-prose > .rv > p:last-child { margin-bottom: 0.85rem; }
.gd-prose ul { list-style: none; margin: 0.5rem 0 1rem 0; padding: 0; }
/* A lista ORDENADA mantem a numeracao. Antes `ul, ol` caiam na mesma regra
   (`list-style: none`) e o ::before punha bolinha em todo <li>, entao a lista
   de passos do processo de chargeback ("1. o emissor contata... 2. o merchant
   apresenta...") renderizava como bullets e perdia a ordem. Regua do design:
   decimal, recuo de 1.4rem no <ol> e sem recuo proprio no <li>. */
.gd-prose ol { list-style: decimal; margin: 0.5rem 0 1rem 0; padding-left: 1.4rem; }
.gd-prose li {
  position: relative; padding-left: 1.25rem; color: var(--text-body);
  margin-bottom: 0.35rem; line-height: 1.65;
}
.gd-prose ol > li { padding-left: 0; }
.gd-prose ul > li::before {
  content: ''; position: absolute; left: 0; top: 0.62rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: 0.7;
}
.gd-prose a { color: var(--brand); text-decoration: none; }
.gd-prose a:hover { text-decoration: underline; }
.gd-prose strong { color: var(--text-1); font-weight: 700; }

/* eyebrow inline (paragrafo mono laranja dentro da prosa) */
.gd-prose .gd-eyebrow {
  font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--brand); font-weight: 600;
}

/* --- variantes dark --- */
.sec--dark .gd-prose h2, .sec--dark .gd-prose h3 { color: #F1F5F9; }
.sec--dark .gd-prose h4 { color: var(--brand-accent); }
.sec--dark .gd-prose p, .sec--dark .gd-prose li { color: rgba(255,255,255,0.78); }
.sec--dark .gd-prose ul > li::before { background: var(--brand-accent); }
.sec--dark .gd-prose a { color: var(--brand-accent); }
.sec--dark .gd-prose strong { color: #F1F5F9; }

/* --- callout box --- */
.gd-callout {
  border-radius: var(--r-lg); padding: 1.75rem 2rem; margin: 2rem 0;
  background: rgba(255,72,0,0.08); border: 1px solid rgba(255,72,0,0.25);
}
.gd-callout--narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.gd-callout p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--text-body); }
.gd-callout p + p { margin-top: 0.75rem; }
.gd-callout strong { color: var(--brand); font-weight: 700; }
.sec--dark .gd-callout { background: rgba(255,72,0,0.1); }
.sec--dark .gd-callout p { color: rgba(255,255,255,0.9) !important; }
.sec--dark .gd-callout strong { color: var(--brand-accent) !important; }

/* --- imagem em faixa 3:1 --- */
.gd-band { border-radius: var(--r-lg); overflow: hidden; margin: 2rem 0; }
.gd-band img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; display: block; }
.gd-band:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .gd-callout { padding: 1.35rem 1.25rem; }
  .gd-band img { aspect-ratio: 16 / 9; }
}

/* Fine print — bloco de fontes/disclaimer no rodape da pagina */
.gd-prose--fine p, .gd-prose--fine li {
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--text-4); line-height: 1.8;
}
.sec--dark .gd-prose--fine p, .sec--dark .gd-prose--fine li { color: rgba(255,255,255,0.42); }

/* idem para o callout quando ele e o unico filho da section. */
.gd-callout:first-child { margin-top: 0; }
.gd-callout:last-child { margin-bottom: 0; }

/* Quando o richtext traz botoes (ex.: o CTA no fim do Conclusion do merchant-guide),
   a regra generica `.gd-prose a { color: var(--brand) }` matava a cor deles. */
.gd-prose a.btn-p, .sec--dark .gd-prose a.btn-p { color: #fff !important; text-decoration: none; }
.gd-prose a.btn-g, .sec--dark .gd-prose a.btn-g { color: var(--text-1) !important; text-decoration: none; }
.gd-prose a.btn-p:hover, .gd-prose a.btn-g:hover { text-decoration: none; }
/* A seta do botao e um `<span class="arrow">`, e o `main.css` pinta
   `.sec--dark span` com `!important` — a MESMA regra que matava o `.accent`.
   Resultado: no CTA do Conclusion (section escura) o rotulo do `.btn-g` ficava
   escuro pela regra acima e a seta saia BRANCA, invisivel no botao claro.
   Herdar a cor do proprio botao acerta os dois tipos e as duas variantes. */
.gd-prose a.btn-p .arrow, .gd-prose a.btn-g .arrow,
.sec--dark .gd-prose a.btn-p .arrow, .sec--dark .gd-prose a.btn-g .arrow {
  color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Blocos do design que vivem dentro do richtext deste module.
   O merchant-guide traz, colados na prosa, quatro componentes do
   `merchant-guide-v1.html` que nao tinham equivalente em `gd-*`: a caixa
   destacada, os graficos, a linha texto+imagem e o arranjo de 3 colunas.
   As regras abaixo sao as do proprio design, so trocando os valores
   literais pelas variaveis do tema. Escopo em `.gd-prose` para nao vazar.
   ───────────────────────────────────────────────────────────────────────── */

/* --- caixa destacada (guide-box) --- */
.gd-prose .guide-box {
  background: var(--brand-light); border-left: 3px solid var(--brand);
  padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.25rem 0;
}
.gd-prose .guide-box ul { margin: 0.25rem 0 0; }
.sec--dark .gd-prose .guide-box {
  background: rgba(255,255,255,0.06); border-left-color: var(--brand-accent);
}

/* --- graficos (gchart) — desenhados para secao escura --- */
.gd-prose .gchart {
  border-radius: 12px; padding: 2rem 1.75rem 1rem; margin: 1.5rem 0;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
}
.gd-prose .gchart-title {
  font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.38); text-align: center; margin-bottom: 1.75rem;
}
.gd-prose .gchart-bars {
  display: flex; gap: 3rem; justify-content: center; align-items: flex-end;
  padding-bottom: 2.75rem; position: relative;
}
.gd-prose .gchart-group { display: flex; gap: 0.6rem; align-items: flex-end; position: relative; }
.gd-prose .gchart-group::after {
  content: attr(data-y); position: absolute; bottom: -2.1rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.5);
  white-space: nowrap; letter-spacing: 0.05em;
}
.gd-prose .gchart-col { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.gd-prose .gchart-val { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: #fff; }
.gd-prose .gchart-bar { width: 60px; border-radius: 5px 5px 0 0; }
.gd-prose .gchart-bar-a { background: linear-gradient(175deg,#FF6B35 0%,#FF4800 100%); }
.gd-prose .gchart-bar-b { background: rgba(255,72,0,0.32); border: 1px solid rgba(255,72,0,0.5); }
.gd-prose .gchart-lbl {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: rgba(255,255,255,0.35); text-align: center;
  line-height: 1.4; max-width: 68px;
}
.gd-prose .gchart-legend {
  display: flex; gap: 1.25rem; justify-content: center; padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07); flex-wrap: wrap;
}
.gd-prose .gchart-legend-item {
  display: flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 9px;
  color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.07em;
}
.gd-prose .gchart-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
/* o grafico e servido do File Manager como .svg, entao e <img> e nao <svg> inline */
.gd-prose .gchart-svg { width: 100%; height: auto; display: block; }
.gd-prose .gchart-sm { border-radius: 10px; overflow: hidden; }
.gd-prose .gchart-sm img, .gd-prose .gchart-sm svg { width: 100%; height: auto; display: block; }

/* --- linha texto + imagem (guide-split-row) --- */
.gd-prose .guide-split-row { display: flex; gap: 2rem; align-items: flex-start; margin: 0.5rem 0; }
.gd-prose .guide-split-text { flex: 1; }
.gd-prose .guide-split-img { flex: 0 0 180px; }
.gd-prose .guide-split-img img { width: 100%; height: auto; }

/* --- 3 colunas com icone central (guide-friendly-layout) --- */
.gd-prose .guide-friendly-layout {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem;
  align-items: start; margin: 1rem 0;
}
.gd-prose .guide-friendly-center .gi-ball {
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(145deg,#FF6A35 0%,#FF4800 100%);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(255,72,0,0.28);
}
.gd-prose .guide-friendly-center .gi-ball img,
.gd-prose .guide-friendly-center .gi-ball svg { width: 64px; height: 64px; display: block; }
/* Rede de seguranca: SVG servido como <img> nao tem width/height intrinsecos, entao
   sem uma medida explicita ele assume o tamanho default do replaced element e estoura
   a coluna do meio. Vale mesmo se o markup perder o `.gi-ball`. */
.gd-prose .guide-friendly-center img { max-width: 120px; height: auto; }

@media (max-width: 640px) {
  .gd-prose .guide-friendly-layout { grid-template-columns: 1fr; }
  .gd-prose .guide-friendly-center { display: none; }
  .gd-prose .guide-split-row { flex-direction: column; }
  .gd-prose .guide-split-img { flex: none; max-width: 200px; }
}

/* --- destaque laranja no meio do titulo (.accent) ---
   O `main.css` so pinta `.accent` em contextos especificos (`.hero h1`, `.sec-title`,
   `.final-cta h2`) e em `.sec--dark`. Nas sections CLARAS do guia o `<span class="accent">`
   ficava sem cor e herdava o preto do heading — era o caso de "Understanding
   *E-Commerce Fraud*" e "Understanding *Chargebacks*". */
.gd-prose .accent { color: var(--brand); }

/* --- botao secundario dentro da prosa em section escura ---
   `main.css` deixa `.sec--dark .btn-g` com fundo translucido, e a regra de cor da prosa
   forcava texto escuro em cima disso: ilegivel. No design o botao dentro do
   `guide-content` e branco com texto escuro, inclusive em section escura. */
.sec--dark .gd-prose a.btn-g {
  background: #fff !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}