/*
|--------------------------------------------------------------------------
| PUBLICAÇÃO.PHP
|--------------------------------------------------------------------------
| CSS EXCLUSIVO DA PÁGINA DO ARTIGO.
| NÃO altera os cards do index.php, blog.php ou "Outros conteúdos".
|--------------------------------------------------------------------------
*/

/* HERO */
.article-page .article-hero {
    padding: 112px 0 42px;
    background: var(--navy);
    color: #fff;
}

.article-page .article-hero .shell {
    min-width: 0;
}

.article-page .article-breadcrumb {
    margin-bottom: 20px;
}

.article-page .article-hero h1 {
    max-width: 1080px;
    margin: 12px 0 17px;
    font-size: clamp(2.45rem, 3.4vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -.035em;

    /* O título só muda de linha entre palavras */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}

.article-page .article-deck {
    max-width: 760px;
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.62;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
}

.article-page .article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 13px;
    margin-top: 18px;
}


/* ============================================================
   CAPA
   ============================================================
   Na publicação queremos uma imagem grande e preenchida.
   Diferente dos cards, aqui usamos 16:9 + cover.
   ============================================================ */

.article-page .article-cover {
    /* No desktop, a capa fica centralizada e não ocupa a tela inteira. */
    width: min(960px, calc(100% - 64px));
    max-width: 960px;
    height: auto;
    aspect-ratio: auto;
    margin: 20px auto 0;
    border-radius: 10px;
    overflow: hidden;
}

.article-page .article-cover img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    margin: 0;
}


/* ============================================================
   LAYOUT DO ARTIGO
   ============================================================ */

.article-page .article-layout {
    display: grid;
    grid-template-columns: 100px minmax(0, 760px) minmax(230px, 1fr);
    gap: 42px;
    align-items: start;
    padding: 68px 0 105px;
}

.article-page .article-layout > *,
.article-page .article-main,
.article-page .article-content {
    min-width: 0;
    max-width: 100%;
}

.article-page .article-main,
.article-page .article-content,
.article-page .article-content > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}


/* COMPARTILHAR */

.article-page .article-share {
    position: sticky;
    top: 100px;
}

.article-page .article-share > span {
    display: block;
    margin-bottom: 11px;
}

.article-page .share-buttons {
    flex-wrap: wrap;
}


/* ============================================================
   TEXTO
   ============================================================ */

.article-page .article-main {
    width: 100%;
}

.article-page .article-content {
    width: 100%;
    overflow: visible;
    color: #354550;
    font-size: 1rem;
    line-height: 1.78;

    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.article-page .article-content > p:first-child {
    color: var(--navy);
    font-size: 1.16rem;
    line-height: 1.7;
}

.article-page .article-content p {
    max-width: 100%;
    margin: 0 0 1.4em;
    text-align: justify !important;
    text-align-last: left;
    text-justify: inter-word;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none !important;
    text-wrap: pretty;
}

.article-page .article-content h1,
.article-page .article-content h2,
.article-page .article-content h3,
.article-page .article-content h4,
.article-page .article-content h5,
.article-page .article-content h6 {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none !important;
    text-wrap: balance;
}

.article-page .article-content h2 {
    margin: 1.8em 0 .62em;
    color: var(--navy);
    font-size: 1.95rem;
    line-height: 1.16;
    letter-spacing: -.025em;
}

.article-page .article-content h3 {
    margin: 1.55em 0 .55em;
    color: var(--navy);
    font-size: 1.4rem;
    line-height: 1.22;
}

.article-page .article-content ul,
.article-page .article-content ol {
    max-width: 100%;
    margin: 0 0 1.4em;
    padding-left: 24px;
}

.article-page .article-content li {
    margin-bottom: .45em;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none !important;
}


/* IMAGENS DENTRO DA PUBLICAÇÃO */

.article-page .article-content img {
    display: block;
    width: auto;
    max-width: 100% !important;
    height: auto !important;
    margin: 30px auto;
    border-radius: 10px;
}

.article-page .article-content figure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0;
}

.article-page .article-content figure img {
    margin: 0 auto;
}

.article-page .article-content figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}


/* VÍDEOS / EMBEDS */

.article-page .article-content iframe,
.article-page .article-content video,
.article-page .article-content embed,
.article-page .article-content object {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    margin: 28px 0;
    border: 0;
}


/* TABELAS */

.article-page .article-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
}

.article-page .article-content th,
.article-page .article-content td {
    min-width: 120px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}


/* LINKS / CÓDIGO */

.article-page .article-content a {
    /* URLs extensas não podem aumentar a largura da página */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
}

.article-page .article-content pre {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.article-page .article-content code {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* CITAÇÃO */

.article-page .article-content blockquote {
    max-width: 100%;
    margin: 1.8em 0;
    padding: 21px 24px;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none !important;
}


/* AVISO */

.article-page .article-note {
    display: grid;
    gap: 4px;
    margin-top: 32px;
    padding: 20px;
    line-height: 1.62;
}


/* SIDEBAR */

.article-page .article-sidebar {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 18px;
}

.article-page .article-cta {
    overflow: hidden;
}

.article-page .article-cta .button {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
}

.article-page .article-info-card p {
    margin-bottom: 19px;
}

.article-page .article-cta .button svg {
    flex: 0 0 auto;
    margin-left: auto;
}

/* MODAL CONTEXTUAL DE CONVERSÃO */
.article-conversion-modal[hidden] { display: none; }
.article-conversion-modal { position: fixed; z-index: 500; inset: 0; display: grid; padding: 22px; place-items: center; }
.article-conversion-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(4, 18, 29, .72); border: 0; backdrop-filter: blur(8px); }
.article-conversion-dialog { position: relative; width: min(880px, 100%); max-height: calc(100vh - 44px); overflow: auto; background: #fff; border-radius: 26px; box-shadow: 0 30px 100px rgba(3, 16, 26, .38); }
.article-conversion-close { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 38px; height: 38px; padding: 0; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; place-items: center; font-size: 1.35rem; line-height: 1; }
.article-conversion-copy { padding: 38px; color: #fff; background: linear-gradient(145deg, #0b243a 0%, #123c56 58%, #1c607d 100%); }
.article-conversion-region { display: inline-flex; margin-bottom: 13px; padding: 6px 10px; color: #123c56; background: #dcecf3; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.article-conversion-copy > h2 { max-width: 650px; margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.article-conversion-copy > p { max-width: 680px; margin: 14px 0 22px; color: #c2d7e1; font-size: .9rem; line-height: 1.65; }
.article-conversion-copy > p strong { color: #fff; }
.article-conversion-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.article-conversion-actions a { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; color: #0b243a; background: #fff; border: 1px solid #fff; border-radius: 12px; font-size: .73rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.article-conversion-actions a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.article-conversion-actions a svg { width: 17px; flex: 0 0 17px; }
.article-conversion-help { margin: 13px 0 0 !important; color: #c9dce5 !important; font-size: .68rem !important; }
.article-conversion-legal { display: block; margin-top: 13px; padding-top: 13px; color: #91afbd; border-top: 1px solid rgba(255,255,255,.15); font-size: .59rem; line-height: 1.5; }
.article-conversion-open { overflow: hidden; }


/* ============================================================
   NOTEBOOK
   ============================================================ */

@media (max-width: 1050px) {

    .article-page .article-layout {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 32px;
    }

    .article-page .article-sidebar {
        display: none;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 820px) {

    .article-page .article-hero {
        padding: 106px 0 42px;
    }

    .article-page .article-breadcrumb {
        margin-bottom: 23px;
    }

    .article-page .article-hero h1 {
        margin: 12px 0 18px;
        font-size: clamp(2.25rem, 8.5vw, 3.3rem);
        line-height: 1.04;
        letter-spacing: -.035em;
    }

    .article-page .article-deck {
        font-size: .99rem;
        line-height: 1.58;
    }

    .article-page .article-meta {
        margin-top: 20px;
        gap: 6px 10px;
    }

    .article-page .article-cover {
        width: calc(100% - 32px);
        aspect-ratio: 16 / 9;
        margin-top: 18px;
        border-radius: 12px;
    }

    .article-page .article-layout {
        width: calc(100% - 32px);
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 40px 0 72px;
    }

    .article-page .article-share {
        position: static;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .article-page .article-share > span {
        margin: 0;
    }

    .article-page .article-content {
        width: 100%;
        font-size: 1rem;
        line-height: 1.75;
    }

    .article-page .article-content > p:first-child {
        font-size: 1.1rem;
    }

    .article-page .article-content h2 {
        font-size: 1.68rem;
        line-height: 1.18;
    }

    .article-page .article-content h3 {
        font-size: 1.34rem;
    }
    
    .article-page .article-cover {
    width: calc(100% - 24px);
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 16px auto 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.article-page .article-cover img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center;
    margin: 0;
    border-radius: 10px;
}
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 560px) {

    .article-conversion-modal { padding: 10px; align-items: end; }
    .article-conversion-dialog { width: 100%; max-height: calc(100vh - 20px); border-radius: 21px; }
    .article-conversion-copy { padding: 29px 18px 20px; }
    .article-conversion-copy > h2 { padding-right: 28px; font-size: 1.75rem; }
    .article-conversion-copy > p { margin: 11px 0 16px; font-size: .78rem; }
    .article-conversion-actions { grid-template-columns: 1fr; }
    .article-conversion-actions a { min-height: 50px; }

    .article-page .article-hero {
        padding: 98px 0 32px;
    }

    .article-page .article-breadcrumb {
        margin-bottom: 18px;
        font-size: .64rem;
    }

    .article-page .article-category {
        font-size: .6rem;
    }

    .article-page .article-hero h1 {
        margin: 10px 0 16px;
        font-size: clamp(1.9rem, 8.8vw, 2.55rem);
        line-height: 1.07;
        letter-spacing: -.025em;

        /* nunca divide uma palavra do título */
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .article-page .article-deck {
        font-size: .94rem;
        line-height: 1.55;
    }

    .article-page .article-meta {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px 8px;
        font-size: .63rem;
    }

    .article-page .article-meta-separator {
        display: none;
    }

    /*
     * No celular usamos uma capa um pouco mais alta.
     * Continua preenchida, mas corta menos nas laterais.
     */
    .article-page .article-cover {
        width: calc(100% - 24px);
        aspect-ratio: 16 / 10;
        margin-top: 12px;
        border-radius: 10px;
    }

    .article-page .article-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .article-page .article-layout {
        width: calc(100% - 32px);
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 32px 0 58px;
    }

    .article-page .article-content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: .97rem;
        line-height: 1.74;
        overflow: visible;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .article-page .article-content > p:first-child {
        font-size: 1.04rem;
        line-height: 1.68;
    }

    .article-page .article-content p {
        text-align: left !important;
        text-align-last: auto;
        text-justify: auto;
    }

    .article-page .article-content h2 {
        margin-top: 1.6em;
        font-size: 1.48rem;
        line-height: 1.2;
    }

    .article-page .article-content h3 {
        font-size: 1.23rem;
        line-height: 1.24;
    }

    .article-page .article-content ul,
    .article-page .article-content ol {
        padding-left: 21px;
    }

    .article-page .article-content blockquote {
        margin: 1.45em 0;
        padding: 16px 17px;
    }

    .article-page .article-note {
        margin-top: 25px;
        padding: 16px;
        font-size: .79rem;
    }

    .article-page ~ .related-section {
        padding: 55px 0;
    }

    .article-page ~ .related-section .related-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .article-page ~ .related-section .related-heading h2 {
        font-size: 2.05rem;
    }
}