/* Variáveis da Página Index */
:root {
    /* Cores */
    --index-bg: #fff;
    --index-text: #333;
    --index-text-light: #666;
    --index-link: #333;
    --index-link-hover: #1a237e;
    --index-meta: #666;
    --index-pagination-bg: #f5f5f5;
    --index-pagination-text: #333;
    --index-pagination-active-bg: #1a237e;
    --index-pagination-active-text: #fff;
    --index-pagination-hover-bg: #e0e0e0;
    
    /* Tamanhos */
    --index-container-width: 1200px;
    --index-title-size: 18px;
    --index-meta-size: 14px;
    --index-excerpt-size: 14px;
    --index-thumbnail-ratio: 60%;
    
    /* Espaçamentos */
    --index-container-padding: 0 20px;
    --index-grid-gap: 30px;
    --index-card-padding: 20px;
    --index-title-margin: 0 0 10px 0;
    --index-meta-gap: 15px;
    --index-meta-margin: 0 0 10px 0;
    --index-excerpt-margin: 0 0 15px 0;
    --index-pagination-margin: 40px 0;
    --index-pagination-gap: 10px;
    
    /* Sombras */
    --index-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    /* Bordas */
    --index-card-radius: 10px;
    --index-pagination-radius: 50%;
}

/* ---------------------------
   Página Index
---------------------------- */
.index-container {
    max-width: var(--index-container-width);
    margin: 0 auto;
    padding: var(--index-container-padding);
}

.index-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--index-grid-gap);
    margin-bottom: 40px;
}

.index-post-card {
    background: var(--index-bg);
    border-radius: var(--index-card-radius);
    overflow: hidden;
    box-shadow: var(--index-card-shadow);
    transition: transform 0.3s ease;
}

.index-post-card:hover {
    transform: translateY(-5px);
}

.index-post-image {
    position: relative;
    padding-top: var(--index-thumbnail-ratio);
    overflow: hidden;
}

.index-post-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.index-post-card:hover .index-post-image img {
    transform: scale(1.05);
}

.index-post-content {
    padding: var(--index-card-padding);
}

.index-post-title {
    font-size: var(--index-title-size);
    margin: var(--index-title-margin);
    line-height: 1.4;
}

.index-post-title a {
    color: var(--index-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.index-post-title a:hover {
    color: var(--index-link-hover);
}

.index-post-meta {
    display: flex;
    gap: var(--index-meta-gap);
    font-size: var(--index-meta-size);
    color: var(--index-meta);
    margin: var(--index-meta-margin);
}

.index-post-excerpt {
    font-size: var(--index-excerpt-size);
    color: var(--index-text-light);
    line-height: 1.6;
    margin: var(--index-excerpt-margin);
}

/* Paginação */
.index-pagination {
    display: flex;
    justify-content: center;
    gap: var(--index-pagination-gap);
    margin: var(--index-pagination-margin);
}

.index-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--index-pagination-bg);
    color: var(--index-pagination-text);
    text-decoration: none;
    border-radius: var(--index-pagination-radius);
    transition: all 0.3s ease;
}

.index-pagination .page-numbers.current {
    background-color: var(--index-pagination-active-bg);
    color: var(--index-pagination-active-text);
}

.index-pagination .page-numbers:hover:not(.current) {
    background-color: var(--index-pagination-hover-bg);
}

/* Responsividade */
@media screen and (max-width: 768px) {
    .index-posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .index-post-title {
        font-size: 16px;
    }

    .index-container {
        padding: 0 15px;
    }
}