/**
 * Overrides para o Single Post template no Theme Builder.
 *
 * O Elementor envolve containers em .e-con/.e-flex e aplica
 * `display: var(--display)` via class, o que sobrescreve nosso CSS
 * externo. Aqui forçamos display correto via .e-con seletor + !important
 * onde necessário.
 *
 * Mesmo padrão da /blog (blog-elementor-overrides.css).
 */

/* =================================================================
 * ARTICLE HEAD — Container coluna com padding lateral
 * ================================================================= */
.article-head.e-con,
.article-head.e-con-boxed,
.article-head.e-con-full {
    --padding-block-start: 0;
    --padding-block-end: 0;
    --padding-inline-start: 1.5rem;
    --padding-inline-end: 1.5rem;
    padding: 2rem 1.5rem 0;
    max-width: 44rem;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
}

/* Eyebrow + Heading + Deck + post-meta dentro do article-head */
.article-head .elementor-shortcode {
    line-height: inherit;
}
.article-head .post-title.elementor-widget-theme-post-title .elementor-heading-title,
.article-head .post-title .elementor-heading-title {
    font-size: clamp(2rem, 5vw, 3.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    line-height: 1.1 !important;
    color: var(--slate-900) !important;
    margin-bottom: 1rem;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* post-meta: row flex (avatar + dot + data lado-a-lado) */
.post-meta.e-con,
.post-meta.e-con-full {
    --padding-block-start: 1.25rem;
    --padding-block-end: 0;
    --padding-inline-start: 0;
    --padding-inline-end: 0;
    --gap: 0.875rem;
    padding: 1.25rem 0 0;
    gap: 0.875rem;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    border-top: 1px solid var(--slate-100);
}
/* Widgets dentro do post-meta ficam width: auto (não 100%) */
.post-meta > .elementor-widget,
.post-meta > .elementor-widget-shortcode,
.post-meta > .elementor-widget-html {
    width: auto !important;
    flex: 0 0 auto;
}

/* =================================================================
 * ARTICLE LAYOUT — grid 2-col em desktop (TOC + body)
 *
 * Especificidade máxima: body.single + .article-layout. Combina com
 * override das custom properties --display / --flex-direction que o
 * Elementor usa internamente.
 * ================================================================= */
body.single .article-layout,
body.single-post .article-layout,
.elementor .article-layout,
.article-layout.e-con,
.article-layout.e-con-full,
.article-layout.e-flex {
    --padding-block-start: 0 !important;
    --padding-block-end: 0 !important;
    --padding-inline-start: 1.5rem !important;
    --padding-inline-end: 1.5rem !important;
    --display: grid !important;
    --flex-direction: initial !important;
    padding: 3rem 1.5rem 0 !important;
    max-width: 72rem !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
}
@media (min-width: 1024px) {
    body.single .article-layout,
    body.single-post .article-layout,
    .elementor .article-layout,
    .article-layout.e-con,
    .article-layout.e-con-full,
    .article-layout.e-flex {
        grid-template-columns: 14rem minmax(0, 44rem) !important;
        gap: 3rem !important;
        justify-content: center !important;
    }
}
.article-layout > * {
    min-width: 0;
    max-width: 100%;
}

/* =================================================================
 * ARTICLE BODY — Theme Post Content widget
 * O widget envolve o the_content() em .elementor-widget-container
 * ================================================================= */
.article-body.elementor-widget,
.article-body.elementor-widget-theme-post-content {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--slate-700);
}
.article-body .elementor-widget-container > * + * {
    margin-top: 1.25rem;
}

/* =================================================================
 * RELATED — Container coluna com padding e largura
 * ================================================================= */
.related.e-con,
.related.e-con-full {
    --padding-block-start: 4rem;
    --padding-block-end: 0;
    --padding-inline-start: 1.5rem;
    --padding-inline-end: 1.5rem;
    padding: 4rem 1.5rem 0;
    max-width: 72rem;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}
.related-head.e-con,
.related-head.e-con-full {
    --padding-block-start: 0;
    --padding-block-end: 0;
    --padding-inline-start: 0;
    --padding-inline-end: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 1.75rem;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.related-head .related-title .elementor-heading-title,
.related .related-title.elementor-widget-heading .elementor-heading-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--slate-900) !important;
    margin: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}
.related-head .related-sub,
.related-head .related-sub p {
    font-size: 0.875rem !important;
    color: var(--slate-500) !important;
    margin-top: 0.375rem;
    text-align: center;
}

/* Loop Grid related — força 3 colunas no Elementor grid */
.related .elementor-loop-container.elementor-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}
@media (min-width: 640px) {
    .related .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (min-width: 1024px) {
    .related .elementor-loop-container.elementor-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* =================================================================
 * COMMENTS shortcode wrapper — força largura no widget Shortcode
 * ================================================================= */
.elementor-widget-shortcode .comments {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* =================================================================
 * PROGRESS BAR — top:0 fixed; garantir z-index acima de tudo
 * ================================================================= */
.elementor-widget-html > .elementor-widget-container > .progress {
    /* já tem position:fixed do single-post.css — só garante presença */
}

/* =================================================================
 * BREADCRUMB — Shortcode wrapper deve ter largura cheia
 * ================================================================= */
.elementor-widget-shortcode .breadcrumb {
    max-width: 44rem;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
}

/* =================================================================
 * POST COVER — Shortcode wrapper deve ter largura cheia
 * ================================================================= */
.elementor-widget-shortcode .post-cover {
    max-width: 56rem;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
}

/* =================================================================
 * POST FOOTER (tags + share + bio) — Shortcode wrapper centralizado
 * ================================================================= */
.elementor-widget-shortcode .post-footer {
    max-width: 44rem;
    margin: 3.5rem auto 0;
    padding: 2rem 1.5rem 0;
}

/* Tags pills no post-footer reusam .tag-pill do /blog */
.post-footer .post-tags .tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-600);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 0.5rem;
    padding: 0.3125rem 0.625rem;
    transition: all 0.15s;
    text-decoration: none;
}
.post-footer .post-tags .tag-pill:hover {
    color: var(--blue);
    background: var(--blue-50);
    border-color: var(--blue-200);
}
.post-footer .post-tags .tag-pill .hash {
    color: var(--slate-400);
}

/* =================================================================
 * COMMENTS wrapper — Shortcode centralizado
 * ================================================================= */
.elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .comments {
    max-width: 44rem;
    margin: 4rem auto 0;
    padding: 0 1.5rem;
}