/**
 * TurboJet - Estilos para Grid de Posts
 * @version 1.8.0
 */

.tj-grid-posts-wrapper { width: 100%; margin: 20px 0; }
.tj-grid-content-area { position: relative; transition: opacity 0.3s; }
.tj-grid-content-area.loading { opacity: 0.5; }
.tj-grid-content-area.loading::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.5); z-index: 10;
}

.tj-posts-grid-container { gap: var(--tj-grid-gap, 20px); }
.tj-posts-grid-container.layout-grid { display: grid; grid-template-columns: repeat(var(--tj-grid-cols, 3), 1fr); }
.tj-posts-grid-container.layout-masonry { display: block; column-count: var(--tj-grid-cols, 3); }
.tj-posts-grid-container.layout-masonry .tj-post-card { display: inline-block; width: 100%; margin-bottom: var(--tj-grid-gap, 20px); break-inside: avoid; }

.tj-post-card {
    display: flex; flex-direction: column; overflow: hidden;
    position: relative; /* Necessário para o overlay */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeitos de Hover */
.tj-post-card.hover-effect-grow:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.tj-post-card.hover-effect-shrink:hover { transform: scale(0.95); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }

/* Efeito Overlay */
.tj-post-card.hover-effect-overlay .tj-card-image-link::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--tj-card-overlay-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.tj-post-card.hover-effect-overlay:hover .tj-card-image-link::after { opacity: 1; }

.tj-card-image-link { display: block; position: relative; }
.tj-card-image { height: 200px; background-size: cover; background-position: center; transition: transform 0.3s ease; }
.tj-post-card.hover-effect-grow:hover .tj-card-image { transform: scale(1.05); }

.tj-card-content { display: flex; flex-direction: column; flex-grow: 1; position: relative; z-index: 2; background: var(--card-content-bg, transparent); }
.tj-card-title { margin: 0 0 10px 0; font-weight: 700; }
.tj-card-title a { text-decoration: none; transition: color 0.2s ease; }
.tj-card-meta { margin-bottom: 15px; font-style: italic; }
.tj-meta-separator { margin: 0 8px; }
.tj-card-excerpt { margin-bottom: 20px; line-height: 1.6; flex-grow: 1; }
.tj-card-read-more { margin-top: auto; }

/* PAGINAÇÃO AJAX */
.tj-pagination-container { margin-top: 40px; text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; }
.tj-pagination-container button {
    background-color: #fff; color: #333; border: 1px solid #ddd;
    padding: 8px 14px; font-size: 1em; border-radius: 4px; cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    -webkit-appearance: none;
}
.tj-pagination-container button:hover { background-color: #f0f0f0; border-color: #ccc; }
.tj-pagination-container button.active { background-color: #2271b1; color: #fff; border-color: #2271b1; cursor: default; }
.tj-pagination-container button:disabled { opacity: 0.5; cursor: not-allowed; background-color: #f9f9f9; }

/* RESPONSIVIDADE */
@media (max-width: 992px) {
    .tj-posts-grid-container.layout-grid { grid-template-columns: repeat(2, 1fr); }
    .tj-posts-grid-container.layout-masonry { column-count: 2; }
}
@media (max-width: 768px) {
    .tj-posts-grid-container.layout-grid { grid-template-columns: 1fr; }
    .tj-posts-grid-container.layout-masonry { column-count: 1; }
}