/* ============================================================
   ROSH — Journal: índice e artigo
   Depende de brand.css (tokens) e page.css (nav, botões, faq, kontakt).
   ============================================================ */

/* ---------- migalhas ---------- */
.crumbs{
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
  font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--soleil)}

/* ---------- cartões (índice, relacionados, home) ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag-pill{
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.blog-head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(40px,5vw,64px)}
.blog-head h2{font-size:clamp(36px,5vw,74px)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.post{display:flex;flex-direction:column;gap:16px}
.post-media{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.post-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .7s cubic-bezier(.22,.7,.3,1)}
.post:hover .post-media img{transform:scale(1.06)}
.post h3{font-size:clamp(18px,1.7vw,23px);line-height:1.28}
.post h3 a{transition:color .3s}
.post:hover h3 a{color:var(--soleil)}
.post-desc{font-size:14.5px;line-height:1.7;color:var(--ink-soft);max-width:46ch}
.post-meta{display:flex;gap:16px;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- cabeçalho do índice ---------- */
.jr-head{padding-top:clamp(140px,18vh,210px);padding-bottom:clamp(48px,6vw,80px)}
.jr-head h1{font-size:clamp(34px,5.4vw,82px);max-width:17ch;margin-top:20px}
.jr-sub{margin-top:26px;max-width:56ch;font-size:clamp(15.5px,1.4vw,18px);color:var(--ink-soft)}
.jr-grid{row-gap:clamp(36px,4vw,58px)}

/* ---------- artigo ---------- */
.art-head{padding:clamp(140px,18vh,210px) 0 clamp(30px,4vw,48px)}
.art-head .wrap{max-width:900px}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.art-head h1{font-size:clamp(31px,4.6vw,64px);line-height:1.06;max-width:20ch}
.art-lead{
  margin-top:26px;max-width:62ch;
  font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:var(--ink-soft);
}
.art-meta{
  display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.art-meta span:first-child{color:var(--ambre)}

.art-cover{margin-bottom:clamp(40px,5vw,70px)}
.art-cover img{width:100%;border-radius:var(--radius);aspect-ratio:16/8;object-fit:cover;object-position:center 34%}

.art-body{max-width:820px;padding-bottom:clamp(60px,7vw,110px)}
.art-body h2{
  font-size:clamp(24px,2.8vw,38px);line-height:1.12;
  margin:clamp(44px,4.6vw,72px) 0 20px;max-width:24ch;
}
.art-body h2:first-child{margin-top:0}
.art-body p{
  font-size:clamp(16px,1.5vw,18.5px);line-height:1.78;color:var(--ink-soft);
  margin-bottom:20px;max-width:68ch;
}
.art-body p strong,.art-body li strong{color:var(--ink);font-weight:600}
/* só links dentro do texto corrido — não os botões (senão o .btn-orange perde contraste) */
.art-body p a,.art-body li a{color:var(--soleil);text-decoration:underline;text-underline-offset:3px}
.art-list{margin:6px 0 26px;max-width:68ch}
.art-list li{
  position:relative;padding:11px 0 11px 28px;
  font-size:clamp(15.5px,1.45vw,17.5px);line-height:1.7;color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.art-list li:first-child{border-top:1px solid var(--line)}
.art-list li::before{
  content:"";position:absolute;left:2px;top:21px;
  width:8px;height:8px;border-radius:50%;background:var(--braise);
}

/* caixa de link interno */
.art-link{
  margin:clamp(44px,5vw,72px) 0;padding:clamp(26px,3vw,40px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
}
.art-link::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--coucher)}
.art-link p{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink);max-width:46ch;margin:0}

/* FAQ dentro do artigo */
.art-faq{margin-top:10px;border-top:1px solid var(--line)}
.art-faq .faq-q{font-size:clamp(17px,1.7vw,23px)}
.art-faq .faq-a p{max-width:66ch}

@media (max-width:980px){
  .blog-grid{grid-template-columns:1fr;gap:38px}
  .art-cover img{aspect-ratio:16/10}
}