/* ─────────────────────────────────────────────────────────────────
   grid.css — Animated modules grid
   Depends on app.css being loaded first (uses its CSS variables).
   ───────────────────────────────────────────────────────────────── */

/* ── Layout ──────────────────────────────────────────────────────── */
.modules-grid {
    display: grid;
    /* columns / rows / gap set in JS from GRID_PARAMS */
    justify-content: center;
    margin-top: 48px;
    position: relative;
    z-index: 1;  /* above .categories-grid (z-index: 0) */
}

/* ── Tile ─────────────────────────────────────────────────────────── */
.mod-tile {
    position: relative;
    border-radius: 28px;                              /* matches app.css .card */
    border: 1px solid var(--border-subtle);
    background: var(--card-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    will-change: transform, filter, opacity;
}

/* ── Circle ───────────────────────────────────────────────────────── */
.mod-tile-circle {
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--orange);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

/* ── Banner ───────────────────────────────────────────────────────── */
.mod-tile-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(27, 27, 27, 0.84);             /* ~var(--surface-base) at 84% */
    padding: 7px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-2);
    text-align: center;
    text-transform: uppercase;
}

[data-theme="light"] .mod-tile-banner {
    background: rgba(255, 255, 255, 0.88);
}

/* ── Info bar + name (app-card style) ────────────────────────────── */
.mod-tile-info {
    padding: 0.6rem 0.75rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mod-tile-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ── Hover — gated on .anim-done so it only activates post-animation ─ */
.anim-done .mod-tile {
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.anim-done .mod-tile:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--border-strong);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.anim-done .mod-tile:hover .mod-tile-circle {
    transform: scale(1.1);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .modules-grid {
        --_tile: 128px;
        --_gap: 12px;
    }
}

@media (max-width: 760px) {
    .modules-grid {
        --_tile: 96px;
        --_gap: 10px;
    }
}