/* Category Grid — front end */
.cg-grid-wrap { --cg-gap: 18px; --cg-accent: #092f28; }
.cg-grid {
    display: grid;
    grid-template-columns: repeat(var(--cg-cols, 4), minmax(0, 1fr));
    gap: var(--cg-gap);
}
@media (max-width: 1024px) {
    .cg-grid { grid-template-columns: repeat(var(--cg-cols-t, 3), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .cg-grid { grid-template-columns: repeat(var(--cg-cols-m, 2), minmax(0, 1fr)); gap: 12px; }
}

/* tile */
.cg-tile {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    overflow: hidden;
    background: #f2efe8;
    transition: transform .18s ease, box-shadow .18s ease;
}
.cg-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.14); }

/* media / aspect */
.cg-media { position: relative; display: block; width: 100%; overflow: hidden; background: #e7e2d6; }
.cg-ar-1-1 { aspect-ratio: 1 / 1; }
.cg-ar-4-3 { aspect-ratio: 4 / 3; }
.cg-ar-3-2 { aspect-ratio: 3 / 2; }
.cg-ar-16-9 { aspect-ratio: 16 / 9; }
.cg-media .cg-img,
.cg-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cg-tile:hover .cg-media img { transform: scale(1.05); }

/* placeholder */
.cg-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font: 600 clamp(28px, 5vw, 52px)/1 Georgia, "Times New Roman", serif;
    color: #fff; letter-spacing: 1px;
    background: var(--cg-accent);
}

/* overlay title */
.cg-pos-overlay .cg-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
}
.cg-pos-overlay .cg-overlay-in { padding: 14px 14px 12px; width: 100%; }
.cg-pos-overlay .cg-title { display: block; color: #fff; font: 600 16px/1.25 Georgia, "Times New Roman", serif; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.cg-pos-overlay .cg-count { display: block; color: #f2ede2; font-size: 11px; margin-top: 3px; opacity: .9; }

/* below title */
.cg-pos-below .cg-tile { background: transparent; }
.cg-pos-below .cg-caption { display: block; padding: 10px 2px 4px; }
.cg-pos-below .cg-title { display: block; color: #1d2327; font: 600 15px/1.3 Georgia, "Times New Roman", serif; }
.cg-pos-below .cg-count { display: block; color: #6b6f76; font-size: 11.5px; margin-top: 2px; }
.cg-pos-below .cg-media { border-radius: 10px; }

/* pagination */
.cg-pagination { margin-top: 26px; }
.cg-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.cg-pagination a, .cg-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1px solid #dcdcde; border-radius: 8px;
    text-decoration: none; color: #1d2327; font-size: 14px; background: #fff;
}
.cg-pagination a:hover { border-color: var(--cg-accent); color: var(--cg-accent); }
.cg-pagination .current { background: var(--cg-accent); border-color: var(--cg-accent); color: #fff; }
.cg-pagination .dots { border: none; background: none; }

.cg-empty { color: #6b6f76; font-style: italic; }