/* ==========================================================================
   Blog Article Content — Breadcrumb + corpo do artigo
   Tipografia espelha os tokens Figma:
     - display-sm  (h2): 30px / 38px
     - display-xs  (h3): 24px / 32px
     - text-lg     (p) : 18px / 28px
   ========================================================================== */

.blog-article-content {
    background-color: var(--color-bg);
    padding: clamp(40px, calc(22.86px + 1.79vw), 56px) 0 clamp(64px, calc(36.57px + 2.86vw), 96px);
}

.blog-article-content__container {
    width: 100%;
    max-width: 944px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== Breadcrumbs ===== */

.blog-article-content__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    flex-wrap: wrap;
}

.blog-article-content__breadcrumb-link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #535862;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.blog-article-content__breadcrumb-link:hover {
    color: #252B37;
}

.blog-article-content__breadcrumb-sep {
    flex-shrink: 0;
}

.blog-article-content__breadcrumb-current {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #252B37;
}

/* ===== Corpo do artigo ===== */

.blog-article-content__body {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Espaçamentos entre blocos seguem o Figma:
   - h2 com 20px de respiro abaixo
   - h3 com 32px acima e 16px abaixo
   - p  com 18px entre si
   - figure com 48px acima e abaixo */
.blog-article-content__h2 {
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(24px, calc(18.86px + 0.5vw), 30px);
    line-height: 1.27;
    color: #181D27;
    letter-spacing: -0.01em;
}

.blog-article-content__h3 {
    margin: 32px 0 16px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(20px, calc(16.57px + 0.34vw), 24px);
    line-height: 1.33;
    color: #181D27;
    letter-spacing: -0.01em;
}

.blog-article-content__p {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: clamp(16px, calc(14.86px + 0.11vw), 18px);
    font-weight: 400;
    line-height: 1.56;
    color: #535862;
}

.blog-article-content__p:last-child {
    margin-bottom: 0;
}

/* Figure (imagem com legenda) */
.blog-article-content__figure {
    margin: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-article-content__figure img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.blog-article-content__caption {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.43;
    color: #535862;
}

.blog-article-content__caption a {
    color: #535862;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.blog-article-content__caption a:hover {
    color: #252B37;
}

/* ==========================================================================
   Corpo vindo do WordPress (HTML cru) — aplica a mesma tipografia aos
   elementos nativos (p, h2, h3, ul, img, etc.) dentro de --wp.
   ========================================================================== */
.blog-article-content__body--wp { display: block; }

.blog-article-content__body--wp > *:first-child { margin-top: 0; }
.blog-article-content__body--wp > *:last-child  { margin-bottom: 0; }

.blog-article-content__body--wp h2 {
    margin: 40px 0 20px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(24px, calc(18.86px + 0.5vw), 30px);
    line-height: 1.27;
    color: #181D27;
    letter-spacing: -0.01em;
}

.blog-article-content__body--wp h3 {
    margin: 32px 0 16px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(20px, calc(16.57px + 0.34vw), 24px);
    line-height: 1.33;
    color: #181D27;
    letter-spacing: -0.01em;
}

.blog-article-content__body--wp h4 {
    margin: 28px 0 14px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.35;
    color: #181D27;
}

.blog-article-content__body--wp p,
.blog-article-content__body--wp li {
    font-family: var(--font-body);
    font-size: clamp(16px, calc(14.86px + 0.11vw), 18px);
    font-weight: 400;
    line-height: 1.56;
    color: #535862;
}

.blog-article-content__body--wp p { margin: 0 0 18px; }

.blog-article-content__body--wp ul,
.blog-article-content__body--wp ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.blog-article-content__body--wp li { margin: 0 0 8px; }

.blog-article-content__body--wp a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.blog-article-content__body--wp a:hover { color: var(--color-dark); }

.blog-article-content__body--wp strong { font-weight: 600; color: #181D27; }

.blog-article-content__body--wp img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 32px 0;
}

.blog-article-content__body--wp figure { margin: 40px 0; }
.blog-article-content__body--wp figure img { margin: 0; }

.blog-article-content__body--wp figcaption {
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.43;
    color: #535862;
    text-align: center;
}

.blog-article-content__body--wp blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--color-primary);
    color: #414651;
    font-style: italic;
}

/* ===== Mobile ===== */

@media (max-width: 768px) {
    .blog-article-content {
        padding: 32px 0 56px;
    }

    .blog-article-content__container {
        padding: 0 24px;
    }

    .blog-article-content__figure img {
        height: clamp(220px, 55vw, 360px);
    }

    .blog-article-content__h3 {
        margin-top: 24px;
    }
}