/* src/components/basic/XWUIGrid/XWUIGrid.css */
/**
 * XWUIGrid Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 */

.xwui-grid {
    display: grid;
    width: 100%;
}

.xwui-grid-item {
    min-width: 0; /* Prevent grid blowout */
}

/* Common grid presets */
.xwui-grid-1 {
    grid-template-columns: 1fr;
}

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

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

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

.xwui-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.xwui-grid-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* Gap presets (canonical 9-step scale) */
:is(.xwui-grid-gap-3xs,.xwui-grid-gap-xxxs) {
    gap: var(--spacing-xxxs, 0.0625rem);
}
:is(.xwui-grid-gap-4xs,.xwui-grid-gap-xxxxs) {
    gap: var(--spacing-xxxs, 0.0625rem);
}

:is(.xwui-grid-gap-2xs,.xwui-grid-gap-xxs) {
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-grid-gap-xs {
    gap: var(--spacing-xs, 0.25rem);
}

:is(.xwui-grid-gap-s,.xwui-grid-gap-sm) {
    gap: var(--spacing-sm, 0.5rem);
}

:is(.xwui-grid-gap-m,.xwui-grid-gap-md) {
    gap: var(--spacing-md, 1rem);
}

:is(.xwui-grid-gap-l,.xwui-grid-gap-lg) {
    gap: var(--spacing-lg, 1.5rem);
}

.xwui-grid-gap-xl {
    gap: var(--spacing-xl, 2rem);
}

:is(.xwui-grid-gap-2xl,.xwui-grid-gap-xxl) {
    gap: var(--spacing-xxl, 2.6rem);
}

:is(.xwui-grid-gap-3xl,.xwui-grid-gap-xxxl) {
    gap: var(--spacing-xxxl, 3.2rem);
}
:is(.xwui-grid-gap-4xl,.xwui-grid-gap-xxxxl) {
    gap: var(--spacing-xxxl, 3.2rem);
}

/* Legacy gap aliases */
.xwui-grid-gap-s { gap: var(--spacing-sm, 0.5rem); }
.xwui-grid-gap-m { gap: var(--spacing-md, 1rem); }
.xwui-grid-gap-l { gap: var(--spacing-lg, 1.5rem); }

/* Auto-fit responsive grid. min(100%, 250px) keeps the track floor from ever
   exceeding the grid, so in a container narrower than 250px the cells stack
   in one full-width column instead of overflowing it (same guard as
   conf_comp.minChildWidth). */
.xwui-grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.xwui-grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

/* Alignment utilities */
.xwui-grid-center {
    align-items: center;
    justify-items: center;
}

.xwui-grid-stretch {
    align-items: stretch;
    justify-items: stretch;
}


/* Bento spans give way on narrow screens: every tile takes a full row. */
@media (max-width: 900px) {
    .xwui-grid--spans { grid-template-columns: 1fr !important; }
    .xwui-grid--spans > * { grid-column: auto !important; }
}