/*
 * Blog: listagem (page-blog.php) e post individual (single-post.php).
 * Todo seletor parte de #eeblog-page para não vazar para outras páginas
 * e para vencer as regras globais "div#general main section" do style.css.
 * Mesmos tokens de cor das páginas comerciais. O conteúdo do post vem de blocos nativos do WordPress.
 */

#eeblog-page {
    --eeblog-navy: #000f5c;
    --eeblog-ink: #11143a;
    --eeblog-muted: #4a5076;
    --eeblog-blue: #0346e9;
    --eeblog-purple: #3010a4;
    --eeblog-violet: #600dee;
    --eeblog-cyan: #15c8ff;
    --eeblog-line: #e3e7f3;
    --eeblog-soft: #f3f5fc;
    --eeblog-lilac: #f1edff;
    --eeblog-radius: 1rem;

    width: 100%;
    color: var(--eeblog-ink);
    font-size: 1rem;
    line-height: 1.6;
}

#eeblog-page *,
#eeblog-page *::before,
#eeblog-page *::after {
    box-sizing: border-box;
}

#eeblog-page .eeblog-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem;
}
#eeblog-page .eeblog-container--narrow { max-width: 46rem; }

#eeblog-page h1,
#eeblog-page h2,
#eeblog-page h3 {
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: none;
}
#eeblog-page p { margin: 0; }

#eeblog-page .eeblog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    color: var(--eeblog-cyan);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
#eeblog-page .eeblog-eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    background: currentColor;
}

/* Hero (listagem e post) */
#eeblog-page .eeblog-hero,
#eeblog-page .eeblog-post__hero {
    padding: 3rem 0 3.2rem;
    color: #fff;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(96, 13, 238, .45), transparent 55%),
        linear-gradient(160deg, var(--eeblog-navy) 0%, #001d6a 60%, var(--eeblog-purple) 100%);
}
#eeblog-page .eeblog-hero h1 {
    max-width: 40rem;
    color: #fff;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.1;
}
#eeblog-page .eeblog-hero h1 + p {
    max-width: 38rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
}

/* Listagem */
#eeblog-page .eeblog-list { padding: 3rem 0 4rem; background: var(--eeblog-soft); }
#eeblog-page .eeblog-grid { display: grid; gap: 1rem; }
#eeblog-page .eeblog-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--eeblog-radius);
    background: #fff;
    border: 1px solid var(--eeblog-line);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#eeblog-page .eeblog-card:hover {
    border-color: #c8bdf6;
    box-shadow: 0 1rem 2rem rgba(17, 20, 58, .08);
    transform: translateY(-2px);
}
#eeblog-page .eeblog-card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Sem imagem destacada: card tipográfico, com um filete de cor no topo em vez de placeholder. */
#eeblog-page .eeblog-card:not(.eeblog-card--thumb) { border-top: 3px solid var(--eeblog-purple); }
#eeblog-page .eeblog-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .7rem;
    padding: 1.5rem 1.4rem;
}
#eeblog-page .eeblog-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
#eeblog-page .eeblog-card__cat,
#eeblog-page .eeblog-card__draft {
    padding: .2rem .65rem;
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#eeblog-page .eeblog-card__cat { color: var(--eeblog-purple); background: var(--eeblog-lilac); }
#eeblog-page .eeblog-card__draft { color: #8a5a00; background: #fff3d6; }
#eeblog-page .eeblog-card h2 { font-size: 1.2rem; line-height: 1.3; }
#eeblog-page .eeblog-card h2 a { color: var(--eeblog-ink); text-decoration: none; }
#eeblog-page .eeblog-card h2 a:hover { color: var(--eeblog-purple); }
#eeblog-page .eeblog-card__excerpt { color: var(--eeblog-muted); font-size: .95rem; line-height: 1.55; }
#eeblog-page .eeblog-card__link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: .4rem;
    color: var(--eeblog-blue);
    font-weight: 700;
    text-decoration: none;
}
#eeblog-page .eeblog-card__link i { transition: transform .2s ease; }
#eeblog-page .eeblog-card__link:hover i { transform: translateX(4px); }
#eeblog-page .eeblog-empty { padding: 2rem 0; color: var(--eeblog-muted); text-align: center; }

#eeblog-page .eeblog-pagination { margin-top: 2.5rem; text-align: center; }
#eeblog-page .eeblog-pagination .page-numbers {
    display: inline-block;
    margin: 0 .2rem;
    padding: .5rem .85rem;
    border-radius: .5rem;
    color: var(--eeblog-ink);
    background: #fff;
    border: 1px solid var(--eeblog-line);
    font-weight: 700;
    text-decoration: none;
}
#eeblog-page .eeblog-pagination .page-numbers.current { color: #fff; background: var(--eeblog-purple); border-color: var(--eeblog-purple); }

/* Post individual */
#eeblog-page .eeblog-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.1rem;
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
    font-weight: 700;
}
#eeblog-page .eeblog-crumbs a { color: var(--eeblog-cyan); text-decoration: none; }
#eeblog-page .eeblog-crumbs a:hover { text-decoration: underline; }
#eeblog-page .eeblog-draft {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .3rem .8rem;
    border-radius: 2rem;
    color: #8a5a00;
    background: #fff3d6;
    font-size: .8rem;
    font-weight: 700;
}
#eeblog-page .eeblog-post__hero h1 {
    color: #fff;
    font-size: clamp(1.8rem, 5.4vw, 2.7rem);
    line-height: 1.15;
}
#eeblog-page .eeblog-post__meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    color: rgba(255, 255, 255, .75);
    font-size: .9rem;
}
#eeblog-page .eeblog-post__thumb { margin: 2rem auto 0; }
#eeblog-page .eeblog-post__thumb img { display: block; width: 100%; height: auto; border-radius: var(--eeblog-radius); }

/* Conteúdo do editor */
#eeblog-page .eeblog-content {
    padding: 2.5rem 0 1rem;
    font-size: 1.06rem;
    line-height: 1.75;
}
#eeblog-page .eeblog-content > * + * { margin-top: 1.1rem; }
#eeblog-page .eeblog-content p { color: #2c3155; }
#eeblog-page .eeblog-content h2 {
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--eeblog-line);
    color: var(--eeblog-ink);
    font-size: clamp(1.4rem, 3.6vw, 1.75rem);
    line-height: 1.25;
}
#eeblog-page .eeblog-content h3 {
    margin-top: 1.8rem;
    color: var(--eeblog-purple);
    font-size: 1.18rem;
    line-height: 1.35;
}
#eeblog-page .eeblog-content h2 + *,
#eeblog-page .eeblog-content h3 + * { margin-top: .8rem; }
#eeblog-page .eeblog-content ul,
#eeblog-page .eeblog-content ol { padding-left: 1.3rem; color: #2c3155; }
/* O reset global remove os marcadores; no conteúdo do post eles ajudam a leitura. */
#eeblog-page .eeblog-content ul { list-style: disc; }
#eeblog-page .eeblog-content ol { list-style: decimal; }
#eeblog-page .eeblog-content li { display: list-item; }
#eeblog-page .eeblog-content li + li { margin-top: .45rem; }
#eeblog-page .eeblog-content li::marker { color: var(--eeblog-purple); }
#eeblog-page .eeblog-content strong { color: var(--eeblog-ink); font-weight: 700; }
#eeblog-page .eeblog-content a:not(.wp-block-button__link) {
    color: var(--eeblog-blue);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
#eeblog-page .eeblog-content a:not(.wp-block-button__link):hover { color: var(--eeblog-purple); }

/* FAQ: blocos "Detalhes" do editor */
#eeblog-page .eeblog-content .wp-block-details {
    margin-top: .6rem;
    border: 1px solid var(--eeblog-line);
    border-radius: .8rem;
    background: #fff;
}
#eeblog-page .eeblog-content .wp-block-details[open] { border-color: #c8bdf6; box-shadow: 0 .6rem 1.6rem rgba(48, 16, 164, .07); }
#eeblog-page .eeblog-content .wp-block-details summary {
    position: relative;
    display: block;
    padding: 1rem 3.2rem 1rem 1.1rem;
    color: var(--eeblog-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}
#eeblog-page .eeblog-content .wp-block-details summary::-webkit-details-marker { display: none; }
#eeblog-page .eeblog-content .wp-block-details summary::after {
    content: "+";
    position: absolute;
    right: 1rem; top: 50%;
    display: grid;
    place-items: center;
    width: 1.7rem; height: 1.7rem;
    border-radius: 50%;
    color: var(--eeblog-purple);
    background: var(--eeblog-lilac);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}
#eeblog-page .eeblog-content .wp-block-details[open] summary::after { content: "−"; color: #fff; background: var(--eeblog-purple); }
#eeblog-page .eeblog-content .wp-block-details summary:focus-visible { outline: 3px solid var(--eeblog-cyan); outline-offset: 3px; }
#eeblog-page .eeblog-content .wp-block-details > p { margin: 0; padding: 0 1.1rem 1.1rem; font-size: 1rem; line-height: 1.65; }

/* CTA final: grupo com a classe eeblog-cta no editor */
#eeblog-page .eeblog-content .eeblog-cta {
    margin-top: 3rem;
    padding: 2rem 1.5rem;
    border-radius: 1.2rem;
    color: #fff;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(96, 13, 238, .55), transparent 60%),
        linear-gradient(135deg, var(--eeblog-navy) 0%, var(--eeblog-purple) 100%);
}
#eeblog-page .eeblog-content .eeblog-cta > * + * { margin-top: .7rem; }
/* Título do CTA é um parágrafo em destaque (não um heading), para não poluir a hierarquia H2/H3. */
#eeblog-page .eeblog-content .eeblog-cta .eeblog-cta__title {
    color: #fff;
    font-size: clamp(1.3rem, 3.4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}
#eeblog-page .eeblog-content .eeblog-cta p { color: rgba(255, 255, 255, .85); }
#eeblog-page .eeblog-content .eeblog-cta .wp-block-buttons { margin-top: 1.3rem; }
#eeblog-page .eeblog-content .eeblog-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: .8rem 1.5rem;
    border-radius: .6rem;
    color: var(--eeblog-navy);
    background: var(--eeblog-cyan);
    box-shadow: 0 .5rem 1.4rem rgba(21, 200, 255, .3);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
#eeblog-page .eeblog-content .eeblog-cta .wp-block-button__link:hover { background: #4fd6ff; transform: translateY(-2px); }

#eeblog-page .eeblog-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.5rem 0 4rem;
    color: var(--eeblog-blue);
    font-weight: 700;
    text-decoration: none;
}
#eeblog-page .eeblog-back:hover { color: var(--eeblog-purple); }

/* ≥ 600px */
@media (min-width: 600px) {
    #eeblog-page .eeblog-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
    #eeblog-page .eeblog-content .eeblog-cta { padding: 2.4rem 2.2rem; }
}

/* ≥ 900px */
@media (min-width: 900px) {
    #eeblog-page .eeblog-container { padding: 0 2rem; }
    #eeblog-page .eeblog-hero,
    #eeblog-page .eeblog-post__hero { padding: 4.5rem 0 4.2rem; }
    #eeblog-page .eeblog-list { padding: 4.5rem 0 6rem; }
    #eeblog-page .eeblog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #eeblog-page .eeblog-card__body { padding: 1.8rem 1.7rem; }
    #eeblog-page .eeblog-content { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    #eeblog-page *,
    #eeblog-page *::before,
    #eeblog-page *::after {
        transition: none !important;
    }
}