/* Mediclique Blog - layout do blog sobre o design system (tokens/ + components.css). */
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:hidden}
.blog-skip{position:absolute;left:16px;top:-80px;z-index:99;padding:12px 16px;background:var(--mc-brand-green);color:var(--mc-brand-ink)!important;border-radius:12px;font-weight:600}
.blog-skip:focus{top:12px}

/* Hero da listagem */
/* Tema claro (leitura prolongada): fundo quase branco. Logo em PNG so existe para fundo escuro; no claro usa-se a identificacao tipografica. */
body.mc-ui[data-mc-theme="light"]{--mc-bg:#FFFFFF;--mc-surface:#FFFFFF;--mc-surface-raised:#F3F7F4}
.mc-wordmark-text{font-family:var(--font-base);font-weight:800;font-size:22px;letter-spacing:-.03em;line-height:1;color:var(--mc-text)}
.mc-wordmark-text span{color:var(--mc-accent)}
.blog-hero{position:relative;isolation:isolate;background:var(--mc-bg);border-bottom:1px solid var(--mc-border);overflow:hidden;padding:clamp(64px,10vw,128px) 0 clamp(48px,7vw,96px)}
.blog-hero::before{content:"";position:absolute;inset:0;background:var(--mc-halo);z-index:-1;pointer-events:none}
.blog-hero__inner{display:flex;flex-direction:column;gap:20px;max-width:880px}

/* Grade de cards */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.blog-card{padding:0;overflow:hidden;gap:0;height:100%}
.blog-card__media{aspect-ratio:16/9;background:var(--mc-surface-raised);border-bottom:1px solid var(--mc-border);display:grid;place-items:center;overflow:hidden}
.blog-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card__body{display:flex;flex-direction:column;gap:12px;padding:24px;flex:1}
.blog-card__meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.blog-card__excerpt{color:var(--mc-text-muted);font-size:var(--mc-fs-small);line-height:var(--mc-lh-small)}
.blog-empty{max-width:var(--mc-measure)}

/* Placeholder de imagem (substituir por foto real) */
.blog-ph{width:100%;height:100%;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;background:var(--mc-halo-center),var(--mc-surface-raised);color:var(--mc-text-muted)}
.blog-ph span:first-child{font-family:var(--font-mono);font-size:var(--mc-fs-badge);letter-spacing:var(--mc-ls-badge);text-transform:uppercase;color:var(--mc-accent)}

.blog-card__media .blog-ph span:last-child{display:none}

/* Artigo */
.post{padding-block:clamp(40px,6vw,72px) var(--mc-section-y)}
.post__head{display:flex;flex-direction:column;gap:20px;max-width:880px;margin-bottom:40px}
.post__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.post__cover{margin:0 0 48px;border-radius:var(--mc-radius-xl);overflow:hidden;border:1px solid var(--mc-border);background:var(--mc-surface-raised);aspect-ratio:16/9}
.post__cover img{width:100%;height:100%;object-fit:cover;display:block}
.post__cover figcaption{display:none}
.prose{max-width:var(--mc-measure);font-size:1.0625rem;line-height:1.7}
.prose>*+*{margin-top:1.25em}
.prose h2{font-size:var(--mc-fs-h3);line-height:var(--mc-lh-h3);letter-spacing:var(--mc-ls-h3);font-weight:600;margin-top:2.2em;text-wrap:balance}
.prose h3{font-size:var(--mc-fs-h4);line-height:var(--mc-lh-h4);letter-spacing:var(--mc-ls-h4);font-weight:600;margin-top:1.8em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--mc-accent)}
.prose strong{font-weight:700}
.prose blockquote{margin-inline:0;padding:20px 24px;border-radius:var(--mc-radius-lg);background:var(--mc-surface-raised);color:var(--mc-text)}
.prose blockquote p+p{margin-top:.75em}
.prose hr{border:0;height:1px;background:var(--mc-border);margin-block:2.5em}
.prose code{font-family:var(--font-mono);font-size:.875em;background:var(--mc-surface-raised);padding:2px 6px;border-radius:6px}
.prose img{max-width:100%;height:auto;border-radius:var(--mc-radius-lg)}
.post__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center top;border:1px solid var(--mc-border)}
.post__meta span:has(+ .post__avatar),.post__meta .post__avatar+span{display:inline}
.table-wrap{overflow-x:auto;border:1px solid var(--mc-border);border-radius:var(--mc-radius-lg)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--mc-fs-small);line-height:var(--mc-lh-small);min-width:560px}
.prose th{font-family:var(--font-mono);font-size:var(--mc-fs-badge);letter-spacing:var(--mc-ls-badge);text-transform:uppercase;text-align:left;color:var(--mc-text-muted);background:var(--mc-surface-raised);padding:12px 16px;border-bottom:1px solid var(--mc-border)}
.prose td{padding:12px 16px;border-bottom:1px solid var(--mc-border);vertical-align:top}
.prose tr:last-child td{border-bottom:0}
.post__author{display:inline-flex;align-items:center;gap:8px}
.post__answer{max-width:var(--mc-measure);margin:0 0 32px;padding:20px 24px;border-radius:var(--mc-radius-lg);background:var(--mc-accent-soft);border:1px solid var(--mc-border)}
.post__answer p:last-child{margin-top:8px;font-size:1.0625rem;line-height:1.6}
.post__toc{max-width:var(--mc-measure);margin:0 0 40px;padding:20px 24px;border:1px solid var(--mc-border);border-radius:var(--mc-radius-lg);background:var(--mc-surface)}
.post__toc ol{margin:12px 0 0;padding-left:1.2em}
.post__toc li+li{margin-top:6px}
.post__related{max-width:var(--mc-measure);margin-top:48px}
.post__related ul{margin:12px 0 0;padding-left:1.2em}
.post__related li+li{margin-top:8px}
.prose h2{scroll-margin-top:96px}
/* CTA em bloco escuro (tema escuro do design system) para destacar na pagina clara */
.post__cta{margin-top:64px;max-width:var(--mc-measure);background:var(--mc-halo),var(--mc-bg);border-color:var(--mc-border);padding:clamp(24px,4vw,40px);gap:16px}
.post__cta .mc-h3{color:var(--mc-text)}
.post__back{margin-top:32px}

/* Rodape */
.blog-footer{border-top:1px solid var(--mc-border);padding:48px 0;background:#000}
.blog-footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.blog-footer ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}

@media (max-width:1023px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.blog-grid{grid-template-columns:1fr}.post__cta .mc-btn{width:100%}}