/* Instagram Grid Maker - tool-specific styles on top of the shared
 * image-tools.css (dropzone + controls). */

.igm-preview-card {
    margin: 18px 0 4px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 18px 20px;
}
.igm-preview-head { margin-bottom: 12px; }
.igm-preview-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: #1f2937; }
.igm-preview-hint { margin: 0; font-size: 0.85rem; color: #64748b; }

/* The profile grid: three columns with Instagram's thin gap. */
.igm-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 3px;
    max-width: 420px;
    background: #fff;
}
.igm-tile {
    position: relative;
    aspect-ratio: var(--ratio, 4 / 5);
    background: #eef0f3;
    overflow: hidden;
    min-width: 0;
}
.igm-tile canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.igm-tile.is-empty { background: linear-gradient(135deg, #fdf2f8 0%, #ede9fe 100%); }
.igm-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
}

/* Carousel: one horizontally scrolling strip of equal slides. */
.igm-grid.is-carousel {
    display: flex;
    max-width: none;
    overflow-x: auto;
    padding-bottom: 6px;
}
.igm-grid.is-carousel .igm-tile { flex: 0 0 150px; }

.igm-status { margin: 12px 0 0; font-size: 0.85rem; color: #64748b; }

@media (max-width: 640px) {
    .igm-grid { max-width: 100%; }
    .igm-grid.is-carousel .igm-tile { flex-basis: 120px; }
}