/* layout.css – generic layout utilities */

.layout-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.layout-column {
    display: flex;
    flex-direction: column;
}

.layout-spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layout-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-right {
    display: flex;
    justify-content: flex-end;
}

/* NEW: allow flex rows to wrap (for card grids, etc.) */
.layout-wrap {
    flex-wrap: wrap;
}

/* NEW: flexible children that can wrap nicely into columns */
.flex-1 {
    flex: 1 1 220px;   /* grow, shrink, preferred width */
    min-width: 220px;  /* don't let them get too skinny on wide screens */
}

/* Gaps */

.layout-gap-xs {
    gap: 4px;
}

.layout-gap-sm {
    gap: 8px;
}

.layout-gap-md {
    gap: 12px;
}

.layout-gap-lg {
    gap: 16px;
}

/* Responsive helpers */

@media (max-width: 900px) {
    .layout-row-responsive {
        flex-direction: column;
        align-items: stretch;
    }

    /* On narrow screens, each flex-1 item becomes full-width */
    .flex-1 {
        flex-basis: 100%;
        min-width: 100%;
    }
}