/* ==========================================================================
   PÁGINA: BLOG
   Serve a listagem (blog/index.html) e as páginas de artigo.
   Carrega por último, depois de 06-responsive.css. Media queries no fim.
   ========================================================================== */

/* O ritmo vertical das seções é compartilhado, mora em 03-layout.css */

/* ==========================================================================
   ABERTURA DA LISTAGEM
   ========================================================================== */
/* overflow-x:clip e não hidden: hidden cortaria o brilho do arco a seco na
   base do cabeçalho, desenhando uma linha reta na página. */
.blog-abertura{position:relative;overflow-x:clip;padding:150px 0 0;text-align:center}
.blog-abertura .container{display:flex;flex-direction:column;align-items:center}
/* halo sem fio, posicionado atrás do título e não da logo */
.blog-abertura .arco{--arco-topo:60px;--arco-alt:420px;--arco-forca:1}
.blog-abertura h1{font-size:clamp(31px,5vw,58px);font-weight:800;
  max-width:16ch;margin-bottom:24px;letter-spacing:-.025em}
.blog-abertura .intro{font-size:clamp(16px,1.9vw,19px);color:var(--muted);max-width:58ch}

.blog-lista{padding-top:52px}

/* .grade-artigos traz margin-top:52px porque na home e no quem-somos ela vem
   depois de um titulo de secao. Aqui o titulo e o proprio cabecalho da
   pagina, entao essa margem so somava com o padding da secao e abria um vao
   de 114px entre a introducao e o primeiro card. */
.blog-lista .grade-artigos{margin-top:0}


/* ==========================================================================
   CABEÇALHO DO ARTIGO
   ========================================================================== */
/* overflow-x:clip, mesmo motivo da listagem */
.artigo-abertura{position:relative;overflow-x:clip;padding:150px 0 0}
.artigo-abertura .container{max-width:820px}
/* o mais discreto de todos: aqui quem manda é o texto do artigo */
.artigo-abertura .arco{--arco-topo:70px;--arco-alt:380px;--arco-forca:.62}

.artigo-voltar{display:inline-flex;align-items:center;gap:8px;margin-bottom:30px;
  font-size:14px;color:var(--muted);transition:.25s}
.artigo-voltar:hover{color:var(--gold-hi);gap:12px}
.artigo-voltar svg{width:14px;height:14px}

.artigo-abertura h1{font-size:clamp(29px,4.4vw,50px);font-weight:800;
  letter-spacing:-.025em;margin-bottom:26px}

/* linha de autoria e data */
.artigo-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:32px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:14px}
.artigo-meta .autor{display:inline-flex;align-items:center;gap:9px;color:var(--silver)}
.artigo-meta .autor img{height:30px;width:30px;border-radius:50%;object-fit:cover}
.artigo-meta .marca{height:30px;width:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-grad);color:#1a1405;font-family:'Sora';font-weight:700;font-size:12px}
.artigo-meta .sep{opacity:.4}

.artigo-capa{margin:44px 0 12px;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line)}
.artigo-capa img{width:100%;height:auto;display:block}
.artigo-capa .slot{border-radius:0;border:none;min-height:280px}


/* ==========================================================================
   CORPO DO ARTIGO
   Sistema tipográfico de texto longo. É aqui que o artigo é colado, e o
   estilo vem do elemento, não de classe: quem escrever só precisa usar
   h2, h3, p, ul, ol, blockquote, figure e a.
   ========================================================================== */
.artigo-corpo{max-width:70ch;margin:0 auto;padding:52px 0 0;
  font-size:17.5px;line-height:1.78;color:var(--silver)}

.artigo-corpo > * + *{margin-top:26px}

.artigo-corpo h2{font-size:clamp(23px,3vw,31px);font-weight:700;
  color:var(--ink);margin-top:56px;line-height:1.22}
.artigo-corpo h3{font-size:clamp(19px,2.2vw,23px);font-weight:600;
  color:var(--ink);margin-top:42px;line-height:1.3}

/* primeiro parágrafo puxa o olho pra dentro do texto */
.artigo-corpo > p:first-child{font-size:19.5px;color:var(--silver-hi)}

.artigo-corpo a{color:var(--gold-hi);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;transition:.25s}
.artigo-corpo a:hover{color:var(--gold-spark)}

.artigo-corpo strong{color:var(--ink);font-weight:600}

.artigo-corpo ul,
.artigo-corpo ol{padding-left:24px;display:grid;gap:12px}
.artigo-corpo li{padding-left:6px}
.artigo-corpo ul li::marker{color:var(--gold)}
.artigo-corpo ol li::marker{color:var(--gold);font-family:'Sora';font-weight:600}

.artigo-corpo blockquote{margin-top:36px;padding:24px 28px 24px 32px;position:relative;
  border-radius:var(--r-md);border:1px solid rgba(212,175,55,.24);
  background:linear-gradient(150deg,rgba(24,22,16,.7),rgba(8,8,10,.4));
  font-family:'Sora';font-style:italic;font-weight:500;
  font-size:17.5px;line-height:1.55;color:var(--silver-hi)}
.artigo-corpo blockquote::before{content:"";position:absolute;left:0;top:16px;bottom:16px;
  width:3px;border-radius:3px;background:var(--gold-grad)}

.artigo-corpo figure{margin-top:40px}
.artigo-corpo figure img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line)}
.artigo-corpo figcaption{margin-top:12px;font-size:14px;color:var(--muted);text-align:center}

/* divisor entre partes longas, sem virar enfeite */
.artigo-corpo hr{margin-top:48px;border:none;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}


/* ==========================================================================
   FECHO DO ARTIGO
   O leitor terminou o texto: é o melhor momento pra oferecer a conversa.
   ========================================================================== */
.artigo-cta{max-width:70ch;margin:70px auto 0;padding:42px 38px;text-align:center;
  border-radius:var(--r-xl);border:1px solid rgba(212,175,55,.3);position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(24,22,16,.9),rgba(8,8,10,.85))}
.artigo-cta::after{content:"";position:absolute;top:-55%;right:-12%;width:52%;height:150%;
  background:radial-gradient(circle,rgba(212,175,55,.15),transparent 62%);pointer-events:none}
.artigo-cta p{font-family:'Sora';font-weight:600;position:relative;
  font-size:clamp(18px,2.4vw,24px);line-height:1.36;max-width:30ch;margin:0 auto 26px;
  letter-spacing:-.01em;color:var(--ink)}


/* ==========================================================================
   OUTROS ARTIGOS
   ========================================================================== */
.artigo-mais{padding-top:110px}


/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media(max-width:900px){
  .blog-abertura{padding:120px 0 0}
  .blog-lista{padding-top:34px}
  .artigo-abertura{padding:120px 0 0}
  .artigo-corpo{font-size:16.5px;padding-top:40px}
  .artigo-corpo > p:first-child{font-size:18px}
  .artigo-cta{padding:32px 24px}
  .artigo-mais{padding-top:80px}
}