/*
 * Compositions
 *
 * Layout primitives based on Every Layout (https://every-layout.dev).
 * Each composition solves one layout problem with minimal, intrinsic CSS.
 */

/* -------------------------------------------------------------------
 * Stack
 *
 * Vertical spacing between direct children.
 * Override --stack-space on the element to change the gap.
 * ------------------------------------------------------------------- */

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack > * {
    margin-block: 0;
}

.stack > * + * {
    margin-block-start: var(--stack-space, var(--space-m));
}

/* Stack modifiers — override --stack-space for common spacing presets */
.stack-3xs {
    --stack-space: var(--space-3xs);
}
.stack-xs {
    --stack-space: var(--space-xs);
}
.stack-s {
    --stack-space: var(--space-s);
}

/* -------------------------------------------------------------------
 * Center
 *
 * Horizontally center a block with a max width and gutter padding.
 * Override --center-measure and --center-gutter on the element.
 * ------------------------------------------------------------------- */

.center {
    box-sizing: content-box;
    max-inline-size: var(--center-measure, var(--measure-content));
    margin-inline: auto;
    padding-inline: var(--center-gutter, var(--space-m));
}

/* -------------------------------------------------------------------
 * Cluster
 *
 * Horizontal grouping with gap-based spacing and optional wrapping.
 * Override --cluster-gap on the element to change the gap.
 * ------------------------------------------------------------------- */

.cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--cluster-gap, var(--space-s));
}

/* Cluster modifiers — override --cluster-gap for common spacing presets */
.cluster-xs {
    --cluster-gap: var(--space-xs);
}

.cluster-s {
    --cluster-gap: var(--space-s);
}

/* -------------------------------------------------------------------
 * Icon
 *
 * Pair an icon with text, vertically centered.
 * The icon is the first child, the text is the second.
 * Override --icon-gap on the element to change spacing.
 * ------------------------------------------------------------------- */

.icon {
    display: inline-flex;
    align-items: center;
    gap: var(--icon-gap, var(--space-3xs));
}

.icon > svg {
    flex-shrink: 0;
}

/* -------------------------------------------------------------------
 * Grid
 *
 * Responsive auto-fit grid — children flow into columns based on a
 * minimum width.  No media queries needed.
 * Override --grid-min and --grid-gap on the element.
 * ------------------------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
    gap: var(--grid-gap, var(--space-s));
}

/* Grid modifiers — override --grid-min for common width presets */
.grid-sm {
    --grid-min: 14rem;
}

/* -------------------------------------------------------------------
 * Sidebar
 *
 * Two-panel layout: a main content area and a narrower sidebar.
 * The sidebar is the last child. When the viewport is too narrow
 * for both, they stack vertically.
 *
 * Override --sidebar-width for sidebar ideal width (default 20rem).
 * Override --sidebar-gap for the gap between panels (default --space-m).
 * Override --sidebar-threshold for the stacking breakpoint (default 60%).
 * ------------------------------------------------------------------- */

.sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-m));
}

.sidebar-layout > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--sidebar-threshold, 60%);
}

.sidebar-layout > :last-child {
    flex-basis: var(--sidebar-width, 20rem);
    flex-grow: 1;
}

/* -------------------------------------------------------------------
 * Auto Grid
 *
 * Responsive grid that auto-fits columns with a minimum width.
 * Override --auto-grid-min-width for column minimum (default 10rem).
 * Override --auto-grid-gap for the gap between items (default --space-s).
 * ------------------------------------------------------------------- */

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-width, 10rem), 1fr));
    gap: var(--auto-grid-gap, var(--space-s));
}