/* Portal responsive grid system — replaces MudGrid/MudItem */

.portal-grid {
    display: grid;
    gap: 1rem;
}

.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }

/* Stack helpers (flex) */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-row { display: flex; flex-direction: row; gap: 1rem; align-items: center; }
.stack-row-wrap { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; align-items: center; }
.spacer { flex-grow: 1; }

/* Alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Container */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Tablet landscape */
@media (max-width: 1280px) {
    .cols-4 { grid-template-columns: repeat(2, 1fr); }
    .cols-3 { grid-template-columns: repeat(2, 1fr); }
    .col-span-3 { grid-column: span 2; }
}

/* Tablet portrait */
@media (max-width: 960px) {
    .cols-2,
    .cols-3,
    .cols-4 { grid-template-columns: 1fr; }
    .col-span-2,
    .col-span-3 { grid-column: span 1; }
    .stack-row { flex-direction: column; align-items: stretch; }
}

/* Mobile */
@media (max-width: 600px) {
    .portal-grid { gap: 0.5rem; }
    .stack { gap: 0.5rem; }
    .container { padding: 0 0.5rem; }
}