/* ==========================================================================
   Entenda o Crédito — página de artigo (estilo editorial, igual à home)
   Carregado apenas nas páginas de artigo, depois do main.css.
   ========================================================================== */

:root{--gold:#b08a4a;--ink-soft:#4a5751}

/* ---------- cabeçalho do artigo ---------- */
.art-head{padding:clamp(28px,4vw,56px) 0 0}
.art-head .inner{max-width:920px}
.art-head .tag{font-size:.74rem;letter-spacing:.16em;color:var(--copper-d)}
.art-head .tag i{display:none}
.art-head .tag::before{content:"";width:28px;height:1px;background:currentColor}
.art-head h1{margin:18px 0 22px;font-size:clamp(2.3rem,1.3rem + 3.6vw,4rem);font-weight:400;line-height:1.04;letter-spacing:-.025em;max-width:20ch}
.art-head .deck{margin:0 0 30px;max-width:58ch;font:400 clamp(1.15rem,1.05rem + .45vw,1.4rem)/1.5 var(--serif);font-style:italic;color:var(--ink-soft)}
.byline{gap:12px 18px;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.byline .av{width:42px;height:42px;background:var(--forest);font:500 1rem var(--serif);font-style:italic}
.byline .sep{height:16px}

/* ---------- foto de capa ---------- */
.art-cover{position:relative;margin:clamp(28px,4vw,44px) 0 0}
.art-cover .cover{width:100%;aspect-ratio:1280/560;object-fit:cover;border-radius:4px;background:var(--paper-2);box-shadow:0 30px 60px -36px rgba(22,35,31,.45)}
.art-cover::after{content:"Foto: Unsplash";position:absolute;right:12px;bottom:10px;padding:3px 8px;border-radius:3px;background:rgba(12,22,19,.45);color:#f3efe8;font:500 .68rem/1.4 var(--sans);letter-spacing:.04em}

/* ---------- texto ---------- */
.art-layout{gap:clamp(40px,5vw,80px);padding:clamp(40px,5vw,64px) 0 64px}
.prose{color:#1d2925}
.prose > p:first-child::first-letter,.prose > h2:first-child + p::first-letter{float:left;margin:.06em .12em 0 0;font:400 3.6em/.82 var(--serif);color:var(--forest)}
.prose h2{margin:1.5em 0 .6em;padding-top:.9em;border-top:1px solid var(--line);font-size:clamp(1.6rem,1.25rem + 1.1vw,2.15rem);font-weight:400;letter-spacing:-.015em}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.3rem;font-weight:500}
.prose blockquote{margin:2em 0;padding:6px 0 6px 26px;border-left:2px solid var(--gold);font:italic 400 1.3rem/1.55 var(--serif);color:var(--forest-d)}
.prose ul li::marker{color:var(--gold)}
.prose ol li::marker{font-family:var(--serif);font-style:italic;color:var(--copper)}
.prose .tw{border-radius:4px;border-color:var(--line-2)}
.prose th{background:var(--forest);color:#f3efe8;font-weight:600}

/* ---------- resumo ("Em resumo") ---------- */
.takeaways{position:relative;padding:28px 30px 24px;border:1px solid var(--line-2);border-top:3px solid var(--gold);border-left-width:1px;border-radius:4px;box-shadow:none;background:var(--card)}
.takeaways h2{display:flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:.16em;color:var(--copper-d)}
.takeaways h2::before{content:"";width:28px;height:1px;background:currentColor}
.takeaways ul{gap:10px}
.takeaways li::marker{color:var(--gold)}

/* ---------- caixas de destaque ---------- */
.admonition{border-radius:4px;border-left:3px solid var(--forest)}
.admonition.warning,.admonition.attention{border-left-color:var(--warn-line)}
.admonition.example{border-left-color:var(--gold)}

/* ---------- índice lateral ---------- */
.toc{border-radius:4px;border-color:var(--line-2);padding:22px 22px 16px}
.toc h2{display:flex;align-items:center;gap:10px;color:var(--copper-d)}
.toc h2::before{content:"";width:20px;height:1px;background:currentColor}
.toc a.on{border-radius:0 4px 4px 0}
.side-note{border-radius:4px;background:var(--paper-2);border:1px solid var(--line)}

/* ---------- perguntas frequentes e fontes ---------- */
.faq h2,.sources h2{font-weight:400}
.faq details{border-radius:4px}
.faq summary{font-weight:600}
.faq summary::after{color:var(--gold)}
.sources{border-radius:4px}

/* ---------- guias relacionados (cards editoriais com foto) ---------- */
.related{padding:clamp(56px,7vw,96px) 0;background:var(--paper-2)}
.related .sec-head h2{font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem);font-weight:400;letter-spacing:-.02em}
.related .grid-3{gap:40px 32px}
.related .card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.related .card:hover{transform:none;box-shadow:none}

.related .card .cover {
  border-radius: 4px;
  transition: opacity .25s !important
}

.related .card:hover .cover {
  opacity: .9
}
.related .card .body{padding:18px 0 0;gap:10px}
.related .card h3{font-size:1.28rem;font-weight:500;line-height:1.25}
.related .card:hover h3{color:var(--forest)}
.related .card p{color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- responsivo ---------- */
@media (max-width:640px){
  .art-head h1{font-size:clamp(2rem,1.4rem + 3.4vw,2.6rem)}
  .art-cover .cover{aspect-ratio:16/10}
  .prose > p:first-child::first-letter,.prose > h2:first-child + p::first-letter{font-size:3em}
  .takeaways{padding:22px 20px 18px}
}