/* Arilton Silva Advocacia - article.css */
/* Estilos editoriais: banner subdued, breadcrumb, corpo de artigo, hub e overview. */
/* Depende de styles.css (tokens, header, footer, botoes, grao, text-trace). */
/* Comentarios em ASCII puro (gotcha de parsing sem charset). */

/* ---------- Header visivel em todas as larguras (paginas internas) ---------- */
.header-mobile-link{
  font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;padding:0.35rem 0;
}
.header-mobile-link:active{opacity:0.6}

/* ---------- Banner do artigo (hero subdued, fundo ASCII por especialidade) ---------- */
.banner-hero{
  min-height:clamp(300px,46vh,520px);
  align-items:center;
}
.banner-hero .hero-scrim{
  background:
    linear-gradient(180deg,rgba(19,19,19,0.52) 0%,rgba(19,19,19,0.58) 42%,rgba(19,19,19,0.82) 100%),
    radial-gradient(ellipse 78% 72% at 50% 46%,rgba(19,19,19,0) 0%,rgba(19,19,19,0.28) 72%,rgba(19,19,19,0.5) 100%);
}
.banner-inner{
  position:relative;z-index:2;width:100%;max-width:62rem;
  margin-inline:auto;text-align:center;
  padding-inline:clamp(1.25rem,4vw,2.75rem);
  padding-top:clamp(96px,13vh,150px);
  padding-bottom:clamp(38px,6vh,68px);
  hanging-punctuation:first last;
}
.banner-breadcrumb{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.5rem;
  font-family:'Inter',sans-serif;font-size:0.72rem;letter-spacing:0.04em;
  color:rgba(255,255,255,0.42);margin-bottom:1.35rem;
}
.banner-breadcrumb a{color:rgba(255,255,255,0.66);text-decoration:none;transition:color .25s ease}
.banner-breadcrumb a:hover{color:#fff}
.banner-breadcrumb span{color:rgba(255,255,255,0.3)}
.banner-eyebrow{color:rgba(255,255,255,0.6);letter-spacing:0.24em;font-size:0.72rem;margin-bottom:1.05rem}
.banner-title{
  color:#F2F2F2;font-weight:480;
  font-size:clamp(1.9rem,4.4vw,3.25rem);line-height:1.13;letter-spacing:-0.014em;
  max-width:22ch;margin-inline:auto;text-wrap:balance;
  font-variation-settings:'opsz' 60;
  text-shadow:0 2px 34px rgba(0,0,0,0.4);
}
.banner-title em{font-style:italic;font-weight:500}
.banner-meta{
  margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.55rem 1rem;
  font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,0.55);font-feature-settings:'tnum' 1;
}
.banner-meta .dot-sep{width:1px;height:11px;border-radius:0;background:rgba(255,255,255,0.24)}
[data-anim="banner-eyebrow"]{transform:translateY(18px)}
[data-anim="banner-title"]{transform:translateY(28px)}
[data-anim="banner-meta"]{transform:translateY(18px)}

/* ---------- Cabecalho de pagina sem banner (hub / overview) ---------- */
.page-head{
  padding-top:calc(64px + clamp(40px,7vw,96px));
  padding-bottom:clamp(28px,4vw,52px);
}
@media (min-width:768px){.page-head{padding-top:calc(72px + clamp(44px,7vw,104px))}}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
  font-family:'Inter',sans-serif;font-size:0.74rem;letter-spacing:0.03em;
  color:var(--ink-3);margin-bottom:1.5rem;
}
.crumb a{color:var(--ink-2);text-decoration:none;transition:color .25s ease}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--ink-4)}
.page-head .page-intro{color:var(--ink-2);font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.7;max-width:54ch;margin-top:1.4rem}

/* ---------- Corpo do artigo (coluna unica centrada) ---------- */
.article-body{
  max-width:40rem;margin-inline:auto;
  padding-block:clamp(44px,6.5vw,84px);
  padding-inline:clamp(1.25rem,4vw,2rem);
  hanging-punctuation:first last;
}
.article-body .article-lead{
  font-family:'Newsreader',serif;font-weight:420;
  font-size:clamp(1.28rem,2.3vw,1.6rem);line-height:1.5;letter-spacing:-0.005em;
  color:var(--ink);margin-bottom:2.1rem;text-wrap:pretty;
  font-feature-settings:'liga' 1,'onum' 1;
}
.article-body p{color:var(--ink-2);font-size:1.075rem;line-height:1.78;margin-bottom:1.4rem;text-wrap:pretty}
.article-body h2{
  font-family:'Newsreader',serif;font-weight:500;
  font-size:clamp(1.5rem,2.7vw,1.95rem);line-height:1.22;letter-spacing:-0.012em;
  color:var(--ink);margin:2.7rem 0 1rem;text-wrap:balance;
}
.article-body h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.12rem;color:var(--ink);margin:1.9rem 0 0.6rem;letter-spacing:-0.005em}
.article-body ul,.article-body ol{margin:0 0 1.5rem;padding-left:1.25rem;color:var(--ink-2);font-size:1.06rem;line-height:1.7}
.article-body li{margin-bottom:0.55rem}
.article-body li::marker{color:var(--ink-4)}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-strong);transition:text-decoration-color .25s ease}
.article-body a:hover{text-decoration-color:var(--ink)}
.article-body .pull-quote{
  margin:2.5rem 0;padding-left:1.4rem;border-left:2px solid var(--ink);
  font-family:'Newsreader',serif;font-style:italic;font-weight:420;
  font-size:clamp(1.32rem,2.6vw,1.7rem);line-height:1.42;color:var(--ink);text-wrap:pretty;
}
.article-body .article-note{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:0.88rem;line-height:1.65;color:var(--ink-3);max-width:40rem;margin-inline:auto;
}

/* ---------- Encerramento: autor + CTA ---------- */
.article-author{background:var(--surface-sunken);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article-author .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem 2.4rem;padding-block:clamp(36px,5vw,56px)}
.author-id{max-width:40ch}
.author-id .label-caps{color:var(--ink-3);margin-bottom:0.7rem}
.author-id .author-name{font-family:'Newsreader',serif;font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:500;color:var(--ink);line-height:1.15;letter-spacing:-0.01em}
.author-id .author-bio{color:var(--ink-2);font-size:0.98rem;line-height:1.65;margin-top:0.7rem}

/* ---------- Artigos relacionados ---------- */
.related{border-top:1px solid var(--line)}
.related .wrap{padding-block:clamp(44px,6vw,80px)}
.related-head{margin-bottom:1.8rem}
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.related-card{
  background:var(--surface-raised);padding:clamp(1.5rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:0.55rem;text-decoration:none;
  transition:background-color .3s ease;
}
.related-card:hover{background:#fff}
.related-card .rc-cat{font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.related-card .rc-title{font-family:'Newsreader',serif;font-size:1.18rem;font-weight:500;line-height:1.25;color:var(--ink);letter-spacing:-0.01em}
.related-card .rc-more{margin-top:auto;font-size:0.85rem;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:0.4rem;transition:gap .3s var(--ease),color .25s ease}
.related-card:hover .rc-more{color:var(--ink);gap:0.65rem}

/* ---------- Hub da especialidade: lista de artigos ---------- */
.article-list{max-width:52rem}
.article-list-item{border-top:1px solid var(--line);padding-block:clamp(1.8rem,3.2vw,2.7rem)}
.article-list-item:last-child{border-bottom:1px solid var(--line)}
.hub-item-meta{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-bottom:0.7rem;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.9rem}
.hub-item-meta .dot-sep{background:var(--ink-4)}
.hub-item-title{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(1.4rem,2.7vw,1.95rem);line-height:1.2;letter-spacing:-0.012em;margin-bottom:0.7rem}
.hub-item-title a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--ink),var(--ink));background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
.hub-item-title a:hover{background-size:100% 1px}
.hub-item-excerpt{color:var(--ink-2);font-size:1.04rem;line-height:1.72;max-width:62ch;margin-bottom:1rem}
.read-more{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.9rem;font-weight:600;color:var(--ink);text-decoration:none;transition:gap .3s var(--ease)}
.read-more:hover{gap:0.7rem}
.read-more .arrow{transition:transform .3s var(--ease)}
.read-more:hover .arrow{transform:translateX(3px)}
.article-list-item--feature .hub-item-title{font-size:clamp(1.7rem,4vw,2.6rem)}
.article-list-item--feature .hub-item-excerpt{font-size:1.1rem;max-width:64ch}

/* ---------- data-anim editorial: estado inicial (reveal vem do main.js) ---------- */
[data-anim="rise"]{transform:translateY(20px)}
[data-anim="related-card"]{transform:translateY(24px)}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .banner-inner{text-align:left}
  .banner-breadcrumb{justify-content:flex-start}
  .banner-meta{justify-content:flex-start}
  .banner-title{margin-inline:0;max-width:none}
  .article-author .wrap{flex-direction:column;align-items:flex-start}
}