body {
    background-color: #f9eec0;
}

/* Container geral */
.blog-wrap {
    max-width: 680px;
    margin: auto;
    padding: 16px;
    font-family: "Almendra Display", serif;
}

/* Grade em colunas (masonry simples) */
.masonry {
    column-count: 2;
    column-gap: 20px;
}

.back-link {
    margin-bottom: 20px;
    text-align: left;
}

.back-link a {
    color: #f752a9;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
}

.back-link a:hover {
    color: #f998bf;
    text-decoration: none;
}

.post {
    font-family: "Victor Mono", monospace;
    display: inline-block;
    margin: 0 0 15px 0;
    border-radius: 10px;
    padding: 13px;
    width: 100%;
    border: 0px;
    background-color: #cffff4;
    box-shadow: -3px 3px 0px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    box-sizing: border-box;
}

.data {
    font-size: 10px;
    margin-bottom: 8px;
    text-decoration: underline;
}

.texto {
    font-size: 13px;
    word-wrap: break-word; 
    font-family: "Victor Mono", monospace;
}
.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    margin-bottom: 80px;
    font-family: "Victor Mono", monospace;
    font-size: 16px;
    column-span: all;
}

.paginacao span {
    margin: 0 10px;
}

.prev, .next {
    cursor: pointer;
    user-select: none;
}

.prev:hover, .next:hover {
    text-decoration: underline;
}


/* MOBILE - até 700px */
@media (max-width: 700px) {
    .blog-wrap {
        max-width: 100%;
        padding: 10px;
    }
    
    .masonry {
        column-count: 1 !important; /* Força 1 coluna */
        column-gap: 0;
        display: block;
        width: 100%;
    }
    
    .post {
        width: 100%;
        max-width: 100%;
        margin: 0 0 15px 0;
        display: block; /* Garante que seja bloco */
        float: none; /* Remove qualquer float */
    }
}

/* DESKTOP MÉDIO - 701px a 1023px */
@media (min-width: 701px) and (max-width: 1023px) {
    .blog-wrap {
        max-width: 680px;
    }
    .masonry {
        column-count: 2;
    }
}

/* DESKTOP GRANDE - acima de 1024px */
@media (min-width: 1024px) {
    .blog-wrap {
        max-width: 1000px;
    }
    .masonry {
        column-count: 3;
    }
}