/**
 * People Grid Stat Block Styles
 */

.people-grid-stat {
    --pgs-columns: 5;
    --pgs-rows: 5;
    --pgs-highlight-color: #D22D1F;
    --pgs-default-color: #E5E5E5;
    --pgs-icon-size: 40px;
}

.people-grid-stat__grid {
    display: grid;
    grid-template-columns: repeat(var(--pgs-columns), auto);
    gap: 20px;
    width: 100%;
}

.people-grid-stat__icon {
    width: var(--pgs-icon-size);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    margin: 0 auto;
}

.people-grid-stat__icon svg {
    width: 100%;
    height: auto;
    fill: var(--pgs-default-color);
    transition: fill 0.3s ease;
}

/* Highlighted icons */
.people-grid-stat__icon--highlighted svg {
    fill: var(--pgs-highlight-color);
}

/* Hover effect (optional enhancement) */
.people-grid-stat__icon:hover {
    transform: scale(1.1);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .people-grid-stat {
        --pgs-icon-size: 30px;
    }
}

@media (max-width: 480px) {
    .people-grid-stat {
        --pgs-icon-size: 24px;
    }
}

/* ========================================
   EDITOR STYLES
   ======================================== */
.block-editor-block-list__layout .people-grid-stat {
    padding: 1rem;
}

/* Preview placeholder when no settings */
.people-grid-stat-placeholder {
    background: #f5f5f5;
    border: 2px dashed #ccc;
    padding: 2rem;
    text-align: center;
    color: #666;
}