/* LISTAGEM */
section.w3-blog-lista,
section.w3-blog-post{
    --margin-topo-site: 0rem;
    --border-color: var(--base-200);
    --title-color: var(--base-950);
    --link-color: #005f73;

    margin: var(--margin-topo-site) 0 0; padding: 6rem 0;

    > .centralizador{ gap: calc(var(--gap) * 4); }

    /* LISTAGEM */
    .lista{
        .blog-header{
            padding: 1rem 0 3rem;

            h1{ 
                font-size: 1.8rem; font-weight: 600; text-transform: uppercase; color: var(--title-color); display: flex; align-items: center; gap: var(--gap);
            
                &::after{ content: ""; display: block; flex-grow: 1; height: 0.2rem; background-color: var(--border-color); }
            }
        }
        .post{
            margin-bottom: 4rem;

            &:not(.post-recente){ 
                padding-bottom: 4rem; border-bottom: .1rem solid var(--border-color);
            }

            .post-image{
                font-size: 0; aspect-ratio: 4/3; overflow: hidden; background-color: var(--base-950); border-radius: var(--radius);
                
                img{ 
                    width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--smooth); 
                    
                    &:hover{  opacity: .75; }
                }
            }
            .post-content{
                padding: 2rem 2rem 0 1rem;

                h3{ 
                    font-size: 1.4rem; font-weight: normal; color: var(--primary); text-transform: uppercase; line-height: 1; transition: var(--smooth); margin-bottom: 1.5rem; 
                    
                    &:hover{ color: var(--base-950); }
                }
                h2{ 
                    font-size: clamp(1.8rem, -0.5rem + 3.9063vw, 2.8rem); line-height: 1.1; font-weight: 600; color: var(--base-950); transition: var(--smooth);
                
                    &:hover{ color: var(--primary); }
                }
                time{ font-size: 1.4rem; margin-top: 1rem; color: var(--base-600); font-weight: 500; display: block; }
                p{ 
                    font-size: 1.4rem; line-height: 1.5; color: var(--base-800); margin: 2rem 0 0;
                    
                    &::before{ content: ""; display: block; width: 8rem; height: 0.1rem; background-color: var(--border-color); margin-bottom: 2rem; }
                }
                a{ margin-top: 2rem; }
            }
        }
        /* .post-recente{ border-bottom: 0; } */
        .pagination{
            .pagination-list{
                gap: calc(var(--gap) / 2);

                li{
                    a{
                        min-width: 4rem; line-height: 1;

                        &[aria-current="page"]{
                            background-color: var(--primary); color: var(--white);
                        }
                    }
                }
            }
        }
    }

    /* INFORMAÇÕES - ASIDE */
    .info{
        position: sticky; top: var(--margin-topo-site);

        .info-box{
            .blog-header{
                padding: 1rem 0 3rem;

                h3{ 
                    font-size: 1.8rem; font-weight: 600; text-transform: uppercase; color: var(--title-color); display: flex; align-items: center; gap: var(--gap); line-height: 1;
                
                    &::after{ content: ""; display: block; flex-grow: 1; height: 0.2rem; background-color: var(--border-color); }
                }
            }
            p{ font-size: 1.4rem; color: var(--base-950); text-align: justify; padding: 0 !important; }
            .social-network{
                display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--gap) / 2); margin-top: 1.4rem;

                h4{ width: 100%; opacity: 1; font-size: 1.1rem; font-weight: 600; text-transform: uppercase; color:var(--base-950); }
                a{ margin: 0; }
            }
            ul:not(.w3-social){
                li{ 
                    font-size: 1.4rem; line-height: 1; color: var(--base-400); margin-bottom: 2rem; padding-left: 2rem; position: relative;
                    
                    &::before{ content: ""; display: block; position: absolute; top: .5rem; left: 0; width: .5rem; height: .5rem; background-color: var(--primary); border-radius: 50%; }
                    
                    a{
                        transition: var(--smooth);

                        &:hover{ color: var(--base-950); }
                    }
                }

                &.tags-list{
                    display: flex; flex-wrap: wrap; gap: calc(var(--gap) / 2);

                    li{
                        margin-bottom: 0; padding-left: 0;

                        &::before{ content: none; }
                        a{ 
                            display: flex; align-items: center; justify-content: center; padding: 1rem; transition: var(--smooth); border: .1rem solid var(--border-color); border-radius: var(--radius);
                        
                            &:hover{ background-color: var(--primary); color: var(--white); }
                        }
                    }
                }
                &.recentes-list{
                    li{
                        padding-left: 0;

                        &::before{ content: none; }
                        a{ 
                            display: block; position: relative; overflow: hidden; border: .1rem solid var(--border-color); background-color: rgba(var(--base-950-rgb), 0.35); border-radius: var(--radius);

                            img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; }
                            .txt{
                                background-color: var(--white); padding: 2rem; transition: var(--smooth);

                                h4{ font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--base-950); opacity: 1; transition: var(--smooth); }
                                time{ font-size: 1.1rem; margin-top: .8rem; color: var(--base-400); font-weight: 400; display: block; line-height: 1; text-transform: uppercase; transition: var(--smooth); }

                                &:hover{ 
                                    background-color: rgba(var(--white-rgb), 0); 
                                    
                                    h4{ color: var(--white); }
                                    time{ color: var(--white); }
                                }
                            }
                        }

                        &:first-of-type{
                            a{
                                .txt{
                                    aspect-ratio: 16/10; background-color: rgba(var(--white-rgb), 0); display: flex; flex-direction: column; justify-content: flex-end; 
                                    
                                    h4{ color: var(--white); }
                                    time{ color: var(--white); }
                                }
                            }
                        }

                        &:not(:last-of-type){
                            margin-bottom: 1rem;
                        }
                    }
                    
                }
            }


            &:not(:last-child){ margin-bottom: 4rem; }
        }
    }

    /* POSTAGEM */
    .post {
        article {
            max-width: 80rem; margin: 0 auto; font-family: var(--font1), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: var(--base-950);
    
            h1 { font-size: 3.2rem; font-weight: 700; margin: 2rem 0 1rem; line-height: 1.2; }
            h2 { font-size: 2.4rem; font-weight: 600; margin: 1.5rem 0 0.75rem; line-height: 1.3; }
            h3 { font-size: 2rem; font-weight: 600; margin: 1.2rem 0 0.5rem; line-height: 1.3; }
            h4 { font-size: 1.8rem; font-weight: 500; margin: 1rem 0 0.5rem; line-height: 1.4; }
            h5 { font-size: 1.6rem; font-weight: 500; margin: 0.8rem 0 0.5rem; line-height: 1.4; }
            h6 { font-size: 1.4rem; font-weight: 500; margin: 0.8rem 0 0.5rem; text-transform: uppercase; line-height: 1.5; }
            p { font-size: 1.6rem; margin: 1rem 0; padding: 0 !important; }
            hr { border: none; border-top: 0.1rem solid var(--border-color); margin: 2rem 0; }
            time { font-size: 1.4rem; color: var(--base-500); display: block; margin: 0.5rem 0; }
            .share-title{ font-size: 1.1rem; color: var(--base-950); margin: 1rem 0 0; text-transform: uppercase; }
            .share-list{ margin-top: .5rem; padding-left: 0; gap: calc(var(--gap) / 2); }
            .author { font-size: 1.4rem; color: var(--base-500); margin: 0.5rem 0; }
            a {
                color: var(--link-color); text-decoration: underline; transition: var(--smooth);

                &:hover { color: var(--base-950); }
            }
            strong { font-weight: 700; }
            em { font-style: italic; }
            ul, ol {
                font-size: 1.6rem; margin: 1rem 0; padding-left: 2rem;
    
                li { margin-bottom: 0.5rem; }
            }
            ol { list-style: decimal; }
            ul { list-style: disc; }
            blockquote {
                font-size: 1.8rem; font-style: italic; margin: 2rem 0; padding-left: 1.5rem; border-left: 0.4rem solid var(--border-color); 

                p { margin: 0; }
                cite { display: block; font-size: 1.4rem; font-style: normal; margin-top: 0.5rem; color: var(--base-500); }
            }    
            table { 
                width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1.4rem; 
            
                caption { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem; text-align: left; }
                th, td { padding: 0.8rem; border: 0.1rem solid var(--border-color); text-align: left; }
                th { background: var(--base-100); font-weight: 600; }
            }
            pre { background: var(--base-100); padding: 1.5rem; border-radius: var(--radius); overflow-x: auto; margin: 1.5rem 0; font-size: 1.4rem; }
            code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 1.4rem; }
            figure { 
                margin: 2rem 0; 

                img { max-width: 100%; height: auto; border-radius: var(--radius); }
                figcaption { font-size: 1.4rem; color: var(--base-500); margin-top: 0.5rem; text-align: center; }
            }
            footer {
                margin-top: 2rem; padding-top: 1rem; border-top: 0.1rem solid var(--border-color); 

                p { font-size: 1.4rem; color: var(--base-500); }
                a { margin-right: 0.5rem; }
            }
        }
    }
    
    /* Visually Hidden (para figcaption oculta, se necessário) */
    .visually-hidden { position: absolute; width: 0.1rem; height: 0.1rem; padding: 0; margin: -0.1rem; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
}

@media screen and (min-width: 1280px) {
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    section.w3-blog-lista,
    section.w3-blog-post {
        > .centralizador {
            gap: calc(var(--gap) * 2);
        }
    }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    section.w3-blog-lista {
        .lista {
            .post {
                gap: 0;

                .post-content {
                    padding: 2rem 2rem 0 1rem;

                    p {
                        margin: 1rem 0 0; padding: 0 !important;

                        &::before { margin-bottom: 1rem; }
                    }
                }
            }
        }
    }
}
/* Breakpoint especial */
@media only screen and (min-width: 0px) and (max-width: 768px) {
    section.w3-blog-lista,
    section.w3-blog-post {
        .info {
            .info-box {
                padding: 0 1rem;

                ul {
                    .recentes-list {
                        li {
                            &:first-of-type {
                                a {
                                    .txt { aspect-ratio: 2 / .75; }
                                }
                            }
                        }
                    }
                }
            }
        }

        .post {
            article { padding: 0 1rem; }
        }
    }
}