/* --- GRID POSTAVKE --- */
.cepg-grid { 
    display: grid; 
    gap: 30px; 
}
.cepg-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.cepg-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.cepg-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* --- KARTICA --- */
.cepg-card { 
    background: #fff; 
    border-radius: 0 0 12px 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    border-top: 5px solid #005b99; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
} 
.cepg-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
}

/* --- SLIKA --- */
.cepg-img { width: 100%; height: 230px; overflow: hidden; background: #f4f4f4; }
.cepg-img img { width: 100%; height: 100% !important; object-fit: cover; transition: 0.6s ease; }
.cepg-card:hover .cepg-img img { transform: scale(1.08); }

/* --- SADRŽAJ --- */
.cepg-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; } 
.cepg-text-top { flex-grow: 1; }
.cepg-title { font-size: 18px; margin: 0 0 12px 0; line-height: 1.4; font-weight: 700; }
.cepg-title a { color: #1a1a1a !important; text-decoration: none; transition: 0.3s; }
.cepg-card:hover .cepg-title a { color: #005b99 !important; }

.cepg-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cepg-date-wrapper { margin-top: auto; padding-top: 15px; border-top: 1px solid #eee; }
.cepg-date { font-size: 12px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* --- BADGE --- */
.cepg-badge { 
    position: absolute; top: 15px; left: 15px; padding: 6px 12px; 
    font-size: 10px; font-weight: 800; border-radius: 4px; z-index: 5;
    color: #fff; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.badge-novosti { background: #3b82f6; }
.badge-natjecaji { background: #16a34a; }
.badge-sjednice-gradskog-vijeca { background: #1e40af; }
.badge-sjednice-gv-2009-2013 { background: #6366f1; }
.badge-sjednice-gv-2017-2021 { background: #4f46e5; }
.badge-sjednice-gv-2021-2025 { background: #4338ca; }
.badge-sjednice-gv-2025-2029 { background: #3730a3; }
.badge-sjednice-gv-arhiv { background: #64748b; }
.badge-obavijesti { background: #f59e0b; }
.badge-javna-nabava { background: #059669; }
.badge-eu-fondovi { background: #0891b2; }
.badge-glasnik { background: #8b5cf6; }
.badge-otvorena-savjetovanja { background: #0d9488; }
.badge-zatvorena-savjetovanja { background: #94a3b8; }
.badge-razno { background: #78716c; }
.badge-koronavirus { background: #ef4444; }
.badge-vijesti { background: #2563eb; }
.badge-arhiva { background: #71717a; }
.badge-nekategorizirano-hr { background: #a1a1aa; }
.badge-uncategorized { background: #a1a1aa; }

/* --- PAGINACIJA --- */
.cepg-pagination { 
    margin: 50px 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px;
    flex-wrap: wrap;
}

.cepg-page,
.cepg-prev,
.cepg-next { 
    position: relative;
    width: 42px; 
    height: 42px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    color: #333; 
    font-weight: 600; 
    font-size: 15px;
    border-radius: 0;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    transition: all 0.25s ease;
    z-index: 10;
}
.cepg-page:hover,
.cepg-prev:hover,
.cepg-next:hover {
    border-color: #005b99;
    color: #005b99;
    background: #f0f7ff;
}
.cepg-page.active {
    background: #005b99;
    color: #fff;
    border-color: #005b99;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,91,153,0.3);
}
.cepg-prev,
.cepg-next {
    font-size: 18px;
    color: #555;
}
.cepg-dots { 
    color: #aaa; 
    font-size: 14px; 
    letter-spacing: 2px;
    user-select: none;
    width: 30px;
    text-align: center;
}

/* --- RESPONZIVNOST --- */
@media (max-width: 1024px) {
    .cepg-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .cepg-grid { grid-template-columns: 1fr !important; }
    .cepg-pagination { gap: 6px; }
    .cepg-page,
    .cepg-prev,
    .cepg-next { width: 36px; height: 36px; font-size: 13px; }
    .cepg-dots { width: 24px; font-size: 12px; }
}