/*
 * 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 — apply the gap directly to direct children.
 *
 * Targeting children (rather than setting --stack-space on the element)
 * is important for nesting: --stack-space cascades down, so an inner
 * stack with its own modifier would otherwise win over the outer
 * modifier when the outer rule reads var(--stack-space) on the inner
 * child. Direct child rules sidestep that. The base .stack rule still
 * honours an inline --stack-space override on unmodified stacks. */
.stack-3xs > * + * {
    margin-block-start: var(--space-3xs);
}
.stack-2xs > * + * {
    margin-block-start: var(--space-2xs);
}
.stack-xs > * + * {
    margin-block-start: var(--space-xs);
}
.stack-s > * + * {
    margin-block-start: var(--space-s);
}
.stack-l > * + * {
    margin-block-start: var(--space-l);
}
.stack-xl > * + * {
    margin-block-start: var(--space-xl);
}

/* -------------------------------------------------------------------
 * 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));
}

/* Legacy single-modifier preset — kept for existing consumers
 * (e.g. pages/patients/add.html). Prefer the grid-2/grid-3 family
 * (or override --grid-min inline) for new code. */
.grid-sm {
    --grid-min: 14rem;
}

/* Grid modifiers — explicit column counts.
 * Co-apply with .grid (e.g. [ grid grid-2 ]); they only override
 * grid-template-columns. The bare .grid stays responsive via auto-fit. */
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

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

/* -------------------------------------------------------------------
 * 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));
}

/* -------------------------------------------------------------------
 * Reel
 *
 * Horizontal-scroll row: children sit on one line and overflow scrolls
 * sideways, keeping their intrinsic width. Override --reel-gap for the
 * gap, --reel-item-width to force a fixed item width (default auto), and
 * --reel-padding-block for the block padding. Equal block padding keeps the
 * row centered and the scrollbar clear of the content.
 * ------------------------------------------------------------------- */

.reel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--reel-gap, var(--space-2xs));
    overflow-x: auto;
    scroll-padding-inline: var(--reel-gap, var(--space-2xs));
    padding-block: var(--reel-padding-block, var(--space-2xs));
}

.reel > * {
    flex: 0 0 var(--reel-item-width, auto);
}