/* Phase 3: opt-in layout primitives. Load tokens first.
 * No global reset, viewport navigation rules, clipping or card styling.
 */
.gv-r-container {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--gv-r-container-max, var(--gv-r-content-max));
  min-inline-size: 0;
  margin-inline: auto;
  padding-inline: var(--gv-r-container-gutter, var(--gv-r-page-gutter));
}

/* Columns depend on available parent space, including narrow side panels.
 * The minimum contracts to 100% when less space is available.
 */
.gv-r-grid {
  display: grid;
  min-inline-size: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gv-r-grid-item-min, 320px)), 1fr));
  gap: var(--gv-r-layout-gap, var(--gv-r-grid-gap));
}
.gv-r-grid > * {
  min-inline-size: 0;
}

.gv-r-stack {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  gap: var(--gv-r-layout-gap, var(--gv-r-space-4));
}
.gv-r-stack > * {
  min-inline-size: 0;
}

.gv-r-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-inline-size: 0;
  gap: var(--gv-r-layout-gap, var(--gv-r-space-3));
}
.gv-r-cluster > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}