/* ════════════════════════════════════════
   SOFTWARE PAGE — project/platform table
   Matches site.css tokens and grid aesthetic
════════════════════════════════════════ */

.sw-table {
    border: 1px solid var(--light-border);
    border-bottom: none;
    background: var(--light-border);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Each row is a 7-column grid: project + 6 link columns */
.sw-row {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    background: var(--light-border);
    gap: 1px;
}

.sw-cell {
    background: var(--light-surface);
    padding: 18px 16px;
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    transition: background 0.15s;
}

/* Header row */
.sw-head .sw-cell {
    background: var(--light-bg);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-light);
}

/* Project name cell */
.sw-project {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.sw-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--light-text);
    letter-spacing: 0.02em;
}

.sw-tag {
    font-size: 0.7rem;
    color: var(--light-muted);
    line-height: 1.5;
}

/* Link buttons inside cells */
.sw-link {
    display: inline-flex;
    align-items: center;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--accent-light);
    border: 1px solid var(--light-border);
    padding: 5px 12px;
    background: var(--light-bg);
    transition: all 0.15s;
    white-space: nowrap;
}

.sw-link:hover {
    border-color: var(--accent-light);
    background: var(--accent-light);
    color: #fff;
}

.sw-na {
    color: var(--light-border);
    font-size: 0.95rem;
    user-select: none;
}

.sw-soon {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--light-muted);
    border: 1px dashed var(--light-border);
    padding: 4px 9px;
    user-select: none;
}

.sw-row:not(.sw-head) .sw-cell:hover { background: var(--light-bg); }

/* ── RESPONSIVE: collapse to stacked cards on narrow screens ── */
@media (max-width: 860px) {
    .sw-table {
        border: none;
        background: transparent;
        gap: 16px;
    }

    .sw-head { display: none; }

    .sw-row {
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--light-border);
        background: var(--light-border);
        gap: 1px;
    }

    /* Project name spans full width as a card header */
    .sw-project {
        grid-column: 1 / -1;
        background: var(--light-bg);
        padding: 16px 18px;
    }

    /* Each link cell shows its platform label (from data-label) */
    .sw-cell[data-label]::before {
        content: attr(data-label);
        font-family: 'Syne', sans-serif;
        font-size: 0.55rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--light-muted);
        margin-right: auto;
    }

    .sw-cell[data-label] {
        justify-content: space-between;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .sw-row { grid-template-columns: 1fr; }
}