/* ==========================================================================
   UdiSpace — blog.css (blog.html + blog-post.html)
   Depende dos tokens e utilidades de base.css
   ========================================================================== */

/* ---------- Badges extras ---------- */
.badge-ink{background:var(--ink);color:var(--paper)}
.badge-paper{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- Meta autor (compartilhado) ---------- */
.post-meta{display:flex;align-items:center;gap:12px;min-width:0}
.post-meta .ini{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--ipe);font-family:var(--font-display);font-weight:800;font-size:.72rem;letter-spacing:.04em;display:grid;place-items:center;flex:none}
.ini.big{width:52px;height:52px;font-size:.95rem;border-radius:50%;background:var(--ink);color:var(--ipe);font-family:var(--font-display);font-weight:800;display:grid;place-items:center;flex:none}
.post-meta-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.post-meta-txt strong{font-size:.85rem;font-weight:700}
.post-meta-txt span{font-size:.75rem;color:var(--mist)}
.post-meta.on-dark .ini,.dark .post-meta .ini{background:var(--ipe);color:var(--ink)}
.post-meta.on-dark .post-meta-txt span,.dark .post-meta-txt span{color:rgba(246,242,234,.6)}

/* ---------- Card editorial (compartilhado) ---------- */
.post-card{position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-s);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);height:100%}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post-card .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.post-card .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.post-card:hover .media img{transform:scale(1.06)}
.post-card .media .badge{position:absolute;top:14px;left:14px}
.post-card .read-pill{position:absolute;right:14px;bottom:14px;padding:6px 10px;border-radius:var(--pill);background:rgba(14,15,20,.65);color:var(--paper);font-size:.72rem;font-weight:700;backdrop-filter:blur(8px);letter-spacing:.04em}
.post-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .ttl{font-size:1.25rem;letter-spacing:-.02em;line-height:1.2;transition:color .3s}
.post-card:hover .ttl{color:var(--terra)}
.post-card .sum{color:var(--mist);font-size:.92rem;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card .post-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
@keyframes cardIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.post-card.enter,.grid-news.enter{animation:cardIn .8s var(--ease-out) both}

/* ==========================================================================
   BLOG.HTML
   ========================================================================== */
.blog-hero{position:relative;overflow:hidden;padding-top:calc(var(--header-h) + clamp(36px,6vw,84px));padding-bottom:clamp(40px,5vw,72px)}
.blog-hero .blob{opacity:.28}
.blog-hero-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.blog-hero h1{max-width:12ch}
.blog-hero .giant{position:absolute;right:-2vw;top:calc(var(--header-h) - 10px);font-family:var(--font-display);font-weight:800;font-size:clamp(6rem,22vw,20rem);letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(14,15,20,.09);white-space:nowrap;user-select:none;pointer-events:none}
.hero-aside{display:flex;flex-direction:column;gap:18px;padding-bottom:10px}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap}
.hero-stats .stat .num{font-size:clamp(1.8rem,3vw,2.6rem)}
.hero-stats .stat span:last-child{font-size:.78rem;color:var(--mist);text-transform:uppercase;letter-spacing:.1em;font-weight:700}

/* Destaque gigante horizontal */
.featured-card{position:relative;display:grid;grid-template-columns:1.15fr 1fr;border-radius:var(--radius-xl);overflow:hidden;min-height:520px;box-shadow:var(--shadow-l);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.featured-card:hover{transform:translateY(-6px);box-shadow:0 40px 90px -24px rgba(14,15,20,.5)}
.featured-media{position:relative;min-height:340px;overflow:hidden}
.featured-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,20,0) 60%,rgba(14,15,20,.55))}
.featured-media img{transition:transform 1.4s var(--ease-out),filter .6s}
.featured-card:hover .featured-media img{filter:saturate(1.1)}
.featured-body{position:relative;padding:clamp(28px,4.5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:20px;z-index:1}
.featured-title{font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:-.03em;line-height:1.02;max-width:16ch}
.featured-body .lead{max-width:44ch;font-size:1.02rem}
.featured-body .link{color:var(--ipe)}

/* Marquee */
.cat-marquee{padding:clamp(18px,2.5vw,28px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.cat-marquee .marquee-track > *{font-size:clamp(1rem,1.8vw,1.5rem);color:var(--ink);opacity:.85}

/* Ferramentas: tabs + busca */
.blog-tools{position:sticky;top:68px;transition:top .5s var(--ease-out);z-index:40;background:rgba(246,242,234,.86);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);padding:14px 0;border-bottom:1px solid var(--line)}
.blog-tools .container{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pill-tabs.cats{max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.pill-tabs.cats::-webkit-scrollbar{display:none}
.pill-tabs.cats button{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;flex:none}
.pill-tabs.cats button sup{font-size:.62rem;font-weight:800;color:var(--mist);vertical-align:top;transition:.3s}
.pill-tabs.cats button.active sup{color:var(--ipe)}
.pill-tabs.cats button:not(.active):hover{background:rgba(14,15,20,.06)}
.blog-search{position:relative;display:flex;align-items:center;flex:1;min-width:220px;max-width:360px;background:#fff;border-radius:var(--pill);border:1.5px solid var(--line);padding:0 8px 0 16px;transition:border-color .3s,box-shadow .3s}
.blog-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(242,178,51,.25)}
.blog-search svg{width:18px;height:18px;flex:none;color:var(--mist)}
.blog-search input{flex:1;border:0;background:transparent;padding:12px 12px;min-width:0;font-weight:500}
.blog-search input:focus{outline:none}
.blog-search button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--mist);transition:.3s}
.blog-search button:hover{background:var(--paper-2);color:var(--ink)}

/* Layout principal */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,72px);align-items:start}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.grid-news{grid-column:1/-1;position:relative;overflow:hidden;border-radius:var(--radius-l);padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.grid-news .newsletter{width:100%;max-width:520px;margin-top:10px}
.grid-news p{max-width:52ch}
.blog-grid-foot{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}
.result-count{font-size:.85rem;color:var(--mist);margin:0 0 18px;min-height:1.4em}
.empty-state{text-align:center;padding:clamp(48px,8vw,96px) 20px;border:1.5px dashed var(--line);border-radius:var(--radius-l)}
.empty-state .big{font-family:var(--font-serif);font-style:italic;font-size:clamp(2rem,4vw,3rem);color:var(--terra);line-height:1;margin-bottom:12px}

/* Sidebar */
.blog-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.side-box{background:#fff;border-radius:var(--radius-l);padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-s)}
.side-box h4{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:1rem;letter-spacing:.02em}
.side-box h4::after{content:"";flex:1;height:1px;background:var(--line)}
.mr-item{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start;transition:transform .4s var(--ease-out)}
.mr-item:last-child{border-bottom:0;padding-bottom:0}
.mr-item:hover{transform:translateX(4px)}
.mr-num{font-family:var(--font-serif);font-style:italic;font-size:2rem;line-height:1;color:var(--terra);min-width:2ch;transition:color .3s}
.mr-item:hover .mr-num{color:var(--ipe-deep)}
.mr-body{display:flex;flex-direction:column;gap:4px}
.mr-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--mist)}
.mr-ttl{font-family:var(--font-display);font-weight:700;font-size:.98rem;line-height:1.25;letter-spacing:-.01em}
.side-cta{position:relative;overflow:hidden;border-radius:var(--radius-l);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.side-cta .h3{font-size:1.5rem;letter-spacing:-.02em}
.side-cta .blob{width:220px;height:220px;right:-70px;bottom:-90px;opacity:.4}

/* CTA final */
.blog-cta{position:relative;overflow:hidden}
.blog-cta .cta-box{background:var(--paper-2);border-radius:var(--radius-xl);padding:clamp(36px,6vw,80px);display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;position:relative;overflow:hidden}
.blog-cta .cta-box .blob{width:360px;height:360px;right:-120px;top:-120px;opacity:.35}
.blog-cta .h2{max-width:14ch}

/* ==========================================================================
   BLOG-POST.HTML
   ========================================================================== */
.post-hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;color:var(--paper);padding-top:var(--header-h);overflow:hidden;background:var(--ink)}
.post-hero-media{position:absolute;inset:0}
.post-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,20,.55) 0%,rgba(14,15,20,.45) 35%,rgba(14,15,20,.92) 100%),linear-gradient(90deg,rgba(14,15,20,.55) 0%,rgba(14,15,20,0) 70%)}
.post-hero-body{position:relative;z-index:1;padding-block:clamp(36px,6vw,80px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.post-hero .breadcrumb{color:rgba(246,242,234,.7)}
.post-hero .breadcrumb a:hover{color:var(--ipe)}
.post-hero .breadcrumb span:last-child{color:var(--paper);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-hero h1{font-size:clamp(2.2rem,5.4vw,4.8rem);max-width:18ch;letter-spacing:-.035em}
.post-hero .lead{color:rgba(246,242,234,.78);max-width:56ch}
.post-hero .post-meta{gap:16px;flex-wrap:wrap;padding-top:8px}
.post-hero .post-meta .ini.big{background:var(--ipe);color:var(--ink)}
.post-hero .post-meta-txt strong{font-size:.92rem}
.post-hero .post-meta-txt span{color:rgba(246,242,234,.6)}
.post-hero .sep{width:1px;height:34px;background:var(--line-dark)}
.post-hero .scroll-hint{position:absolute;right:var(--gutter);bottom:28px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:rgba(246,242,234,.6)}
.post-hero .scroll-hint::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,var(--ipe),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Colunas */
.post-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,6vw,96px);align-items:start}
.post-body{max-width:70ch;font-size:1.08rem;line-height:1.78;color:var(--ink)}
.post-body > p:first-of-type::first-letter{font-family:var(--font-serif);font-size:4.8em;font-weight:400;float:left;line-height:.78;padding:.1em .14em 0 0;color:var(--terra)}
.post-body p{margin:0 0 1.4em}
.post-body strong{font-weight:700}
.post-body h2{font-size:clamp(1.55rem,2.6vw,2.15rem);letter-spacing:-.025em;margin:2.2em 0 .7em;scroll-margin-top:110px;position:relative;padding-left:22px}
.post-body h2::before{content:"";position:absolute;left:0;top:.28em;width:10px;height:10px;border-radius:50%;background:var(--ipe)}
.post-body blockquote{margin:2.2em 0;padding:8px 0 8px 32px;border-left:3px solid var(--ipe);font-family:var(--font-serif);font-style:italic;font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.post-body ul,.post-body ol{margin:0 0 1.6em;padding:0;list-style:none;counter-reset:li}
.post-body li{position:relative;padding-left:40px;margin-bottom:.8em}
.post-body ul li::before{content:"✦";position:absolute;left:8px;top:0;color:var(--terra);font-size:.95em}
.post-body ol li{counter-increment:li}
.post-body ol li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--font-display);font-weight:800;font-size:.8rem;color:var(--ipe-deep);letter-spacing:.04em}
.post-body a:not(.link){color:var(--terra);text-decoration:underline;text-underline-offset:3px}
.post-fig{margin:2.4em 0}
.post-fig .img-zoom{background:var(--paper-2)}
.post-fig .img-zoom img{transition:transform 1.4s var(--ease-out)}
.post-fig:hover .img-zoom img{transform:scale(1.04)}
.post-fig figcaption{font-size:.78rem;color:var(--mist);margin-top:10px;display:flex;align-items:center;gap:8px}
.post-fig figcaption::before{content:"";width:18px;height:1.5px;background:var(--ipe)}
.post-tip{margin:2.4em 0;padding:clamp(20px,3vw,28px);border-radius:var(--radius-l);background:var(--paper-2);border:1px solid var(--line);font-size:.98rem;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.post-tip p{margin:0 0 8px;color:var(--ink)}
.post-tip .link{color:var(--terra)}

/* Sidebar do artigo */
.post-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.side-title{font-family:var(--font-display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--mist);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.side-title::after{content:"";flex:1;height:1px;background:var(--line)}
.toc{display:flex;flex-direction:column;gap:2px}
.toc a{display:flex;gap:12px;align-items:flex-start;padding:9px 12px;border-radius:12px;font-size:.88rem;font-weight:600;color:var(--mist);line-height:1.3;transition:.3s;border-left:2px solid transparent}
.toc a span{font-family:var(--font-display);font-size:.7rem;font-weight:800;color:var(--terra);margin-top:2px;flex:none}
.toc a:hover{color:var(--ink);background:rgba(14,15,20,.04)}
.toc a.active{color:var(--ink);background:#fff;box-shadow:var(--shadow-s);border-left-color:var(--ipe)}
.read-ring{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-s);font-size:.8rem;color:var(--mist)}
.read-ring svg{width:52px;height:52px;transform:rotate(-90deg);flex:none}
.read-ring circle{fill:none;stroke-width:4}
.read-ring .track{stroke:var(--paper-3)}
.read-ring .bar{stroke:var(--ipe);stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.read-ring strong{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink)}
.share{display:flex;gap:8px;flex-wrap:wrap}
.share-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;transition:transform .4s var(--ease-out),background .3s,color .3s,border-color .3s}
.share-btn svg{width:18px;height:18px}
.share-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-3px)}
.share-btn.ok{background:var(--cerrado);border-color:var(--cerrado);color:#fff}
.post-side .side-cta{padding:clamp(22px,2.6vw,28px)}
.post-side .side-cta .h3{font-size:1.35rem}

/* Rodapé do artigo */
.post-foot{max-width:70ch;margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:28px}
.post-tags{display:flex;gap:8px;flex-wrap:wrap}
.author-box{display:flex;gap:20px;align-items:flex-start;background:#fff;border-radius:var(--radius-l);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-s)}

/* Anterior / próximo */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.pn-card{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:center;background:#fff;border-radius:var(--radius-l);padding:14px;box-shadow:var(--shadow-s);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.pn-card.next{grid-template-columns:1fr 92px;text-align:right}
.pn-card.next .pn-img{order:2}
.pn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pn-img{aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--paper-2)}
.pn-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.pn-card:hover .pn-img img{transform:scale(1.08)}
.pn-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.pn-card.next .pn-body{align-items:flex-end}
.pn-ttl{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.25;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  .blog-hero .giant{display:none}
}
@media (max-width:1024px){
  .blog-hero-head{grid-template-columns:1fr}
  .featured-card{grid-template-columns:1fr;min-height:0}
  .featured-media{min-height:300px;aspect-ratio:16/10}
  .featured-media::after{background:linear-gradient(180deg,rgba(14,15,20,0) 60%,rgba(14,15,20,.5))}
  .blog-layout,.post-cols{grid-template-columns:1fr}
  .blog-side,.post-side{position:static}
  .blog-side{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .post-side{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .post-side .toc-wrap{grid-column:1/-1}
  .blog-cta .cta-box{grid-template-columns:1fr}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .blog-side,.post-side{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .pn-card.next{grid-template-columns:92px 1fr;text-align:left}
  .pn-card.next .pn-img{order:0}
  .pn-card.next .pn-body{align-items:flex-start}
  .post-hero{min-height:78vh}
  .post-hero .sep{display:none}
  .post-hero .scroll-hint{display:none}
  .post-body{font-size:1rem}
  .post-body blockquote{padding-left:20px}
  .blog-tools .container{gap:10px}
  .blog-search{max-width:none;width:100%}
  .author-box{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .post-card.enter,.grid-news.enter{animation:none}
  .post-hero .scroll-hint::after{animation:none}
}